Web Performance 101: Tuning Tips for Images

Visual content is an integral part of modern websites; even the most minimalist website designs rely on sharp clear images to perfect end user experience. The variety of screen sizes available today – from smartphones and tablets, to laptops and desktops- makes it important to use high quality images that render properly on any viewport. Blurry or low resolution images can make the website design look shabby, which can ultimately have a negative impact on the end user experience.

The size and type of images used on a website can directly impact website performance. Optimizing images frees up a lot of bandwidth and in effect reduces the overall page load time. Before implementing image optimization techniques, it’s important to take inventory of all the images on the page and eliminating those that are unnecessary. CSS effects like shadows and gradients provide a lot of design flexibility that can be used to replace images. Similarly, instead of using images with text web fonts can be used to display unique typefaces. In this article we discuss some of the major image optimization techniques, starting with the image type/format.

Choosing Image Formats

There are three standard image formats that are supported by all browsers (GIF, PNG and JPEG); you should choose the format that is best suited for each section of the page. The diagram below helps narrow down the image format based on what the design requirement is:

Source: Google

In addition to these, there are newer image formats like WebP and JPEG XR that offer better performance. WebP and JPEG XR have a number of advantages over the standard formats like PNG and JPEG – image size being the major advantage. A WebP image is 26% smaller than a PNG and up to 34% smaller than a JPEG. It delivers both lossless and lossy compression, and supports transparency (alpha channel) just like a PNG.

Not all browsers are currently compatible with WebP. To use WebP images on your site, you will need to implement a workaround or configure the .htaccess file on the server to display the WebP image only when the browser supports it.

Image Compression

Image compression reduces the overall file size which makes it easier to transfer and render the image. Online retailers depend on high quality images to display the products they sell. Without clear images, the chances of a customer buying the product becomes very low; however, using high resolution images can slow down a website considerably. In such cases, lossless or lossy compression algorithms can be used to compress the images to create manageable file sizes.

Lossless compression creates smaller images by removing unnecessary metadata, the image is rendered without degrading the image quality. On the other hand, lossy compression removes pixel data to compress the file size and the resulting image is of lower quality. Compression should also be implemented when using SVG files which is an XML based image format that contains a lot of metadata.

Let’s look at the impact compression has on different image formats:

Source: KeyCDN

Using CSS Sprites

Websites use a number of images to display navigation buttons and social icons. Sprites combine such simple images into a single image, each image in the sprite can be mapped and displayed using CSS. Even though the resulting image is large, the total file size of an optimized sprite image is usually lower than the sum of each image in the sprite. The main advantage of sprites is not having to use multiple HTTP requests to download each image.

Introduction of HTTP/2 has had a significant impact on the overall page load time, but studies comparing load times of sprite sets vs. individual icons over HTTP/2 show that sprites are still a relevant part of front end optimization techniques.

Serve Scaled images

Another important and easy technique to optimize images is to resize it based on the display size. Sending a large image to be displayed as a thumbnail will only add to the load time as the browser has to re-scale the image before rendering it. The image file size is calculated by multiplying the total number of pixels with the number of bytes used to encode each pixel so we are delivering extra pixels to the browser when sending large images. The table below illustrates the impact of such unnecessary pixels.

Source: Google

You can see that even though the difference in the display size and the natural image size is negligible (10px), the overhead increases as the screen resolution increases. To avoid taking up more bytes for unnecessary pixels, it’s important to scale the images based on the display area.

Optimizing images is a necessity as images will continue to take up major space on websites. It’s even more significant when we consider the increasing number of users accessing websites over their mobile phones and other devices. By implementing the optimization techniques discussed above, we can cut down a lot of overhead on the server and make a vast improvement to the webpage load time.

The post Web Performance 101: Tuning Tips for Images appeared first on Catchpoint's Blog.