You Should Optimize Your Photos
Image optimization is kind of a big deal.
Unoptimized images make webpage load slower, and hurts user retention. Pages that load slowly increase the chances visitors will leave and go somewhere else. Learn how optimization ups conversions »
Table of Contents
- JPG vs PNG
- The Best Way to Optimize PNGs
- The Best Way to Optimize JPGs
- How Big Should My Web Images Be?
- Extra Credit: WebP and AVIF Images
JPG or PNG? Which is Best?
The two most common image types on the web are PNG and a JPG. Most people don’t really know the difference, and are sometimes told unhelpful advice like “always use JPG” or “always use PNG”. The truth is, PNG and JPG each have specific strengths, and it’s important to use the right one for the right purpose.
When To Use JPEG?
Short answer: JPGs are best for photos.
JPEG files (also written JPG) are best for photos or illustrations with lots of color variation. Here are some examples…
As a PNG the above example would be a painfully large 583KB.
But that same image as a JPG is only 45KB.
That’s 92% smaller.
JPGs use “lossy compression” which means they lose some image quality as they get compressed. When done well it isn’t very noticeable, but too much compression creates “artifacts”.
When to Use PNG?
Short Answer: PNGs are best for Logos, and flat-color illustrations.
PNG files work great when you have large areas of the same color. The large areas of black and turquoise in the above illustration compresses nicely without any loss of quality.
Should I Ever Use PNGs for Photos?
Short Answer: Yes, but not on your website.
PNG images use “lossless compression” which means it compresses images without losing any quality.
Often I’ll export PNG photos from Photoshop because I plan to optimize them in a separate program (like squoosh.app) and starting with a PNG allows me to convert them into JPGs that look better and compress smaller. It’s a win/win!
So yes, it’s okay to use PNG for photos, but you should convert them into JPGs (or another file type) before putting it on your website.
The Best Way to Optimize PNGs
By default, most PNGs come out too large. If you export a PNG from Canva or Photoshop, your images will be 2-4 times larger than necessary.
For best results, always run PNG files through tinypng.com.
It frequently gets PNG files 50%-80% smaller without any loss in quality. It’s a no-brainer. If you’re putting PNG files on your website, you should run them through TinyPNG.com.
The Best Way to Optimize JPGs
JPGs have been around for a long time and most graphics programs have their own quality controls.
However, most programs (including Photoshop) use outdated compression methods for exporting JPGs.
For best results, export your JPGs at 100% quality (or export them as PNGs) and compress them with Squoosh.app
Squoosh.app compresses JPGs better than 90% of software out there! And it’s free.
On average it makes images twice as small (while still looking good) as other programs. The secret is the new MozJPEG algorithm which handles compression more intelligently than traditional methods while still being compatible with every program that supports JPGs (basically everything).
How to Use Squoosh
- Go to https://squoosh.app/
- Click the pink blob and choose a file (or drag and drop an image from your desktop).
- Adjust the Quality slider (usually around 50-80).
- Click the blue download button in the bottom-right corner to download your image.
How Big Should My Web Images Be?
While there’s no one answer, I can give you some recommendations.
Most web images should be between 10-200kb (kilobytes).
For small images, aim for 10kb-50kb
For large images, aim for 50kb-200kb
Extra Credit: WebP and AVIF Images
WebP and AVIF are new image formats that often compress better than JPG and PNG. You can also use Squoosh app to create these file types as well.
But, Should I Use WebP?
At the time of this writing (September 2022) browser support for WebP is very good, but not universal.
About 93% of users will see your image, but your image might break for people using Internet Explorer, old Mac computers running MacOS10 or older, or iPhones running iOS13 or older. That’s not a large group of people anymore, but they’re still out there.
If you’re a novice, and you want to be 100% sure people will see your images, stick with JPG and PNG.
For advanced users, there are ways to create fallbacks for unsupported image types.
Create a WebP Image in Squoosh
Import your image into Squoosh (same as before) and choose “WebP” instead of “MozJPEG”.
Notice the size. This HD photo is only 35.6KB at 75% quality. That’s pretty impressive.
Not every photo this size will compress as small as this image (this photo has large areas of low detail which help it compress easier) but you’ll get 35% smaller image on average.
WebP also supports transparent backgrounds, which is ideal for detailed objects that need to be cut out.
Should I use AVIF?
AVIF compresses even better than WebP files.
On average, AVIF files are 50% smaller than comparable JPGs.
Amazingly, this 1920px by 917px image compresses to just 17.4kb with minimal quality lose.
AVIF’s Smooth Look
AVIF images tend to look smoother than WebPs or JPGs which makes them ideal for images with soft gradients, but textures can get lost in the compression process. It’s a reasonable trade-off, but something to be aware of.
AVIF’s Browser Support
The biggest problem with AVIF is that many devices don’t support it.
As of September 2022, around 71% of users will see your AVIF files, and 29% will not.
They work great on PCs running Chrome or Firefox, but right now Mac, iPhones, or Microsoft Edge (yes, even the Webkit version) do not support it. Support is coming for Macs and iPhones. MacOS13+ and iOS16+ plan to support AVIF files, so support is going to get better.
But for now, we do not recommend using AVIF without a fallback.
Using AVIF with Fallbacks
As a web designer I’m already using AVIF files on production websites. The key is to provide a fallback though either the <picture> tag or an image CDN service like Cloudinary.
If you’d like to learn more about how to use AVIF files, let me know in the comments and I’ll write an in-depth article explaining how to use AVIF and WebP images with 100% browser support.
Thoughts? Questions?
Was this article helpful? Did anything require clarification?
Let us know your thoughts in the comments below…
No Comments