Images in WordPress: size, format and loading

What you'll achieve

• upload images at the right size from the start;
• understand what WordPress does with them and what settings it has;
• use WebP or AVIF without leaving visitors with missing images;
• write alternative text, useful both for Google and for people who can't see the image.

What WordPress does on its own

• Copies in several sizes. For every uploaded image, WordPress makes a few smaller copies (thumbnail, medium, large), and on the page the browser picks the one that suits the screen.
• Scaling down very large images. An image wider or taller than 2560 pixels is automatically scaled down to 2560, and the original also stays on the server.
• Lazy loading. Images further down the page get loading="lazy": they only download when the visitor reaches them.
• WebP and AVIF. The media library accepts both formats, if PHP's image library can process them. If an error appears when you upload a WebP or AVIF, write to us with your website's PHP version.

The steps

A. Prepare the image before uploading

1. Choose the width based on where it goes on the page. For a full-screen-width image, 1920–2400 pixels is enough; for an image within the text, 1200; for a product thumbnail, 800–1000.
2. Save it compressed: JPEG at a quality of around 80 or, better, WebP. Details about formats and programs in WebP and AVIF images: the same look, fewer kilobytes.
3. Give the file a clear name, in lowercase with hyphens: cabinet-stomatologic-sala-tratament.webp, not IMG_4031.jpg. The name appears in the image's address.

B. Check the settings in Settings » Media

4. In WordPress, open Settings » Media. There are three sizes: Thumbnail, Medium and Large. Leave the defaults, unless your theme asks for something else.
5. If the theme or page builder has its own sizes, they are added on top of these. Each size means one more copy of every image, so more space used.

C. Upload the image and fill in the alternative text

6. Under Media » Add Media File, upload the image.
7. Fill in Alternative Text: a short sentence about what can be seen, for example “The clinic's treatment room, with the dental chair”. Don't string keywords together. For purely decorative images, leave it empty.
8. Add the image to the page. For the large image at the top of the page, make sure it isn't lazy-loaded: it's the first thing the visitor sees and it counts toward LCP (see Core Web Vitals explained: LCP, INP and CLS). Modern themes and WordPress do this on their own for the first image.

D. Clean up the media library

9. In Media » Library, switch to list view and sort by date. Images uploaded more than once, or ones you tried and didn't use, can be deleted.
10. Before deleting in bulk, back up the website (the “Backups” tab in Enhance). An image deleted from the library disappears from every page it appears on.
11. You can see how much space the wp-content/uploads folder takes up in How much space you use and what takes it up.

Image optimization plugins

An optimization plugin automatically compresses images on upload and can create WebP or AVIF copies. It's useful if you upload a lot of images or if several people add content to the website. Good to know beforehand:

• some send the images to their own servers for processing; read what the plugin's description says about this;
• some have a free monthly limit and require a subscription beyond it;
• the WebP or AVIF copies are added next to the original, so the uploads folder grows.

How to choose a trustworthy plugin: The plugins a WordPress website needs.

If something doesn't work

• On upload you see “The uploaded file exceeds the upload_max_filesize directive”. The file is larger than your website's PHP allows. Make the image smaller (step 1) or raise the limit (see The PHP version and PHP settings).
• “The server cannot process the image”, or the image appears without thumbnails. The image is very large or in a format the server can't process. Scale it down below 2560 pixels, save it as JPEG or WebP and upload it again.
• Images uploaded from an iPhone don't show. The iPhone saves in HEIC by default. Send them as JPEG (on the iPhone: Settings » Camera » Formats » Most Compatible) or convert them first.
• Images look blurry. The theme uses a smaller size than the space on the page. Upload the image at the right width or increase the Large size in Settings » Media; older images keep their old copies until you regenerate them.
• Your space is full. See How much space you use and what takes it up.