Image optimization for web

Web sites have to serve content to an uncontrolled diversity of devices, with different screen sizes, aspect ratios, and network connections. Image optimization is the key to reduce loading time making images responsive to maximize visual quality and minimize file size, and deliver an improved user experience.

adult chill computer connection original Original image (255 KB)
adult chill computer connection optimized Optimized image (163 KB)

But, optimizing images for web is complex, involving three main steps:

  1. Choosing the right image format for web
  2. Resizing the image to make it responsive
  3. Compressing the image to minimize its file size

Choosing the right format

Optimizing images for the web is a compromise between displayed quality and file size. Saving images in the right format is the first step to optimize then and keep a balance between perceived quality and file size.

Using the right image format is the first step for an optimal optimization of imagery in a website.

There are three universally supported image formats in the web: JPEG, PNG, and GIF. Every of these formats is best suited for a kind of image and it can easily selected, just note:

  • JPEG is the most common format and optimal for photos on websites.
  • PNG supports transparency and is best suited for graphics and clip arts.
  • GIF is the oldest format but is very popular because supports animations.

In addition, there is the WebP format, which is only supported by Chrome browsers, and recently by Firefox (Safary, and Internet Explorer do not). This format can be used for all the image cases - improving all the previous formats -, because it is good compressing pictures, and supports transparency and animations. However, supporting WebP requires dynamically deciding whether to deliver WebP format or JPEG/PNG/GIF images according to the browser used by each of your visitors.

As summary, use the JPEG lossy format for all your photos, the PNG to deliver transparent images, graphics and icons, and the GIF for animations, without having into account the client web browser.

Compressing the image

High-quality images have proven to be effective driving better engagement, but it has become increasingly difficult to deliver a consistent experience across desktop and mobile devices.

Image derivatives suited for different devices must be optimized for the best combination of size, quality, and file format, to improve the customer experience for both maximum visual quality and performance while reducing the cost and effort.

There are two compression methods:

  • Lossless image compression does not discard image information resulting in a small file size reduction, but the image compressed is exactly the same as the original one.

  • Lossy image compression removes image data that the human eye cannot perceive to achieve a greater reduction in file size, so the image still looks similar to the human eye.

JPEG compression

JPEG is the universal standard for displaying photos online (used on over 70% of websites worldwide). It is a lossy compressed format that was designed for an efficient digital encoding of natural images (photos). Based on well known aspects of the human visual system discards high-frequency information (i.e. sharp transitions in intensity) and color hue, to produce an smaller file size with imperceptible degradation.

In simple terms, high-frequency components contribute less to the overall picture than other components, and they can be reduced (quantized). Besides humans can see considerable more fine details in the brightness of an image than in the hue and color. This knowledge, is the base of the efficiency of JPEG compression.

The chroma subsampling and the quality factor are the main parameters that controls the quality and compression level of JPEG images.

Chroma subsampling

The chroma subsampling reduces the spatial resolution of the chroma components. In this way, the image is converted from RGB to Y'CbCr, where Y' is the luma and Cb and Cr are the chroma components, and then some chroma pixels are discarded.

When the most commonly 4:2:0 subsampling is used, a reduction by a factor of 2, in both the horizontal and the vertical directions, is applied. This means that each 2x2 pixels block of luma just encodes one pixel value from each chroma channel.

Commonly, this operation does not have visible impact (if there is no saturated colors), an produces a saving around 20% in file size. However, when colors are saturated, they may have a visible effect. This results in a blurred texture with colors mixture.

The images bellow show the chroma subsampling effect when there is high color contrast between pixels, with a blurred effect or even artifacts in regions with color gradients.

posing skier original posing skier subsampling artifacts
Artifacts caused by 420 chroma subsampling on the right

Image on the left has a typical subsampling (420) while image on the right has no chroma subsampling (444).

Quality factor

The quality factor (Q) sets the compression level with values between 1% (smallest file size possible) and 100% (best image quality). This value controls the quantization of each frequency component, discarding highest frequencies. The lower the quality value the smaller the file size.

