Overview
Following are some points related to how to fix and improve “width and height for images”-
- 1. Do not explicit width and height attributes that can cause large layout shifts as your page loads.
- 2. Width and height attributes can be used to define the image’s width and height.
- 3. Image Optimization Tools
Understanding some tips will be helpful based on the content below. The content below derives from our experience executing over 50+ speed optimization projects on Shopify websites.
Site Speed Performance Analysis Tools
What is “Image Elements do Not have Explicit width and height”
Always included width and height size attributes on your images and video elements. alternatively, reserve the required space with CSS aspect ratio boxes.
Example:
<img src=”cat.jpg” width=”640″ height=”360″ alt=”cat text”/>
Note:
i) width:100% does not give an element an explicit width.
ii) height:auto also does not give an image an explicit height, you are instructing the browser to make the image height whatever it thinks is appropriate based on the image proportions or the size of the container.
Example:-
img {
width: 100%; /* or max-width: 100%; */
height: auto;
}
How to Fix “Image Elements do not have Explicit Width and Height”
The first option is to define the width and height of the image using the height and width attributes.
Use the width and height attributes to define an image’s dimensions
The image simply needs to be sized according to its dimensions.
By defining the sizes in pixels, you can do this with the width and height attributes.
In this way, the browser is able to calculate the aspect ratio and allocate enough space for the image before loading it.
Here is an example of how to use the width and height attributes to define the dimensions of an image:
< img src="image.jpg" width="200" height="100">
In this example, the image will be displayed with a width of 200 pixels and a height of 100 pixels.
It’s important to note that specifying the dimensions of an image using the width and height attributes is considered best practice because it allows the browser to allocate the appropriate amount of space for the image before it has finished loading. This can improve the overall performance and rendering of the webpage.
Shopify Example:
Before
< img src=”{{ product.images[position_img_2] | img_url: ’50×50′ }}”
data-src=”{{ img_url }}” />
data-widths= ”[180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048]”
data-aspectratio= ”{{ product.images[position_img_2].aspect_ratio }}”
data-sizes=”auto”
class=”lazyload attachment-shop_catalog size-shop_catalog”
alt=”{{product.images[position_img_2].alt}}”>
After
< img src=”{{ product.images[position_img_2] | img_url: ’50×50′ }}”
data-src=”{{ img_url }}”
data-widths=”[180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048]”
data-aspectratio=”{{ product.images[position_img_2].aspect_ratio }}”
data-sizes=” auto”
class=”lazyload attachment-shop_catalog size-shop_catalog”
alt=”{{product.images[position_img_2].alt}}”
width=”{{ product.images[position_img_2.width}}”
height=”{{ product.images[position_img_2.height}}”>
How to fix the Aspect Ratio
An aspect ratio is a proportional relationship between the width and height of an image or display. It is typically expressed as a ratio, such as 4:3 or 16:9.
Aspect ratio boxes are graphical elements that are used to display an image or video in a specific aspect ratio. They are often used to ensure that an image or video is displayed correctly on a screen, regardless of the screen’s size or resolution.
For example,
an aspect ratio box with a ratio of 16:9 would be used to display an image or video that has a width that is 16 units and a height that is 9 units. If the aspect ratio of the image or video does not match the aspect ratio of the box, then the image or video may be distorted or have black bars added to the top and bottom or sides to maintain the correct aspect ratio.
Aspect ratio boxes are commonly used in video production, web design, and other applications where it is important to maintain the correct aspect ratio of an image or video.
Conclusion
As an alternative, we propose that you can find a way to automatically add width and height attributes to your images in 99 percent of cases. By following the above tips, you can help improve the performance of your website and ensure that your images are displayed correctly.
