Website Performance: 3 Tips for Optimizing Images

I recently finished reading Lara Hogan's Designing for Performance book (now free to read online but definitely worth purchasing), and I definitely got some great tips from the book on how to increase website performance even more on the sites I build.  One of the easiest wins is to make sure to optimize images for the web, as images can be very large and a huge bottleneck for your users – especially those using mobile devices.  This is often overlooked.  Here are three tips for optimizing images on your website.

Pick the Right Image format

Making sure you use the right image format (raster formats like JPG, PNG-24, PNG-8, GIF, or vector formats like SVG) is the most critical step. The Designing for Performance book has a ton of guidelines on this, and the Google Developers docs have some useful coverage on this also. If you're working with photos, you'll normally want to stick with the JPG format, while the PNG format is normally best for graphic elements and graphics needing transparent backgrounds. SVG (scalable vector graphics) is a great format for vector art as it will scale up or down as needed and maintains its crispness on all sizes of devices.

Resize and Save for Web

When working with raster formats like JPG images, make sure to resize your images to something reasonable for the web. You may purchase a Shutterstock image that's 3000 pixels wide, but you don't need to serve that giant file to your users! Instead, crop out unnecessary parts of the image (from all sides) and then resize it to something more reasonable.  I normally don't use images larger than 2000 pixels wide on websites. If you're using Adobe Photoshop, be sure to use the File->Save for Web option to save your resized image, and toggle through the image quality options to reduce the file size even further.  You can view the file size within the Save for Web dialog box to see how the different quality options affect image size.  Surprisingly, saving at 60% quality often doesn't visibly reduce the quality for the human eye.

Use a Compression Tool

Finally, don't stop there. Use a compression tool on your file to reduce its size a bit more. A great option for Mac users is ImageOptim. There are also tons of web-based compression tools available like Optimizilla or Kraken. If you're using a content management system like WordPress, you can automate this process by using an image optimization plugin like EWWW Image Optimizer, which will automatically compress images when they're uploaded to the media library or in a one-time batch mode. If you're a developer using a command line-based task runner like Grunt or Gulp, there are imagemin plugins that will do this automatically for you.

For SVG files, there are also a ton of compression tools online. My favorite web-based option is SVGOMG. For those using Grunt or Gulp, there are a lot of options as well, well-covered in Sara Soueidan's SVGO article.

Image optimization and compression are very quick but effective ways to speed up your website. To learn about more about those and other performance tips, check out Lara Hogan's Designing for Performance book.