Sublim.design

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 :

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.

www.iloveimg.com

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 :

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:

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

, the JPG format offers excellent compatibility with all web browsers and interesting compression capabilities. To optimize page display speed and enhance SEO performance, the new WEBP format recommended by Google can be used.

or pictogram, the SVG format offers the best results. Despite its low weight, it guarantees perfect display in all resolutions.

To display small animations, the GIF format offers the best weight/quality ratio.

Pictures and Social Media

Back to Top