We use analytics cookies.We use cookies to analyze site traffic and improve your experience.
Loading...
System Design Masterclass · Web Content Delivery
Free preview: the first 2 parts of this 7-part lesson.
Already bought the course? Sign in to read the whole lesson.
this lesson is part of
System Design Masterclass
Unlock this lesson and the 751 other paid lessons
$25 once, by PayPal
See the System Design courseread the rest of this lesson in
System Design Masterclass
Unlock this lesson and the 751 other paid lessons
$25 once, by PayPal
See the System Design coursein Web Content Delivery
This lesson is part of the full System Design Masterclass. Unlock it along with 769 other lessons for a one-time payment.
One-time payment by card or PayPal
Get Lifetime AccessOne-time payment: UPI, card or netbanking
Get Lifetime Access18 Foundation lessons are free, no payment needed. Try them now
It is easy and good
“It is really nice and good Please join the course”
An e-commerce category page displayed 30 product photos. Each image was the original camera resolution: 4000x3000 pixels, maximum-quality JPEG, 3-4MB per file. The page loaded 90MB of images. On broadband, 15 seconds of downloading. On mobile, most users abandoned before seeing a single product.
The images displayed at 400x300 pixels on screen. Serving a 4000px image for a 400px slot means the browser downloads 100x more pixels than it displays and then throws away 99% of them during downscaling.
A proper image optimization pipeline (resize to display size, convert to WebP, compress at quality 80) turned those 3-4MB files into 40-60KB files. Same visual quality at the display size. The page dropped from 90MB to 1.5MB. Load time from 15 seconds to 1.2 seconds.
Images are typically 50-80% of total page weight. Optimizing them is almost always the single biggest performance win available.
Image optimization is not one technique. It is a pipeline of three steps, each independent, each compounding:
Step 1: Resize. Serve images at the dimensions they actually display, not the original resolution. A hero image displayed at 1200px wide should be served at 1200px (or 2400px for Retina). The original 4000px version stays in the asset library, never on the . Resizing alone typically reduces file size by 60-80%.
Step 2: Format conversion. WebP and AVIF encode the same visual information in fewer bytes than JPEG or PNG. WebP saves 25-35% over JPEG. AVIF saves 50% over JPEG with better quality at low bitrates. The <picture> element lets you serve AVIF to modern browsers and fall back to JPEG for the rest.
Step 3: Quality compression. Reducing JPEG quality from 100 to 80 cuts file size by 50-60% with no visible difference at display size. Most image optimization tools (sharp, squoosh, imgix) default to quality 75-85. Below 60, artifacts become visible on photos.
Combined savings: A 4MB source image resized, converted to WebP, and compressed at quality 80 becomes 40-80KB. That is a 50-100x reduction.