51 thoughts on “Do This to Improve Image Loading on Your Website

  1. I have a thought/question, and this is browser support aside. If I use the width/height of 1/1 or 2/4 or 5/7 or 16/9 would that suffice to support the aspect ratio feature coming with Firefox 71? Throw in an Object-fit: cover? Just thinking out loud for possible more flexible options.

  2. Great video and glad to hear Firefox will be calculating aspect ratio on it's own – as well as working on a css property to allow developers to define a custom one!

    I would also like to know how to have an image load the appropriate sized image for the container (the size of the img/picture element). I know srcset primarily uses the viewport size but what if you have an image that is the size of the viewport (or close enough with a bit of margin/padding) on a mobile device but then want it to only be a maximum of 300px width when on a 1080 monitor? Since it goes by viewport it will load the 1080w image instead of the 300px that the img element is limited to.

  3. Jen, you are doing an outstanding job with the team at Mozilla. Thank you all for the great content on this channel. Keep 'em coming 😊

  4. I feel like this is going to become troubling… I bet people are just going to put something like width="16" height="9" and it'll be a mess 🤔

    Anyway, thanks a lot!

  5. Since the units for width= and height= are unspecified, and it's only the ratio between them that seems to be important, could we just express it as a ratio in the img tag?

    width="15" height="10" in this case?

    Well, only if we also use the CSS height: auto

    For Firefox, with this update, that would work. But for other browsers, or Firefox 69-70, I think the "jank" would return. In cases where there's no CSS height auto, the browsers still interpret it as pixels, so it would make the space 10 pixels high to begin with. 🙁

  6. That's a great idea and a first step towards always allowing to provide an aspect ratio. Jen, it would be great if you linked to the discussions around this. The one I know of is https://github.com/w3c/csswg-drafts/issues/333.

  7. This makes sense – and I know the aspect ratio in many situations… but in a lot (leaning towards 'most') situations – I'm not going to know the height of a given image in a CMS. For example a poster image on a single resource page (say, a blog) – I'll set width but allow the client to shove whatever in there. But – the CMS knows the image size – so I guess you just have to draw the line on how each image works. Good info! I think this will be useful in 30% of cases for me. Especially grid type images. The rest usually involves a lot of the contextual image switching.

  8. Hmmm,
    I am really conflicted on the height/width not being in pixels but when you don't have it set to auto in css it will also be the height in pixels.
    I guess it used to make sense when css wasn't really a thing, but does it still make sense?

  9. @Mozilla Developer Hi Jen! Thank you for nice content on your channel. One small question. When Mozilla will start supports subgrid for CSS Grid?

  10. Height and width? Ha! What more people need to understand is sizes and scrset. One of the main reasons images lag is because the value of the sizes attribute is suboptimal. This is especially true with WordPress. Removing the jank is nice. But an empty slot isn't a great UX either.

  11. Wouldn't it be much easier to use some kind of HTML attribute like aspect-ratio="16:9"? Or some data attributes can be used to fix that like data-ratio="16:9". I think it will be much human-readable and semantic.

  12. Something like this:

    <img class="responsive-img" data-ratio="16:9" />

    .responsive-img{
    height: attr(data-ratio);
    }

  13. Hi Jen, and thanks for another great video. To go slightly off-topic, are we ever getting a fallback image attribute for <img>, in case image provided to the src for whichever reason fails to load? Of course, we handle all this stuff either using some hacks or with JS, but I think it's time that we actually get an attribute e.g. src-fallback to which we can provide a default image if the src one doesn't load. Any thoughts? Thanks.

  14. Would it not be better to include the image dimensions in a header that can be fetched from the server quickly, without waiting for the entire image?

  15. This is great news, thanks. Will the aspect ratio also be calculated for width and height attributes on `<iframe>` and `<video>` elements as well as `<img>`? In fact, could widths and heights be applied to any block-level element?

  16. But… I might be wrong or misheard what you said… Aren't settings image width and height explicitly in the HTML tag makes the image not responsive?

    OK, I need to rewatch to see if I missed anything… (I kind of thinking that width:100% and height:auto in the CSS is what doing the responsive magic even we set width and height attribute explicitly in the HTML tag…

    And thank you for the sharing! Good job!😆

  17. Looking at the last part there with multiple images, it looks like you could just simply put the aspect ratio in pixels in the html sizing. For example.. width="16" height="9" or whatever. It could actually be helpful for quickly identifying the aspect ratio when looking at it later. Now I have to go experiment. 🙂

  18. Thanks for this very informative video. The dilemma with all brand new techniques is that the average user may still have a slightly older browser, and I don't mean IE6, but maybe a browser that has not been updated for a year. So, unless your audience is tech-savvy, it may be worth waiting a bit before applying these techniques.

  19. Hi Jen I know you're active on Twitter so you might have noticed – I upgraded to FF 71.0 after watching your video and the twitter.com web interface seems to be waaaay more jank (presumably due to image loading). Have you noticed a change? Is this just something Twitter's gonna have to fix with image tags?

  20. This is awesome! Still going to have to support older browsers though for now, so I'm still going to tap into the fluid container with padding hack for lazy loading assets

  21. hey Jen! how would you support images with variable widths in this way? if the image in the html is `<img src="myimage.jpg" width="100" height="200" />` what would happen if the css applied was `width: 100%; height: auto;`?

  22. Thanks for this, do we have any caniuse page to check the state of this feature in different browsers?… and will this applicable to normal <div> elements if not , we left with padding hack to give the proper aspect ratio without jank

Leave a Reply

Your email address will not be published. Required fields are marked *

Begin typing your search term above and press enter to search. Press ESC to cancel.

Back To Top