How to compress images for WordPress

Why your website images are too large

Most slow pages are not slow because of the theme or the hosting. They are slow because of the photos. A picture taken a minute ago on a modern phone is typically 3 to 5 MB, sometimes more if it was shot in a high-resolution mode. It arrives at around 4000 × 3000 pixels, because the camera is built to let you print it or crop into it later, not to show it in a blog post.

Now look at where that image actually ends up. On a typical website, the content column is somewhere between 800 and 1600 pixels wide. A blog article in a standard WordPress theme rarely displays images wider than about 1200 pixels; a full-width hero banner may need 1600, occasionally 1920 on very large screens. A product thumbnail in a grid may only be 300 or 400 pixels across. In all of these cases, the visitor’s screen throws away most of the pixels you sent.

That is the root of the problem when your website images are too large. A 4000-pixel-wide photo contains roughly six times as many pixels as a 1600-pixel version of the same shot, and every one of those pixels has to travel over the network, often a mobile connection, before the page looks finished. For an image that will be shown at 1200 pixels, a file of a few hundred kilobytes is plenty; for most photos in an article, well under that. Put differently: what the page needs is not even a tenth of what the phone produced.

WordPress does try to help. When you upload, it creates several smaller copies (thumbnail, medium, large) and, since version 5.3, it scales down anything wider than 2560 pixels. But it keeps your original file on the server, it does not choose a better format for you, and 2560 pixels is still far wider than most content columns. If you upload a 5 MB photo, you still store a 5 MB photo, and some themes, page builders and galleries will happily serve the full-size version. The reliable fix is to prepare the image before it ever reaches the Media Library.

A quick self-check before uploading: open the file’s properties and look at two numbers. If the width is above 2000 pixels or the size is above 1 MB, and the image is going into an ordinary page or post, it almost certainly needs work. If you are working from iPhone photos, they may also be in HEIC, which many sites will not accept; we cover that separately in how to convert HEIC to JPG.

Three ways to optimise images for the web, in order

When people talk about how to optimise images for the web, they often jump straight to the quality slider. That is the lever with the smallest effect. There are three, and the order matters.

1. Reduce the longest side. This is the one that changes the file size the most and the one you notice the least. File size grows with the number of pixels, and the number of pixels grows with the square of the width: halve the width and you are left with a quarter of the pixels. Going from 4000 to 1600 pixels wide removes most of the data before any compression has even started, and on screen the result looks identical, because the browser was going to shrink it anyway.
2. Choose the format. The same 1600-pixel image can be noticeably smaller as WebP or AVIF than as JPEG at a similar visual quality, and many times smaller than as PNG. This lever costs nothing in appearance if you pick sensibly; the next section explains how.
3. Lower the quality. Only now does the quality setting come in. For photos, values around 75 to 85 are usually indistinguishable from the original at normal viewing size. Below that, you start to see blockiness in skies, soft gradients and around text. Push it too far and you trade a few kilobytes for an image that looks cheap.

Why does the order matter? Because if you start with quality, you end up crushing a huge image to hit a target size, and the artefacts become visible. If you start with dimensions, the file is already small and you can keep a generous quality setting. The rule of thumb: resize first, pick the format second, adjust quality last.

How wide should you go? Take the widest the image will ever be displayed and allow for high-density screens. For an article column of 800 pixels, exporting at 1600 covers sharp displays without waste. For a full-width banner, 1920 to 2400 is reasonable. For a product grid, 800 to 1000 pixels lets the image work in the grid and in a zoom on the product page. If you are preparing shots for a shop, our guide to white background product photos covers the rest of the workflow.

One warning in the opposite direction: you cannot reverse this. If you later need a larger version for print, a photo already reduced to 1200 pixels has lost that detail. Keep your originals in a folder outside the website. And if all you have left is a small image, you can upscale an image with AI, but it is always better to start from the original file.

Which format to upload: JPEG, WebP, AVIF or PNG

The format decision is simpler than it looks. There are four candidates, and each has a clear job.

