How do I add height and width to an image?

Technical Q&A
1

Hi there everyone…

Okay, so I have an issue trying to fix my cls for site speed.

I need to add width and height to my images. I have read almost every article online and my understanding is that I need to add width and height attributes, so that aspect ratio can be be taken from it to provide a space for my images before they appear. Which will prevent the layout shift. Okay, that’s fine.

The question is how do I actually do it?

I first thought I could find each individual image in the code, but I can’t find the images to edit. So I have been trying the sections.

This is from the ‘image with text overlay’ section:

{% if section.settings.image != nil %} <img src="{{ section.settings.image | img_url: '100x', format: 'pjpg' }}" alt="{{ section.settings.image.alt | escape }}" class="lazyload {{ settings.image_loading_style }}" sizes="100vw" data-src="{{ section.settings.image | img_url: default, format: 'pjpg' }}" srcset=" {{ section.settings.image | img_url: default, format: 'pjpg' }} {{default | replace: 'x', 'w'}}, {{ section.settings.image | img_url: size1, format: 'pjpg' }} {{size1 | replace: 'x', 'w'}}, {{ section.settings.image | img_url: size2, format: 'pjpg' }} {{size2 | replace: 'x', 'w'}}, {{ section.settings.image | img_url: size3, format: 'pjpg' }} {{size3 | replace: 'x', 'w'}}, {{ section.settings.image | img_url: size4, format: 'pjpg' }} {{size4 | replace: 'x', 'w'}}, {{ section.settings.image | img_url: size5, format: 'pjpg' }} {{size5 | replace: 'x', 'w'}}, {{ section.settings.image | img_url: size6, format: 'pjpg' }} {{size6 | replace: 'x', 'w'}}, {{ section.settings.image | img_url: size7, format: 'pjpg' }} {{size7 | replace: 'x', 'w'}}, {{ section.settings.image | img_url: size8, format: 'pjpg' }} {{size8 | replace: 'x', 'w'}}, {{ section.settings.image | img_url: size9, format: 'pjpg' }} {{size9 | replace: 'x', 'w'}}, {{ section.settings.image | img_url: size10, format: 'pjpg' }} {{size10 | replace: 'x', 'w'}}"

/>

This is the original code. I tried to make many additions but it hasn’t solved the problem, so I removed them.

Is this where I can make changes, or do I actually need to find the code for each individual images?

If so, how do I do this?

I’m using an older version of the turbo theme.

I would prefer not to share the website I’m working on.

I look forward to hearing your opinions.

Thanks

2

@EAMedia Hello you can find the required width and height for the images in chrome inspector

see the sample screenshot

render.jpg
render.jpg1346×618 205 KB

Then you have to find the liquid file for the images then add width height with <img tag ex:

<img src=“{{ section.settings.image | img_url: ‘100x’, format: ‘pjpg’ }}” width=“380px” height=“380px”
alt=“{{ section.settings.image.alt | escape }}”
class=“lazyload {{ settings.image_loading_style }}”
sizes=“100vw”
data-src=“{{ section.settings.image | img_url: default, format: ‘pjpg’ }}”
srcset="
{{ section.settings.image | img_url: default, format: ‘pjpg’ }} {{default | replace: ‘x’, ‘w’}},
{{ section.settings.image | img_url: size1, format: ‘pjpg’ }} {{size1 | replace: ‘x’, ‘w’}},
{{ section.settings.image | img_url: size2, format: ‘pjpg’ }} {{size2 | replace: ‘x’, ‘w’}},
{{ section.settings.image | img_url: size3, format: ‘pjpg’ }} {{size3 | replace: ‘x’, ‘w’}},
{{ section.settings.image | img_url: size4, format: ‘pjpg’ }} {{size4 | replace: ‘x’, ‘w’}},
{{ section.settings.image | img_url: size5, format: ‘pjpg’ }} {{size5 | replace: ‘x’, ‘w’}},
{{ section.settings.image | img_url: size6, format: ‘pjpg’ }} {{size6 | replace: ‘x’, ‘w’}},
{{ section.settings.image | img_url: size7, format: ‘pjpg’ }} {{size7 | replace: ‘x’, ‘w’}},
{{ section.settings.image | img_url: size8, format: ‘pjpg’ }} {{size8 | replace: ‘x’, ‘w’}},
{{ section.settings.image | img_url: size9, format: ‘pjpg’ }} {{size9 | replace: ‘x’, ‘w’}},
{{ section.settings.image | img_url: size10, format: ‘pjpg’ }} {{size10 | replace: ‘x’, ‘w’}}"

/>

1 Like
3

Hi Kazi,

Thank you for your detailed reply. I’m going to try your suggestion now.

Shouldn’t I be using the intrinsic size insted of the rendered size?

I will be back to let you know how it goes.

4

rendered size which is the correct size of your images

1 Like
5

Great, thank you.

It’s working, but the the height is not responding when I switch view, from mobile to desktop. The width is adjusting fine, but the height is not changing…

6

@EAMedia You can add css

.css-class img {

width: 380px;

height:380px;

}

7

Okay, thank you for your help.

Do i add that to a style sheet, or to the same area as before?

8

You can add it to css file or in theme settings if there is css section

9

Yeah, i did it already… i added it to css file.

i used this code instead:

img { max-width: 100%; height: auto; }

Hopefully this can help someone else in th future.

Thanks for your help…

10

Hi there. Is there any way to add this code for all images on the website in bulk? Thanks