Ahosting Logo
Knowledge Base

How to Optimize Images and the Media Library

Resizing beats compressingResize firstCompress onlyA phone photo4000 pixels wide, displayed at 800still 4000 pixels wideSavingmost of the file, immediatelya fractionVisible differencenone, at display sizesometimes, if pushed hardDo bothyes, in this orderWordPress also generates several sizes of every upload, so an oversized original multiplies across the whole library.

Images are almost always the largest thing a page downloads, and on most sites they are larger than they need to be by a factor of five or ten. Fixing that is the single biggest performance improvement available to someone who is not a developer.

It is also mostly a habit instead of a plugin.

Resize before uploading

This is the part plugins cannot fully rescue.

A photo from a phone is around 4000 pixels wide. Displayed in a blog post it occupies perhaps 800. The other 3200 pixels are downloaded, decoded, and discarded, on every visit.

Resize to roughly the largest size it will be displayed at, 1600 pixels wide covers most full-width uses, before it goes anywhere near WordPress. Every step afterwards works on a smaller file, and the whole media library stays manageable.

Choose the right format

WebP for almost everything. Substantially smaller than JPEG at the same quality, and supported by every current browser.

JPEG for photographs where you need maximum compatibility.

PNG only when you need transparency or the image is a screenshot with sharp text. A photograph saved as PNG is often five times larger than it needs to be, and this is a very common mistake.

SVG for logos, icons and diagrams. It is text, it scales perfectly, and it is usually tiny. Do not accept SVG uploads from untrusted users though: an SVG can contain scripts.

What WordPress does on upload

Every upload generates several resized copies: thumbnail, medium, large, plus whatever your theme registers.

A theme with six custom sizes turns one upload into eight files on disk. That is why a media library of 500 images occupies far more than 500 images' worth of space.

Look at which sizes your theme actually uses and disable the ones it does not under Settings → Media. This does not shrink existing files. It stops the next thousand uploads from doing it.

Compression plugins: what they can and cannot do

An optimisation plugin recompresses images and often converts them to WebP automatically. Worth having, with realistic expectations.

It can reduce file size significantly without visible quality loss, and convert your existing library in bulk.

It cannot undo the fact that a 4000-pixel image is being served where 800 was needed. Resizing beats compressing, every time.

Prefer one that compresses on your own server if your plan allows it. Services that upload your images elsewhere for processing work well and add a dependency, and they usually charge per image once you pass a free tier.

Lazy loading

Images below the visible area are not loaded until the visitor scrolls toward them. WordPress does this by default, and it is a genuine improvement on a long page.

One correction worth making: exclude the image at the top of the page from lazy loading. Delaying the largest visible image makes the page feel slower, which is the opposite of the intent, and it is measured directly by page-speed tools.

Most optimisation plugins offer a setting for this. It is worth finding.

Always set width and height

When an image has no dimensions in the markup, the browser does not know how much space to reserve. Text renders, then the image arrives and pushes everything down. The jump that makes people click the wrong thing.

WordPress adds dimensions automatically for images inserted through the editor. Images added by a theme or a page builder sometimes lack them, and that is where the jumping usually comes from.

Alt text

Alt text describes the image for screen readers and for search engines. Fill it in for anything meaningful.

Describe what the image shows, in a sentence, as you would to someone on the phone. Do not stuff keywords. It reads badly to a person using a screen reader, which is the audience that matters most here.

Leave it empty for purely decorative images. An empty alt attribute is correct and tells assistive software to skip it; omitting the attribute entirely is not the same thing.

The media library grows and never shrinks

Deleting a post does not delete its images. Uninstalling a page builder leaves its uploads. Over years, a media library accumulates files nothing references.

Cleanup plugins can find unused media, and they are genuinely risky: an image referenced only inside a page builder's stored layout can look unused to a scanner that does not understand that format.

Take a backup before running one, and review the list rather than accepting it. Managing WordPress backups walks through having something to go back to.

When uploads fail

Two limits produce this, and they are different.

A file larger than the PHP upload limit fails immediately with a size message. There is more on raising it, including the second value people forget in configuring PHP settings.

A large image that fails while processing is running out of memory during resizing, not during upload. The symptom is an HTTP error after the upload appears to complete. Resizing the image before uploading avoids it entirely.

The order that gets results

Resize before uploading. Serve WebP. Turn off the image sizes your theme does not use. Then add a compression plugin.

Doing it in that order means the plugin has little left to do, which is the sign it was done properly. There is more on what to fix next, once images are no longer the problem in optimizing WordPress performance.

Images are one third-party weight; fonts and scripts loaded from elsewhere are another. For that, see How to Serve Fonts and Third-Party Assets Locally.

Beyond file size, the count is what an account usually reaches first, because one upload becomes several files. See How to Manage a Large WordPress Media Library.