Image Optimization for the Web

Boats on a beach after Image Optimization

Infinite variables go into web design, but user experience is king when it comes to creating the perfect website. Every web visitor has a variety of sites to choose from, so your website must be above par to keep their rapt attention. Large images slow down web page loading times, which substantially decreases the usability of your site. Image optimization reduces file size while maintaining image quality to improve load times.

Why would you want to optimize your images?

According to a study by the HTTP Archive, compelling images use roughly 21% of a total web page's weight. An ideal total web page weight is considered less than 1 or 2 MB. Image optimization has two main aspects: resizing images while maintaining quality and optimizing tags for search engines with keywords. The main benefits of image optimization include:

Faster page loading:

Visitors will leave a web page if it takes too long to load, usually within 3 seconds. Larger images make your site slow and clunky, so optimizing images keeps load times down and maintains audience engagement.

Improved user experience:

People hate slowness. Image optimization loads the web page faster, thus improving the initial user experience.

Better Search Engine Optimization:

Optimized images improve search engine optimization so your image will rank higher in search engine results and increase the overall website SEO.

Bandwidth reduction:

Smaller images use up less bandwidth which is extremely important for mobile devices, especially since users visit more websites on a mobile device than a desktop.

Lower storage requirement:

Smaller images take up less storage space on your server.

How to Optimize Your Images:

Find a balance between the smallest file size and acceptable image quality, as this differs for each image. Two crucial elements for optimization are file format and compression type; the perfect combination of these can reduce image size by almost five times. Here are some considerations for image optimization:

1. File types

There are several file formats to choose from, and each format has its own perks:

PNG files boast a higher image quality but at the cost of larger file sizes. They typically use a more limited color palette than JPEG files but are suitable for images with a transparent background or lots of text.

JPEG files will suffice for most images, but not transparent backgrounds, logos, or line drawings. They are easily adjustable for a good balance between file size and image quality, but some file data may get lost in compression.

GIFs can only use 256 colors, so they are a poor choice for photography, but great for animated files.

TIFFs have incredibly high-quality images with substantial file sizes. My fellow photographers know this is an excellent format for preserving quality images, but this is a poor file format for web use.

SVG files are vector-based images that are automatically scalable and are usually smaller than JPGs or PNGs. Google indexes these similar to PNG or JPG files, making them another good choice for search engine optimization.

2. Compression Types and Quality

The key is finding a happy medium between compression and file size, so it's best to experiment with these techniques to find the best option for each image.

Lossy compression eliminates some data which will degrade the image, so you should be careful how much you reduce the file.

Lossless compression compresses the data instead of erasing it while preserving image quality; however, images will need to be uncompressed before being rendered.

3. Name Image Files

Using keywords in image names increases SEO opportunities. Search engines scan file names, so make file names descriptive using keywords to improve search engine optimization.

4. Optimize Alt Tags

Alt tags are text alternatives to images when they don't load correctly or for accurate screen readers. SEOs also use these tags to rank files in image searches.

5. Decorative Images

Decorative images are only used for aesthetics and don't add substantial understanding for context, such as backgrounds, borders, or spacers. Large decorative images can slow down pages, so minimize file sizes by compressing them as much as possible without losing quality. Decorative images shouldn't have alt tags since they aren't relevant to the story.

Practice Makes Perfect

For example, here is an image of boats on a beach. The image on the left is the original image at a staggering 1.54 MB. After optimization, the image on the left weighs in at 151 KB. The differences between the two are minimal, but optimization can rapidly degrade images if you get carried away.

Left: original image at 1.54 MB; Right: optimized image at 151KB

How did I optimize this photo, though? You can use other options such as Squoosh or Gimp, but I used Adobe Photoshop. In Photoshop, open your photo then mouse over File > Export > Save for Web (Legacy), and click.

Once here, you can choose the 4-up option near the top of the window to view each option before choosing the best for your photo. For this image, I used the default "medium," "high," and "low" options to compare. The "low" option was too pixellated to use and the "medium" option did not reduce file size enough from the "high" option to validate the reduction in quality. In the end, I chose the "high" option, resulting in the image above with a 72 quality and load time of 27 seconds.

4-up optimization options in Adobe PhotoShop.

Of course, practice makes perfect so you can use your own photo or choose a royalty-free image from Unsplash to play with. You don't need a costly subscription to start, just the willpower to get up and do it.

Jackson, B. (2021, April 13). How to Optimize Images for Web and Performance 2021. Kinsta. https://kinsta.com/blog/optimize-images-for-web/.

Rivera, R. (2021, February 22). Why Image Optimization is Important and How to Optimize Your Images - Build a Website. Websites 360®. https://www.websites360.com/blog/the-why-and-how-of-image-optimization.