Quick answer: Every time you upload an image, WordPress saves the original and creates several resized copies: thumbnail (150 by 150 pixels, cropped), medium (up to 300 pixels), medium large (768 pixels wide, added in WordPress 4.4) and large (up to 1024 pixels), plus any extra sizes your theme or plugins register. Set these sizes to match the spaces in your theme, upload images at a sensible size rather than straight from the camera, and regenerate old thumbnails whenever the sizes change. That keeps images sharp, layouts tidy and pages fast.
Images are one of the most common causes of problems on WordPress sites. Blurry featured images, product photos cropped in odd places, a blog grid where every thumbnail is a different height, or pages that take ages to load because a five megabyte photo is being shown in a 300 pixel box. Almost all of these come down to how image sizes are set up.
How WordPress handles images
When you upload a picture to the media library, WordPress keeps your original file and then generates a set of smaller copies. Each copy is a named image size. When a theme displays an image, it asks for a particular size by name, and WordPress serves that file.
The default sizes
Under Settings, Media you will find three sizes you can change:
- Thumbnail: 150 by 150 pixels by default, cropped to exactly those dimensions.
- Medium: up to 300 by 300 pixels, scaled to fit without cropping.
- Large: up to 1024 by 1024 pixels, scaled to fit.
WordPress 4.4 added a fourth size, medium_large, at 768 pixels wide. It does not appear on the settings screen, and it exists mainly to support responsive images.
Theme and plugin sizes
Themes and plugins can register their own sizes with the add_image_size() function. A theme might add a size for its homepage slider, another for blog grid cards and another for featured images on single posts. WooCommerce adds its own catalogue, single product and thumbnail sizes, which you can change under its product settings.
Cropped versus scaled
Each size is either:
- Hard cropped: the image is resized and then trimmed to exact dimensions. Good for grids where every item must match.
- Soft cropped (scaled): the image is resized to fit within the dimensions, keeping its proportions. Good for content images where you do not want anything cut off.
Responsive images since WordPress 4.4
Since version 4.4, WordPress automatically adds srcset and sizes attributes to images in your content. These list the available sizes of each image, so the browser can choose the smallest file that will look sharp on the visitor’s screen. A phone might load the 768 pixel version while a large desktop screen loads the 1024 version.
This works best when WordPress has a good range of sizes to choose from, all with the same proportions as the original. It is one reason to think carefully before changing or removing default sizes.
Setting sizes to match your theme
Measure the spaces
Find out how wide images actually display in your theme:
- The main content column on posts and pages.
- Featured images at the top of posts.
- Thumbnails in blog lists, related posts and widgets.
- Product images on shop and product pages.
Your theme’s documentation may list these. If not, use your browser’s inspector to check the width of each container at full desktop width.
Allow for high resolution screens
Retina and other high density screens show twice as many pixels in the same space. If a box is 400 pixels wide, a 400 pixel image will look soft on those screens. Creating sizes at around double the display width, or relying on srcset to provide a larger option, keeps images crisp.
Match the proportions
If your blog grid shows images at 3 by 2, set the thumbnail or custom size to a 3 by 2 crop, such as 600 by 400. Mixed proportions are what cause uneven grids.
Adding a custom image size
If your theme does not provide a size you need, a developer can add one in a child theme’s functions.php:
add_image_size( 'card', 600, 400, true );
The true makes it a hard crop. The new size can then be used in templates with the_post_thumbnail( 'card' );. If you are working on a bespoke theme, our custom WordPress theme guide explains how this fits into the wider build, and our article on the WordPress template hierarchy shows which template file controls each page.
Set the featured image size for the theme with set_post_thumbnail_size().
Regenerating thumbnails
WordPress only creates sizes at the moment of upload. If you change a size in the settings, switch theme, or add a custom size, your existing images will not have the new versions. Templates will then fall back to the nearest size, which often looks wrong.
The Regenerate Thumbnails plugin fixes this by recreating every size for every image in the media library. On large libraries, run it at a quiet time, as it can take a while and put load on the server. Developers can do the same from the command line with WP-CLI using wp media regenerate.
Keeping image files light
Correct sizes help, but the files themselves matter too.
Resize before upload
There is rarely any need to upload a 5000 pixel photo straight from a camera. Resize to around 2000 pixels on the longest side before upload, unless you specifically need more for a full width banner. This also saves server space, as every size is generated from the original.
Compress images
Tools such as TinyPNG, ImageOptim or the EWWW Image Optimizer and WP Smush plugins reduce file size without visible loss of quality. JPEG suits photos; PNG suits graphics with flat colours or transparency.
Use the right size in the editor
When you add an image to a post, the editor offers a size dropdown. Choosing “Full Size” for an image shown in a narrow column wastes bandwidth. Pick the size closest to the display width.
Lazy loading
For long pages with many images, a lazy load plugin delays images below the fold until the visitor scrolls near them. This speeds up the first view of the page. Our WordPress speed optimisation guide covers this alongside caching and other fixes.
Common problems and fixes
- Blurry featured images. The theme is using a size smaller than the display space. Increase the size or register a larger one, then regenerate.
- Heads cut off in thumbnails. Hard crops cut from the centre. Use a soft crop for portraits, or crop manually in the media editor.
- Uneven grids. Images have different proportions. Use a hard cropped size for the grid.
- Huge media library. Too many registered sizes from old themes and plugins. A developer can remove unused sizes and clean up the extra files.
- Images stretched on mobile. The theme CSS sets a fixed width. Use
max-width: 100%andheight: auto.
FAQ
Can I stop WordPress creating some sizes?
Yes. Setting a size to zero in Settings, Media stops it being created. Be careful, as themes and responsive images may rely on it.
Does changing sizes affect old posts?
Not until you regenerate thumbnails. Images already inserted in posts keep the file they used, unless the new size has the same name.
What size should my images be for WordPress?
There is no single answer, as it depends on your theme. Match sizes to the widths your theme displays, roughly double for high resolution screens.
Want images that look sharp and load fast?
We set up image sizes, templates and optimisation so your site looks right on every screen without slowing down. See how we help you turn visitors into customers.
