Code Self Study Forum

How to make images load faster (Firefox)

It looks like the width and height attributes should be kept in the HTML. Firefox will calculate an aspect ratio from them. Then add { width: 100%; height: auto; } (or similar) in the CSS so that Firefox knows how wide the image should be. The auto value prevents problems when resizing the browser window.

Yeah, I ran into this a while ago when trying to get a good page speed score. Using width:100% is slower.

If the image is above the fold, then set the width and height. I then make like 10 media queries for all the different screen sizes.

If the image is below the fold, lazy load it! :slight_smile:

How did you test it? Edit: sorry, I misread that and thought it said that it was “100% slower”. :slight_smile:

I think they mean that if you have the height and width attributes on the HTML element, plus the CSS rules, they won’t handle the height/width attributes the old way but will compute the aspect ratio and reserve that spot for the image, whether it’s a Retina screen or not. (I don’t have a Mac so I’m not familiar with the details of using a Retina screen.)

Are you using loading="lazy" or JavaScript for that?

Oh javascript. Is loading=“lazy” built into html5?

Edit: Looks like it is Chrome only?

1 Like

I think the loading attribute is Chrome-only at the moment, but I’m not sure about the status.

I’ve usually loaded the images immediately for SEO reasons, but I’m cache-busting them on my latest sites, so the images probably don’t rank well. Google Images doesn’t send much traffic any more anyway. :cry:

Oh yeah, don’t keep changing the names of the images!

Even with the lazy loading I am using, my images rank well.

I use a tag like this:

<img width="580" height="750" class="printableimage" src="tiny-image.jpg" data-src="https://www.myfooddata.com/printables/vitamin-c-printable-list.jpg" alt="A printable list of the top 10 foods highest in vitamin C.">

With a good alt tag.
And then a no-script tag pointing to the image:

<noscript><img width="580" height="750" class="printableimage" src="https://www.myfooddata.com/printables/vitamin-c-printable-list.jpg" alt="A printable list of the top 10 foods highest in vitamin C."></noscript>

I think if you do that, your images should rank again. If you are looking to do cache busting on a CDN just refresh the image folder? Maybe I don’t understand everything with the content though.

1 Like

You can see an example of the cache-busting on the parking info page. If I had more time I would fix that, but it was faster to use the automatic cache-busting.

Yeah, that kind of evergreen image does not need cache busting (IMO). I would be worth investing the time removing it to get the SEO juice I think. :slight_smile: