{"id":69103,"date":"2023-05-30T15:30:00","date_gmt":"2023-05-30T12:30:00","guid":{"rendered":"https:\/\/themeisle.com\/blog\/?p=69103"},"modified":"2023-05-30T00:29:52","modified_gmt":"2023-05-29T21:29:52","slug":"use-explicit-width-and-height-on-image-elements","status":"publish","type":"post","link":"https:\/\/themeisle.com\/blog\/use-explicit-width-and-height-on-image-elements\/","title":{"rendered":"How to Use Explicit Width and Height on Image Elements"},"content":{"rendered":"\n

Visuals like images can make your website’s content more appealing. If their dimensions are not configured properly, however, they may do more harm than good. Learning how to use explicit width and height on image elements is essential to maintaining your site\u2019s performance along with its aesthetics.<\/p>\n\n\n\n\n\n\n\n

To get started, online tools like PageSpeed Insights can help you identify images with missing dimensions. Then you can either add those attributes manually, or use a plugin to simplify the process.<\/p>\n\n\n\n

\n
\n

\ud83d\udc49 In this post, we\u2019ll discuss why you need to use explicit width and height on image elements<\/a> in WordPress. Then we\u2019ll show you how to do it<\/a>. Let\u2019s get to work!<\/p>\n<\/div>\n\n\n\n

\n\t\t
<\/div>\n\t\t\t
\n\t\t \t
\n\t\t \t\tHow to use explicit \ud83d\udd27 width and height on #image elements<\/a>\n\t\t \t<\/div>\n\t\t \t
\n\t\t \tClick To Tweet \n\t\t \t\t<\/span>\n\t\t \t<\/a>\n\t\t <\/div>\n\t\t<\/div>\n<\/div>\n<\/div>\n\n\n
<\/div>\n\n\n\n

Why you need to add explicit width and height to image elements<\/h2>\n\n\n\n

Every image that is added to your site should have a defined width and height. If these attributes are missing, the browser will have to “guess” at the space needed to display each image while it’s loading the relevant page.<\/p>\n\n\n\n

As a result, various elements may be pushed around the page until the browser has finished resizing and rendering the images. These layout shifts can make your site appear less professional, and also have a negative impact on the user experience<\/a>.<\/p>\n\n\n\n

For example, if elements are moving around on your page, users may accidentally click on the wrong ones. This also makes it difficult for visitors to navigate your website and quickly find what they\u2019re looking for.<\/p>\n\n\n\n

What’s more, Cumulative Layout Shift (CLS)<\/a> is one of the key metrics in Google’s Core Web Vitals<\/a>. It measures the movement of content as your page loads. A high CLS score indicates that users are experiencing a lot of layout shifts when they visit your site, and can negatively affect your pages’ rankings.<\/p>\n\n\n\n

To solve this problem, you\u2019ll need to add width and height to your images. This helps the browser determine the exact amount of space it needs to allocate for your media files.<\/p>\n\n\n\n

Along with reducing layout shifts, this simple practice can help minimize “main-thread work.” This term refers to the tasks that a browser needs to carry out when loading a page. If the browser has to figure out the dimensions of your images, that will add to its workload and result in slower loading times<\/a>.<\/p>\n\n\n\n

Therefore, by defining the dimensions of your images, you\u2019ll be eliminating any guesswork (and extra tasks) for the browser. This will help it load your content faster and more efficiently, leading to a smoother user experience.<\/p>\n\n\n

<\/div>\n\n\n\n

How to add exact width and height to images in WordPress<\/h2>\n\n\n\n

Now, let\u2019s look at how to add exact width and height to images in WordPress. In the following two steps, we\u2019ll show you how to add missing dimensions to your images.<\/p>\n\n\n\n