These days, high-resolution screens, multiple viewports, and the vital need in a fast website have made choosing a graphic format a bit more complex.
If you need to choose between image quality/size and page load time, then you need to decide, whether you will use SVG or PNG.
Let’s look at the benefits and drawbacks of each of these graphics formats!
SVG format
SVG, or, as it stands for, scalable vector graphics, is unbelievably practical. That’s why designers use this format more often.
Since SVG is a vector format, it looks great in any size and works for almost any type of image except for photography.
SVG is a lossless format, that is, it does not lose any data during compression, displays a limitless number of colors and is most often used for graphics and logos on the Web, as well as for projects that are supposed to be viewed on Retina and other high-resolution screens.
By the way, we recommend reading about Geometric Background in Web.
1.1. Pros of SVG format:
• displays perfectly in any size;
• simple SVG-rendering in code or text editor;
• allows to design and export complex graphics from Adobe Illustrator or Sketch;
• SVG text available;
• easy to style and write;
• is supported by today’s browsers and meets tomorrow’s demands;
• is very compressible and lightweight;
• text format makes it good for search;
• supports transparency;
• allows you to save still or animated images.
1.2. Cons of SVG format:
· SVG design may be complicated;
· Is not displayed in some older browsers;
· Limited support for email clients.
PNG format
PNG or portable network graphics is a format created for the Web that comes with the transparency – something that JPG couldn’t offer. That is why PNG is extremely popular for downloading elements such as logos for website design.
There are 2 types of PNG – PNG-8 and PNG-24:
· PNG-8 refers to a palette option that supports only 256 colors but is usually smaller. PNG-8 can easily replace GIF.
· PNG-24 is a true color option that supports more colors but larger. PNG-24 can be used instead of JPEG if a lossless image format is required.
Both types of PNG are supported by any modern browser and have lossless compression.
Although PNG formats are similar to GIFs, they don’t support animation. This format is most often used for icons, small still images, or any image that needs transparency.
2.1. Pros of PNG format:
• supports transparency;
• is suitable for images with text;
• displays logos well;
• includes integrated text description for search engines;
• PNG-8 has a small file size and is the lightest;
• exports without jagged edges.
2.2. PNG cons:
• File sizes grow rapidly for large files such as images;
• Some older email clients have problems visualizing this format;
• There is no animation;
• PNG-24 files can be large, which is not very good and convenient for sharing over the Web.
Which format should you use?
Now that you know the differences between SVG and PNG, which one should you use? Here are some tips on that:
Choose SVG if you need a vector format, opt for PNG if you need raster.
You can use both SVG and PNG if you need transparency.
Choose PNG when you need a multi-color image, otherwise – opt for SVG.
If lossless compression is crucial to you, then any of these formats will do.
If you need to update and reconfigure the graphics, choose SVG, if you don’t – pick up PNG.
Choose SVG if you are going to use animation, use PNG if you’re not.
Both image formats are practical and widely used. Although SVG is the latest format and can often be saved to the smallest file size, this is not always the best option.
Think about how you use images in your project, how you choose the file type to find the one that will work best for what you are trying to achieve. You may even find that some projects contain images that use both types of files.
11 total views, 11 views today
