Image formats for the Web
Which is better, JPG or PNG?
Search engines love text, but people engage with images, so it's important to have a good mix of both text and images on your website. And with free tools like Canva, creating quality images is easier than ever.
But what's the best format for web images? Spoiler: It's not usually PNG.
(By the way, in another article, we talk about raster versus vector for logos, and the necessity of having a vector logo. Some browsers and platforms DO support SVG on the web, but by and large, the Internet is still raster. So while you should absolutely have your logo in a vector format, it will be exported as a raster image for display on a website. JPG and PNG are both raster (or bitmap) file formats widely used on the Internet.)
Web images need to be high quality AND have a small file size.
Why does file size matter? Bigger files suck up bandwidth and increase the load time of your website. Smaller files are easier on bandwidth and load instantly--plus faster page loads may boost your SEO. At the very least, faster page loads will certainly satisfy your website's visitors--especially the majority on mobile devices--and make for faster (and smaller) site backups.
This is no easy task. In the age of high-resolution devices and 4K displays, web design often includes high-resolution images (with a high pixel count). And bigger dimensions means bigger file size.
Canva's default for downloading images is PNG, but is that really the best option?
Let's look at an image we made recently in Canva. We used their standard size for Facebook posts (940x788) and downloaded it first as a default PNG, then as a JPG at 60% quality.
The first image below is the default PNG file. Colors are crisp and true, it looks great! BUT, look at that file size: 911 KB. That's nearly a whole megabyte for one little image.
The second image below is the JPG file saved at 60% quality. Colors are crisp and true, it also looks great! AND, check out the file size. Just 68 KB.
That's a huge difference! The JPG is just 7% the size of the PNG with no loss of visual quality.
If JPG is so much smaller, why would you ever use PNG?
In the above example, the image has no transparency. What if you want your image or logo to have transparent portions, so the background can show through. THAT'S when you would want to use PNG.
Below are two examples of the same 200x200 logo, one saved as a transparent PNG, the other as a JPG. Obviously the PNG is better in this application, so the extra 29 KB is worth it.
Logo, PNG, transparent, 47KB
Logo, JPG, not transparent, 18KB
The Verdict
In short, for the vast majority of web needs, JPG is the best format. There are many reasons, the chief one being that you get quality images with much smaller file size. PNG is a good alternative to GIF files--we usually only use when we need the image to have transparent portions, like low-color logos.
Smaller file sizes are necessary for faster load times and mobile-friendliness.