Image Optimization in Practice: Formats, Lazy Loading, and CDN

The problem

A lot of frontend advice turns image optimization into an automatic checklist:

• convert to WebP
• turn on lazy loading
• use a CDN

All of that can be correct.

But the way it is usually applied is still half guesswork.

Because an image does not only cost you a large file.

It costs you as part of the path until the user sees useful content.

Mental model

Images affect performance across four main layers:

• bytes to download
• time to decode
• layout space they occupy
• priority on the critical path

If you want the short version:

The question is not “how do I make the image smaller?” The question is “how do I make the right image appear at the right time for the lowest reasonable cost?”

That changes prioritization a lot.

Breaking the problem down

First decide which images are critical

Not every image deserves the same treatment.

Usually you have:

• a hero or primary image
• an above-the-fold image that is secondary
• a gallery or list below the fold
• a decorative image

The first two deserve more attention around priority and correct sizing.

The last ones can usually arrive later.

Format solves only part of the problem

A better format helps reduce bytes.

But it does not fix:

• oversized dimensions
• a late download
• bad priority
• layout shifting when the image arrives

So formats like WebP or AVIF do help.

They just do not solve the whole problem by themselves.

Correct dimensions matter more than people think

It is common to serve an image much larger than the real space it occupies on screen.

Then you pay for:

• more bytes
• more decode time
• more memory

with no relevant visual gain.

That is one of the most obvious optimizations and also one of the most forgotten.

Lazy loading has a right moment

Lazy loading is great when the resource is below the fold and does not need to compete on the first screen.

But applying lazy loading to the main image can delay exactly the content that should appear early.

That is a classic mistake.

The right reasoning is:

• critical image: prioritize it
• secondary image: evaluate it
• below-the-fold image: lazy loading usually helps

CDN helps in more than one way

A CDN is not only about geographic cache.

For images, it can help with:

• closer delivery
• better caching
• on-demand transformations
• size and format variants

So a good CDN reduces both operational and technical friction.

But it still depends on you requesting the right image, at the right size, with the right priority.

Simple example

Imagine a homepage with:

• a large hero image above the fold
• a small logo
• several card thumbnails far below the fold

The weak read is:

“I will put lazy loading on everything.”

The better read is:

• the hero is probably part of LCP, so it needs to arrive early and at the right size
• the logo can stay light and simple
• thumbnails below the fold can use lazy loading with no problem
• a CDN with transformation support can serve those thumbnails already sized correctly

Notice the difference:

the focus stops being “turn the technique on” and becomes “treat each image based on its role in the flow.”

Common mistakes

• Applying lazy loading to the main image on the page.
• Thinking a format change fixes wrong priority.
• Serving an image much larger than the real display space.
• Ignoring reserved dimensions and causing layout shift.
• Talking about CDN as if it automatically fixes a bad loading strategy.

How a senior thinks

Someone who thinks well about images usually follows this sequence:

• which image is part of the first relevant content?
• which image can wait?
• am I paying bytes, decode time, or layout cost for no reason?
• is the bottleneck the file, the priority, the dimensions, or the cache?

That helps avoid the trap of universal advice.

Seniority here means seeing an image as a resource with a clear role in the flow, not just a loose file to compress.

What the interviewer wants to see

They want to see whether you:

• can tell critical images from non-critical ones
• know when lazy loading helps or hurts
• understand format as part of the solution, not the whole solution
• can explain where a CDN really provides value

If you say something like “For the hero image I prioritize loading, for below-the-fold lists I delay them, and for both I try to serve the correct dimensions and format,” your answer already sounds more mature.

Good image optimization handles role, priority, and size. Not just file extension.

When everything becomes lazy loading, important content usually gets punished along with everything else.