Do these 3 things before closing this tab:
1Scan for outdated or missing drivers - takes under a minute2Clear out junk files and repair common Windows errors3Fix the driver behind crashes, sound loss and screen glitchesWordPress can serve responsive image files automatically: it generates image sizes and, in common cases, adds srcset and sizes to image markup so a browser can choose a suitable file. To make that work well, size images for the space they occupy in your layout, keep block dimensions proportional, and check the rendered markup when the result looks wrong. Scaling an uploaded image and choosing a responsive file at page load are related but separate tasks.
What “scaled images” means in WordPress
There are two different operations that are easy to confuse:
![SEO for WordPress: How To Get Your Website on Page #1 of Google...Fast! [2nd Edition]](https://m.media-amazon.com/images/I/5158ND0OUvL._SL160_.jpg)
- Scaling an image: reducing the dimensions of an image file, such as making a large original smaller.
- Serving a responsive image: offering multiple image files in the page markup so the browser can request a candidate suited to the image’s displayed size and screen conditions.
CSS can make an image look smaller on the page, but that alone does not mean a smaller file was downloaded. Responsive markup gives the browser file alternatives to choose from. WordPress has supported its native responsive-image API since version 4.4; for standard WordPress-generated image markup, it can add srcset and sizes automatically. See WordPress Developer Resources: Responsive Images.
How srcset and sizes work together
srcset lists image candidates, commonly with their pixel widths. sizes describes the image’s expected rendered width under layout conditions. The browser uses those hints, along with its own context, to select a candidate. If the sizes value does not reflect the actual content column, the browser may choose an unnecessarily large or insufficiently detailed file.
Outdated Drivers Are Slowing You Down
One free scan finds every outdated or missing driver and matches the right update for your exact hardware.Free scan · exact hardware matchWindows Errors? Fix Them Before They Spread
Repair common Windows errors and clear accumulated junk for a smoother, more stable PC - no reinstall needed.Free scan · no reinstall#1 Best Overall
Set the image’s display size in the block editor
For most layouts, use proportional dimensions rather than locking an image to both a width and height. In the Image block’s dimensions controls, leave width and height set to Auto unless the design requires specific dimensions. If you need a different display width, adjust width and let height follow proportionally. Use crop or aspect-ratio controls when the design calls for a particular crop, rather than forcing a height that distorts the image. WordPress’s Image block guidance says, “In most cases, leave these fields set to Auto.” See WordPress.org Documentation: Image block.
Check the image in the actual template at desktop and mobile widths. A page’s content column, sidebar, or other layout constraints determine how wide the image really appears; the original file’s dimensions alone do not answer that question.
Rank #2
Review the site’s generated image sizes
Go to Settings > Media in the WordPress dashboard to review the maximum dimensions for thumbnail, medium, and large images. These settings affect image sizes WordPress generates and offers for insertion. The WordPress developer handbook documents medium_large as a 768-pixel-wide default intermediate size and notes that it is generated for new uploads or when sizes are regenerated. Themes can register additional sizes. See WordPress Developer Resources: Responsive Images.
Changing Media settings does not by itself guarantee that every image uploaded earlier has all the sizes now configured. Existing files may lack newer intermediate sizes unless the sizes are regenerated. When investigating a specific image, check which candidate files actually exist rather than assuming the current settings describe every past upload.
Scale an uploaded original when appropriate
If the original itself is larger than the site needs, WordPress’s Media editor can scale it down proportionally. In the dashboard, open Media > Library, select the image, choose Edit Image, and use the Scale controls. The tool reduces dimensions; it does not upscale an image. WordPress also documents an option to restore the original, so be deliberate before keeping an edit. See WordPress.org Documentation: Editing Images in WordPress.
Scaling the stored image is not a substitute for responsive selection: a page may still benefit from multiple generated candidates, and browser selection still depends on the rendered markup.
Rank #4
Check what the page actually serves
- Open the page on the front end and inspect the image element in the browser’s developer tools.
- Look at its
src,srcset, andsizesattributes. Confirm that the listed candidates exist and that the declared display width matches the image’s actual layout width at relevant breakpoints. - If the markup has no useful candidate list or the browser consistently selects an unsuitable file, check whether a theme, plugin, or custom template generated or changed the image HTML.
- Compare visual detail and transfer size for the images and layouts in question. Keep enough resolution for the displayed result without serving a needlessly large file.
WordPress’s automatic handling applies to common generated markup; existing custom markup that already contains responsive attributes is not necessarily rewritten. The handbook documents functions including wp_get_attachment_image_srcset(), wp_calculate_image_srcset(), wp_get_attachment_image_sizes(), wp_calculate_image_sizes(), and wp_image_add_srcset_and_sizes(). Developers can customize the calculated sizes value with wp_calculate_image_sizes or use the documented image-attribute filters when a theme’s real layout differs from the defaults. The handbook’s documented default sizes pattern is equivalent to (max-width: IMAGE-WIDTHpx) 100vw, IMAGE-WIDTHpx; it should not be treated as a perfect description of every theme’s content column. The handbook also documents a default max_srcset_image_width safeguard of 2048 pixels. These are implementation details to verify against the site’s WordPress version and theme, not performance guarantees.
Choose candidates for both layout and image quality
The appropriate image dimensions depend on how large the image renders and how much detail it needs. A wide photograph displayed in a constrained article column may not need the original’s full dimensions, while a detailed image shown large may need a higher-resolution candidate. File size, resolution, and visible detail trade off against one another; there is no universal width or compression value that fits every image and theme. WordPress discusses that balance in its image quality guidance.
The Tool Desk
Outbyte PC Repair FREEClear out junk files and repair common Windows errorsFree Scan →Outbyte Driver Updater FREEFix the driver behind crashes, sound loss and screen glitchesFind Drivers →Responsive candidate selection is resolution switching: candidates represent the same image at different sizes, and WordPress includes candidates with a matching aspect ratio. If the design needs different crops at different breakpoints—for example, a wide desktop composition and a tighter mobile crop—that is art direction, a separate problem from simply choosing among scaled copies.
Quick Recap
Common causes of poor results
- The image only looks smaller: CSS may constrain display dimensions while the page still downloads a large source. Inspect
srcsetand the selected file. - The chosen file is too large or too soft: the markup’s
sizeshint may not describe the actual layout, or the available generated sizes may not suit the displayed width. - An older upload lacks a needed candidate: current Media settings do not prove that older uploads have every configured size.
- The image is cropped incorrectly: responsive size candidates generally preserve aspect ratio; breakpoint-specific composition requires art direction rather than resolution switching.
- Block resizing behaves unexpectedly: a fixed height can constrain responsive proportions. Use automatic height unless the design calls for a deliberate crop or fixed aspect ratio.
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
