In the Internet’s early days it could take 24 hours, or more, to download a picture. Image compression technologies were developed to help speed up the process. Although the web is far faster than it was in the old days, optimizing images is still as important as ever.
Many parts of the world still access the Internet via dial up modem, or mobile devices. Reducing image size speeds up download times and reduces the amount of data transferred to mobiles. By taking the extra steps to ensure your images are the smallest possible file size, you’re doing your audience a huge favour.
The three most common image formats used on the web are GIF, JPG and PNG. The GIF format uses lossless compression: pixels are compressed in order to shrink file size, and then decompressed when the image is unpacked. The JPG format uses lossy compression. Pixels are destroyed during compression. Both GIF and JPG are proprietary file formats, so royalties need to be paid for their use in software.
The PNG format, besides using lossless compression, is open source. Its use requires no licensing fees. Until recently, PNG hasn’t been fully supported by all web browsers, limiting its use for websites. Now it’s at least partially supported by all major browsers, making it a viable image format.
Each file format has its strengths. JPG and PNG-24 are best suited for continuous tone images such as photos that contain thousands or millions of colours. Also, PNG-24 supports full alpha transparency, making it ideal for complex logos and layered backgrounds.
GIF and PNG-8 are indexed colour formats that can have between 2–256 colours, and transparency. They’re ideal for images with large areas of flat colour, such as illustrations and line drawings, or logos. Their 8-bit transparency is simple: the pixel is either on or off, which can leave a jaggy halo around image elements. JPG doesn’t support transparency.
We’ll demonstrate image optimization using a photograph.
I’ll show you how to optimize a JPG in this article and will cover PNG and GIF optimization in the next one.
The image we’re using has already been processed. It’s important to work on a copy of the original because editing JPG files is destructive, meaning that pixels are permanently changed each time it’s saved. I’m using Photoshop CC, but the process is similar in other image editors.
- Open an image in your editor.
- Go to File > Save for Web … (Or Export for Web …).
- Select the 4-up tab (if you’re using Photoshop).
- In the right panel, set the long side of the image to 600 pixels. Resizing the image in this dialogue doesn’t alter the original image’s pixels and allows you to explore different file size and image dimension combinations before committing any.
- The first preview pane holds the original image.
- Activate the second preview pane by single clicking it. Set the quality to 60%.
- Activate the third preview pane by single clicking it. Set the quality to 40%.
- Activate the fourth preview pane by single clicking it. Set the quality to 20%.
- Zoom in on the previews (in Photoshop, click the plus (+) button in the lower left corner of the dialog). Analyzing the previews at 200% will reveal any compression artifacts – blurry squares or smeery bits.
- Experiment with different image dimensions and JPEG quality. When you find a combination of size and quality that works for you, click save.
- Navigate to your web images folder and click okay.
Although the technical steps for image optimization are the same, I haven’t written an action or batch command to handle image optimization because images vary in detail and quality. Automating the process produces uneven results.
The hard part of image optimization is finding the right balance between image quality and file size. The pay offs for taking these extra steps are images that download quickly, using less storage on the server and less data on mobile devices. In short, your site downloads faster, saving your audience time and, with respect to the cost of their data plans, money. It might not close the deal all by itself, but it’s a foot in the door.
In this tutorial you learned how to optimize JPG images for the web and why image optimization should become an integral part of preparing your images for web use. In the next article, I’ll show you how to optimize images in GIF, PNG-8 and PNG-24 formats, and how to decide which format is better for a given image.