Recommended Free Tools
WordPress can generate multiple image sizes and add srcset and sizes to image markup, allowing a browser to request a suitable file for the space an image occupies. That is different from downloading a large original and shrinking it only with CSS. For a good result, match image dimensions to the page layout, keep proportions intact when resizing, and confirm the theme’s rendered markup describes the actual display width.
What “scaled images” means in WordPress
There are two related tasks: changing the dimensions of an image file and choosing which available file the browser downloads. Scaling an uploaded image changes its stored dimensions. Responsive image delivery gives the browser alternatives and lets it select a candidate for the display context.
![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)
srcsetlists available image files, typically with their widths.sizesdescribes the image’s expected layout width under different conditions.- The browser uses those hints, along with its own display and resolution needs, to choose a candidate.
CSS can constrain how large an image appears, but CSS alone does not necessarily prevent the browser from downloading an unnecessarily large source. WordPress has supported native responsive image markup since version 4.4; ordinary WordPress-generated image markup commonly includes the relevant attributes. WordPress Developer Resources explains the responsive image API and markup.
Choose image dimensions for the page layout
Start with the width the image actually occupies in the page template, including how the content column changes between desktop and mobile. An image far wider than its display area can add avoidable transfer cost; one that is too small may look soft when enlarged or viewed on a high-density screen. The appropriate source and compression depend on the image, layout and required detail, so there is no universal width or file-size target. WordPress’s image optimization guidance discusses the balance between resolution, visual quality and file size.
#1 Best Overall
WordPress documents a default sizes value equivalent to (max-width: image-width) 100vw, image-width. That is a useful general behavior, not a guarantee that the hint matches every theme’s content column. The developer handbook also documents a default max_srcset_image_width safeguard of 2048px. These are implementation defaults; check the current site’s version, theme and output rather than assuming either value describes every installation.
Resize proportionally in the Image block
For most content images, use automatic dimensions or adjust width while preserving the image’s proportions. WordPress’s Image block documentation recommends leaving width and height at Auto in most cases; setting a fixed height can make responsive behavior harder to control unless the design needs that constraint. Use crop or aspect-ratio controls when the intended design calls for a crop, rather than distorting the image. See the Image block documentation for the editor controls.
Rank #2
Adjust Media settings and scale an uploaded original
Review generated and inserted sizes
In the dashboard, open Settings > Media and review the maximum dimensions for thumbnail, medium and large images. These settings affect image-size generation and insertion choices; they do not retroactively guarantee that every older upload has every size now configured. WordPress documents that standard intermediate sizes are generated for new uploads, while some may be created for existing uploads only when sizes are regenerated. Themes can register additional sizes. The responsive image handbook notes that medium_large was introduced as a 768px-wide default intermediate size.
Scale a file in the Media editor
To reduce the stored dimensions of an uploaded image, open it through Media > Library, select it, choose Edit, and use the scaling controls. WordPress scales proportionally and does not upscale a smaller original. The editor also documents an option to restore the original, so be aware of that recovery control before applying an edit. See WordPress’s image editing documentation.
Do these 3 things before closing this tab:
1Fix the driver behind crashes, sound loss and screen glitches2Clear out junk files and repair common Windows errors3Scan for outdated or missing drivers - takes under a minuteCheck what the browser is actually served
- Open the published page and inspect the image element in the browser’s developer tools or page source.
- Check
src,srcsetandsizes. Confirm that candidate files exist and that the size hint resembles the image’s real content width at relevant viewport sizes. - Compare the visual result and transfer size at desktop and mobile widths. If the image is blurry, verify that an adequately detailed candidate is available; if it is needlessly heavy, check whether the layout hint or available sizes are causing an oversized candidate to be selected.
- If the markup is custom or theme-generated, inspect that code as well as the editor settings. Existing custom markup that already has responsive attributes is not necessarily rewritten by WordPress.
For developer-controlled templates, WordPress 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(). Where actual template widths differ from the default hint, developers can customize sizes with wp_calculate_image_sizes or the documented image attribute filters. Candidate selection is resolution switching: WordPress includes candidates with matching aspect ratios. Serving different crops at different breakpoints—art direction—is a separate requirement.
Which approach should you use?
| Approach | What it changes | Best suited to |
|---|---|---|
| WordPress responsive markup | Offers candidate files through srcset and describes display width with sizes. |
Most standard WordPress content images where the theme’s layout hints are appropriate. |
| Scale in the Media editor | Reduces the dimensions of the stored image proportionally; does not upscale. | When the uploaded original itself is unnecessarily large for its intended use. |
| Custom template or markup | Gives developers control over candidate lists, size hints or art-directed crops. | Layouts that differ materially from WordPress’s default assumptions or require different crops at breakpoints. |
These approaches can be combined: resize an oversized original when appropriate, then let responsive markup select among available sizes. A fixed display width and height can make a design predictable, but automatic proportional sizing usually adapts more readily to changing viewports.
Quick Recap
Rank #4
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.
