How do I add height and width to an image?

Solved

How do I add height and width to an image?

EAMedia
Tourist
6 1 0

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:

 

 

<section id="banner-{{section.id}}" class="banner">
{% 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

 

 

Accepted Solutions (2)

kazi
Shopify Partner
582 88 110

This is an accepted solution.

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

see the sample screenshot

 

render.jpg

 

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'}}"

/>

                                

▶️ If you need more help with your Shopify store
Speed Optimization | Theme Customization ? ☎️ WhatsApp ✉️Email Skype: kof.bd

View solution in original post

EAMedia
Tourist
6 1 0

This is an accepted solution.

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...

View solution in original post

Replies 9 (9)

kazi
Shopify Partner
582 88 110

This is an accepted solution.

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

see the sample screenshot

 

render.jpg

 

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'}}"

/>

                                

▶️ If you need more help with your Shopify store
Speed Optimization | Theme Customization ? ☎️ WhatsApp ✉️Email Skype: kof.bd

EAMedia
Tourist
6 1 0

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.

 

 

kazi
Shopify Partner
582 88 110

rendered size which is the correct size of your images

▶️ If you need more help with your Shopify store
Speed Optimization | Theme Customization ? ☎️ WhatsApp ✉️Email Skype: kof.bd

EAMedia
Tourist
6 1 0

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...

kazi
Shopify Partner
582 88 110

@EAMedia  You can add css

  .css-class img {

width: 380px;

height:380px;

▶️ If you need more help with your Shopify store
Speed Optimization | Theme Customization ? ☎️ WhatsApp ✉️Email Skype: kof.bd

EAMedia
Tourist
6 1 0

Okay, thank you for your help.

 

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

kazi
Shopify Partner
582 88 110

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

▶️ If you need more help with your Shopify store
Speed Optimization | Theme Customization ? ☎️ WhatsApp ✉️Email Skype: kof.bd

EAMedia
Tourist
6 1 0

This is an accepted solution.

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...

EazzyWalls
New Member
5 0 0

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