Responsiveness vs. Speed - what to do with responsive images and no widh?

I’ve got a nice theme on my Magento but now I checked with gtmetrix and they’re of the opinion that:

Specifying a width and height for all images allows for faster rendering by eliminating the need for unnecessary reflows and repaints.

That’s great - so how can I do this if I have a responsive theme?

<li style="float: left; list-style: outside none none; position: relative; width: 1160px;"><img src="media/banner8.jpg">

And I guess the size is parsed into the style via JS (since I can’t find it in the templates).
Is there a method to solve this?

What they mean is that the <img> needs the width/height attribute set on the image tag. They list the benefits. Basically, as the browser is loading hte page, it will reserve space for the image.

I do not know how wide the image is, but I’m throwing 250px width and 250px height on there for now. You can adjust it depending on what the images actual size is. Note, that this is DIFFERENT than setting the width/height in CSS, so do not try and circumvent these attributes.

PS - That banner needs an alt attribute. I threw on one but you need to make it more descriptive, obviously.

<li style="float: left; list-style: outside none none; position: relative; width: 1160px;"><img src="media/banner8.jpg" width="250" height="250" alt="Banner">

You can always supply the width and height attributes in the img html anyway so that the browser instantly knows how big the image is even if you have it resized via css. The css styles always over-ride any attribute sizing automatically but the browser gains the image information first from the html. If the attributes aren’t present it has to load the image to work out its size and then scale it once it knows the size.

It is good to always supply width and height attributes on images.

You must be sizing the image with your css anyway otherwise it would just appear at its native size.

PaulOB: Unfortunately that doesn’t work.
Now I have set my image size like RyanReese mentioned it - but if I resize my browser, the images just get streched and appear wrong.

CSS doesn’t seem to overwrite my img attributes - can you show me an example where it’s working?

Can you show your example where it’s NOT working? :slight_smile: .

There are many images there, and none look stretched or distorted. Could you be more specific?

Sorry, yes.
It’s the huge banner in the top middle. After the site has loaded and if you resize the page, then it’s getting compressed/clinched. Before I set the img attributes, the img was resized and adjusted according to the browser size/responsive size.

Give “.bx-wrapper img” height:auto. Does that produce the desired effect?

1 Like

Awesome! It does solve the issue - thank you very much. :smile:

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.