Image optimization

Image optimization means sizing and encoding pictures so they load quickly without looking soft. You resize the original before it hits the media library, serve WebP or AVIF when your stack supports it, and lazy-load everything below the fold. A CDN will not fix a huge PNG that never needed to be that large.

Fix the file before you upload it

Most slow heroes start as camera originals dropped straight into WordPress. PHP then builds several derivatives, and the theme still requests a width far smaller than the file you gave it. Resize the source first so a hero is rarely wider than about 1600px, even on a 2x phone display. Turn off WordPress image sizes your templates never use, because extra thumbnails burn inodes long before the disk fills up.

curl -sI https://example.com/wp-content/uploads/hero.png | grep -iE ‘HTTP/|content-type|content-length|cache’

Read content-length as the real weight of the response. Content-type shows whether WebP actually left the server. A cached 12 MB PNG is still a 12 MB download, only delivered faster. Note the byte count before you change plugins or CDN settings.

Use one WebP converter

Running two converters at once often leaves .webp files beside the originals while URLs still point at PNG. LiteSpeed may then cache the wrong variant. Choose either LSCache image features or AccelerateWP, or one dedicated plugin, and disable the rest. Purge the URL after you settle on a single owner. The plugin still will not rescue the next oversized upload, so keep training whoever adds media.

Lazy-load below the fold, not the LCP hero

Lazy-load images that sit below the fold. If the hero is your LCP element, do not lazy-load it, or first paint waits on a delay you introduced. Measure LCP after you fix width and conversion. If the hero is still late, check fonts, slider scripts, or a heavy CSS file rather than adding another image plugin.

Write down the hero’s byte size before you enable optimization. If the number barely moves, the original is still too large, so re-upload a sane width and purge. When paint stays slow after that, read TTFB versus LCP, because first byte and paint have different owners. Srcset does not replace a sensible original: a 2400px file offered at 720w can still download a lot on a 2x phone. Keep two or three generated sizes your templates actually use instead of every default WordPress size.