Introducing the principles to image optimization for web

Web sites have to serve content to a wide range of devices and displays, each with different screen sizes, aspect ratios, and network connections. Image optimization is crucial to reduce loading time, make images responsive, maximize visual quality while minimizing file size, and deliver an improved user experience.

Responsive images enable the web browser to produce a rendering that closely matches the designer's intent, improving user experience. However, this also adds an additional burden on the development and operations teams, who need to create and deploy numerous image asset variants or derivatives, along with the default image. This involves three main steps: resizing the image to make it responsive, choosing the right image format for the web, and compressing the image to minimize its file size.

There are various tools available to deploy an image processing pipeline for creating image derivatives. Powerful open-source solutions like ImageMagick allow for in-house pipeline development. Moreover, cloud-based tools can handle all image transformations and optimizations required by a general web business. However, the proper use of these tools comes with limitations and hidden costs. Fortunately, Abraia provides a straightforward solution to configure and automate your derivative generation.

Using the right image formats

First at all, optimizing images for the web involves using the appropriate format that strikes a balance between perceived quality and file size. The three universally supported image formats for the web are JPEG, PNG, and GIF, while WebP and SVG are commonly used in modern browsers.

JPEG is best for optimizing digital photography files as it uses compression mechanisms that preserve detail and discard more detail in the color channels. PNG is ideal for graphics and clip arts, supporting transparency with an alpha channel and producing no artifacts. GIF supports animations and enjoys universal support, but its limitation to 256 fixed tones and inefficient LZW lossless compression may result in heavy files with poor visual quality.

WebP is a royalty-free format developed by Google that supports lossy and lossless compression, transparency, and animations. It achieves higher compression efficiency than JPEG and can replace all previous formats, but its lack of support in Safari and iOS prevents it from claiming the position of JPEG and PNG.

SVG provides a markup language to code vector graphics, allowing them to be scaled up without pixelation artifacts. It can be used for graphic designs consisting of shapes, text, paths, gradients, or patterns, and is compatible with CSS for styling purposes. SVG images can also contain raster graphics such as PNG or JPEG images, and further SVG images.

While JPEG is still the most used format on the web, WebP is becoming the universal image format for the web since it will be supported on all the most recent browsers. This format can be used for all image cases, improving all previous formats (JPEG/PNG/GIF) by compressing pictures and supporting transparency and animations.

Adjusting images compression for web

High-quality images have been proven to increase engagement, but in order to provide the best experience across desktop and mobile devices, image derivatives must be optimized for the best combination of size, quality, and file format. This preserves the maximum visual quality for customers, improves performance, and reduces CDN costs.

JPEG compression

JPEG compression was specifically designed for the efficient digital encoding of natural images, such as photos. It takes advantage of well-known aspects of the human visual system by discarding high-frequency information and color hue, resulting in a smaller file size with imperceptible degradation.

In simpler terms, high-frequency components contribute less to the overall picture than other components, and can be reduced through quantization. Additionally, humans are able to see more fine details in the brightness of an image than in its hue and color, which is the basis for the efficiency of JPEG compression.

The quality factor and chroma subsampling are the main parameters that control the quality and compression level of JPEG images. Chroma subsampling reduces the spatial resolution of the chroma components in an image, converting it from RGB to Y'CbCr, where Y' represents luma and Cb and Cr represent chroma components, and then some chroma pixels are discarded.

Typically, a 4:2:0 subsampling is used, where each 2x2 pixels block encodes just 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, as shown bellow.

The compression level in JPEG is determined by the quality factor (Q), which ranges from 1% (smallest file size) to 100% (best image quality). This factor controls the quantization of each frequency component, discarding high frequencies. As the quality factor decreases, the file size decreases as well.

However, in practice, the effect of the quality factor varies depending on the image's content. At lower quality levels, JPEG compression can introduce unnatural artifacts such as ringing or blocking, which can significantly affect the image, particularly when fine details or texts are present.

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

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

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

PNG compression

PNG is a file format that uses lossless compression, meaning that the original and optimized images are the same. This format also offers full transparency support and was developed to overcome the limitations of GIFs. While PNG compression may not reduce file sizes as much as other formats, it does not introduce distortions into the image.

PNG's 8-bit format provides a natural replacement for GIF and can result in smaller file sizes. Alternatively, the 24-bit and 32-bit variants of PNG provide an excellent alternative to JPEG, albeit with larger file sizes.

For simpler images and transparent images, PNG is a good choice. It's an ideal format for storing clip arts, charts, logos, and text in a smaller size. For example, an image of donuts in GIF format with a file size of 29KB can be reduced to 13KB using PNG format.

WebP compression

The WebP format, proposed by Google, offers up to 25% reductions in file size but is only natively supported in Chrome, limiting its universal adoption. WebP also supports advanced features like transparencies, animations, and a lossless format similar to PNG, making it useful for rasterized vector graphics like logos that may appear degraded with the lossy format.

For photos and pictures, the lossy format is the preferred choice, similar to the JPEG format, with a quality factor (Q) controlling compression level that causes image quality degradation with lower values. However, the WebP format can significantly reduce file size, producing an imperceptible quality degradation with perfect tuning.

Compared to JPEG, WebP generally has fewer noticeable artifacts, but lower quality settings may result in slightly blurry images. A tiger image in JPEG format is 78KB while the same image in WebP format is 66KB.

Abraia compression

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.

Abraia automatically adjusts the compression parameters for every image, preserving the visual quality and reducing the file size of your JPEG, PNG, and WebP images. We compress each image several times to adjust the compression level and chroma subsampling avoiding undesirable artifacts. Unnecessarily metadata are stripped as well, to get an optimal image every time.