GIF, JPG, PNG, WebP, AVIF: Which Image Format Should You Use?
2025-07-14
Most Minnesota Business Sites Still Use Wrong Image Formats
If you own a website for your Duluth business, you've probably uploaded at least one of these without thinking about it:
> "It's a PNG, it must be high quality for our customers."
> "GIFs work fine for our local restaurant's social media."
The wrong formats slow your site, hurt your Google rankings, and cost you conversions - especially important when you're competing for local Duluth and Twin Ports customers.
---
The Big Formats (Simplified)
JPG / JPEG
What it is:
Compressed raster format, great for detailed photos and gradients.
Pros:
- Small file sizes at reasonable quality
- Supported literally everywhere
Cons:
- Too much compression = ugly artifacts
- No transparency
Best for:
Photography, big visuals that don’t need transparent backgrounds.
---
PNG
What it is:
Lossless format with transparency support.
Pros:
- Sharp edges, perfect for logos, icons, overlays
- Handles transparency
Cons:
- Bloated file sizes for photos or anything complex
Best for:
Logos, graphics that need transparency, UI elements.
---
GIF
What it is:
Ancient format that technically does animation.
Pros:
- Works everywhere
- Feels nostalgic (if you’re into that)
Cons:
- Huge files, awful color dithering
- No use for static images
Best for:
Short, simple animations. And even then… there are better options.
---
WebP
What it is:
Modern format by Google that replaces JPG and PNG in most cases.
Pros:
- Smaller than JPG and PNG at same quality
- Supports lossy & lossless, plus transparency
- Widely supported now
Cons:
- Lossless WebP is often bigger than JPG. Always use lossy for photos.
Best for:
Almost everything on a modern site. Use lossy compression at ~75-85 quality.
---
AVIF
What it is:
The new kid on the block. Ultra-efficient codec that shrinks file sizes even more.
Pros:
- Up to 50% smaller than WebP for the same quality
- Great for hero images, large photography
Cons:
- Slightly slower to encode
- Still needs WebP/JPG fallback for full browser safety
Best for:
Large photos, banners, visuals where performance matters most.
---
SVG & Lottie (Bonus Round)
- SVG: For logos, icons, simple illustrations. Infinitely scalable, tiny files.
- Lottie: JSON-based animations, perfect for UI. Much cleaner than GIF or MP4 loops.
---
So... Which Should You Pick?
- Photos: AVIF → WebP → JPG fallback.
- Logos, icons: SVG every time.
- UI animations: Lottie or lightweight MP4/WebM.
- Transparent graphics: Small PNGs, only if you really need it.
- Never: giant PNGs for photos, or defaulting to lossless WebP because “bigger must be better.”
---
How to Actually Create These
A common mistake:
> “We saved everything as WebP, but the files are still huge.”
Because you likely saved them as lossless WebP. That’s bigger than JPG in many cases.
Here’s how to get it right:
- Use Squoosh.app (or ImageMagick) to export.
- Always pick lossy WebP for photos. Set quality to ~75-85.
- For AVIF, experiment, quality around 50 often looks great and cuts sizes dramatically.
- Automate in your build pipeline. Modern tools (Next.js, Astro, Shopify Hydrogen) can auto-generate AVIF + WebP + fallbacks.
---
Tools your team might already be using
- Photoshop: exports WebP natively (via “Save a Copy”), but watch quality settings. No direct AVIF yet.
- Canva: offers WebP export, but minimal compression control. No AVIF.
- TinyPNG / TinyJPG: also handles WebP compression, quick and client-friendly.
- Figma: mostly PNG/JPG, though plugins can export WebP.
- Cloudinary, Imgix, Uploadcare: image CDNs that auto-generate WebP/AVIF on demand, great for large catalogs or user uploads.
---
Small tweak, huge impact: pick the right settings, and your site runs lean without losing quality.
---
Real-World Size Example
Same hero photo, 1600px wide:
| Format | File size |
|-----------------------|-----------|
| PNG | 1.8 MB |
| WebP (lossless) | 480 KB |
| JPG (80%) | 320 KB |
| WebP (80%) | 220 KB |
| AVIF (50%) | 140 KB |
Same image. Same look. 13× smaller going from PNG to AVIF, and notice how lossless WebP can be bigger than JPG.
Multiply that by every image on your site. That’s why speed (and format choice) matters.
---
Real Impact for Local Businesses
For Twin Ports businesses, mobile performance is crucial. Many of your customers are browsing on their phones while walking down Superior Street or checking out your menu before visiting.
A restaurant hero image that takes 8 seconds to load on mobile? That's a potential customer who just moved on to your competitor.
---
My Honest Take
Most business sites still use bloated PNGs or “safe” JPGs for everything.
Or they hear about WebP and save everything as lossless, accidentally making files bigger.
Use the right format, set smart compression, and your site will load faster, rank better, and convert more.
---
Want to See What This Could Do for Your Site?
If you’re not sure what formats your current site is using, or if your images are killing your load times, let’s talk.
No jargon, no pressure. Just clear advice for your actual business.
Contact me here or email hello@asdf.design.