ArtsAutosBooksBusinessEducationEntertainmentFamilyFashionFoodGamesGenderHealthHolidaysHomeHubPagesPersonal FinancePetsPoliticsReligionSportsTechnologyTravel

How to Compress Photos for the Web with Photoshop

Updated on January 26, 2014

Back when everyone still connected to the internet by dial up, knowing how to optimize images for the web was essential. In today's world, this skill is still essential as it helps lower the costs of data on mobile devices and helps speed up loading time. No one wants to wait around for a giant, full resolution photograph to load if they don't have to (or want to).

Changing the image size of an image in Photoshop.
Changing the image size of an image in Photoshop. | Source

Basics of Reducing File Size

The purpose of compressing images is to reduce the file size and make it easier to upload and download. Below are a few of the ways that you can reduce your file size.

  • Reduce the image size of your image, especially if you have the original version of a photograph. Unless you're planning on putting up a full resolution image of your image, there's no reason to upload something that size. A good example is Facebook. If you reduce the image, it'll upload faster and the quality doesn't suffer.
  • Compress your image. This will reduce the file size drastically. You may have to play around with settings to get the right balance with file size and quality.
  • Unless required in a different format, save your photos in jpeg. This is one of the smallest and most widely accepted file formats. It is a lossy file, but if used correctly you should not see much difference in quality. (I would recommend saving a higher resolution or a lossless image of things like photographs and originals in case you need to make changes later on).

Compressing Images in Photoshop

Optimizing images for the web with Photoshop is a very straight forward and easy task once you find the option in Photoshop. Instead of saving your photo normally, you want to select "Save for web" from the file menu.

Save for web option in Photoshop.
Save for web option in Photoshop. | Source

Steps for Compressing Images and Photos

  1. The first thing that I do with my photos is to re size them. I shoot in RAW with my Canon T3i so when I'm uploading photos to use in articles, websites or to Facebook, I always make sure to do this. If you don't know how, you simply go to Image > Image Size. I'll usually go for 1280 for the width or height, depending on if the photo is oriented vertically or horizontally. You can also re size them in the Save for Web window.
  2. Next I go to File > Save for Web. A window pops up and I begin to change the settings to fit my needs.
  3. Choose 4-up or 2-up for the tabs at the top to see a before and after compression preview. You want to make sure that the after still retains the information and details.
  4. Select "JPEG" from the drop down list, unless you need to preserve transparency, in which case select GIF or PNG.
  5. The next step depends on what kind of image you're using, how many colors you have and what kind of file size you want. The basic idea here is to try to get the lowest file size, while still retaining your images' quality and details. (You can see the estimated file size at the bottom of each preview)
  6. Once you've found the happy medium between quality and file size, you can save the image by clicking save at the bottom. That's all there is to it.

Estimated file size is displayed below each preview.
Estimated file size is displayed below each preview. | Source

Advanced Settings in Save for Web Window

While in the Save for Web window, there are a couple of options that may interest you beyond just compressing your image for the web.

Metadata - this option allows you to include metadata, or remove information from your image before you save the image out from Photoshop.

Image Size - this allows you to skip the image re-size step in the beginning of the process, speeding up your workflow.

Blur and Quality Options - increasing the blur will drastically reduce the file size, but it will also destroy some of the detail in your original image.

Presets - allow you to scroll through different settings easily without messing with the settings yourself. For a good starting point, try JPEG low.

