How to Optimize Images to Improve Web Performance?

On average, one pixel downloaded is equal to 3 bytes of data, which adds up quickly. An HD lossless JPEG uses over 3 MB of data. When you consider that total image transfer size per page is 0.9 MB, it becomes obvious that reducing image size is essential. Additionally, each file requested adds to the time it takes to build a webpage due to additive round trip time (RTT).

At this point, it becomes a question of math and ingenuity. To serve up less data and fewer files, you have to build your page using less data and fewer files.

To do this, you can:

• Reduce the number of images

  • Remove them

  • Concatenate images into single files (i.e., image sprites)

• Load critical images first

  • Prioritize above-the-fold content

  • Lazy load non-critical images only when needed, or after critical images

  • Cache static images to reduce redundant requests

• Compress and reduce image data as much as possible without compromising acceptable quality.

Image optimization best practices

• Remove any images that add no value.

• Consider reducing the number of image files with CSS sprites.

• Prioritize critical images and above-the-fold images.

• Lazy load the rest.

• Cache images where it makes sense.

• Choose the right file format for the right image type.

• Compress images to acceptable quality levels.

• Resize images to reduce browser processing.

• Automate the process if you can.

• Test changes before you make them.

• Aim for consistent experiences between devices.

• A/B test to determine what is the best image quality level for your users.

If you run an A/B test, you can use Blue Triangle’s real user monitoring to see the performance and revenue outcomes of different scenarios. Happy optimizing!