How to Optimize Images for the Web

Image optimization means decreasing the file size of an image without noticably reducing the image quality.  On websites, having a lot of large images can significantly slow down load times, so optimizing the images that appear on a page results in faster load times and a better user experience.

There are two steps to optimizing an image: resizing and compressing.  Both of these steps must be done before uploading an image to the website.

Resizing

This is the process of reducing a file's resolution, which also reduces its file size. The image you upload should be as close as possible to the resolution it will display at on the site. For example, an image taken directly off a phone or camera may have a resolution of 4080 x 3072, or even larger, but when added to your site it might display at only 500 x 500. All those extra pixels are just increasing the file size and decreasing site speed without providing a real benefit.

Compressing

Compressing an image further reduces the file size while leaving the resolution unaffected. A small to moderate amount of compression can usually have a big impact on file size without sacrificing perceptible quality. But be careful; compressing an image too much will result in a noticeable decrease in quality. Compression should be done after resizing.

Squoosh is an excellent, free online image optimization app that handles resizing and compressing images.

1. Drag and drop your image onto the Squoosh homepage.

   

2. This will bring you to the editor page. Here, the left side of the image is the original, unmodified version. Any resizing and compression you apply will be shown on the right side of the slider.

   

3. If you are working with a large source image, you may want to zoom out until you can see the whole image.

   

4. Use the Edit menu on the right side of the screen to resize and compress.

   

5. As you make adjustments, you can move the slider left and right to see how the changes affect the visual fidelity of the image.

   

6. Underneath the Edit menu, you can see the file size of the new image, as well as the percentage of file save you have saved. These numbers will update as you adjust the resizing and compression settings.

   

7. If your image needs to be resized, click the Resize part of the menu, then enter the desired width (measured in pixels). If you leave the Maintain aspect ratio option checked, the height value will adjust automatically. (Generally you will want to leave this option checked).

   

8. Under the Compress section of the menu, set the Quality slider to 60.

   

9. The dropdown menu above the Quality slider lets you select the file type the new image will be saved as. Select MozJPEG.

   

10. Click the blue button in the lower right corner to download the optimized image.