How do you optimize assets? What is image compression? What’s the difference between WebP, PNG, and JPG
Optimize assets: compress, right-size, lazy-load, serve modern formats, use a CDN, cache aggressively. Image compression = reducing file size (lossy drops data, lossless rearranges). JPG: lossy photos. PNG: lossless, transparency, sharp graphics. WebP: modern, smaller than both, supports transparency + animation.
Assets — images especially — are usually the biggest bytes on a page, so optimizing them is the highest-leverage performance work.
Asset optimization, broadly
- Compress — minify JS/CSS, gzip/Brotli on the server, compress images.
- Right-size — serve images at the dimensions they're displayed (don't ship a 4000px image into a 400px slot); use
srcset/sizesfor responsive images. - Modern formats — WebP/AVIF for images, WOFF2 for fonts.
- Lazy-load —
loading="lazy"on below-the-fold images; defer offscreen assets. - CDN — serve assets from edge locations close to users.
- Cache aggressively — content-hashed filenames + long
Cache-Control(immutable). - Reduce count — sprite/bundle where it helps; remove unused assets.
- For JS/CSS: code splitting, tree shaking.
What image compression is
Reducing an image's file size. Two kinds:
- Lossy — permanently discards data the eye barely notices (JPG, WebP-lossy, AVIF). Much smaller; quality degrades if overdone.
- Lossless — reorganizes/encodes data without discarding any (PNG, WebP-lossless). Pixel-perfect, but larger.
The job is choosing the right format and quality level for the content.
JPG vs PNG vs WebP
| JPG | PNG | WebP | |
|---|---|---|---|
| Compression | lossy | lossless | both lossy & lossless |
| Transparency | ❌ no | ✅ yes (alpha) | ✅ yes |
| Animation | ❌ | ❌ | ✅ |
| Best for | photographs, complex color gradients | sharp graphics, logos, screenshots, anything needing transparency | almost everything — modern replacement |
| File size | small for photos | large | ~25–35% smaller than JPG/PNG equivalent |
- JPG — lossy, no transparency. Great for photos; bad for sharp edges/text (artifacts).
- PNG — lossless, supports alpha transparency. Great for logos, icons, screenshots; large for photos.
- WebP — does both lossy and lossless, supports transparency and animation, and is meaningfully smaller than JPG/PNG at similar quality. The modern default.
- AVIF — even smaller than WebP; worth mentioning as the next step.
The practical pattern: serve WebP/AVIF with a <picture> fallback to JPG/PNG for old browsers:
<picture>
<source srcset="img.avif" type="image/avif" />
<source srcset="img.webp" type="image/webp" />
<img src="img.jpg" alt="..." loading="lazy" />
</picture>The framing
"Assets are the biggest bytes on most pages, so: compress, right-size to display dimensions with srcset, serve modern formats, lazy-load offscreen images, and cache hard behind a CDN. Image compression is just reducing file size — lossy discards barely-noticeable data, lossless doesn't. Format-wise: JPG is lossy, photos, no transparency; PNG is lossless with alpha, great for logos and sharp graphics but heavy for photos; WebP does both, supports transparency and animation, and is ~25–35% smaller than either — the modern default, with AVIF the next step and a <picture> fallback for old browsers."
Follow-up questions
- •When would you choose PNG over JPG?
- •Why is WebP smaller than JPG and PNG?
- •What's the difference between lossy and lossless compression?
- •How do srcset and the <picture> element help?
Common mistakes
- •Shipping huge images scaled down by CSS instead of right-sizing them.
- •Using PNG for photographs (huge files) or JPG for logos/text (artifacts).
- •Not serving WebP/AVIF with a fallback.
- •Not lazy-loading below-the-fold images.
- •Over-compressing lossy images until visibly degraded.
Performance considerations
- •Images dominate page weight and directly affect LCP. Right-sizing + modern formats + compression can cut image bytes by half or more; lazy-loading defers offscreen cost; CDN + caching cut repeat-load and latency.
Edge cases
- •Images needing transparency — rules out JPG.
- •Old browsers without WebP/AVIF support — need <picture> fallback.
- •Animated content — WebP/AVIF/GIF trade-offs.
- •Sharp text/UI in an image — lossy formats artifact badly.
Real-world examples
- •Next.js/Image components auto-serving WebP/AVIF, right-sized, lazy-loaded.
- •An e-commerce site cutting page weight dramatically by switching product images to WebP.