Image optimization for web

Nearly half of website visitors expect a web page to load in 2 seconds or less. Even worse, most will abandon the site if it fails to load within 3 seconds. Speeding up a website can significantly reduce the bounce rate.

Web sites have to serve content to an uncontrolled diversity of devices, with different screen sizes, aspect ratios, and network connections. In this context, image optimization is the art of delivering the best visual quality and user experience by transforming images, to maximize visual quality and minimize file size.

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

Image optimization is the key to make images responsive and reduce loading time. But, optimizing images is complex, involving a combination of different types of transformations, from compression to resizing, cropping, transcoding, or enhancement.

Several cloud services has emerged offering APIs to manipulate and optimize images on-the-fly. Kraken, Cloudinary, or Imgix all claim being capable to dramatically improve user experience by optimizing images and reducing loading time and bandwidth usage.

A common drawback of image management tools is still the dependency on lots of manually configured parameters that may be tricky to use with different types of images and displaying devices.

Image quality and compression

High-quality images have proven to be effective in driving better engagement online, 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.

Lossy image compression is the process of reducing the file size by removing image info that the human eye cannot perceive, so the image still looks clear and sharp.

Abraia reduces the file size of your JPEG and PNG images. Every upload image is analyzed to apply the best possible encoding. Based, on the content of your image an optimal strategy is chosen. The result is a quality image without wasting storage or bandwidth.

Web image formats

First we need to choose the right file format for every type of image. Three common image formats are used in the web: JPEG, PNG, and GIF. Every format is best suited for a type of image and it can easily be selected.

  • 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.

Use JPEG for all your photos, PNG for your graphics or images with transparency, and GIF for animations.

JPEG compression

JPEG is a lossy image compression standard 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)

Abraia's optimized image compressor

There is no single quality settings optimal for all images and screens. A successful image optimization must adapt the compression settings to the image content, to avoid losing image quality and minimize the file size. Abraia's compressor adjust every parameter based on the content of each image to achieve an optimal compression.

Setting the Q value (defined in JPEG standard) is tricky as the actual impact on visual quality depends largely in the image content and the viewing conditions (e.g. screen size, image dimensions). Some images can be compressed enormously while others give strange artifacts at even modest qualities.

Since the birth of JPEG long ago, understanding how the visual system perceives image quality has experienced a significant progress. Building on top of this fresh knowledge, we use perceptive analysis to adjust the JPEG compression settings to bring parameter-free optimum compression.

Try Compressor

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

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

Automatic quality (q=auto) adjusts the compression level and chroma subsampling based on the specific image content, analyzing every image individually. We compress the image several times to determine 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. 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.