How to optimize images to load website faster

If your website takes more than 3 seconds to load, it is highly likely that users will exit the website and it will affect the conversion rate of your website. One of the most important factors of a slow-loading website is un-optimized images or wrong image file format selection on the website.

1 — Choosing the correct image format and compression method

Let’s start from the beginning and understand the types of images. There are two types of images: Raster/Bitmap images and Vector images.

Raster Images: Raster images are created using pixel-based programs or captured with a digital camera or a scanner. Pixels are tiny square dots and each dot contains different colors to form a picture. You must have heard about the term PPI (Pixels per inch) for computer screens or mobile screens. The greater the PPI, the sharper the image looks. The file size of a raster image increases as we scale up the image because, with increased dimensions, the numbers of pixels increase too. A majority of pictures that we see on computer/mobile are raster graphics and the most common file formats for raster graphics are JPG, PNG, and GIF. There are other less popular formats like WEBP and BMP.

Vector Images: Vector images are created using mathematical statements or a program, which places lines, or shapes like circles, triangles, rectangles, etc. A designer uses a vector graphics program to design logos, icons, infographics, etc. Since vector graphics are mathematically based, the file size is smaller, and scaling a vector graphic does not increase the file size. Vector graphics are preferred in print media. However, these days we use them in digital media too. The most common file format which we use on the website is SVG.

JPG/JPEG — JPEG stands for Joint Photographic Experts Group. It supports up to 16 million colors. JPEG files are image files that can be compressed to store a lot of information in a small-size file. It can convert a large file-sized image to a smaller one with an almost unnoticeable quality difference. For its compression quality, it is the most widely used image format on the Internet.

Use JPG image format for graphics, which contain lots of colors, like the pictures shot using a digital camera etc. Compress the file by previewing the compressed output and choosing the best quality with a lower file size.

PNG — PNG stands for Portable Network Graphic. It supports up to 16 million colors like JPG. PNGs are also good at compression but only if you have fewer colors in your design. If the graphic contains more colors, PNGs compression is not as great as JPGs. One of the most important reasons designers use PNG is its support for transparency.

Use PNGs if your graphics have fewer colors or if you need transparency with good quality graphics. I find tinypng.com a great website to compress PNG graphics.

GIF — GIF stands for Graphics Interchange format. It supports only 256 colors, which makes it a poor choice to save a complex image in GIF format. However, GIF is used widely for animated graphics. Animated GIFs provide a smaller file size and the quality depends upon the number of colors we use in the graphic — the fewer the better. Another alternative for animated graphics is APNG (animated PNG) but unfortunately, it has poor browser support as of now. GIF formats also support transparency but the quality is not as great as PNGs.

Use GIF as animated graphics for website banners etc.

SVG — SVG stands for Scalable Vector Graphics. As the name suggests, it is a vector graphic format. As vector graphics are mathematically based, the file size is smaller and when scaled up, the graphic does not increase the file size. It is my personal favorite format for icons, logos, and infographics on the website because it looks sharper at whatever PPI we see the graphics.

Use SVG format for graphics like logos, icons, infographics, etc.

2 — Minimize HTTP requests through CSS Sprite

CSS Sprite technique is a way of combining multiple images into a single image file for use on a website, to help with performance. If your website contains lots of smaller graphics like icons, buttons, etc., it can take a long time to load and it also generates multiple server requests and affects the performance of the website. We can combine the icons into a single graphic file and use CSS to load the portion of the icons using X and Y positions. This reduces the HTTP request and increases the performance of the web page.

If you have a lot of HTTP requests on the website, use CSS Sprite to increase the website performance.

3 — Image selection for responsive website

Responsive design is a way to put together a website so that it scales its content to fit into different screen sizes. We can use different images for different screen resolutions. For example, for desktop computers, we can use banner graphics of 1920 x 1080 px dimension, and for smaller screen resolutions like mobile devices; we can recreate the banner graphic in 320 x 480 px. That way, the graphic file size for mobile devices will be smaller and will load faster.

Conclusion:

There is no good or bad image format. Each image formats have its own upside and downside. We need to choose them wisely. If a graphic has too many colors in it, we should use the JPG format. If we need transparency in graphics, PNG is the best option. For animated graphics, go for GIF, and for small icons and logos created using a vector graphic program, SVG is the best option. If your webpage has too many icons, try to combine the icons into a single file and use CSS Sprite to minimize the HTTP request. For a responsive website, use different images for different screen resolutions to load the images faster on smaller devices.