December 22, 2021 | 5 min read

Image elements do not have explicit width and height

1. Identification width and height for images

Tools like GT metrix,lighthouse,Page speed insights
Identification-width-and-height-for-images
Always include 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;
}
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}}”>

Leave A Comment