Choose the best image file format for the web

Adding an image to a page people do not always pay enough attention to what image file format is. Although this can be very important not only for quality and performance but even for the whole image rendering. After all, not all browsers support certain types of images.

To choose the best image file format, we need to determine the main requirements for it:

- The image must be of good quality -
- Loading the page with the image should be fast -
- Images should be supported by the maximum number of browsers -

To select the types of images supported by most browsers, we need to take the most popular ones. To date, such are JPEG (*.jpg) and PNG (* .png).

But which one is better to use? The answer is not the same for different images. It depends on what is presented in the image. If we are working with a photo that has many colors, then you should select the JPEG image file format: the image will be of better quality and have smaller size than the same image in the PNG format.

This image in JPEG format has file size 148 KB (for comparison in PNG it will take 1.52 MB - more than 10 times!):

But in case if the image of a document page or diagram, it's better to choose PNG. The image will have smaller file size and, correspondingly, will be transmitted faster over the network.

This PNG image takes 41 KB (for comparison, in JPEG format it will be larger almost twice and lose such property as transparency):

So the choice is obvious: if we have a portrait - JPEG, if the diagram which has a limited number of colors - PNG.

And finally a photo album with portraits, of course in JPEG format: