JPG, PNG, SVG or WEBP, which image format should you choose for your website?
Published on April 28, 2023
A website is mainly text and images. There are many different file types for images, so which one should you choose? Follow our complete guide to find out the advantages and disadvantages of each format.
The images can be divided into two categories
Raster images (or bitmap images)
Sometimes referred to as Raster, these are files in which the image is made up of points (pixels) organized according to a matrix model, i.e. in the form of a two-dimensional array: Width x Height. Bitmap files have a fixed size expressed in pixels. Some popular raster image file formats :
- The JPG(Joint Photographic Experts Group) format is commonly used for digital photographs and online images. It uses a method of lossy compression to reduce file size, i.e. it will remove information that is more or less perceptible depending on the level of compression. JPG is a very popular format for storing high-quality images in a relatively small amount of storage space. The JPG format is lighter than PNG.
- The TIFF (Tagged Image File Format) format is used to store high-quality images. Unlike JPG, it uses a lossless compression protocol, which means that image quality is not altered by compression. TIFF files are still very large, however, and this format is not suitable for web use.
- The GIF (Graphics Interchange Format) format is sometimes used to create short animations and simple graphics on the Web. It can contain several images or keyframes which are displayed in succession to create the animation (Animated Gifs). GIF files have a palette limited to 256 colors and may appear pixelated, or of inferior quality, when enlarged. Thanks to its relatively low weight, the format is well suited to the web.
- The PNG (Portable Network Graphics) format was designed to replace the GIF format by offering lossless compression, an extended color palette of 16.7 million and support for progressive transparency. This format produces high-quality images, but the files are fairly large.
- The WEBP format was developed by Google. It is a relatively recent format specially designed to speed up the display of web pages. It offers a higher level of compression than JPG format, for generally better rendering quality.
Compresser les images Bitmap pour le web
The raster format is suitable for photos and complex images. It is important to define the dimensions of a Bitmap image according to the space it occupies on the page. There's no need to use a large photo of 1920 x 1280 pixels if it's placed in a small frame of just 320 x 240 pixels. By adapting the size of the image to the frame, we inevitably reduce the final file size. With or without loss of quality, it is also possible to compress a Bitmap image to reduce its weight and increase page loading speed. From a 3 MB image, you can quite easily obtain a much lighter file of just 200 Kb. In Photoshop, the function " opens a window with a whole host of options. The settings allow you to visualize the effects of compression on quality and define the best balance between the two. Online tools such as www.iloveimg.com offer similar functions.
Vector images
Vector formats use curves and mathematical formulas to represent the image. Vectors can be scaled to infinity and without loss of quality. They are particularly suitable for displaying logos, pictograms, icons and images composed of simple geometric shapes, but are unsuitable for saving photos. Some popular vector image file formats :
- The SVG (Scalable Vector Graphics) format is used to display 2D graphics and illustrations on web sites. It is a format coded in XML on a markup system; in addition to being able to be opened with vector graphics software, an SVG file can also be modified with a simple text editor and styled using a CSS style sheet. SVG images are very lightweight, making them a very attractive format for the web.
- The PDF(Portable Document Format) format has enabled the standardization of digital documents. It is a universal document format that can contain text, raster or vector images. A document can be shared in PDF format on a website, but it is not an image file per se.
- The EPS (Encapsulated PostScript) format stores all the vector characteristics of an image, making them usable in specialized software such as Illustrator, Indesign or CorelDraw. It's a format designed for publishing rather than web display.
Bitmap or vector?
The choice of format depends on the application In the field of printing (newspapers, magazines, posters, sales brochures...), vector graphics are the most widely used, especially the PDF format. It enables us to print large posters without any loss of quality, especially when it comes to text: with vectorized text, letters retain sharp, precise contours, whatever the size of the support In the digital field and web communication, the criteria are different:
- File size is an important factor. A web page must be displayed quickly to be well referenced and to avoid degrading the User Experience (UX). All the resources that make up a web page must be optimized and compressed, including images.
- Image quality can be reduced to guarantee a certain loading speed. Unlike Print (impression), which requires high-definition images, the web seeks a balance between loading speed and rendering quality.
- The nature of the image helps to guide your choice. If it's a graphic or an illustration made up of geometric shapes, vector format is the way to go. To display a photo, opt for a raster format.
| Format | Logo/ Picto | Photo | Animation | Graphic |
|---|---|---|---|---|
| JPG | ★ (1/3) | ★★★ (3/3) | No | ★★ (2/3) |
| TIF | ★ (1/3) | ★ (1/3) | No | ★ (1/3) |
| GIF | ★★ (2/3) | ★ (1/3) | ★★ (2/3) | ★★ (2/3) |
| WEBP | ★★ (2/3) | ★★★ (3/3) | ★★ (2/3) | ★★ (2/3) |
| SVG | ★★★ (3/3) | No | ★ (1/3) | ★★★ (3/3) |
| No | No | No | No | |
| EPS | No | No | No | No |
Conclusion
Bitmap format is generally used for photos, and vector images for icons, logos and geometric illustrations.
To display small animations, the GIF format offers the best weight/quality ratio.