How do you optimise images for WordPress? Resize each image to the largest size it is actually displayed at, compress it, save it as WebP, give it descriptive alt text, and let WordPress lazy-load images below the fold while loading the main image straight away.
Images are usually the heaviest part of a web page. On the sites I audit, oversized images are the most common reason a page feels slow on mobile data.
The good news is that image problems are among the easiest to fix.
Step 1: Resize before you upload
A photo from a modern phone is often 4000 pixels wide or more. Most website layouts never show an image wider than about 1200 to 1600 pixels.
Use these as rough guides:
| Where the image appears | Suggested width |
|---|---|
| Full-width hero banner | 1600 to 1920 px |
| Image inside a blog post | 1200 px |
| Team photo or card image | 600 to 800 px |
| Logo | Use SVG if possible, otherwise about twice its display size |
WordPress automatically creates smaller copies of every image you upload and serves the right one to each device. That helps, but it still keeps the huge original. Resizing first keeps your media library lean and your backups smaller.
Step 2: Choose the right format
- WebP is the best default today. It’s much smaller than JPEG at the same quality and every modern browser supports it. WordPress accepts WebP uploads.
- AVIF compresses even better. WordPress supports it too, but check that your server can process it before you rely on it.
- JPEG is fine for photos if you can’t use WebP.
- PNG is for graphics that need transparency or sharp edges. Never use it for photos; the files are enormous.
- SVG is ideal for logos and icons. Only upload SVGs from trusted sources, as they can contain code.
Step 3: Compress
Compression removes data your eye won’t notice. A quality setting around 75 to 82 is usually indistinguishable from the original for web photos.
You can compress before uploading with a free tool, or use an image optimisation plugin that compresses and converts to WebP automatically on upload. A plugin is easier if several people add images to the site.
Aim for most content images to be under about 200 KB, and hero images under about 300 KB.
Step 4: Lazy load, but not everything
Lazy loading means images further down the page only load as the visitor scrolls towards them. WordPress adds this automatically to most images.
The exception is the main image at the top of the page. Lazy-loading it delays your Largest Contentful Paint, one of the Core Web Vitals. WordPress tries to skip lazy loading for the first images automatically, but page builders and sliders sometimes override this. Check the hero image isn’t marked as lazy.
Step 5: 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’s there, in plain language.
- Good: “Team member repairing a laptop at the Cebu City office”
- Unhelpful: “image1” or a list of keywords
Decorative images, such as background shapes, can have empty alt text.
Step 6: Name your files sensibly
Rename files before uploading. wordpress-maintenance-dashboard.webp tells search engines more than IMG_20261003_0915.jpg. Use lowercase and hyphens.
Common image mistakes
- Uploading straight from the phone. Several megabytes per photo.
- Sliders full of large images. Every slide loads, even though most visitors only see the first. A single strong hero image usually performs better.
- Background images in page builders that skip WordPress’s responsive image sizes, so phones download the desktop version.
- Images scaled down with CSS. A 3000 px image shown at 300 px still downloads at 3000 px.
- Stock photos with heavy compression artefacts that look worse than a decent phone photo of your real team.
Fixing an existing media library
If your site already has hundreds of large images, you don’t have to start again. An image optimisation plugin can bulk-compress and convert existing images. Take a backup first. See how to back up WordPress properly.
Then start with the pages that get the most visitors. Fixing the homepage and your top five pages delivers most of the benefit.
For the other causes of a slow site, read why your WordPress site is slow. If you’d rather hand it over, image and speed optimisation is part of my WordPress support and maintenance.
Frequently asked questions
Will compressing images make them look blurry?
Not at sensible settings. A quality setting around 75 to 82 looks the same to most people on a screen. Check a few images after compressing and adjust if needed.
Should I use a CDN for images?
If many of your visitors are far from your server, a CDN helps by serving images from a location near them. Many hosts include one.
What about images in WooCommerce products?
The same rules apply. Use consistent dimensions for product images, usually square, so the shop grid lines up and the files stay small.
Does WordPress convert images to WebP automatically?
Not by default for JPEG uploads. You can upload WebP files directly, or use a plugin that converts images to WebP when they’re uploaded.
About the author
Vincent Earl Panoncial is a WordPress developer and the founder of VEP Studio. He has built and maintained 100+ WordPress websites, most of them at digital marketing agencies, and now works directly with businesses on development, maintenance and webmaster services.
Need a hand with your WordPress site?
Tell me what your website needs and you’ll get a clear plan and an honest answer on cost before any work starts. Get a free consultation →
Featured photo by Zulfugar Karimov on Unsplash.
