WordPress Image Optimization:Formats, Sizes and Lazy Loading

To optimise images in WordPress: upload them close to the size they are displayed at, compress them, serve modern formats such as WebP or AVIF, let WordPress provide responsive sizes, and lazy-load images below the fold while loading the main image straight away. Images are usually the largest part of a page, so this is often the quickest performance win.

Why image size matters

A photo straight from a phone camera can be 4–8 MB and over 4000 pixels wide. Displayed in a 1200-pixel-wide content area, most of that data is wasted, but visitors still download it. Large images slow the Largest Contentful Paint (LCP), use mobile data and increase hosting bandwidth.

Step 1: Choose the right format

Format	Best for	Notes
WebP	Photos and graphics	Widely supported; usually much smaller than JPEG at similar quality
AVIF	Photos	Often smaller than WebP; encoding is slower; supported in current major browsers
JPEG	Photos (fallback)	Universal support
PNG	Screenshots, images needing transparency	Large for photos
SVG	Logos and icons	Vector; WordPress does not allow SVG uploads by default for security reasons

WordPress supports uploading WebP (since 5.8) and AVIF (since 6.5), provided the server's image library supports them.

Step 2: Resize before or on upload

• Find the largest width at which the image will appear (for example the content column or a full-width hero).
• Resize the original to roughly that width, or up to about twice that for sharp display on high-density screens if needed.
• WordPress scales very large uploads down automatically (above 2560 pixels by default), but uploading sensibly sized images saves processing and storage.

Step 3: Compress

Compression reduces file size by removing detail the eye barely notices. Options:

• an image optimisation plugin that compresses on upload and can convert to WebP or AVIF;
• server-side optimisation offered by some caching plugins (for example on LiteSpeed servers);
• compressing on your computer before uploading.

For most photos, a quality setting around 75–85 gives a good balance. Check results visually on important images.

Step 4: Use responsive images

When you insert an image, WordPress generates several sizes and adds srcset and sizes attributes, so phones download a smaller version than desktops. To get the most from this:

• insert images through the editor rather than hard-coding them;
• avoid themes or builders that output only the full-size image;
• regenerate thumbnails if you change theme image sizes.

Step 5: Lazy-load correctly

WordPress adds loading="lazy" to most images automatically, so images below the fold load only when the visitor scrolls near them. The important exception is the main image at the top of the page (the LCP image): it should load immediately, and recent WordPress versions try to detect it and add fetchpriority="high". Check that your theme or optimisation plugin does not lazy-load or delay the hero image, because that makes LCP worse.

Step 6: Prevent layout shift

Images should have width and height attributes (WordPress adds them for inserted images), so the browser reserves space before the image loads. Missing dimensions cause content to jump, which hurts Cumulative Layout Shift. See Core Web Vitals explained.

Step 7: Write useful alt text

Alt text describes the image for people using screen readers and for search engines. Describe what the image shows and why it matters on the page; do not stuff keywords. Decorative images can have empty alt text. See website accessibility basics.

Step 8: Clean up the media library

Many themes and plugins register extra image sizes, each creating another file per upload. Remove sizes you do not use, delete unused media, and keep an eye on disk usage and inode counts. See how much hosting storage and bandwidth do you need.

Worked example: one blog post's images

A blog post has a hero image and eight photos taken on a phone.

	Before	After
Hero image	4.8 MB JPEG, 4032 px wide	190 KB WebP, 1600 px wide, loaded with high priority
Eight photos	3–5 MB each, about 32 MB total	80–150 KB each in WebP, about 900 KB total, lazy-loaded
Total page weight	about 38 MB	about 1.5 MB
Mobile LCP (lab)	over 6 s	about 2 s

Steps used: resize to 1600 pixels before uploading, let an optimisation plugin convert to WebP, insert images through the editor so srcset is generated, and leave the hero image out of lazy loading.

Bulk-optimising an existing media library

1. Back up the uploads folder and the database.
2. Choose one optimisation plugin and configure quality (around 80) and WebP or AVIF conversion.
3. Run the bulk optimisation in batches, preferably at a quiet time, because it uses server resources.
4. Check a sample of images visually, especially product photos and images with text.
5. Remove unused image sizes in the theme or plugin settings, and consider regenerating thumbnails.
6. Measure page weight and LCP on a few pages before and after.

Quick checklist

• Images uploaded near display size
• Compressed, served as WebP or AVIF where possible
• Inserted through the editor so srcset works
• Lazy loading on, except for the main above-the-fold image
• Width and height present
• Meaningful alt text
• Unused image sizes and media removed

Frequently Asked Questions

Should I convert all my old images to WebP?

It is worthwhile on image-heavy sites. Optimisation plugins can convert existing images in bulk and serve WebP to supporting browsers. Back up first.

Does image compression reduce quality?

Lossy compression removes some detail, but at sensible settings the difference is hard to see. Use lossless or higher quality for images where detail matters, such as product close-ups.

Will a CDN optimise my images automatically?

Some CDNs offer image resizing and format conversion, often as a paid feature. Without it, a CDN only delivers the files you give it.

Related reading

Images are one part of how to speed up a WordPress website. For the WordPress overview, see WordPress hosting: what it is and how to choose, and compare ServerNeed WordPress hosting.

Sources

• web.dev: Optimize Largest Contentful Paint
• MDN: Image file type and format guide