{"id":2286,"date":"2021-10-04T12:23:46","date_gmt":"2021-10-04T06:53:46","guid":{"rendered":"https:\/\/imageattributespro.com\/?p=2286"},"modified":"2023-04-25T10:06:40","modified_gmt":"2023-04-25T04:36:40","slug":"add-missing-image-dimensions","status":"publish","type":"post","link":"https:\/\/imageattributespro.com\/add-missing-image-dimensions\/","title":{"rendered":"Add Missing Image Dimensions (Width And Height) To Prevent Layout Shift"},"content":{"rendered":"<p>Your browser does not know the dimensions of the image before the image is downloaded. So the browser has no idea how much space the image is going to take up once it&#8217;s downloaded. <\/p><p>To accommodate the image, the browser will have to move around the content once the image is loaded. You can see this in the gif below. The content is moved around once the screenshot is loaded. <\/p><figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"687\" height=\"521\" src=\"https:\/\/imageattributespro.com\/wp-content\/uploads\/2021\/10\/image-layout-shift.gif\" alt=\"Image Layout Shift\" class=\"wp-image-2287\"\/><\/figure><p>Specifying the width and height of images on your page helps browsers reserve the space required for the image to load. <\/p><p>Since users start reading your website before images are loaded, <strong>preventing layout shift leads to better user experience for your users. <\/strong><\/p><p><strong>Pro Tip<\/strong>: Google now takes into account user experience as part of ranking websites for SEO. Layout shifts is one of the criteria and it&#8217;s measured as <a href=\"https:\/\/web.dev\/cls\/\">Cumulative Layout Shift<\/a> or CLS. <\/p><p><strong>Adding image dimensions will help improve your CLS score on PageSpeed<\/strong> and satisfy the &#8220;Image elements do not have explicit width and height&#8221; suggestions. <\/p><h2 class=\"wp-block-heading\">Adding Missing Image Dimensions With Image Attributes Pro<\/h2><p>Image Attributes Pro 1.4 added a new filter <code><a href=\"https:\/\/imageattributespro.com\/codex\/iaffpro_html_image_markup_post_update\/\">iaffpro_html_image_markup_post_update<\/a><\/code>. We will be using this filter to add missing image width and height. <\/p><ul class=\"wp-block-list\"><li><strong>Add the following snippet to the <code>functions.php<\/code> of your active theme. <\/strong><\/li><\/ul><pre class=\"wp-block-code\"><code>\/**\n * Add missing image dimensions to image markup\n * \n * @param $match (string) The image HTML markup after the bulk updater has added the necessary attributes.\n * \n * @return $match (string) image HTML markup with dimensions added to it.\n * \n * @author Arun Basil Lal\n * @link https:\/\/imageattributespro.com\/codex\/iaffpro_html_image_markup_post_update\/\n *\/\nfunction prefix_iap_add_image_dimensions( $match ) {\n\n\t\/\/ Return if the image markup already has image dimensions.\n\tif ( ( strpos( $match, \"width=\" ) !== false ) || strpos( $match, \"height=\" ) !== false ) {\n\t\treturn $match;\n\t}\n\n\t\/\/ Extract the src from the match.\n\tpreg_match( '\/&lt;img&#91;^&gt;]+src=\"(&#91;^\"&gt;]+)\"\/', $match, $src );\n\n\t\/\/ Get the image dimensions.\n\t$dimensions = wp_getimagesize( $src&#91;1] );\n\n\t\/\/ Add the image dimensions into the image markup.\n\t$match = str_replace( '&lt;img', '&lt;img ' . $dimensions&#91;3], $match );\n\n\treturn $match;\n}\nadd_filter( 'iaffpro_html_image_markup_post_update', 'prefix_iap_add_image_dimensions' );<\/code><\/pre><ul class=\"wp-block-list\"><li>This filter is triggered only when the bulk updater updates the images within the post or product HTML. <strong>Be sure to select Post HTML in the Bulk Updater Settings tab.<\/strong><\/li><\/ul><figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"662\" height=\"852\" src=\"https:\/\/imageattributespro.com\/wp-content\/uploads\/2023\/04\/choose-to-update-Post-HTML-in-Bulk-Updater-Settings.png\" alt=\"Choose To Update Post HTML In Bulk Updater Settings\" class=\"wp-image-3659\" srcset=\"https:\/\/imageattributespro.com\/wp-content\/uploads\/2023\/04\/choose-to-update-Post-HTML-in-Bulk-Updater-Settings.png 662w, https:\/\/imageattributespro.com\/wp-content\/uploads\/2023\/04\/choose-to-update-Post-HTML-in-Bulk-Updater-Settings-600x772.png 600w\" sizes=\"(max-width: 662px) 100vw, 662px\" \/><figcaption class=\"wp-element-caption\">Choose to update Post HTML for either Image Title or Image Alt Text, or both.<\/figcaption><\/figure><ul class=\"wp-block-list\"><li><strong>Take a full database backup and then run the Bulk Updater. <\/strong><\/li><\/ul><p>Note: If the image markup already has either of the attributes specified, then it is not updated. For example, if the image markup already has the <code>height<\/code> added to it, then it&#8217;s skipped and <code>width<\/code> will not be added. <\/p>","protected":false},"excerpt":{"rendered":"<p>Your browser does not know the dimensions of the image before the image is downloaded. So the browser has no idea how much space the image is going to take up once it&#8217;s downloaded. To accommodate the image, the browser will have to move around the content once the image is loaded. You can see [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_seopress_robots_primary_cat":"","_seopress_titles_title":"","_seopress_titles_desc":"","_seopress_robots_index":"","footnotes":""},"categories":[31],"tags":[],"class_list":["post-2286","post","type-post","status-publish","format-standard","hentry","category-how-to"],"_links":{"self":[{"href":"https:\/\/imageattributespro.com\/wp-json\/wp\/v2\/posts\/2286","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/imageattributespro.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/imageattributespro.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/imageattributespro.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/imageattributespro.com\/wp-json\/wp\/v2\/comments?post=2286"}],"version-history":[{"count":4,"href":"https:\/\/imageattributespro.com\/wp-json\/wp\/v2\/posts\/2286\/revisions"}],"predecessor-version":[{"id":3660,"href":"https:\/\/imageattributespro.com\/wp-json\/wp\/v2\/posts\/2286\/revisions\/3660"}],"wp:attachment":[{"href":"https:\/\/imageattributespro.com\/wp-json\/wp\/v2\/media?parent=2286"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/imageattributespro.com\/wp-json\/wp\/v2\/categories?post=2286"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/imageattributespro.com\/wp-json\/wp\/v2\/tags?post=2286"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}