Choosing Between SVG, JPEG, and PNG

Recently, the question: ‘Which file format should we use for this asset?’ came up while working on a project. In the past I had always used whatever file format the designer gave me, and didn’t pay much attention to which type it was or why the designer chose that type.

Digging in to this question with the team, I learned that there are two types of graphic images: raster and vector. Raster file formats store data related to each individual pixel, whereas vector images store data as a geometric description. Two of the most commonly used raster file formats are PNG and JPEG. PNG files are commonly used for graphs, diagrams, and anywhere you want to display flat colors and lines that won’t need to scale up. They are a lossless image format, which means when they are compressed, they don’t lose any data. They also allow for alpha transparency. When you need to overlay an image on a background, PNG files work well. However, since they are lossless, they can’t compress quite as much as JPEG files.

raster versus vector images

JPEG files, on the other hand, are good for things like photos. A JPEG file stores data in a lossy format. This means that every time a JPEG is compressed, it loses some amount of data. This is good because it allows the file to be small, and when the data is lost, typically you won’t notice it. Since they are able to compress so small, they tend to be quick to load, and still look good on web pages. If you have a file with a lot of straight lines however, this file type may not be right for you. Straight lines will look jagged due to the data loss.

Unfortunately, raster images are not very good at scaling. If you want your site to look good on retina displays you need to have assets that will scale well. In the past, displays were standardized around a 72 DPI ratio. DPI stands for dots per inch, which translates to 72 pixels for every inch of screen. Retina displays have a ratio of 2:1, and the iPhone 6 introduced a 3:1 ratio.

When it comes to displaying graphics well on these higher resolution monitors, you may want to consider using vector graphics. Since the data in a vector image is stored as a geometric description, rather than a description of each individual pixel like a raster image, it scales nicely. The SVG file format is one of the most common file formats in the vector image realm. But, SVG files also have their limits. SVG files do not handle photos very well. They rely too much on the fill and shape of elements within an image to consistently represent complex elements generally found in photographs.

In conclusion, use the JPEG file type for a photo, the SVG file type when you have a flat, relatively simple asset you might need to scale, and PNG if you need transparency or you have graphs or diagrams that will not need to be scaled up.

Thanks to this blog post for great info!