How to Save Images for Web

This week, we will show you how to save an image for the web using Photoshop. While the settings we are recommending are meant for displaying your photographs at high quality, the same work flow can be used for everyday use.

First of all, I recommend shooting in RAW format whenever possible since it does not have an assigned color profile. This will allow you to apply any color profile to the RAW data, thereby giving you much more control. If you are not shooting in RAW, you will want to set your camera’s Color Space to ProPhoto RGB (if available) or Adobe RGB as these profiles has a broad range of values. You can easily convert form Adobe RGB to sRGB without losing color information, but not vice versa. While some internet browsers are capable of color management, you will still want your photographs to be saved with a sRGB Color profile.

Always edit your photograph at full resolution before resizing for the web. Do not sharpen your image yet as this will be our last step before saving for web.

1 – First we are going to check the color settings. Go to Edit->Convert to Profile… .The Source Space should be set to sRGB IEC61966-2.1 . If this is the case, then click Cancel and move onto Step 2 below. If your Source Space is something different, then change the Destination Space to sRGB IEC61966-2.1 using the drop down menu. Click OK to accept the changes.

If there is a pound sign (#) beside the Color Mode & Channel information on the image tab, then your image is not color managed. If there is a star (*) , then the color space of the document is different than that of the workspace. If there are no symbols, then the color space of the document matches that of the workspace. Make sure there isn’t a # sign before moving on to the next step.

2 – Next we are going to re-size our image. Go to Image->Image Size. Make sure that Scale Styles, Constrain Proportions and Resample Image (Bicubic) are selected. We are going to resize the image to 800 pixels wide/high. If your image is in landscape orientation (horizontal), change the Pixel Dimensions Width to 800 pixels and then click OK. If your image is in portrait orientation (vertical), change the Pixel Dimensions Height to 800 pixels and click OK. Since our image is Horizontal, we will change the width to 800. Notice how our file size has gone from 36.1 MB to 1.22 MB.

 

3 – At this point in time you may wish to sharpen your image. Since there are less pixels representing your image, some of the edges may have become soft. If you are unsure which method to use, please consult our Sharpening Photos for the Web tutorial.

4 – Now that we have chosen the color profile, resized and sharpened our image, it’s time to Save For Web. Go to File->Save for Web & Devices…

5 – First we are going to choose the type of file we will be saving to. Use the drop down menu to choose JPEG High, as this is a good starting point.

6 – Next you will need to decide what Quality setting to choose.  The setting you choose will depend on the amount of detail in your photograph. Since our goal is to display our photograph without losing any quality or detail, we recommend setting the Quality to somewhere between 70-100%. For the purpose of this tutorial, we will choose 70%.

7 – The tabs in the upper left corner allow you to see your image under different settings. I usually use the 2-Up tab so that I can compare the original photograph to the optimized version. This allows me to check that I don’t choose a compression setting that is too low.

We have created a reference image so that you can compare the different quality settings. Notice with the lower quality settings that edges become mucky and pixelated.

 

Optional – If you would like to select the best Quality setting possible, while staying under a certain physical file size, in the Save for Web & Devices menu, go to Optimize to File Size… . Input the Desired File Size in kilobytes (ex: 350) and Photoshop will automatically calculate the maximum Quality setting without going over the size you specified (kb).

8 – A few more settings to consider (I use the default settings, shown in brackets):

  • Progressive (OFF) -This will save your photograph in multiple passes. When viewed in a browser, the low quality pass loads up first, followed by the other passes. I’m not a big fan of this technique, but it may be useful if your users have a slow internet connection (dial up internet or mobile devices)
  • Optimized (ON) – I see no reason not to have this selected.
  • Embed Color Profile (OFF) – Although I haven’t used this in the past, it would seem a good idea to embed the color profile so that external programs can read the information properly.  Please note this will increase your file size slightly.
  • Convert to sRGB (ON) – If you have properly managed you color profile, you won’t need this setting. It is a good fail safe however in case you forget to color manage.
  • Quality (Bicubic) – For reducing photograph size, Bicubic does a good job. If you were reducing line art, or upsizing, you might want to consider alternative settings.

9 – Last but not least, click the Save button. Never save over the original file, always save a copy. If your original photo was IMG_1234 you could save it as IMG_1234_web.

Our final image which was saved at 70% quality is now 261 kb. Not a bad size for a high quality image. While we could reduce the file size by reducing the quality, the purpose of this tutorial is to save a photograph for the web so that it will look it’s best.

In Summary:

  1. Convert to sRGB
  2. Resize your image
  3. Sharpen
  4. Save for Web & Devices…
  5. JPEG High
  6. Save as a different file (ex: IMG_1234_web)

 

I hope you have found this tutorial helpful!

Both comments and pings are currently closed.

3 Responses to “How to Save Images for Web”

  1. Yo_Spiff says:

    Well done. I don’t use Photoshop, but this will be a good tutorial to refer people to when they have difficulty saving to challenge specs.

  2. […] BlogsWigan & Wolves Pull Final Day 'Houdini' Acts, Birmingham …How to Save Images for Web | PhotoWeeklyOnline INC.10 Ways to Turn Your Photographs into Cash | PhotoStockPlusCome fare una talea legnosa | Fiori […]