Images typically account for 50–80% of a web page's total weight, which makes them the single biggest lever available for speeding up a WordPress site. Optimised properly, images load fast, score well on Core Web Vitals and contribute to better Google ranking. Left unoptimised — a 5 MB phone photo dropped straight into the Media Library — they tank Largest Contentful Paint, burn mobile data, and frustrate visitors. This guide covers format choice, pre-upload preparation, WordPress's built-in features, the image-optimisation plugins worth installing, and the alt-text practices that turn images into SEO assets rather than liabilities.
Why image optimisation matters · Choosing the right image format · Preparing images before uploading · Built-in WordPress image features · Image optimisation plugins · LiteSpeed Cache image optimisation · Alt text and image SEO · Lazy loading and above-the-fold handling · Monitoring image performance · Frequently asked questions
Three reasons, each measurable:
The good news: image optimisation on WordPress is straightforward. Choose the right format, resize before uploading, compress properly, enable the right plugins — all either free or one-time effort.
Different formats suit different content.
| Format | Best for | Trade-off |
|---|---|---|
| JPEG | Photographs, rich colour gradients | Lossy; smaller than PNG for photos; no transparency |
| PNG | Logos, graphics with sharp lines and text; images needing transparency | Lossless; larger files than JPEG for photos |
| WebP | Default for modern WordPress sites | 25–35% smaller than JPEG at same quality; universal browser support; supports both lossy/lossless and transparency |
| AVIF | Maximum compression where supported | Up to 50% smaller than JPEG; good browser support in 2026; emerging WordPress native support |
| SVG | Icons, logos, simple illustrations | Vector, infinitely scalable, tiny files; requires Safe SVG plugin for uploads |
| GIF | Simple animations only | Large files for complex content; MP4 video is usually better |
Use WebP as your default for photos and graphics. Best compression-to-quality ratio, universal browser support in 2026. Keep JPEG or PNG originals archived for future flexibility. Use SVG for logos and vector graphics. Only use AVIF where file-size savings matter significantly (hero images, heavy photo galleries) — but WebP is usually fine.
Most effective optimisation happens before the upload. Saving a megabyte per image, multiplied by hundreds of images, adds up fast.
If your content area is 800 px wide, do not upload 4000 px photographs. Upload a 1200–1600 px version — large enough for Retina/high-DPI displays, small enough to not waste bandwidth.
Resize before uploading:
After resizing, compress:
Target quality 80–85% for JPEG/WebP. Visually lossless for most photographic content; 60–80% file-size reduction vs uncompressed.
Photos from phones carry EXIF metadata: camera model, exposure settings, sometimes GPS coordinates. Upload GPS-tagged photos and visitors can see where the photo was taken. WordPress 6.3+ strips GPS automatically; other fields persist. Strip manually for privacy or to shave a few more KB.
WordPress includes several image optimisations automatically.
When you upload, WordPress generates: Thumbnail (150×150), Medium (max 300), Medium Large (max 768), Large (max 1024), Full (original). Customise in Settings > Media.
Since WordPress 5.5, all images and iframes get loading="lazy" automatically. Off-screen images load only when scrolled into view. Significantly reduces initial page weight. No plugin needed.
Exception: the first (hero) image on a page should not be lazy-loaded — that defeats LCP. WordPress and most themes handle this correctly.
WordPress adds srcset and sizes attributes to images from the Media Library. Browser picks the best-sized version for current viewport. Mobile visitors download smaller images; desktop visitors download larger. Automatic.
Since WordPress 5.8, upload WebP files directly. WordPress treats them as first-class media, generates all standard sizes automatically.
While built-in features cover the basics, dedicated plugins do more: bulk-optimise existing images, auto-convert to WebP on upload, apply advanced techniques.
Lossy, glossy or lossless compression. Bulk optimise existing images. Automatic on upload. WebP and AVIF conversion. Free tier: 100 images/month. Credits can be purchased for heavier use.
By the WP Rocket team. Three optimisation levels. Free tier: 25 MB/month (around 250 images). Paid plans scale.
Runs locally on your server (with appropriate PHP libraries) or via a paid cloud service. Free local option covers most needs.
By WPMU Dev. Free tier has limitations on bulk optimise (not batches) but good quality compression. Pro adds bulk, higher image resolution support.
Cloud-based — images are served through their CDN with on-the-fly optimisation. Easy setup, works on top of CDN infrastructure.
On smartxhosting.uk, LiteSpeed Cache's built-in image optimisation (via QUIC.cloud) replaces most dedicated plugins at no additional cost.
Visit a page, inspect an image in DevTools. The src should end in .webp when served to Chrome/Firefox. Safari gets JPEG/PNG in most cases unless AVIF/WebP is specifically supported.
Alt text is the description read by screen readers for visually impaired visitors and used by Google to understand image content. It is the single most important metadata field for images.
alt="" tells screen readers to skip.Title — shown on hover in some browsers. Less important than alt text; optional.
Caption — visible text displayed below the image. Good for photo credits and context.
Description — longer text on the image's attachment page. Rarely used unless running a photography portfolio.
Lazy loading is enabled by default on WordPress 5.5+. Benefits:
The main image visible when the page first loads (hero image) should not be lazy-loaded — lazy-loading the LCP image defeats the point. Add fetchpriority="high" and ensure loading="eager" for the hero.
WordPress's automatic behaviour handles this for images inserted via the Block Editor — the first image on a post is typically treated correctly. Manually added images via Custom HTML blocks may need attention.
For maximum LCP improvement, preload the hero image:
<link rel="preload" as="image" href="/wp-content/uploads/.../hero.webp" fetchpriority="high">
Add via a plugin (WPCode's Header section) or theme.json's HTML head injection. Some themes and LiteSpeed Cache handle this automatically.
Ongoing monitoring to catch regressions.
Run monthly on key pages. "Properly size images" and "Serve images in next-gen formats" diagnostics flag specific problem images.
Filter by Image. Sort by Size. Any image over 200 KB deserves investigation.
The Image audits in Lighthouse list images that are too large, not responsive, not using modern formats.
Shows URL groups with poor LCP — often caused by large hero images. Investigate and fix.
Should I convert all existing images to WebP?
Yes. Tools like LiteSpeed Cache (via QUIC.cloud) do this automatically in the background. 25–35% average file size reduction with no visible quality loss. Takes minutes to hours depending on library size.
Will converting images break anything?
No. WordPress serves WebP to modern browsers and falls back to original JPEG/PNG for older browsers. Originals preserved. Safe and reversible.
What image size is too big?
For full-width hero images: over 500 KB is excessive. For in-content images: over 200 KB is excessive. For thumbnails: over 50 KB is excessive. Typical WebP at good quality hits these targets easily.
Does lazy loading help every page?
Not every page, but most. Pages with many images below the fold benefit hugely. Pages with only a few images benefit less. Enabled by default; leave on.
Can I use SVG for product photos?
No — SVG is for vector graphics (logos, icons, illustrations). Product photos are raster; use JPEG or WebP.
Is it worth paying for an image CDN?
smartxhosting.uk's free CDN plus LiteSpeed Cache's image optimisation cover most needs. Dedicated image CDNs (Cloudinary, Imgix) add value for very image-heavy sites with complex responsive requirements, but most UK SMEs do not need them.
How do I test if images are actually optimised?
Chrome DevTools Network tab. Visit a page. Filter by image. Check the Size column and the file extension in the Name column. If images are served over 500 KB or still in JPEG/PNG for heavy photos, optimisation is not working.
What about decorative background images in CSS?
CSS background images do not benefit from lazy loading automatically. Consider using small file sizes, or use actual <img> tags with CSS positioning for decorative images.
Should I strip EXIF from all images?
Yes for privacy (GPS coordinates leaking your location is undesirable) and for a small file size reduction. WordPress 6.3+ handles GPS automatically. Other EXIF usually harmless.
Does WordPress work with AVIF images?
Supported since WordPress 6.5. Upload AVIF directly. Browser support in 2026 is strong (Chrome, Firefox, Safari). For safer cross-browser compatibility, WebP remains the default, with AVIF as an optional upgrade.
Launch your WordPress site on smartxhosting.uk
UK hosting with the Plesk WordPress Toolkit, LiteSpeed Cache, Redis object caching, free Let’s Encrypt SSL, free CDN and daily backups — from £2/month.
View WordPress hosting plans →