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