In real practice, the effect of the quality factor depends on the content of a specific image. Sometimes it introduces some unnatural artifacts like ringing or blocking that hear the image the most, at even highest qualities.

Compression artifacts

The main artifacts caused by JPEG encoding are:

  • Ringing: This artifact appears like bands or points around edges. It is the most problematic and it is usually the first. It is associated to the quality factor and caused by the quantization of high frequency components. It appears where there is sharp contrasts between adjacent pixels. With low frequency images or blurred images, this artifact appears later.
book roses original book roses ringing artifacts
Ringing artifacts caused by JPEG compression on the right
  • Blocking: JPEG works independently encoding image blocks of 8x8 pixels. This makes at some compression level emerges a texture of blocks which hearts the visual quality of the image with an unnatural artifact. It may shows up before ringing in low contrast images.
swimming pool rio original swimming pool rio blocking artifact
Blocking artifacts caused by JPEG compression on the right
  • Blurring: When high frequency information is discarded in 8x8 blocks, the compression has an effect blurring some textures. For instance, textures on the pixel level disappear with a quality factor around 90%. This is not important on lots of images, because there is no pixel level textures, but it can be noticeable on faces. (Blurring appears frequently with the resize operation)

This artifacts are noticeable in lower quality levels, especially if fine details or texts are involved.

GIF compression

GIF is best suited for images that are very small and ones that use only a few colors, because of their limited color palette of 256 colors. It is very popular as animated format, supporting transparency.

PNG compression

PNG is a lossless compression file format (the original and the optimized image are the same) with full transparency support developed to overpass GIF limitations. This limits the file size reduction but does not introduce distortions.

The 8-bit format makes a natural replacement for GIF and results in smaller file sizes, while the 24-bit and 32-bit variants offer an excellent alternative to JPEG (but with a larger file size).

donuts gif Donuts image in GIF format (29KB)
donuts png Donuts image in PNG format (13KB)

Use this format for simpler images and transparent images. It’s a good choice for storing clip arts, charts, logos, and text at a smaller size.

WebP compression

WebP is a standard proposed by Google that promises reductions of up to 25% in filesize. But is just supported natively in Chrome, so a universal adoption of that format remains some way off. WebP also supports many advanced features, such as transparencies and animations, and a lossless format similar to the PNG format. This lossless format is useful for rasterized vector graphics (e.g. logos), that might be visibly degraded in quality using the lossy format.

The lossy format is the perfect choice for pictures and photos. As like with the JPEG format, a quality factor (Q) controls the compression level, causing degradation in image quality with lower values (ie. higher compression). However it significantly reduces the file size, and with a perfect tunning it produces an imperceptible quality degradation.

tiger jpeg Tiger image in JPEG format (78KB)
tiger webp Tiger image in WebP format (66KB)

Usually, the WebP format has less noticeable artifacts than JPEG but tends to generate a slightly blurry image in its lower quality settings.

Automatic image optimization

The tricky part of image optimization are settings, because there is no single values (e.g. quality, subsampling) to optimize all images. With the same settings some images can be compressed enormously while others give strange artifacts at even modest qualities. This is why a successful image optimization workflow must adapt compression to the image content, avoiding quality lose while achieving minimal file size.

Try Compressor

Abraia automatically adjusts the compression parameters for every image, reducing the file size of your JPEG, PNG, GIF, and WebP images, preserving the visual quality. We apply the best possible encoding strategy based on the perceptive analysis of each image to bring a parameter-free optimal compression.

Abraia delivers your images with the highest quality and the fewest bytes possible, using perception driven metrics that tune JPEG, PNG, GIF, and WebP image based on the specific image content and the viewing conditions. Forget about manually guessing the good values for different images and multiple devices.

We compress each image several times to adjust the compression level and chroma subsampling determining which image is the best with respect to quality and file size, avoiding undesirable artifacts. Unnecessarily metadata is stripped as well, to get an optimal image every time.

compressed diet calorie Abraia (141KB)
original diet calorie Original (354KB)

The result is an image with good visual quality and reduced file size. For instance, the previous image (original 354KB / optimized 141KB) is reduced in 213KB (60.2%), without any noticeable degradation to the human eye.