Image compression is a major factor in speeding up your website. If you’ve used Adobe Photoshop’s default Save feature, you might have added some extra bytes to your images, resulting in huge image sizes. By using the Save for Web and Devices option, you can generate smaller size images. Smaller size images = faster loading time (and reduced bandwidth) on the server-side. Faster loading time = increased user experience.
Why Compress Images for the Web?
Photos you download from the Internet, or images you produce with your photo editing software may contain data that has no real value to web designers. These data include information like camera type, exposure time and focal length for photos, and program name, author and copyright information for all file types. We really don’t need these information when creating our web designs.
How to Save for Web and Devices?
You can find the “Save for Web” option in Photoshop in the file menu, just under the usual “Save As” command.
In previous versions of Photoshop (CS5 and below), “Save for Web” is called “Save for Web and Devices” – which doesn’t make a difference, just to point out.
There is also a very handy keyboard shortcut which designers should definitely learn. It is Control+Alt+Shift+S for Windows users. On the Mac, it is Command+Option+Shift+S.
After hitting the keyboard shortcut, you’ll be greeted with this window, where you can do magic. The image preview you can see is a snippet of a special Szaboka’s Blog edition of my November Calendars.
First of all, you can toggle views in the topmost bar.
- Original will save the original file. No point.
- Optimized is the default view. You can start selecting Presets on the right.
- In 2-Up mode, you can compare multiple setups of your image with different compression settings and extensions. Click on the left side preview, set up one preset; then click on the right side preview, and set it up too. You can then see how they compare in image quality and final image size under each of the preview blocks.
- Yep, you guessed it! 4-Up mode is the same as the 2-Up mode, only this time, you can set up 4 different versions and compare them all against each other. The picture above shows how the 4-Up mode looks.
Tip: Under “Preset”, you can select the file extension. If you choose JPG, you can set its Quality to the right. You should also try out what Optimized and Progressive can do to your images!
Why Save for Web and Devices?
Let’s look at some image comparison on what you can achieve with Photoshop’s Save for Web and Devices option. I’ll be using a graphic of my Blog viewed on the new iPhone 5C.
Original Image, Normal Save Mode, 100% JPG
Just to have something we can compare to, here’s the original photo. This is the result you get when you hit Ctrl+S (Cmd+S on the Mac) and choose JPG as the file type (with the quality slider to the maximum value, 12).
The size of the original image is 128 kilobytes.
Save for Web, 100% JPG Quality
The next picture was “saved for web and devices” with 100% JPEG Quality.
The new size is only 118 kilobytes, because saving for the web removes some unneeded meta information. Can you spot any quality difference? No, because there is no difference at all in terms of quality.
Save for Web, 80% JPG Quality
The third demonstration image was saved using the web-way, but this time, with JPEG Quality set to 80%. Sharp-eyed people can see some rasterization in the image because of the compression.
This is the JPEG Compression you should use in order to save up a lot of file size, while still not compromising image quality too much.
The new image size is only 71 kilobytes.
Save for Web, 60% JPG Quality
This last image was saved with 60% JPEG Quality. We can clearly see the JPG rasterization here. Images of any type will get pixelated at this level.
Use 60% or less only when file size really matters!
The file size is only 41 kilobytes in this case.
- Use Save for Web and Devices (Ctrl+Alt+Shift+S / Cmd+Opt+Shift+S) every time you don’t need camera information.
- Use PNG file extension if you want a transparent background.
- Use PNG when you don’t have gradients. Only use JPG for photos and textured graphics.
- Use 100% JPG when quality (really) matters.
- Use 60% or less JPG Quality when file size (really) matters.
- Use 80% JPG for the rest of the time.
Thanks for reading through this quick-tip. If you happen to have any questions regarding the article, feel free to ask in the comments!