How to optimize WordPress images without losing quality
Upload each image at the size it is shown and in the format that suits it. WordPress then makes several sizes, lets the browser pick one and lazy-loads the rest. Add one plugin to compress and convert, back up before running it over old uploads, and check a real page.
- By
- WP Ministry
- Published
In short
- Most of the saving comes from dimensions. Do not upload an image far wider than the space it fills.
- JPEG suits photographs, PNG suits screenshots and logos. WebP and AVIF do both jobs in smaller files.
- WordPress already makes several sizes of each upload, lets the browser choose one, and lazy-loads images further down the page.
- WordPress does not turn a JPEG or PNG into WebP or AVIF. Conversion and compression are what an optimization plugin adds.
- Back up the uploads folder before a bulk optimization, and keep the plugin's copies of the originals until you have looked at the result.
- Check a real page afterwards, on a phone and on a large screen.
Images are usually the heaviest thing on a page. The HTTP Archive's yearly survey of the web finds that on a typical home page, images outweigh every other kind of file apart from video, scripts included. They are also where the waste is plainest: a photo several times wider than the space it sits in, saved in a format that does not suit it.
"Without losing quality" has a practical meaning here: a visitor looking at the page cannot tell the difference. Three things get you there. Send no more pixels than the screen will show. Pick the format that suits the picture. Compress as far as the eye does not notice, and no further.
Before you upload
The cheapest optimization happens before the file reaches WordPress.
Step 1: Resize the image to the space it will fill
Chrome's guidance on image delivery puts it this way: a page should never serve an image larger than the version shown on the visitor's screen, because anything more is wasted bytes. A photo straight from a phone or a camera is far larger than that. Open it in an image editor, or in the photo app that came with your computer, and reduce its width to what the page needs.
Leave some room for high-resolution screens, which show a sharper picture when the file holds more pixels than the space is wide. Twice the width of the space is a sensible upper limit.
Step 2: Choose the format
Use the table below. If you are unsure between two formats, WordPress's documentation suggests saving the image in both and comparing the file sizes.
Step 3: Lower the quality setting and look
When you save a JPEG, WebP or AVIF, the editor asks how hard to compress it. Move down from the top of the scale, look at the result at full size, and keep the smallest file that still looks right.
| Format | Use it for | Keep in mind |
|---|---|---|
| JPEG | Photographs | It removes detail to save space and has no transparency. Text, charts and sharp lines come out poorly. |
| PNG | Screenshots, logos, line art, anything with a transparent background | It keeps every pixel, so a photograph saved as PNG is usually a much larger file than the same photo as JPEG. |
| WebP | Either kind | It can remove detail or keep every pixel, and it supports transparency. Files are generally smaller than JPEG or PNG. |
| AVIF | Either kind | It compresses further than WebP. Your server has to support it before WordPress will accept it. |
The latest versions of the major browsers display WebP and AVIF. A visitor on an old browser may see nothing in their place. That is one reason to let a plugin do the conversion: it can keep the JPEG or PNG and hand it to the browsers that need it.
What WordPress does on its own
WordPress handles a good part of this already.
- It makes several sizes of every upload. These are thumbnail, medium, medium-large (768 pixels wide), large, and two more at 1,536 and 2,048 pixels. Your theme and plugins can register others. The thumbnail, medium and large dimensions are set under Settings, then Media.
- It lets the browser choose. Since WordPress 4.4, the image markup WordPress generates lists those sizes in a
srcsetattribute, so a phone can ask for a small file and a desktop for a larger one. An image whose address is typed into a template or a block of custom HTML carries only that one file. - It scales down very large uploads. When an upload is wider or taller than 2,560 pixels, WordPress makes a scaled copy at that limit and uses it as the largest size. The original file stays in the uploads folder, where it takes up disk space.
- It lazy-loads. WordPress adds
loading="lazy"to images that havewidthandheightattributes, and fills those attributes in where they are missing. The browser then fetches an image only as the visitor nears it, and the page does not jump as images arrive. Since WordPress 5.9 the first image in the content is left out, because delaying the picture at the top of the page makes the page feel slower. Since 6.3, WordPress also marks the image it judges to be the largest on screen withfetchpriority="high", so the browser fetches it early. - It accepts WebP and AVIF uploads. WebP has been accepted since WordPress 5.8 and AVIF since 6.5, provided the image library on your server supports the format. The smaller sizes are made in the same format as the upload.
Two things it does not do. It does not turn a JPEG or PNG into WebP or AVIF. And it does not go back over old uploads when your theme or your size settings change.
What an optimization plugin adds
A plugin does three things WordPress leaves alone. It compresses each file, either keeping every pixel (lossless) or removing detail the eye is unlikely to miss (lossy). It converts images to WebP or AVIF. Some also serve the images from a content delivery network.
Three from the WordPress.org directory, in alphabetical order, described as their own listings describe them:
| Plugin | Where the work is done | Free use | Converts to | Originals |
|---|---|---|---|---|
| EWWW Image Optimizer | On your own server, using compression tools that need PHP's exec() function. If the server cannot run them, through the maker's API. | Lossless compression and WebP conversion | WebP. AVIF comes with its paid CDN. | Local backups |
| Imagify | On Imagify's servers. The optimized file is sent back to your site. | Up to 20 MB of images a month, with a free account | WebP and AVIF | Kept in a backup folder and can be restored |
| ShortPixel Image Optimizer | On ShortPixel's servers | 100 credits a month, with an API key you sign up for by email | WebP and AVIF | Backed up on your server and can be restored |
Imagify chooses the balance between quality and file size for you, with lossless compression as an option. ShortPixel offers lossy, lossless and a middle setting it calls glossy, meant for photographers. EWWW's stronger compression is part of its paid plans.
How to choose between them:
- If you would rather your images did not leave your server, look at EWWW's local mode, and ask your host whether
exec()is allowed. - If your hosting plan is small, a service that does the work on its own servers keeps the load off yours.
- If you have a large library, work out what it will use. Each upload is stored in several sizes, so a monthly allowance goes faster than the number of pictures suggests.
Use one optimization plugin, not two. Compressing an already compressed image a second time removes more detail for very little saving.
Serving images from servers near your visitors is a separate step, and it does not make the files any smaller. See how to set up a CDN for WordPress.
The images already in your library
A plugin compresses new uploads as they arrive. The images you uploaded before need a bulk run.
Step 1: Regenerate the sizes first, if your theme or sizes have changed
WordPress does not remake old images when a new size is registered or a dimension changes. The Regenerate Thumbnails plugin does that from the dashboard, and its own listing recommends WP-CLI where you have command-line access. This command makes only the sizes that are missing:
To remake every size of every image, use
wp media regenerate --yes. Do this before you compress, because regenerated files are new and have not been through the plugin.bashwp media regenerate --only-missingStep 2: Try a few images
Optimize a handful from the Media Library and compare them with the originals at full size. If you can see the difference, choose a lighter setting.
Step 3: Run the bulk optimization at a quiet hour
All three plugins above can work through the whole library. A large one takes a while, and with a service it draws on your allowance.
Step 4: Keep the originals until you have looked
The plugin's backup is how you undo a result you do not like. It takes up disk space, so decide what to do with it once you are satisfied, not before.
Check the result
- Measure a page that has many images. Run it through PageSpeed Insights before and after. Its lab test is run by Lighthouse, which has an insight named "Improve image delivery" for images whose downloads are larger than they need to be. The figures from real visitors cover the previous 28 days, so they take weeks to move.
- Look at the markup. Right-click an image and choose Inspect. It should carry
srcset,widthandheight. Images further down the page should carryloading="lazy", and the large image at the top should not. - Check the format. In the browser's developer tools, open the Network panel and reload the page. The type shown for each image tells you whether WebP or AVIF is being served.
- Look at the pictures. Open the page on a phone and on a large screen. If an image looks soft or blotchy, restore it and compress it more lightly.
Images are one part of page speed. How to speed up WordPress covers the rest, and how to improve Core Web Vitals explains the measurements. For a store, product photos get their own section in how to speed up WooCommerce.
Images far larger than the space they fill are one of the ordinary reasons a site is slow. Our speed optimization service measures the pages you name before the work and again after it.
Common questions
Why does WordPress refuse my WebP or AVIF file?
The image library on your server does not support that format. Go to Tools, then Site Health, open the Info tab and expand "Media Handling" to see the list of supported formats. If the format is missing, ask your host to add it.
Can I undo compression if a picture looks bad?
Yes, as long as the plugin kept the original. Imagify and ShortPixel both say in their listings that an original can be restored from the backup. Without that copy, or a backup of your own, the detail that was removed is gone.
Do I need a plugin at all?
Not always. If you upload a few images a month, each sized for its space and saved in a suitable format, WordPress does the rest. A plugin earns its place on a site with many images, or with several people uploading who will not all resize first.