{"id":1839,"date":"2021-08-05T11:39:13","date_gmt":"2021-08-05T11:39:13","guid":{"rendered":"https:\/\/www.wpstaq.com\/?post_type=pagespeedinsights&amp;p=1839"},"modified":"2021-08-05T11:39:13","modified_gmt":"2021-08-05T11:39:13","slug":"image-elements-do-not-have-explicit-width-and-height","status":"publish","type":"pagespeedinsights","link":"https:\/\/www.wpstaq.com\/nz\/pagespeedinsights\/image-elements-do-not-have-explicit-width-and-height\/","title":{"rendered":"Image elements do not have explicit width and height"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\" id=\"overview\">Overview<\/h2>\n\n\n\n<p>Images and\/or videos that do not have explicit&nbsp;<em>width<\/em>&nbsp;and&nbsp;<em>height<\/em>&nbsp;attributes can cause&nbsp;<strong>large layout shifts<\/strong>&nbsp;as your page loads.<\/p>\n\n\n\n<p>Layout shifts can be frustrating to your page visitors as elements could move around, resulting in bad user experience.<\/p>\n\n\n\n<p>Avoiding large layout shifts is essential in delivering a smooth experience to your visitors.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"how-do-image-and-or-video-elements-without-explicit-width-and-height-affect-page-performance\">How do image and\/or video elements without explicit width and height affect page performance?<\/h2>\n\n\n\n<p>Image and\/or video elements that aren&#8217;t explicitly declared with height and width attributes are usually re-sized using CSS. When this happens, the browser can only determine their dimensions and allocate space for them once it starts downloading them.<\/p>\n\n\n\n<p>You may notice that when the browser downloads these images, your page content is constantly being pushed down or moved around from its original position as the browser resizes the images and positions them on your page.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"how-to-fix-audit\">How to fix this audit?<\/h2>\n\n\n\n<p>To fix this audit, simply specify, both, the&nbsp;<code>width<\/code>&nbsp;and&nbsp;<code>height<\/code>&nbsp;for your webpage&#8217;s image and video elements. This ensures that the correct spacing is used for images and videos.<\/p>\n\n\n\n<p>For example,<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">&lt;img src=\"staq.jpg\" width=\"640\" height=\"360\" alt=\"Staq Logo\">\n<\/pre>\n\n\n\n<p>Note that modern browsers automatically calculate the aspect ratio for an image\/video based on the declared&nbsp;<code>width<\/code>&nbsp;and&nbsp;<code>height<\/code>&nbsp;attributes.<br><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"how-to-fix-audit\">Fix elements do not have explicit width and height with Staq<\/h2>\n\n\n\n<p>Go to Staq Hosting &gt; Media &gt; Site Optimizer &gt; Add explicit image dimensions<br><\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/www.wpstaq.com\/wp-content\/uploads\/2022\/02\/Screen-Shot-2022-02-01-at-3.00.49-pm-1024x557.png\" alt=\"\" class=\"wp-image-6002\"\/><\/figure>\n","protected":false},"template":"","class_list":["post-1839","pagespeedinsights","type-pagespeedinsights","status-publish","hentry"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.5 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Image elements do not have explicit width and height - How to fix really quickly with Staq<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.wpstaq.com\/pagespeedinsights\/image-elements-do-not-have-explicit-width-and-height\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Image elements do not have explicit width and height - How to fix really quickly with Staq\" \/>\n<meta property=\"og:description\" content=\"Overview Images and\/or videos that do not have explicit&nbsp;width&nbsp;and&nbsp;height&nbsp;attributes can cause&nbsp;large layout shifts&nbsp;as your page loads. Layout shifts can be frustrating to your page visitors as elements could move around, resulting in bad user experience. Avoiding large layout shifts is essential in delivering a smooth experience to your visitors. How do image and\/or video elements&hellip;\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.wpstaq.com\/pagespeedinsights\/image-elements-do-not-have-explicit-width-and-height\/\" \/>\n<meta property=\"og:site_name\" content=\"Managed Hosting Platform for WordPress\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/staqhosting\/\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.wpstaq.com\/wp-content\/uploads\/2022\/02\/Screen-Shot-2022-02-01-at-3.00.49-pm-1024x557.png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.wpstaq.com\\\/pagespeedinsights\\\/image-elements-do-not-have-explicit-width-and-height\\\/\",\"url\":\"https:\\\/\\\/www.wpstaq.com\\\/pagespeedinsights\\\/image-elements-do-not-have-explicit-width-and-height\\\/\",\"name\":\"Image elements do not have explicit width and height - How to fix really quickly with Staq\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.wpstaq.com\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.wpstaq.com\\\/pagespeedinsights\\\/image-elements-do-not-have-explicit-width-and-height\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.wpstaq.com\\\/pagespeedinsights\\\/image-elements-do-not-have-explicit-width-and-height\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.wpstaq.com\\\/wp-content\\\/uploads\\\/2022\\\/02\\\/Screen-Shot-2022-02-01-at-3.00.49-pm-1024x557.png\",\"datePublished\":\"2021-08-05T11:39:13+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.wpstaq.com\\\/pagespeedinsights\\\/image-elements-do-not-have-explicit-width-and-height\\\/#breadcrumb\"},\"inLanguage\":\"en-nz\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.wpstaq.com\\\/pagespeedinsights\\\/image-elements-do-not-have-explicit-width-and-height\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-nz\",\"@id\":\"https:\\\/\\\/www.wpstaq.com\\\/pagespeedinsights\\\/image-elements-do-not-have-explicit-width-and-height\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.wpstaq.com\\\/wp-content\\\/uploads\\\/2022\\\/02\\\/Screen-Shot-2022-02-01-at-3.00.49-pm-1024x557.png\",\"contentUrl\":\"https:\\\/\\\/www.wpstaq.com\\\/wp-content\\\/uploads\\\/2022\\\/02\\\/Screen-Shot-2022-02-01-at-3.00.49-pm-1024x557.png\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.wpstaq.com\\\/pagespeedinsights\\\/image-elements-do-not-have-explicit-width-and-height\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.wpstaq.com\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"PageSpeedInsights\",\"item\":\"https:\\\/\\\/www.wpstaq.com\\\/pagespeedinsights\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Image elements do not have explicit width and height\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.wpstaq.com\\\/#website\",\"url\":\"https:\\\/\\\/www.wpstaq.com\\\/\",\"name\":\"Managed Hosting Platform for WordPress\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.wpstaq.com\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.wpstaq.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-nz\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.wpstaq.com\\\/#organization\",\"name\":\"Staq\",\"alternateName\":\"WPStaq\",\"url\":\"https:\\\/\\\/www.wpstaq.com\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-nz\",\"@id\":\"https:\\\/\\\/www.wpstaq.com\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.wpstaq.com\\\/wp-content\\\/uploads\\\/2023\\\/05\\\/cropped-LogoNoText.png\",\"contentUrl\":\"https:\\\/\\\/www.wpstaq.com\\\/wp-content\\\/uploads\\\/2023\\\/05\\\/cropped-LogoNoText.png\",\"width\":512,\"height\":512,\"caption\":\"Staq\"},\"image\":{\"@id\":\"https:\\\/\\\/www.wpstaq.com\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/staqhosting\\\/\",\"https:\\\/\\\/www.linkedin.com\\\/company\\\/wpstaq\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Image elements do not have explicit width and height - How to fix really quickly with Staq","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.wpstaq.com\/pagespeedinsights\/image-elements-do-not-have-explicit-width-and-height\/","og_locale":"en_US","og_type":"article","og_title":"Image elements do not have explicit width and height - How to fix really quickly with Staq","og_description":"Overview Images and\/or videos that do not have explicit&nbsp;width&nbsp;and&nbsp;height&nbsp;attributes can cause&nbsp;large layout shifts&nbsp;as your page loads. Layout shifts can be frustrating to your page visitors as elements could move around, resulting in bad user experience. Avoiding large layout shifts is essential in delivering a smooth experience to your visitors. How do image and\/or video elements&hellip;","og_url":"https:\/\/www.wpstaq.com\/pagespeedinsights\/image-elements-do-not-have-explicit-width-and-height\/","og_site_name":"Managed Hosting Platform for WordPress","article_publisher":"https:\/\/www.facebook.com\/staqhosting\/","og_image":[{"url":"https:\/\/www.wpstaq.com\/wp-content\/uploads\/2022\/02\/Screen-Shot-2022-02-01-at-3.00.49-pm-1024x557.png","type":"","width":"","height":""}],"twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.wpstaq.com\/pagespeedinsights\/image-elements-do-not-have-explicit-width-and-height\/","url":"https:\/\/www.wpstaq.com\/pagespeedinsights\/image-elements-do-not-have-explicit-width-and-height\/","name":"Image elements do not have explicit width and height - How to fix really quickly with Staq","isPartOf":{"@id":"https:\/\/www.wpstaq.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.wpstaq.com\/pagespeedinsights\/image-elements-do-not-have-explicit-width-and-height\/#primaryimage"},"image":{"@id":"https:\/\/www.wpstaq.com\/pagespeedinsights\/image-elements-do-not-have-explicit-width-and-height\/#primaryimage"},"thumbnailUrl":"https:\/\/www.wpstaq.com\/wp-content\/uploads\/2022\/02\/Screen-Shot-2022-02-01-at-3.00.49-pm-1024x557.png","datePublished":"2021-08-05T11:39:13+00:00","breadcrumb":{"@id":"https:\/\/www.wpstaq.com\/pagespeedinsights\/image-elements-do-not-have-explicit-width-and-height\/#breadcrumb"},"inLanguage":"en-nz","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.wpstaq.com\/pagespeedinsights\/image-elements-do-not-have-explicit-width-and-height\/"]}]},{"@type":"ImageObject","inLanguage":"en-nz","@id":"https:\/\/www.wpstaq.com\/pagespeedinsights\/image-elements-do-not-have-explicit-width-and-height\/#primaryimage","url":"https:\/\/www.wpstaq.com\/wp-content\/uploads\/2022\/02\/Screen-Shot-2022-02-01-at-3.00.49-pm-1024x557.png","contentUrl":"https:\/\/www.wpstaq.com\/wp-content\/uploads\/2022\/02\/Screen-Shot-2022-02-01-at-3.00.49-pm-1024x557.png"},{"@type":"BreadcrumbList","@id":"https:\/\/www.wpstaq.com\/pagespeedinsights\/image-elements-do-not-have-explicit-width-and-height\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.wpstaq.com\/"},{"@type":"ListItem","position":2,"name":"PageSpeedInsights","item":"https:\/\/www.wpstaq.com\/pagespeedinsights\/"},{"@type":"ListItem","position":3,"name":"Image elements do not have explicit width and height"}]},{"@type":"WebSite","@id":"https:\/\/www.wpstaq.com\/#website","url":"https:\/\/www.wpstaq.com\/","name":"Managed Hosting Platform for WordPress","description":"","publisher":{"@id":"https:\/\/www.wpstaq.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.wpstaq.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-nz"},{"@type":"Organization","@id":"https:\/\/www.wpstaq.com\/#organization","name":"Staq","alternateName":"WPStaq","url":"https:\/\/www.wpstaq.com\/","logo":{"@type":"ImageObject","inLanguage":"en-nz","@id":"https:\/\/www.wpstaq.com\/#\/schema\/logo\/image\/","url":"https:\/\/www.wpstaq.com\/wp-content\/uploads\/2023\/05\/cropped-LogoNoText.png","contentUrl":"https:\/\/www.wpstaq.com\/wp-content\/uploads\/2023\/05\/cropped-LogoNoText.png","width":512,"height":512,"caption":"Staq"},"image":{"@id":"https:\/\/www.wpstaq.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/staqhosting\/","https:\/\/www.linkedin.com\/company\/wpstaq"]}]}},"_links":{"self":[{"href":"https:\/\/www.wpstaq.com\/nz\/wp-json\/wp\/v2\/pagespeedinsights\/1839","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.wpstaq.com\/nz\/wp-json\/wp\/v2\/pagespeedinsights"}],"about":[{"href":"https:\/\/www.wpstaq.com\/nz\/wp-json\/wp\/v2\/types\/pagespeedinsights"}],"wp:attachment":[{"href":"https:\/\/www.wpstaq.com\/nz\/wp-json\/wp\/v2\/media?parent=1839"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}