Comments

    0 of 8192 characters used
    Post Comment

    • kevinfream profile image

      Kevin Fream 

      4 years ago from Tulsa, OK

      Good tips as the size helps for search too. Not having PhotoShop, I use the free Yahoo Smushit tool.

    working

    This website uses cookies

    As a user in the EEA, your approval is needed on a few things. To provide a better website experience, hubpages.com uses cookies (and other similar technologies) and may collect, process, and share personal data. Please choose which areas of our service you consent to our doing so.

    For more information on managing or withdrawing consents and how we handle data, visit our Privacy Policy at: https://hubpages.com/privacy-policy#gdpr

    Show Details
    Necessary
    HubPages Device IDThis is used to identify particular browsers or devices when the access the service, and is used for security reasons.
    LoginThis is necessary to sign in to the HubPages Service.
    Google RecaptchaThis is used to prevent bots and spam. (Privacy Policy)
    AkismetThis is used to detect comment spam. (Privacy Policy)
    HubPages Google AnalyticsThis is used to provide data on traffic to our website, all personally identifyable data is anonymized. (Privacy Policy)
    HubPages Traffic PixelThis is used to collect data on traffic to articles and other pages on our site. Unless you are signed in to a HubPages account, all personally identifiable information is anonymized.
    Amazon Web ServicesThis is a cloud services platform that we used to host our service. (Privacy Policy)
    CloudflareThis is a cloud CDN service that we use to efficiently deliver files required for our service to operate such as javascript, cascading style sheets, images, and videos. (Privacy Policy)
    Google Hosted LibrariesJavascript software libraries such as jQuery are loaded at endpoints on the googleapis.com or gstatic.com domains, for performance and efficiency reasons. (Privacy Policy)
    Features
    Google Custom SearchThis is feature allows you to search the site. (Privacy Policy)
    Google MapsSome articles have Google Maps embedded in them. (Privacy Policy)
    Google ChartsThis is used to display charts and graphs on articles and the author center. (Privacy Policy)
    Google AdSense Host APIThis service allows you to sign up for or associate a Google AdSense account with HubPages, so that you can earn money from ads on your articles. No data is shared unless you engage with this feature. (Privacy Policy)
    Google YouTubeSome articles have YouTube videos embedded in them. (Privacy Policy)
    VimeoSome articles have Vimeo videos embedded in them. (Privacy Policy)
    PaypalThis is used for a registered author who enrolls in the HubPages Earnings program and requests to be paid via PayPal. No data is shared with Paypal unless you engage with this feature. (Privacy Policy)
    Facebook LoginYou can use this to streamline signing up for, or signing in to your Hubpages account. No data is shared with Facebook unless you engage with this feature. (Privacy Policy)
    MavenThis supports the Maven widget and search functionality. (Privacy Policy)
    Marketing
    Google AdSenseThis is an ad network. (Privacy Policy)
    Google DoubleClickGoogle provides ad serving technology and runs an ad network. (Privacy Policy)
    Index ExchangeThis is an ad network. (Privacy Policy)
    SovrnThis is an ad network. (Privacy Policy)
    Facebook AdsThis is an ad network. (Privacy Policy)
    Amazon Unified Ad MarketplaceThis is an ad network. (Privacy Policy)
    AppNexusThis is an ad network. (Privacy Policy)
    OpenxThis is an ad network. (Privacy Policy)
    Rubicon ProjectThis is an ad network. (Privacy Policy)
    TripleLiftThis is an ad network. (Privacy Policy)
    Say MediaWe partner with Say Media to deliver ad campaigns on our sites. (Privacy Policy)
    Remarketing PixelsWe may use remarketing pixels from advertising networks such as Google AdWords, Bing Ads, and Facebook in order to advertise the HubPages Service to people that have visited our sites.
    Conversion Tracking PixelsWe may use conversion tracking pixels from advertising networks such as Google AdWords, Bing Ads, and Facebook in order to identify when an advertisement has successfully resulted in the desired action, such as signing up for the HubPages Service or publishing an article on the HubPages Service.
    Statistics
    Author Google AnalyticsThis is used to provide traffic data and reports to the authors of articles on the HubPages Service. (Privacy Policy)
    ComscoreComScore is a media measurement and analytics company providing marketing data and analytics to enterprises, media and advertising agencies, and publishers. Non-consent will result in ComScore only processing obfuscated personal data. (Privacy Policy)
    Amazon Tracking PixelSome articles display amazon products as part of the Amazon Affiliate program, this pixel provides traffic statistics for those products (Privacy Policy)