Jpg vs. Png vs. Gif vs. Svg: The Ultimate Guide to Image File Formats
There’s a lot of confusion about which kind of image file to use when and why. What’s the difference between jpg and png? Which file format will give me better image quality in any given situation? And will certain file formats slow down my website?
In this guide, I’m going to answer all your questions about the four main file formats you’re likely to encounter when building your website.
Disclosure: This post contains affiliate links. When you click on an affiliate link and make a purchase, I receive a small commission (at no additional cost to you). Affiliate links are marked with an asterisk (*).
Jpg Images
Jpg (or jpeg–an alternate spelling of the file extension) stands for Joint Photographic Experts Group. That’s kind of a mouthful but it does vaguely communicate what jpg files are best used for–photographs. If you have a photo you want to upload to your website, it’s best to save it as a jpg.
In RAW format, photos are large and ungainly–loaded down with lots of data. Jpgs are amazing because they take all that information and compress it into smaller file sizes without degrading image quality–at least to the naked eye.
You can make jpg files even smaller by compressing them. There are two types of jpg compression–lossy and lossless. Like the name implies, lossy compression can degrade the image quality slightly while you can losslessly compress a jpg without losing quality. I use TinyJPG to compress jpg files before uploading them to my website.
You should not save and re-save the same jpg file multiple times because the quality of the image will degrade more and more each time you save it.
If you’re working with an Adobe Photoshop* or Illustrator file that has a transparent background and you export it as a jpg, a white background will automatically be applied.
Png Images
Png stands for Portable Networks Graphics (Who comes up with these names?!) and like the name implies, it’s ideal for web graphics. If you have a logo, social media graphic, illustration, etc., the png format is a good bet for retaining maximum image quality.
Png files are inherently lossless, which means if you were to save the exact same file as a jpg and png, the png file would be larger. If you were to upload a photo to your website as a png file, it would slow your website loading speed. But you need that larger file size to retain the quality of graphics, so it’s worth the larger file size.
You can compress png files further by running them through TinyPNG. TinyPNG uses something called smart lossy compression, which dramatically reduces the file size without any noticeable changes to the image.
Unlike a jpg, you can re-save a png file over and over again without any degradation of the image.
Png files also support transparent backgrounds, so if you have a graphic or logo you want to overlay on top of a colored background on your website, you’ll need to save it as a png.
Gif Images
Gif stands for Graphics Interchange Format and it’s best known for supporting animation. Like png files, gifs are inherently lossless but they actually take up a lot more space than png images. In fact, png is basically just an updated version of gif with some key differentiating characteristics.
I don’t recommend using the gif format on your website for anything except animations. They have weak support for transparency, only have 256 colors, and will slow your website down. Animation is the one area in which they are truly useful.
Svg Images
Svg stands for Scalable Vector Graphics. All the other file formats we’ve covered are raster-based, meaning they look blurry if enlarged beyond their original size. Svg files are vector-based, meaning you can scale them to any size without any loss in quality. No other file type looks as sharp as an svg.
Svg files are actually code–a series of mathematical equations that define shapes, colors, and size. This is why they retain their high quality no matter how much you scale them. But it also means you can’t upload them to Squarespace the same way you would upload a jpg, png, or gif. You have to copy and paste the svg code into a code block instead.
You also need a special program to create svg files. Raster-based programs like Photoshop won’t cut it; you need Illustrator, Sketch or another vector-based program.
Svg files are ideal for logos, icons, and simple graphics. They’ll look sharper than a png file and they’re significantly smaller, so they won’t slow down your website at all. The only downside is that there’s a bit more of a learning curve to generating and installing them properly.
If you have any questions, comments, or want to request a specific tutorial, drop me a note in the comments below!
