How to make images load faster (Firefox)

General Discussion
,
1

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.

2

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:

3

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?

4

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

Edit: Looks like it is Chrome only?

1 Like
5

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:

6

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
7

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.

8

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: