Best Image Format for the Web? [2020] PNG, JPG, GIF, and SVG.

More about SVG, PNG, JPG

Before we compare different images formats, let’s take a look at format reviews that cite their advantages and disadvantages.

SVG (Scalable Vector Graphics)

This is a graphics markup language that is used to depict 2D graphics and combined vector and bit image graphics in XML format.

Advantages:

• You can make any part of the image larger without losing in image quality;
• Text in SVG graphics is actually text, and not an image, so it can be copied and indexed by search engines;
• You can manage element display (color, size, proportions, etc.) with the help of CSS;
• SVG elements can be managed with JavaScript, creating dynamic and interactive graphics.

Disadvantages:

• The more small details there are, the faster grows the SVG data volume;
• You can only create simple objects that can be described with simple figures;
• Older browsers might not support the SVG format.

Due to its properties, this format has become popular for icons and logos: the images in SVG format can be compressed and stretched without the loss of quality, so it would be enough to create one set of icons for different size devices. However, these advantages limit the opportunity of creating large and complicated images in this format.

PNG (portable network graphics)

Bitmap format of storing graphic data that uses the Deflate algorithm for lossless contraction.

Advantages:

• Virtually unlimited number of colors in an image;
• Alpha-channel support and the availability of gamma-correction (brightness settings);
• Minimal loss of quality during compression;
• Relatively small file size;
• Compatible with all browsers.

Disadvantages:

• Doesn’t support animation;
• Not meant to effectively compress large-area images.

PNG is a good format for image editing and for storing mid-stage edits, as the recovery and re-saving of images are performed without the loss of quality. One more advantage of PNGs is the fact that they support transparency. This makes them a fantastic option for logos and icons in particular.

JPEG (Joint Photographic Experts Group)

One of the popular raster graphic formats that is used to store photos and similar images. The following extensions also belong to JPEG format: jpg, jfif, jpe.

Advantages:

• High compression ratio;
• You can choose the quality/size ratio;
• Compatible with all browsers;
• Small file size.

Disadvantages:

• Artefacts appear after compression;
• Doesn’t support transparency;
• Each re-saving diminishes the image quality.

JPEG is perfect for processing and storing full-color picture format for websites with large or realistic images (background images, photos) that have frequent color and brightness gradients. However, the lack of transparency makes it practically useless for logos and icons.

SVG vs PNG vs JPG on Pinterest icon example

Let’s take a regular Pinterest icon to compare the change in quality and image size for the 3 different formats.

Initial conditions for the icon

1. JPG: size – 5,38 KB, resolution – 40×40;
2. PNG: size – 6,22 KB, resolution – 40×40;
3. SVG: size – 9,77 KB, resolution – 40×40.

Comment: With the default sizes we can see that the difference in quality is insignificant, the main difference is the image size.

100% icon scaling up

1. JPG: size – 10,8 KB, resolution – 80×80;
2. PNG: size – 13,9 KB, resolution – 80×80;
3. SVG: size – 9,77 KB, resolution – 80×80.

Comment: Sizing up the image by 100% leads to a rapid quality decrease for PNG and JPG icons.

300% icon scaling up

1. JPG: size – 17,4 KB, resolution – 160×160;
2. PNG: size – 24,5 KB, resolution – 160×160;
3. SVG: size – 9,77 KB, resolution – 160×160.

Comment: Sizing up the icon size by 4 times further decreases the image quality in PNG and JPG format. Also, due to PNG format algorithms, we see the most significant increase in size.

Best image, logo and photo format for websites

Let’s sum up this review. The JPG format with its lack of transparency and rapid decrease in quality during resize is absolutely unsuitable for creating icons and logos. However, this format is perfect for large images or photos, as the compression algorithm allows to retain the acceptable quality with a relatively small file size. The PNG format has demonstrated the biggest increase in size, but its transparency, availability and processing ease make it a good choice for adding icons or logos to a website. Also, you can use it to post an image in the optimum quality, without any compression artifacts or retain transparency. And finally, we see that the SVG format has great icon size characteristics, and what’s more important, it doesn’t lose quality at image resize. This makes it perfect for creating social and interface icons and website logos. In case you need to create a large and complex image, it might become a strenuous task that will take a designer a long time to complete, and the result won’t be perfect in terms of image size.

Conclusion

I’d like to wind this article up by wishing that the SVG icons became more popular, as they have all the necessary qualities. Thank you for your attention, and please, share your ideas and opinions on images formats in the comments!