Deal with img width and height
Hi everyone!
I've been using width and height attributes on img markups for quite some time now simply because I don't want to get the error in google Lighthouse and to prevent extra CLS. I think it's stupid because I will always have a fixed value for width and height (usualy the actual image dimensions) and then play around with the image in css (most of the times just doing max-width: 100% and height: auto).
How do you guys go with dealing with images width and height? I hate the fact that I'm entering width and height values just to shut up Google but that they are not actually used. I'm developing with templating languages (Shopify Liquid) so my HTML markup has to be versatile. It needs to work for different aspect ratios and not impact negatively the layout shift. In a situation where I will render an image in a section that will change layout based on the viewport, I'm not sure what I should be using as html width and height attributes.
I've linked an example of how I render the main image of a product page that is basically a two column on desktop and gets to one column below 768px viewport.
Hope that's clear. Thanks!
I've been using width and height attributes on img markups for quite some time now simply because I don't want to get the error in google Lighthouse and to prevent extra CLS. I think it's stupid because I will always have a fixed value for width and height (usualy the actual image dimensions) and then play around with the image in css (most of the times just doing max-width: 100% and height: auto).
How do you guys go with dealing with images width and height? I hate the fact that I'm entering width and height values just to shut up Google but that they are not actually used. I'm developing with templating languages (Shopify Liquid) so my HTML markup has to be versatile. It needs to work for different aspect ratios and not impact negatively the layout shift. In a situation where I will render an image in a section that will change layout based on the viewport, I'm not sure what I should be using as html width and height attributes.
I've linked an example of how I render the main image of a product page that is basically a two column on desktop and gets to one column below 768px viewport.
Hope that's clear. Thanks!
A friendly place for developers to meet other devs, ask questions, get help, and just have a good time 🙂.
36,263Members
Resources
Similar Threads
Was this page helpful?