• JPEG: use it where you need total compatibility. Every browser, every email client, every social platform and every old plugin understands JPEG. If an image will be downloaded, attached, or reused outside your website, JPEG is the safe choice. It does not support transparency.
• WebP: the balanced choice for the web. All current browsers display it, WordPress has accepted WebP uploads since version 5.8, and for photos it is usually smaller than JPEG at the same visual quality. It also supports transparency, which makes it useful for cut-out product shots. For most images on a modern site, this is the default answer.
• AVIF: for when weight is what matters most. It generally produces the smallest files for photos, especially at moderate quality, and WordPress has accepted AVIF uploads since version 6.5. The trade-offs: encoding is slower, some older browsers and tools do not open it, and your hosting must support it for WordPress to create the resized copies. Use it for large hero images and heavy galleries where every kilobyte counts.
• PNG: only when you need transparency or pixel-exact graphics, such as a logo, an icon, a screenshot with sharp text, or a product cut-out that must sit on any background. For an ordinary photo, PNG is the worst option: lossless compression means the file stays several times heavier than a JPEG that looks the same.

A common mistake is uploading screenshots and cut-outs as PNG and then wondering why the page is heavy. If an image has transparency, WebP keeps it at a fraction of the size. If it has no transparency, there is rarely a reason to use PNG at all.

Transparency usually comes from removing a background. If you need to remove the background from a photo for a product or a profile picture, export the cut-out as PNG or WebP with transparency, and only then compress it. Flattening it onto white and saving as JPEG is also fine if the page background is white anyway: that is often the lightest result of all.

Metadata: what your phone hides in every photo

Every photo from a phone carries a block of hidden information called metadata, mostly in EXIF format. It records the date and time the picture was taken, the make and model of the phone, the lens, exposure settings and, if location services were on for the camera, the GPS coordinates of where you were standing. Some files also include an embedded preview image and editing history.

There are two reasons to strip it before publishing.

• Weight. Metadata and embedded previews add kilobytes to every file. On a single large photo that hardly matters; on a page with dozens of small thumbnails it can be a noticeable share of each file.
• Privacy. A photo of your garden, your shop counter or your child’s bedroom, published with its coordinates intact, tells anyone who downloads it exactly where it was taken. Some platforms strip this automatically; a self-hosted website generally does not, and WordPress keeps the original file as you uploaded it.

There is one piece of metadata you should keep: the ICC colour profile. It tells the browser which colour space the pixel values belong to. Many recent phones save photos in a wide-gamut space (Display P3) rather than standard sRGB. If you remove the profile, the browser assumes sRGB and reads the numbers wrongly: reds and greens lose saturation, skin tones turn slightly grey, and a product photo no longer matches the real product. The profile itself is small, so keeping it costs almost nothing.

The right setting is therefore not “remove all metadata” but remove metadata, keep the colour profile. Date, camera model and location go; the information that keeps the colours correct stays. If you are preparing images for print rather than for screens, colour behaves differently again; our article on RGB to CMYK for print explains why.

How to compress images for WordPress with Airpic

Here is the whole process with Airpic’s compressor. It runs in the browser, needs no account and no plug-in on your WordPress site, and it is completely free: processing and downloading, with no credits used. It accepts JPG, PNG (including transparency and 16-bit), WebP, TIFF, HEIC and AVIF, applies the phone’s orientation so photos do not come out sideways, and keeps the ICC profile.

1. Open the tool and add your photo. Drag it in, choose it from your files or paste it with Ctrl+V.
2. Set the maximum side. This is the first lever and the most important. Enter the longest side you need: 1600 for an article image, 1920 to 2400 for a full-width banner, 800 to 1000 for a product grid.
3. Choose the output format. WebP for most web images, AVIF if weight is the priority, JPEG if the file has to work everywhere, PNG only if you need transparency.
4. Set quality or a target size. Either move the quality slider (start around 80 for photos and lower it while it still looks right), or type a target size in KB and let the tool find the quality that fits. A target size is handy when a theme, a marketplace or a client gives you a limit.
5. Tick “remove metadata”. Date, camera and location are removed; the colour profile is kept.
6. Process and compare. Compression runs on CPU and takes a few seconds. You see the before and after side by side, with the new file size, so you can check skies, faces and text before downloading.
7. Download and upload to WordPress. Give the file a descriptive name before uploading and fill in the alt text in the Media Library.

Your file is deleted one hour after download, one day at the latest, and is never used for training; processing happens on servers in the European Union. For a deeper look at the settings, read the guide on how to compress images for the web without losing quality. When you are ready, compress images for WordPress with Airpic and check the difference on your next page load.

FAQ

Keep reading