{"id":14454,"date":"2026-02-09T22:11:14","date_gmt":"2026-02-09T20:11:14","guid":{"rendered":"https:\/\/shortpixel.com/blog\/?p=14454"},"modified":"2026-02-09T22:20:24","modified_gmt":"2026-02-09T20:20:24","slug":"how-to-fix-image-elements-do-not-have-explicit-width-and-height-in-wordpress","status":"publish","type":"post","link":"https:\/\/shortpixel.com\/blog\/how-to-fix-image-elements-do-not-have-explicit-width-and-height-in-wordpress\/","title":{"rendered":"How to Fix \u201cImage Elements Do Not Have Explicit Width and Height\u201d in WordPress"},"content":{"rendered":"\n<p>If you\u2019ve ever tested a WordPress site with PageSpeed Insights or Lighthouse, you\u2019ve probably run into this warning:<\/p>\n\n\n\n<p><strong>\u201cImage elements do not have explicit width and height.\u201d<\/strong><\/p>\n\n\n\n<p>It\u2019s one of those issues that\u2019s easy to ignore. The page usually looks fine once everything finishes loading, and nothing seems obviously broken. Still, this warning keeps coming back, especially on WordPress sites, and it often correlates with poor <strong>Cumulative Layout Shift (CLS)<\/strong> scores.<\/p>\n\n\n\n<p>In this article, we\u2019ll look at why this issue appears so often on WordPress, why the usual fixes don\u2019t scale well, and how <strong>ShortPixel Adaptive Images<\/strong> approaches the problem differently using its <strong>Alter width and height<\/strong> feature.<\/p>\n\n\n\n<div class=\"wp-block-group has-border-color has-palette-color-8-background-color has-background is-layout-constrained wp-container-core-group-is-layout-239228e0 wp-block-group-is-layout-constrained\" style=\"border-color:#888888;border-width:1px;border-radius:20px;padding-top:var(--wp--preset--spacing--60);padding-right:var(--wp--preset--spacing--60);padding-bottom:var(--wp--preset--spacing--60);padding-left:var(--wp--preset--spacing--60)\">\n<div class=\"wp-block-group is-nowrap is-layout-flex wp-container-core-group-is-layout-6c531013 wp-block-group-is-layout-flex\">\n<div class=\"wp-block-outermost-icon-block\"><div class=\"icon-container\" style=\"width:25px;transform:rotate(0deg) scaleX(1) scaleY(1)\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" id=\"Layer_1\" viewBox=\"0 0 90.96 101.06\"><defs><style>.cls-1{fill:#efcc08;}<\/style><\/defs><path d=\"m53.54,79.72h-16.25c-1.48,0-2.68-1.2-2.68-2.68v-1.88c.02-1.62-.06-2.75-.23-3.39-.91-3.34-3.33-6.14-5.66-8.86-.77-.89-1.5-1.74-2.17-2.59-3.36-4.28-5.15-9.41-5.15-14.85,0-13.28,10.81-24.08,24.09-24.08s24.08,10.8,24.08,24.08c0,5.44-1.78,10.58-5.15,14.85-.59.76-1.27,1.55-1.98,2.39-2.39,2.82-5.07,5.96-5.99,9.28-.16.59-.24,1.66-.23,3.15v1.9c0,1.48-1.19,2.68-2.67,2.68h0Z\"><\/path><path class=\"cls-1\" d=\"m39.97,74.36h10.89c.03-2.08.23-3.11.42-3.78,1.24-4.47,4.32-8.1,7.03-11.28.71-.84,1.34-1.57,1.89-2.27,2.62-3.33,4.01-7.32,4.01-11.55,0-10.33-8.4-18.73-18.72-18.73s-18.73,8.4-18.73,18.73c0,4.22,1.38,8.21,4.01,11.54.62.79,1.3,1.57,2.02,2.4,2.47,2.87,5.54,6.43,6.78,10.95.18.71.39,1.78.42,3.99h0Z\"><\/path><path d=\"m53.54,90.34h-16.25c-1.48,0-2.68-1.2-2.68-2.68s1.19-2.67,2.68-2.67h16.25c1.48,0,2.67,1.19,2.67,2.67s-1.19,2.68-2.67,2.68h0Z\"><\/path><path d=\"m49.48,101.06h-8.12c-1.48,0-2.68-1.2-2.68-2.68s1.2-2.68,2.68-2.68h8.12c1.47,0,2.68,1.2,2.68,2.68s-1.2,2.68-2.68,2.68h0Z\"><\/path><path d=\"m88.29,48.16h-10.7c-1.48,0-2.68-1.19-2.68-2.68s1.2-2.68,2.68-2.68h10.7c1.48,0,2.67,1.2,2.67,2.68s-1.19,2.68-2.67,2.68h0Z\"><\/path><path d=\"m13.38,48.16H2.67c-1.48,0-2.67-1.19-2.67-2.68s1.19-2.68,2.67-2.68h10.7c1.48,0,2.68,1.2,2.68,2.68,0,1.48-1.2,2.68-2.68,2.68h0Z\"><\/path><path d=\"m45.48,16.06c-1.48,0-2.68-1.19-2.68-2.68V2.68c0-1.48,1.2-2.68,2.68-2.68s2.68,1.2,2.68,2.68v10.7c0,1.48-1.19,2.68-2.68,2.68h0Z\"><\/path><path d=\"m75.74,78.42c-.68,0-1.36-.26-1.89-.79l-7.57-7.57c-1.04-1.04-1.04-2.74,0-3.79,1.05-1.04,2.74-1.04,3.78,0l7.57,7.57c1.05,1.05,1.05,2.75,0,3.79-.52.53-1.2.78-1.9.78h0Z\"><\/path><path d=\"m22.77,25.46c-.68,0-1.37-.26-1.9-.79l-7.56-7.56c-1.05-1.05-1.05-2.75,0-3.79,1.05-1.04,2.74-1.04,3.78,0l7.57,7.57c1.05,1.04,1.05,2.75,0,3.79-.52.53-1.21.79-1.9.79h0Z\"><\/path><path d=\"m15.21,78.42c-.68,0-1.37-.26-1.89-.78-1.05-1.04-1.05-2.74,0-3.79l7.57-7.57c1.04-1.04,2.73-1.04,3.78,0,1.05,1.05,1.05,2.75,0,3.79l-7.57,7.57c-.53.52-1.21.78-1.89.78h0Z\"><\/path><path d=\"m68.18,25.46c-.68,0-1.37-.26-1.9-.79-1.04-1.04-1.04-2.74,0-3.78l7.57-7.57c1.04-1.04,2.74-1.05,3.78,0,1.05,1.05,1.05,2.74,0,3.79l-7.56,7.56c-.52.53-1.21.79-1.9.79h0Z\"><\/path><\/svg><\/div><\/div>\n\n\n\n<p class=\"has-medium-font-size\"><strong>Quick Takeaways<\/strong><\/p>\n<\/div>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Missing width and height attributes cause layout shift as images load<\/li>\n\n\n\n<li>Layout shift negatively impacts CLS and user experience<\/li>\n\n\n\n<li>WordPress generates image markup dynamically and inconsistently<\/li>\n\n\n\n<li>Manual fixes don\u2019t scale on real-world WordPress sites<\/li>\n\n\n\n<li>ShortPixel Adaptive Images adjusts image dimensions automatically<\/li>\n\n\n\n<li>No manual content editing or theme changes required<\/li>\n<\/ul>\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Why this warning matters: layout shift and CLS<\/strong><\/h2>\n\n\n\n<p>Browsers start rendering pages before all assets finish loading. Images are often downloaded after text and layout elements are already visible.<\/p>\n\n\n\n<p>When an image doesn\u2019t have width and height defined, the browser can\u2019t reserve space for it. The layout is built without that image, then recalculated once it loads. Content moves. Text jumps.<\/p>\n\n\n\n<p>That movement is called <strong>layout shift<\/strong>, and Google measures it using <strong>Cumulative Layout Shift (CLS)<\/strong>. Even a single large image loading late can noticeably affect both user experience and Core Web Vitals scores.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Why WordPress sites run into this so often<\/strong><\/h2>\n\n\n\n<p>On WordPress, missing image dimensions are rarely just a simple oversight.<\/p>\n\n\n\n<p>Most images are generated automatically by the block editor, page builders, galleries, sliders, or dynamic widgets. Each tool outputs markup differently, and not all of them include width and height attributes consistently.<\/p>\n\n\n\n<p>Legacy content adds another layer of complexity. Posts created before WordPress 5.5 or imported from other platforms often lack reliable image metadata. Fixing this manually across large sites isn\u2019t realistic, especially when page builders regenerate markup and theme updates can overwrite changes.<\/p>\n\n\n\n<p>At that point, automation stops being a nice-to-have and becomes essential.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Why classic fixes don\u2019t scale in WordPress<\/strong><\/h2>\n\n\n\n<p>The traditional recommendation is to add width and height attributes to every &lt;img&gt; tag. That works in theory, but WordPress sites quickly hit limitations.<\/p>\n\n\n\n<p>Common challenges include:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>markup generated dynamically by page builders<\/li>\n\n\n\n<li>images injected via JavaScript (sliders, carousels)<\/li>\n\n\n\n<li>large libraries of legacy content<\/li>\n\n\n\n<li>theme and plugin updates that overwrite changes<br><\/li>\n<\/ul>\n\n\n\n<p>Even if you fix today\u2019s images, tomorrow\u2019s content can bring the same issue back.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>A different approach: fixing layout shift at delivery level<\/strong><\/h2>\n\n\n\n<p>Instead of trying to repair HTML after it\u2019s generated, ShortPixel Adaptive Images focuses on <strong>how images are delivered to the browser<\/strong>.<\/p>\n\n\n\n<p>Images are resized automatically based on the visitor\u2019s device, optimized on the fly, and delivered through a global CDN. This improves performance, but it also creates predictable layout behavior.<\/p>\n\n\n\n<p>The key idea is simple:<br><strong>if the browser knows the dimensions of the image it\u2019s about to receive, it can reserve the correct amount of space before loading finishes.<\/strong><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>How <a href=\"https:\/\/wordpress.org\/plugins\/shortpixel-adaptive-images\/\" target=\"_blank\" rel=\"noopener\">ShortPixel Adaptive Images<\/a> handles image dimensions<\/strong><\/h2>\n\n\n\n<p>Modern websites rarely serve the same image to every visitor. Mobile phones, tablets, desktops, and high-DPI screens all need different image sizes.<\/p>\n\n\n\n<p>Static width and height attributes based on the original upload don\u2019t always match the image that\u2019s actually delivered. That mismatch is a common source of layout instability.<\/p>\n\n\n\n<p><a href=\"https:\/\/wordpress.org\/plugins\/shortpixel-adaptive-images\/\" target=\"_blank\" rel=\"noopener\">ShortPixel Adaptive Images<\/a> aligns declared image dimensions with the delivered image, not just the original file, reducing this mismatch automatically.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>What \u201cAlter width and height\u201d does<\/strong><\/h2>\n\n\n\n<p>The <strong>Alter width and height<\/strong> option directly addresses this warning.<\/p>\n\n\n\n<p>When enabled, it:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>adjusts width and height attributes to match the image delivered to each visitor<\/li>\n\n\n\n<li>allows the browser to reserve the correct amount of space early<\/li>\n\n\n\n<li>reduces layout shift without editing posts or templates<br><\/li>\n<\/ul>\n\n\n\n<p>It doesn\u2019t solve every possible CLS issue, ads, embeds, and fonts can still cause shifts, but it removes one of the most common and controllable causes.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>How the process works in practice<\/strong><\/h2>\n\n\n\n<p>Imagine a hero image uploaded at 2400\u00d71600 pixels.<\/p>\n\n\n\n<p>With adaptive delivery enabled:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>a mobile visitor receives a 400\u00d7267 px image<\/li>\n\n\n\n<li>a tablet receives an 800\u00d7533 px image<\/li>\n\n\n\n<li>a desktop visitor receives a 1200\u00d7800 px image<br><\/li>\n<\/ul>\n\n\n\n<p>In each case, the HTML is updated with matching width and height values. The browser reserves the correct space before the image loads. When it appears, it fits perfectly. No layout shift.<\/p>\n\n\n\n<p>Same original image. Different delivered sizes. Stable layout for every visitor.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>How to enable \u201cAlter width and height\u201d in WordPress<\/strong><\/h2>\n\n\n\n<p>Enabling the feature takes less than a minute and requires no code changes.<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Install <a href=\"https:\/\/wordpress.org\/plugins\/shortpixel-adaptive-images\/\" target=\"_blank\" rel=\"noopener\">ShortPixel Adaptive Images<\/a> from the WordPress plugin directory<\/li>\n\n\n\n<li>Go to <strong>Settings > ShortPixel AI<\/strong><\/li>\n\n\n\n<li>Open the <strong>Behavior<\/strong> tab<\/li>\n\n\n\n<li>Enable <strong>Alter width and height<\/strong><\/li>\n\n\n\n<li>Save your changes<br><\/li>\n<\/ol>\n\n\n\n<figure class=\"wp-block-image aligncenter size-large\"><a href=\"https:\/\/shortpixel.com/blog\/wp-content\/uploads\/2026\/02\/image-3.png\"><img decoding=\"async\" width=\"1024\" height=\"489\" src=\"https:\/\/shortpixel.com/blog\/wp-content\/uploads\/2026\/02\/image-3-1024x489.png\" alt=\"\" class=\"wp-image-14456\" title=\"\" srcset=\"https:\/\/shortpixel.com\/blog\/wp-content\/uploads\/2026\/02\/image-3-1024x489.png 1024w, https:\/\/shortpixel.com\/blog\/wp-content\/uploads\/2026\/02\/image-3-300x143.png 300w, https:\/\/shortpixel.com\/blog\/wp-content\/uploads\/2026\/02\/image-3-768x367.png 768w, https:\/\/shortpixel.com\/blog\/wp-content\/uploads\/2026\/02\/image-3-1536x733.png 1536w, https:\/\/shortpixel.com\/blog\/wp-content\/uploads\/2026\/02\/image-3.png 1600w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n\n<p>There\u2019s no need to edit existing posts, regenerate images, or modify your theme.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>What results you can expect<\/strong><\/h2>\n\n\n\n<p>After enabling <strong>Alter width and height<\/strong>, many WordPress sites see:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>reduced CLS caused by images<\/li>\n\n\n\n<li>more stable above-the-fold rendering<\/li>\n\n\n\n<li>fewer warnings about missing image dimensions<\/li>\n\n\n\n<li>less need for manual fixes<br><\/li>\n<\/ul>\n\n\n\n<p>For WordPress sites with large image libraries or heavy use of page builders, this approach removes one of the most common CLS issues <strong>without adding ongoing maintenance work<\/strong>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Pricing and testing the feature<\/strong><\/h2>\n\n\n\n<p>ShortPixel Adaptive Images includes a free plan with <strong>500 MB of CDN traffic per month<\/strong>, enough to test the feature on low-traffic sites.<\/p>\n\n\n\n<p>For larger sites, the Unlimited plan starts at <strong>$9.99 per month<\/strong>(or $8.33 per month when paid yearly), with one-time credit packages available from <strong>$19.99<\/strong>. This makes it easy to evaluate the impact before committing.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>When this approach makes the most sense<\/strong><\/h2>\n\n\n\n<p>This solution is especially effective for:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>WooCommerce stores with many product images<\/li>\n\n\n\n<li>content-heavy blogs<\/li>\n\n\n\n<li>sites built with page builders<\/li>\n\n\n\n<li>agencies managing multiple WordPress sites<\/li>\n\n\n\n<li>international audiences that benefit from CDN delivery<br><\/li>\n<\/ul>\n\n\n\n<p>In these cases, delivery-level fixes scale far better than manual markup changes.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Why you might still see warnings sometimes<\/strong><\/h2>\n\n\n\n<p>Even with everything configured correctly, some audit tools may still report warnings due to:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>third-party embeds or ads<\/li>\n\n\n\n<li>cached test results<\/li>\n\n\n\n<li>images excluded from processing<\/li>\n<\/ul>\n\n\n\n<p>Always retest after clearing caches and use incognito mode for more reliable results.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>FAQs<\/strong><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Do width and height attributes break responsive design?<\/strong><\/h3>\n\n\n\n<p>No. Browsers use these attributes to calculate aspect ratio, not fixed display size. CSS still controls how images scale.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Does this fix all CLS issues?<\/strong><\/h3>\n\n\n\n<p>No. <strong>Alter width and height<\/strong> reduces image-related CLS, but other elements may still need optimization.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Do I still need width and height in my HTML?<\/strong><\/h3>\n\n\n\n<p>If your theme already outputs correct dimensions, keep them. Adaptive delivery provides a scalable fallback when markup is inconsistent.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Does lazy loading change anything?<\/strong><\/h3>\n\n\n\n<p>Lazy loading improves performance, but it works best when combined with correct image dimensions.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Final thoughts<\/strong><\/h2>\n\n\n\n<p>\u201cImage elements do not have explicit width and height\u201d is a common warning on WordPress because image markup is generated dynamically and inconsistently.<\/p>\n\n\n\n<p>Manual fixes work in limited scenarios, but they don\u2019t scale for modern WordPress sites with page builders, legacy content, and large image libraries.<\/p>\n\n\n\n<p>For WordPress sites that rely heavily on images and dynamic layouts, fixing layout shift at delivery level is often the most practical approach. <strong>ShortPixel Adaptive Images was built specifically for this scenario<\/strong>, making it easier to improve layout stability and Core Web Vitals without touching existing content.<\/p>\n\n\n\n<div class=\"wp-block-group has-border-color has-palette-color-4-border-color has-palette-color-6-background-color has-background is-vertical is-content-justification-left is-layout-flex wp-container-core-group-is-layout-e21fc307 wp-block-group-is-layout-flex\" style=\"border-width:1px;border-radius:20px;margin-top:var(--wp--preset--spacing--60);margin-bottom:var(--wp--preset--spacing--60);padding-top:var(--wp--preset--spacing--60);padding-right:var(--wp--preset--spacing--60);padding-bottom:var(--wp--preset--spacing--60);padding-left:var(--wp--preset--spacing--60)\">\n<h3 class=\"wp-block-heading\" id=\"cta-heading\" style=\"margin-top:0;margin-right:0;margin-bottom:0;margin-left:0;padding-top:0;padding-right:0;padding-bottom:0;padding-left:0\">Ready to fix &#8220;Image Elements Do Not Have Explicit Width and Height&#8221;?<\/h3>\n\n\n\n<p>Try ShortPixel for free and see how you can keep both quality and small file sizes.<\/p>\n\n\n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/wordpress.org\/plugins\/shortpixel-image-optimiser\/\" target=\"_blank\" rel=\"noreferrer noopener\">Get Started<\/a><\/div>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>If you\u2019ve ever tested a WordPress site with PageSpeed Insights or Lighthouse, you\u2019ve probably run into this warning: \u201cImage elements do not have explicit width and height.\u201d It\u2019s one of those issues that\u2019s easy to ignore. The page usually looks fine once everything finishes loading, and nothing seems obviously broken. Still, this warning keeps coming [&hellip;]<\/p>\n","protected":false},"author":37,"featured_media":14457,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[11],"tags":[],"class_list":["post-14454","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-image-optimization"],"blocksy_meta":[],"_links":{"self":[{"href":"https:\/\/shortpixel.com\/blog\/wp-json\/wp\/v2\/posts\/14454","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/shortpixel.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/shortpixel.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/shortpixel.com\/blog\/wp-json\/wp\/v2\/users\/37"}],"replies":[{"embeddable":true,"href":"https:\/\/shortpixel.com\/blog\/wp-json\/wp\/v2\/comments?post=14454"}],"version-history":[{"count":6,"href":"https:\/\/shortpixel.com\/blog\/wp-json\/wp\/v2\/posts\/14454\/revisions"}],"predecessor-version":[{"id":14490,"href":"https:\/\/shortpixel.com\/blog\/wp-json\/wp\/v2\/posts\/14454\/revisions\/14490"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/shortpixel.com\/blog\/wp-json\/wp\/v2\/media\/14457"}],"wp:attachment":[{"href":"https:\/\/shortpixel.com\/blog\/wp-json\/wp\/v2\/media?parent=14454"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/shortpixel.com\/blog\/wp-json\/wp\/v2\/categories?post=14454"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/shortpixel.com\/blog\/wp-json\/wp\/v2\/tags?post=14454"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}