Image Optimization for WordPress: Make Your Pages Load Faster

On this page

1. 1. Resize before uploading
2. 2. Compress
3. 3. Use modern formats
4. 4. Lazy load, but not the hero image
5. 5. Set image dimensions
6. 6. Serve responsive sizes
7. 7. Write useful alt text
8. 8. Use descriptive file names
9. Special cases

Images usually make up most of a web page's size. A single photo straight from a phone can be several megabytes, often more than the entire rest of the page. Optimizing images is the quickest, cheapest way to speed up most WordPress sites.

Taking your own photos? See how to prepare photos for your website.

1. Resize before uploading

If an image displays at 1200 pixels wide, there's no need to upload a 4000-pixel original. Resize photos to roughly the largest size they'll be shown at (hero images around 1600–2000 px wide, content images around 1200 px).

2. Compress

Compression reduces file size with little or no visible quality loss. Image optimization plugins can compress new uploads automatically and bulk-compress existing images. For photos, moderate compression is usually invisible to visitors.

3. Use modern formats

• WebP (and AVIF) files are much smaller than JPEG or PNG at similar quality, and are supported by modern browsers
• SVG for logos and icons: tiny and sharp at any size
• PNG only when you need transparency and SVG isn't suitable

4. Lazy load, but not the hero image

Lazy loading delays images until they're about to scroll into view, which speeds up initial loading. But the main image at the top of the page should load immediately. Lazy-loading it delays your Largest Contentful Paint. See Core Web Vitals explained.

Lazy loading applies to videos and embeds too; see lazy loading explained for what to lazy-load and what to leave alone.

5. Set image dimensions

Images should have width and height set so the browser reserves space for them. This prevents layout shifts (CLS) where text jumps as images load.

Missing dimensions are only one cause of jumping pages; fonts, ads, banners and sticky headers can shift content too. See how to fix Cumulative Layout Shift.

6. Serve responsive sizes

WordPress automatically creates multiple sizes of each image and lets browsers choose the right one for the screen. Make sure your theme and builder use this properly, so phones don't download desktop-sized images.

7. Write useful alt text

Alt text describes the image for screen readers and search engines. Describe what's shown, naturally: "Solar panels installed on a factory rooftop" beats "IMG_2041" or keyword stuffing. Decorative images can have empty alt text.

8. Use descriptive file names

stainless-steel-water-tank.webp tells search engines more than DSC00123.jpg.

Alt text and file names are only part of getting your photos found in search; see the image SEO guide for Google Images and Google Lens.

Special cases

• Online stores: hundreds of product photos add up. Consistent sizes and compression keep category pages fast.
• Galleries: use thumbnails in grids and load full-size images only when opened
• Sliders and background videos: heavy and often ignored. Consider a single strong image instead.

Images are usually the first thing tackled in a speed optimization project, often with dramatic results. For other causes of slowness, see why WordPress sites are slow.