What is Image Optimization and How Does it Make Websites Load Faster?

Every leading tech company takes image optimisation seriously, including Amazon, eBay, Facebook and Google. Why? Because image optimisation has a direct impact on page loading speeds. You might have the best website in the world but if your page loading time is more than three seconds, then you’ve already lost 53% of your visitors.

The Relationship Between Page Load Times and Image Optimisation

The delivery of image data contributes to around 72% of all internet traffic today, so it’s safe to assume that images require a lot of storage space. To compare the size of images versus words,  a 70,000-word novel takes up around 140 KB space. A regular photo taken by a smartphone will need 14 to 35 times this space.

Some web pages rely on plain text but many, including e-commerce platforms, social media channels, and blogs, rely heavily on image content. Since a single image requires 35 times the amount of space as a whole novel, you can see why image optimisation is important.

A single unoptimised image can double or triple the download time for a web page. This means image optimisation has a direct impact on page download times and the overall user experience. This is the reason why leading global internet companies consider image optimisation one of the most crucial elements of the user experience.

Image Optimisation Methods

There are various image optimisation methods. Most of them are some form of compression into different image formats such as .jpeg, .jpg, .png, .tiff, .gif etc. while some file types are useful for purposes such as animations or design, most are an attempt to reduce file size.

This brings us to the issue of image quality.

Lossy vs. Lossless Image Compression

The terms lossy and lossless compression refer to compression methods where the original image is reconstructed perfectly from compressed data.

a. Lossless Image Compression

Lossless image compression algorithms allow the original data to be perfectly reconstructed from the compressed data. They are used where the original and the decompressed data are required to be identical, or where deviations from the original data are undesired, such as archiving or production operations. Image file formats, like PNG or GIF, use only lossless compression.

Since lossless compression methods focus on the perfect reconstruction of the original data, they’re not the best option to reduce the size of large images. As a result,  they are preferred in applications where image quality is more important than the image size.

Lossless Image File Types

• PNG – Portable Network Graphics
• TIFF – Tagged Image File Format
• WebP – (high-density lossless or lossy compression of RGB and RGBA images)
• BPG – Better Portable Graphics (lossless/lossy compression based on HEVC)
• FLIF – Free Lossless Image Format
• JPEG-LS – (lossless/near-lossless compression standard)
• TGA – Truevision TGA
• PCX – PiCture eXchange
• JPEG 2000 – (includes lossless compression method, as proven by Sunil Kumar, Prof San Diego State University)
• JPEG XR – formerly WMPhoto and HD Photo, includes a lossless compression method
• ILBM – (lossless RLE compression of Amiga IFF images)
• JBIG2 – (lossless or lossy compression of B&W images)
• PGF – Progressive Graphics File (lossless or lossy compression)

b. Lossy Image Compression

Lossy image compression methods

Use inexact approximations and partial data discarding to represent the content. They are a better option compared to lossless image compression methods in applications where reducing image size for storing, handling, and transmitting content are more important or preferable than image quality.

Although there is a certain amount of data and quality loss in lossy image compression methods, well-designed lossy compression technologies usually decrease the file sizes considerably and image quality deterioration cannot be noticed by the user. As a result, it’s the most-preferred image compression method for web applications prioritising loading speeds.

Lossy Image File Types

• Better Portable Graphics, also known as BPG (lossless or lossy compression)
• Cartesian Perceptual Compression, also known as CPC
• DjVu
• Fractal compression
• ICER, used by the Mars Rovers, related to JPEG 2000 in its use of wavelets
• JBIG2 (lossless or lossy compression)
• JPEG
• JPEG 2000, JPEG’s successor format that uses wavelets (lossless or lossy compression)
• JPEG XR, another successor of JPEG with support for high dynamic range, wide gamut pixel formats (lossless or lossy compression)
• PGF, Progressive Graphics File (lossless or lossy compression)
• S3TC texture compression for 3D computer graphics hardware
• Wavelet compression

Image Scaling or Resizing

There are many ways to scale or resize an image, many of which have nothing to do with the visual size of the image. Some compression methods will reduce the image in terms of its data volume. Others will modify the dimensions in terms of pixels (raster images) or geometrically (vector images).

Websites will often scale or resize images based on their target audience. Let’s assume that we have a web page with a mobile-dominant audience. This means most of the page visitors will be using mobile devices. Using images with high resolution won’t benefit the users in a tangible way; instead, it will affect the user experience negatively by slowing down the page loading speed. Conversely, images for desktop users should be optimised for larger screens.

How Web Pages Can Manage Image Optimization?

It’s the website owner’s responsibility, and in their best interest, to optimise images. There are various ways to do this.

Let’s assume we have a blog where a few images are uploaded every day. In this case, the easiest option is to manually resize the images.

However, manual image compression can only take place one-by-one or in limited batches. This process can be tedious and impractical, particularly if there are large amounts of images requiring optimisation.

Automatic vs. Manual Image Optimisation

Blog pages with limited image content are not the only type of web pages on the internet. There are social media platforms, e-commerce sites, and websites with heavily image-oriented content. Sites that depend on user-generated content that cannot force their users to pre-optimize the images before uploading. It’s hard to imagine Instagram or Facebook asking users to optimize their photos and reduce the sizes before uploading.

As technology advances, new compression methods and image formats result in entire media libraries needing to be converted or rearranged.

Conclusion

So how can a website or platform owners better manage image optimization? The answer is simple: Use a CDN provider with automatic image optimisation capabilities.

Providers like Medianova can also tailor the entire image compression process according to the specific website, images, and audience. In addition, Medianova’s CDN servers can manage user-generated content in a way that complies with the existing website structure, source code and media libraries. As for new technologies? Medianova will integrate these updates as they are released.

While manual optimisation methods are possible for a small amount of images, it’s not practical for e-commerce platforms or websites that rely on user-generated content. A CDN with automatic and optimised image compression capabilities is the best option for all web products.