Missing width and height attributes can cause layout shifts and poor Core Web Vitals scores. The good news? In under an hour, you can fix them site‑wide, making your site feel steady, polished, and that little bit more professional.
Why adding width and height matters
Think of explicit image dimensions as giving your page a plan before the builders show up. The browser reserves the exact amount of space each image needs, so text and buttons don’t jump around while loading.
That means no more cumulative layout shift (CLS) surprises, better Lighthouse scores, and a calmer browsing experience. For small businesses, developers, and learners alike, it’s one of the easiest wins for speed, SEO, and user trust.
Ready for Faster, Greener Hosting?
We recommend Krystal - fast, reliable, powered by 100% renewable energy. It's a host we trust and a smart move for a cleaner web.
Audit where images come from and confirm the issue
Run PageSpeed Insights or Lighthouse on your key pages. Watch for: “Image elements do not have explicit width and height”. Cross‑check in GTmetrix. Then open view‑source or browser DevTools to spot tags missing width and height. As explained in our guide on how a website audit can help you clean up and speed up, this initial scan gives you a clear target list for fixes.
Tip: Keep a short list of pages or image selectors to revisit. It’s your before/after checklist.Fix content images in the editor using the Image block
For images inside posts or pages:
- Use the core Image block and select your file from the Media Library.
- Pick a registered size (e.g., “Large”) from the dropdown.
- Let WordPress output dimensions automatically via
wp_filter_content_tags().
If you’ve pasted raw HTML or are using hotlinked images, switch them to the Image block.
Advanced fallback: For legacy or custom HTML, hook a small the_content filter to add missing <img> attributes at render time. If you’re not comfortable with PHP, choose a vetted plugin instead.
Update template images in themes for a global fix
Theme templates often hard‑code tags for logos, heroes, or featured images. Replace them with wp_get_attachment_image() and a registered size from add_image_size().
Example:
// functions.php
add_image_size( 'hero', 1600, 900, true );
// template file
echo wp_get_attachment_image( $image_id, 'hero', false, [
'fetchpriority' => 'high',
] );This ensures width and height print automatically, along with responsive srcset and sizes.
Watch‑out: On WordPress 6.7+, lazy‑loaded images may get sizes=”auto”. Set an explicit sizes attribute for key visuals if layout shifts appear.
Think of wp_get_attachment_image() as WordPress’s all‑in‑one image helper, it fetches your image, sets the right size, and adds all the behind‑the‑scenes tags so you don’t have to. And if you want to get your hands dirty and go in‑depth, take a look at the WordPress Developer Handbook.
Use built‑in optimisation tools first
If editing your theme templates isn’t an option (as with some page builders or hosted themes) and you don’t already use an optimisation or caching plugin, you can either enable this feature in a new lightweight performance plugin or explore manual fixes within your builder or theme settings, whichever keeps your setup lean
Where to find it in popular tools
- WP Rocket → Settings › Media → enable Add missing image dimensions.
- Perfmatters → Settings › Lazy Loading → enable Add Missing Image Dimensions.
- LiteSpeed Cache → Page Optimization › Media Settings → enable Add Missing Sizes (requires Lazy Load Images).
If you don’t see this option, check your theme or builder documentation for any built‑in support before adding new plugins. Keep your setup lean by avoiding unnecessary or outdated tools.
Check builders, custom HTML, CDNs and external images
Page builders and custom HTML blocks can strip attributes. In your builder, enable any “output image dimensions” toggle.
If you use a CDN or optimisation service, confirm it preserves attributes in the final HTML. For external images, consider uploading them to your Media Library so WordPress can manage the markup.
Validate fixes, clear caches and measure improvements
Clear caches (WordPress + CDN). Re‑run PageSpeed Insights, Lighthouse, or GTmetrix on the same pages. The missing width/height warning should vanish.
Compare CLS and LCP before and after. A drop in CLS means a steadier, friendlier page.
The Quick Fix for a Slow, Heavy Site
We optimise your site for speed, efficiency and sustainability. No rebuild. No delays. Just better performance and a lighter footprint.
Wrap‑up
Adding width and height attributes is a quick, high‑impact win. Whether you do it in the editor, your theme templates, or via a plugin, you’ll see, and feel, the difference immediately.
Next step: Pick one page, follow the checklist, and enjoy a site that loads without the jumpiness.
