A guide to the world of web image formats
Introduction
We encounter images on the web on almost every page. Some of them load at lightning speed, while others can take a while to load with a mobile connection. Yet getting a handle on web images is one of the most important things when creating a new website or modifying an existing one.
The speed of images can also show up in what we call web vitals, which are basic web speed metrics, and it's also one of the criteria Google uses to determine the ranking of pages in a search listing.
This article aims to introduce you to the basic image formats and put you into practice using them, listing some best-practices and explaining their differences.
Basis
Bitmap
Image formats can be divided into two groups, the first group is bitmap images (photos, product renders, etc.) which are created from points (pixels). These formats are limited by their quality, you have to pay attention to their size (resolution), we will talk more about image sizes below.
Vector
The second group are vector images, these are images that are written using curves and shapes. Thanks to this notation, they can be enlarged indefinitely, as their shape is mathematically written. So you don't have to worry about the quality of the image, it stays the same. However, what we need to be careful of is that the vector is not too complex, if we have too many shapes in the image, it could slow down the site as all the shapes have to be calculated to render it.
Image formats
Images can be stored in many ways, depending on their use and content we choose the right ones. Image formats can also be messed up, so let's take a look at the differences between them.
JPG/JPEG
A format you've probably already met, it is the JPG or JPEG format and is used to store photos, pictures of cats, products and so on... This format is a bitmap format and allows compression, so you can tell the image how much to save its volume. If you compress too much you get a poor quality image, but if the compression is too small the image can be large in kb.
In general, it is a good idea to choose an image quality with compression between 70-90%.
Benefits
This format is suitable for storing bitmaps where we don't mind compression (photos) so much, its advantage is its relatively small size.
Disadvantages
JPG is not a format where we can expect sharp edges between transitions of two surfaces, not suitable for storing logos, gradients and the like. It does not support transparency of images.
PNG
Is a format that uses error-free compression with no data loss, which means that no information is lost during compression. PNG images retain more detail and are generally of high quality. PNG images allow transparency. However, it is still a bitmap and the image is therefore composed of individual pixels.
Benefits
We can use PNGs for logos, icons and various graphics where we take advantage of the transparency and quality of the image, but keep in mind that we are limited by quality due to the pixels in the image. Where it makes sense, let's use SVG format rather than PNG for logos and icons or simple graphics. The advantage of PNG is that it doesn't mind transitions and sharp edged areas.
Disadvantages
PNG tends to be bulky and data intensive compared to other formats.
SVG
This is a vector format, which means that images in this format are created using mathematical paths and shapes instead of pixels, as we discussed above in the differences between Bitmap and Vector.
Advantages
SVG images are fully scalable without loss of quality. This means you can enlarge or reduce an SVG image to any size without blurring or distortion.
The files are usually very small, which means faster loading web pages. SVG supports transparency and allows you to create images with transparent backgrounds, which is useful for a variety of design applications. They are text files and can also be embedded directly into code. Very suitable for logos and icons.
Disadvantages
Creating complex SVG images can be tricky, especially for beginners. SVG is not suitable for storing photos or images with many color gradients, as it is based on shapes and paths, which is not effective for photographic details.
WebP
WebP is a modern format designed for image compression, developed by Google. Its main goal is to provide high quality images while keeping the data volume as low as possible. WebP supports both lossy compression and lossless compression. It is actually a kind of universal format that combines the best features of JPEG, PNG and GIF.
Benefits
This format usually provides better compression than formats like JPEG and PNG, resulting in reduced file sizes. Like PNG, WebP supports transparency, which means it can be used for images with transparent backgrounds, and it also supports animations like the GIF format.
Disadvantages
Although WebP is becoming more widely used, some older browsers and platforms may not have full support for the format. WebP is ideal for web images, but may not be optimal for all purposes, especially if you need to preserve high quality detail.
Below is a table of WEBP format support by each browser version. You can learn more at caniuse.com.
Comparison
Below is a table comparing different image formats and their usage.
| Formats | Photos | Logos | Icons | Infographics | Illustrations | Animations |
|---|---|---|---|---|---|---|
| JPG/JPEG | YES | NO | NO | Rather not | NO | NO |
| PNG | NO | May be | May be | Rather not | NO | NO |
| GIF | NO | NO | NO | NO | NO | May be |
| SVG | NO | YES | YES | YES | YES | May be |
| BMP | NO | NO | NO | NO | NO | NO |
| TIFF | NO | NO | NO | NO | NO | NO |
| WebP | YES | May be | May be | YES | May be | May be |
| ICO | NO | NO | NO | NO | NO | NO |
| EPS | NO | NO | NO | NO | NO | NO |
Conclusion
To conclude this article, proper image manipulation on web pages is a key element for optimizing loading speed and overall user experience. Choosing the right image format plays an important role in striking a balance between quality and file size.
Experiment with image formats, always check the resulting quality after exporting the image and the file size. Try to have logos in curves in vector, photos with ideal compression like JPEG or WEBP. On the other hand, graphics that can't handle compression and can't be in curves should probably be in PNG. Finally, animate the vector in SVG or GIF / WEBP bitmap.
I hope you enjoyed this article and found it useful. You can give me any feedback in messages or on social media, below I summarize some links where you can continue your study.