Optimize Images for Web and Performance

What Does It Mean to Optimize Images? Large images slow down your web pages which creates a less than optimal user experience. Optimizing images is the process of decreasing their file size, using either a plugin or script, which in turn speeds up the load time of the page. Lossy and lossless compression are two methods commonly used.

The Benefits of Formatting Your Images

First, why do you need to format your images? What are the benefits? There are numerous benefits of optimizing your images for performance. According to HTTP Archive, as of November 2018, images make up on average 21% of a total webpage’s weight. So when it comes to optimizing your site, after video content, images are by far the first place you should start!

It’s more important than scripts and fonts. And ironically, a good image optimization workflow is one of the easiest things to implement, yet a lot of website owners overlook this.

Here is a look at the main benefits:

It will improve your page loading speed (see our case study below for how much it affects your speed). If your page takes too long to load your visitors might get tired of waiting and move on to something else. For more information about optimizing your page loading time see our in-depth page speed optimization guide.

Your site will rank higher in search engine results. Large files slow down your site and search engines hate slow sites. Google is also likely to crawl and index your images faster for Google image search. Curious about what percentage of your traffic comes from Google image search? You can use a Google Analytics to check Google image search traffic.

Creating backups will be faster. Smaller image file sizes use less bandwidth. Networks and browsers will appreciate this.

How To Optimize Images for Web and Performance?

The primary goal of formatting your images is to find the balance between the lowest file size and an acceptable quality.

The two primary things to consider are the file format and type of compression you use. By choosing the right combination of file format and compression type you can reduce your image size by as much as 5 times. You’ll have to experiment with each image or file format to see what works best.

Choose the Right File Format

Before you start modifying your images, make sure you’ve chosen the best file type. There are several types of files you can use:

PNG – produces higher quality images, but also has a larger file size. Was created as a lossless image format, although it can also be lossy. JPEG – uses lossy and lossless optimization. You can adjust the quality level for a good balance of quality and file size. GIF – only uses 256 colors. It’s the best choice for animated images. It only uses lossless compression. There are several others, such as JPEG XR and WebP, but they’re not universally supported by all browsers. Ideally, you should use JPEG or JPG for images with lots of color and PNG for simple images. (Suggested reading: JPG vs JPEG: Understanding the Most Common Image File Format)

Beware of Compression Quality vs Size

Here is an example of what can happen you compress an image too much. The first is using a very low compression rate, which results in the highest quality (but larger file size). The second is using a very high compression rate, which results in a very low-quality image (but smaller file size). Note: The original image untouched is 2.06 MB.

Understand Lossy vs Lossless Optimization

It is also important to understand that there are two types of compression you can use: lossy and lossless.

Lossy: This is a filter that eliminates some of the data. This will degrade the image, so you’ll have to be careful of how much to reduce the image. The file size can be reduced by a large amount. You can use tools such as Adobe Photoshop, Affinity Photo, or other image editors to adjust the quality settings of an image.

Lossless: This is a filter that compresses the data. This doesn’t reduce the quality but it will require the images to be uncompressed before they can be rendered. You can perform a lossless compression on your desktop using tools such as Photoshop, FileOptimizer, or ImageOptim.

It’s best to experiment with your compression techniques to see what works best for each image or format. If your tools have the option make sure you save the image for web. This is an option in many image editors and will give you the quality adjustments so you can perform optimal compression. You’ll lose some of the quality, so experiment to find the best balance you can without making the images ugly.

Use Image Optimization Tools and Programs

There are a lot of tools and programs out there, both premium and free, that you can use to optimize your images.

Resize Images to Scale

By including the available sizes of an image into a srcset attribute, browsers can now choose to download the most appropriate size and ignore the others.