How to optimize images for site speed
Images are usually the heaviest part of a page, so unoptimized photos are the most common reason a site feels slow. Optimizing them cuts page weight the most for the least effort. Start here if a speed test shows a large total page size dominated by images.
Check your site
-
Resize photos to the real container
Do not upload a 3000-4000 px photo if it displays in an 800 px block on the page. Before uploading, shrink the width in any editor to the size the image is actually shown at (roughly ×2 for Retina screens).
-
Compress your images
Keep JPEG for photos at quality 75-85, and use PNG only for graphics with transparency. Compress with a plugin (ShortPixel, Imagify) or by hand through a tool like Squoosh before uploading. You will not see the difference, but the file size drops several times over.
-
Move to WebP or AVIF
WebP and AVIF weigh 25-50% less than a JPEG of the same quality. In WordPress an optimization plugin generates the format; on LiteSpeed hosting, LiteSpeed Cache can serve WebP automatically, swapping it in for JPEG on browsers that support it.
-
Set width, height, and srcset
Add width and height attributes to the img tag so the browser reserves the space and the page does not jump while loading. The srcset attribute serves a smaller image on mobile; WordPress adds it automatically when the media library holds several sizes of the image.
-
Enable lazy loading
Images below the first screen should load only once the visitor scrolls to them. Modern WordPress adds loading="lazy" on its own; check that a theme or plugin has not turned it off. That way the browser does not spend time on photos that are not visible yet.
-
Clear the cache and check several pages
After optimizing, purge the site cache (LiteSpeed Cache) and CDN, then reload with Ctrl+F5. Go through the home page, an article, and a product page, since that is where heavy old images most often linger.
How to verify the result
Run your home page and a couple of inner pages through the TechGuard speed test before and after the changes: the page size and load time should drop noticeably. Compare the page weight in kilobytes, since images give the biggest gain.
Tip: Do not lazy-load the main above-the-fold image (a hero banner or logo): deferring the LCP image actually delays the page from appearing and hurts your Core Web Vitals.