Best Image Format for the Web?  PNG, JPG, GIF, and SVG.
Which image format is the best one for icons and logos, and which one should you use for posting photos? Comparing real-life examples to choose the best options for your site.
More about SVG, PNG, JPGBefore 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;
- 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.
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.
- Doesn’t support animation;
- Not meant to effectively compress large-area images.
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.
- Artefacts appear after compression;
- Doesn’t support transparency;
- Each re-saving diminishes the image quality.
SVG vs PNG vs JPG on Pinterest icon exampleLet’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
- JPG: size – 5,38 KB, resolution – 40×40;
- PNG: size – 6,22 KB, resolution – 40×40;
- SVG: size – 9,77 KB, resolution – 40×40.
100% icon scaling up
- JPG: size – 10,8 KB, resolution – 80×80;
- PNG: size – 13,9 KB, resolution – 80×80;
- SVG: size – 9,77 KB, resolution – 80×80.
300% icon scaling up
- JPG: size – 17,4 KB, resolution – 160×160;
- PNG: size – 24,5 KB, resolution – 160×160;
- SVG: size – 9,77 KB, resolution – 160×160.
Best image, logo and photo format for websitesLet’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.
ConclusionI’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!
Get your own social icons
Try to create unique icons for your website for free.