Recently, I ran into the problem of image files on my website taking a really long time to load. I was spinning my wheels trying to figure out why my files were so large. This was actually a big problem for my mobile website visitors since my website was eating up their data and loading slowly. Of course, this was contributing to a high bounce rate and SEO penalties.
The solution was so simple that my jaw dropped when I realized what I was doing wrong. I had been saving my images as .png files since the quality was overall better. One evening, I saved for web as a .jpg file and my image file shrunk from almost 2MB to about 600KB. Much Better! I found that I could adjust the image quality to the maximum and I was getting quality comparable to the .png files, but at a fraction of the file size.
This got me thinking…I’ll bet I am not the only one who has made a mistake like this when working with raster image graphics. This article is dedicated to explaining some of the differences between .png, .jpg, and .svg files.
PNG files are best used in digital environments and can utilize transparency. These files are not distorted when compressed so the overall quality is fantastic. This all comes at the cost of a larger file size, especially when the image is large or in high resolution. PNG files are great for use with logos or when you need to use a graphic on a background color, gradient, or over another image.
JPG files are great for images that are photo real and for use in cases when a smaller file size is desired. Because they are subject to distortion, they don’t always work the best for logos or text. JPG files do not support transparency and will fill in a white background if there is no color present. JPG files are great for use in print, where .png files and transparency do not always work out so well.
SVG files are one of my new favorite file formats. Unlike .jpg and .png files, .svg files are not raster, but are vector graphics. When I say it is a vector image, I mean that the image is created by using math and plotted points on a grid. This allows the image to be infinitely scalable without the loss in quality. SVG file formats are perfect for icons, logos, and simple flat images.Since these image files do not need to account for individual pixels, the file size is microscopic when compared to raster image files. Before using on web, you may want to check for compatibility since results may vary. SVG files also work well with print, just make sure you are using the correct color mode.
Check out this table for a quick reference for when to use which image. (Saved as .png for best display of text)