Technote

Performance optimization Intro

Series Images that do not slow the site down Part 1 of 8

The right format makes images lighter without losing quality

Photographs and flat graphics compress on completely different principles. Choose accordingly and the file shrinks while the picture on screen does not change.

When someone asks a designer to “make the images smaller”, it usually sounds like a request to give up on quality. If all you do is drag the quality slider down, that is exactly what happens. But a large share of what makes a site heavy is not quality at all — it is the format, and that part costs you nothing. Saved in the right format, the same picture looks identical on screen and weighs considerably less.

Photographs and flat graphics are different problems

Compression schemes are designed around the nature of the image. A photograph is continuous tone: neighbouring pixels differ slightly, and lossy compression works beautifully because it discards differences the eye barely registers. A logo, icon, diagram or UI screenshot is the opposite: flat colour and hard edges. Lossy compression leaves ringing around those edges, and storing that ringing can make the file bigger rather than smaller.

The same compression produces opposite results depending on the nature of the image

The rule falls out of that. Photographs take a lossy format (JPEG, WebP, AVIF); flat graphics take a lossless one (PNG) or, better, vector (SVG). If you need transparency, PNG, WebP and AVIF can carry it — JPEG cannot.

What WebP and AVIF actually give you

WebP and AVIF are designed to hold the same perceived quality in fewer bytes. AVIF compresses more aggressively, which shows most on photographs, but it also takes noticeably longer to encode — a real cost when you are converting several hundred assets in one sitting.

WordPress handles uploaded WebP in core, and AVIF too where the server’s image library supports it. So this is a design decision that also requires one check with whoever runs the server. You only need to ask once.

Fallbacks still deserve a thought. Browser support is broad now, but email clients, older internal systems and some collaboration tools still choke on newer formats. The practical arrangement is modern formats for the website and a JPEG or PNG copy kept aside for newsletters and anything that leaves your own pages.

The decision, in one table

A format decision table — the last line is the most common mistake

Sorting out formats alone changes page weight noticeably. The wider performance reasoning lives in the performance archive, and overhauling the image pipeline of a site already in production is part of our optimization program.

Next part

With formats decided, dimensions come next. The following part covers the maximum pixel width to settle on before uploading — and what WordPress actually does when you hand it a full-size camera original.

More on this topic

All technotes

Performance optimization Practical

Who pays for the milliseconds a tag adds?

A tracking script does not stop at downloading. While it is parsed and executed the main thread is busy, and a busy page ignores fingers. That cost is…

Marketers 5 min read

Performance optimization Practical

The object cache: what Redis actually removes

Repeated identical lookups disappear. One slow query does not. Miss that distinction and you will wire up Redis and then ask why nothing got faster.

Developers 7 min read

Performance optimization Practical

This is how a landing page gets heavy

Nobody decides to make a landing page heavy. It accumulates: one addition per campaign, and nothing ever removed when the campaign ends.

Marketers 6 min read

₩270,000 · Join the program