Which image file should I use?

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

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

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

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)

image types comparison chart .svg, .png, .jpg, .gif

6 thoughts on “Which image file should I use?

  1. Amazing blog! Do you have any helpful hints for aspiring writers? I’m hoping to start my own site soon but I’m a little lost on everything. Would you advise starting with a free platform like WordPress or go for a paid option? There are so many choices out there that I’m totally overwhelmed .. Any ideas? Thank you!:)Best Careers

    1. Thank’s for the praise! I think you just gave me a great idea for my next blog post! ‘How to “crush it” with your first website!’.

  2. Simply wish to say your article is as astounding.
    The clearness in your post is simply spectacular and i could assume you are an expert on this subject.

    Well with your permission let me to grab your feed to keep up to date with forthcoming post.
    Thanks a million and please carry on the enjoyable work.

  3. Your personal style is unique when compared with other
    people I have got read stuff from. Thanks a lot for posting when you’ve got the opportunity, Guess I
    am going to just bookmark this website.

  4. First off I wish to say terrific blog! I needed
    a fast question that I’d love to ask when you don’t mind.
    I used to be curious to learn how you center yourself and clear your thoughts ahead of writing.
    I’ve had a difficult time clearing my thoughts in obtaining my
    thoughts out. I do enjoy writing nevertheless it just
    may seem like the very first ten or fifteen minutes are
    often wasted just figuring out how to begin.
    Any recommendations or tips? Appreciate it!

Leave a Reply

Your email address will not be published. Required fields are marked *