How do you optimize assets, and what is 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.

4 min read·~6 min to think through

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/sizes for 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:

html

<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.

Senior engineer discussion

Seniors give the full optimization toolkit, explain lossy vs lossless, give a clear JPG/PNG/WebP decision matrix tied to content type, and use the <picture> progressive-enhancement pattern with AVIF as the frontier.