Image Optimization for Non-Engineers
Big images can make a page slow. But how big is too big? What kind of image do I use? WTF is a jay-peg anyway? What’s wrong with my ping file, it looks great?
I get these questions often enough that it’s worth writing up the answer for posterity. Here are some rules of thumb for the best image formats by use type, and a quick primer on the 6 most common image formats used on the web.
There are approximately infinite exception conditions and edge cases – I’m only trying to cover the most common. If you spot an error, please contact me so I can fix it.
What image type to use for…
Logos and Illustrations
If it’s all lines, shapes, and flat colors, no photos, it’s a good candidate to replace with an SVG version. Think logos.
If for some reason it can’t be an SVG, or you don’t have a vector version, then PNG is a good choice. But probably you can use an SVG; polyfills are your friend.
Photos
These should be JPEGs, with very rare exceptions.
If your CMS supports modern responsive image formats, try WebP too.
Photo and photo-style images can and should be very aggressively compressed:
If the image is less than a quarter of the (desktop) screen, it needs a good reason to be any larger than 100-150kb.
If it’s the full width of the page, it should be in the 150–300kb range (and there probably should only be one image this big per page)
If it’s half a megabyte, send your web engineer to their room without dinner to think about their poor life choices.
GIFs
If it’s an animated GIF, your page is bad and should feel bad. Replace with video.
If it’s a still (unmoving) image, replace with PNG.
Is there any valid use for a GIF outside of Slack and Twitter? No. No, there is not.
Transparency, Special Effects & Animation
If your design has a sophisticated transparency effect that can only be achieved with a 2 MB PNG, please refactor the page until it doesn’t have that dependency. That’s just silly.
If your design has a giant photo which needs to be cut out from its background, consider using SVG masking of a JPEG. (You can do some clever things with this. It even supports semi-transparency.)
If your design needs animation, consider replacing it with Javascript or CSS animation. You can get better control that way, too. And adapts nicely by device. And your page will be much faster. All kinds of good things happen this way.
Image Types and What They’re Good For
JPEG
Best for:
Photos and photo-like images
Characteristics:
Lossy – some image information is discarded to make the file smaller
Full color
Does not support transparency
Compresses images very well
Notes:
JPEG was created for photographers – literally for photojournalists who needed to send images over low-bandwidth links!
Text, logos or illustrations tend to get squiggly little marks* around lines & sharp transitions. Don’t use for that. (*They’re called compression artifacts.)
PNG
Best for:
Logos, flat illustrations
Characteristics:
Lossless - no information is lost (*usually)
Full color
Transparency is supported
Excellent compression of flat colors, text, illustrations.
Notes:
Created as a less insane version of TIFF that also would support the web. Do not use for photos for web. Great choice for storage as a creative asset. A number of tricks are available to make these very, very small.
SVG
Best for:
Logos and flat illustrations
Characteristics:
Vector format – Doesn’t store picture data, instead, it stores instructions that tell the web browser what to draw
Scales up & down infinitely while retaining perfect quality
Can be styled with CSS, and embedded in a page directly
Notes:
A vector file acts something like this: “Go up 1 inch, right 1 inch, then return to starting point. Fill in the shape blue. Give it a light grey drop shadow.”
All kinds of cool tricks available inside SVGs. Not all of them work with all browsers. Shocker.
GIF
Best for:
Nothing.
Characteristics:
Lossy - throws away color data to reduce file size
Up to 256 colors, no more (it’s called indexed color)
Primitive 1-bit transparency
Notes:
GIFs were literally invented in the 80’s. Do not use. Ever.
Patent disputes over GIF lead to the creation of PNG. Now you win at Nerd Trivia Night! Yay!
Animated GIF
Best for:
Slack, Reddit, Twitter, Tumblr
Destroying your Google PageSpeed score
Characteristics:
It’s a GIF, but with multiple frames, like video
Hilariously terrible compression
No audio, either
Notes:
Invented 2 years after the original GIF, the GIF89a spec added primitive frame differencing to animate images.
Hilariously bad compression of video, but works in browsers without any plug-ins needed. That’s why GIFs became popular again—they suck, but they work so well at what they do.
For purposes of a web page, these almost always can & should be replaced with a video.
WebP
Best for:
Anything but animation*
Making Google PageSpeed Insights engine happy (it loves WebP)
Characteristics:
Swiss army knife, can act like PNG or JPEG
Full color
Transparency supported
Notes:
Great photo compression, but subjectively often looks worse than JPEG at similar file sizes. YMMV. Try it and see how it works for you.
*Technically supports animation. But don’t go there.
Created by Google to replace both PNG and JPEG. Until recently had limited cross-browser support due to patent wars and corporations being jerks to each other. Based on a really lousy video format that Google bought a decade ago because it didn’t want to pay patent royalties for MP4, H.264, and JPEG.
Microsoft Edge and Apple Safari only got WebP support in 2020. Lame. But better late than never.
What about JPEG 2000?
JPEG 2000 has a lot of technically really clever things. However, for web purposes I never recommend it. It does not adapt well to extremely low bitrates required for a fast loading web pages and has very limited browser support.
It’s a great choice where you have very high quality images and you must preserve that quality – which is why it’s popular in medical imaging and digital cinema. Also, Apple’s Safari is the only mainstream browser that supports it.
If you are trying to wring every last bit of performance out of a site, then sure, try JPEG 2000. But I promise you that you’ll be wasting your time creating fallbacks to more widely supported formats.