How to save images for the web with Photoshop

Adobe Photoshop has a very handy Save for Web feature which will ensure you do what’s best for your image as you save it for the web, and it will probably also help you to understand how image compression works and how it affects image quality.

1. Open Save for web dialog

How to access the Save for Web window from the top menu
Open the image that you want to save for the web. Make sure that the image mode is RGB (and not CMYK!): go to Image> Mode and make sure that >RGB is the mode. Then go to the top menu and select File > Save for Web. I am a big fan of keyboard shortcuts as it’s scientifically proven that they make your life longer, as well as easier, so try accessing the same window by pressing cmd+alt+shift+S on a Mac (cnt+alt+shift+S on a PC).

2. The Save for Web Dialog

The image at full size, seen at 100%, in the Save for Web window.
This is an overview of what the Save for Web dialog looks like. The image preview area is on the left, with tabs on the top giving you 4 different preview options, while below the image there is a zoom function on the left, and more image info. On the right you can find all the export settings: the many presets, the quality and compression options, file options, sizing options and so on.

3. First things first: resize your image

Detail of the editable box showing the original pixels size of the image. You can re-size here.
The first thing to notice is the width and height in pixels of this image: 4752×3168 pixels, which is the size the image came out of my camera natively – and which is simply huge for the web. Even if you take an image on your phone, it will probably be very big. So the first thing to do is resize the width of your image in the ‘image size’ box on the bottom right of the panel. Photoshop resizes proportionally, so the only thing you need to worry about is the width of the image – the program will calculate the proportional height for you.

4. Choose the right size in pixels

You can edit the width in pixels, and Photoshop will resize proportionally for you.
I know that the best image width to show image at full width on my blog is 880px wide. It will probably be a similar size for you, when you save for your blog. On the other hand, if you are planning to showcase your image in a gallery, you should save at 1200px or even 1920px (which is the width of a HD, i.e. high-definition, screen or image gallery). Best to check with the developers of your gallery.

But bear in mind that this will of course make your image heavier. Nowadays the internet has become much faster everywhere: however, if your image can stand it, you should still consider speed as an important factor. This is because mobile users (probably the highest percentage of your users sees your site on mobile) cannot always rely on a fast connection when they’re on the move. Even if they live in a big city with Wi-Fi everywhere.

So, do make an informed choice: sometimes quality has to win over speed, or viceversa, based on what you know about your audience, or on the type of content you are publishing. For instance, as I said above, when I want to show off my photos in a full-width HD gallery, I tend to sacrifice speed and size to quality: no point showing off images at full size if the quality is rubbish. You should still be able to keep them around or just above 100kb.
The Save for Web panel with the 4 different image views_ Original, Optimised, 2-up and 4-up.

5. Choose the right format

The various file formats that you can choose to save your image in the Photoshop Save for Web dialog window.
There are as many as five different file formats you can choose from for your image. This may seem confusing, but it doesn’t need to be (you can ignore WBMP, by the way).

GIF

GIF is a bitmap, or raster graphics, format that supports 8 bits of data, and as a result it can only display a maximum of 256 colours. So you should not use it for a photo – only for line art, or for simple animations. You know the ones I mean.

JPEG

The JPEG format is a bitmap, or raster graphics, format that uses lossy compression to make your file considerably smaller, and therefore much faster to download and visualise online, by eliminating bits of non-essential information. This usually means some loss of quality. Lossy compression also means that you will not be able to recover the lost information once you re-open the compressed file, or save it back to a lossless format after you’ve compressed it the first time. This is why you should always keep the original, uncompressed version of your image on your hard drive, if you can.

The jpeg format is probably the most used on the web, and is the right format for any static image that you publish on the web and that does not need transparency. Which definitely applies to our St Paul’s photo. Most average users will only ever need to save their images as jpegs.

PNG and PNG-24

The PNG acronym stands for Portable Network Graphics, and it’s a lossless format that gives better quality than jpeg, but at the expense of file size. It doesn’t support CMYK so it won’t work outside of a web or screen environment. Without going into much more further detail, you should only use PNG 24 if you need a transparent background for your image. Not our case with the St Paul’s image. But you could need to save a file as PNG if for instance your logo needs to have no background. So it’s useful to know what to do in that case.

6. Almost ready press that button

You can now choose your format, which in our case is going to be JPEG. It should be your choice any time you have a static image with no need for a transparent background. We have already chosen the pixel width and set it to 880px. We have ticked the ‘convert to sRGB’ option. Now we need to choose the quality, which as you can see in the window on the top right goes from 0 to 100.

You should play with this setting, making sure that you view a detail at 100% (which you can set in the little window on the bottom left, above the browser preview button). Again, you must strike a balance between size and quality. This varies, as said above, depending on a number of factors – however, as a rule of thumb I usually find that Quality: 30 or 40 gives me a reasonable file size, at decent quality – or just about.

Once you have made your decision – hit that save button, and save your image in the relevant folder. You are now ready to upload and publish (and while you’re at it, don’t forget to insert your alternative text and description data, for better SEO).

Detail of the St Paul's cathedral image, saved for web as a 30 quality jpeg. The file is bigger but still of an acceptable size (29kb at 400px wide). There is some quality loss, but not too heart-breaking for the photographer.
Detail of the St Paul’s cathedral image, saved for web as a 30 quality jpeg. The file is bigger but still of an acceptable size (29kb at 440px wide). There is some quality loss, but not too heart-breaking for the photographer.
Detail of the St Paul's cathedral image, saved for web as a 5 quality jpeg.
Detail of the St Paul’s cathedral image, saved for web as a 5 quality jpeg. The file is now very small (about 15kb) but the loss of quality is noticeable. If this image was meant to be shown in a photographer’s portfolio, it wouldn’t be ok.

Now you can make an informed decision on whether to sacrifice quality of your images or speed of your website, and how to do that with Photoshop.

Conclusion

That’s it for now. You now know the basics of how to save images for the web with Photoshop. Let me know if this short, essential, but hopefully effective guide helps you in your task, and if there is anything else you need explained. Soon to come: How to save images for the web WITHOUT Photoshop. Stay tuned!

Leave a comment