i guess im randomly asking but does someone know of a way to log back into an instagram account?? I somehow forgot the account password. I love any tips you can offer me
Great video, thanks. Whenever I see image size not reserved for images and web pages I think what is wrong with these people the solution has been in place since 1995. Always include height and width on IMG.
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.
Fabulous video. I'd really appreciate your expertise in answering a couple of questions if you have the time! If we want to use different pictures of different sizes according to a screen break. What would be the best way to approach this. For instance
The issue above is that I can provide height and width for the mobile image, but if the user loads on the desktop, I don't understand yet, how to provide fixed width for that. Would love to hear your thoughts on this! Thanks
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. :)
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.
Hi Jen, and thanks for another great video. To go slightly off-topic, are we ever getting a fallback image attribute for , 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.
@@MozillaDeveloper The thing I'm mentioning solves a problem that for whatever reason an image doesn't load e.g. was removed from the server, it would get replaced by some default placeholder image. You can see those examples all over the internet (primarily social platforms) and the way we solve it right now is with JS e.g. if an image returns 404 or if there's an error in general, you replace the image with a placeholder image. This is to keep the UI not show that ugly image missing icon, pretty much ruins the UI when it happens.
This is great news, thanks. Will the aspect ratio also be calculated for width and height attributes on `` and `` elements as well as ``? In fact, could widths and heights be applied to any block-level element?
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
I love geeking out with Mozilla. Everyone seems like people I would have been pals with before the media went divisive in 2016 and split the world into two.
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.
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.
I had the same thought and it believe would also go to art direction point. Some people may be fine with using object-fit: cover but some may not want the image to cut off some potentially important parts of an image that may be closer to the edge and may instead want to define their own custom aspect ratios so that the entire image always displays rather than being clipped or expanding outside the img/picture element.
Doesn't adding `object-fit` negate the thing that this feature is trying to introduce? With `object-fit` you're deffering the image size to be determined by the size of its container.
Also my thought, and I am sure it is on the docket for a future release. Correct me if I am wrong but I don't believe this is part of the HTML standard - yet. I think it is just a draft made by a Chrome dev and so far has only been adopted by Chome/Blink. I am sure it will eventually be adopted by the HTML spec and other browsers will begin adding it.
Its in the works on firefox but there are some build errors. Also, webkit has build errors as well. Probably the most popular new feature on chrome currently.
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 elements if not , we left with padding hack to give the proper aspect ratio without jank
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?
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?
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!😆
Hmm... I get that now... In older browser you can't get both (the solution of jankness and responsiveness) to work but the newer browser will try to grab the info of image and make a ratio and save our lives 😁 well, thanks! But if the solution is only work on newer browser, I think we better come up a backward compatible solution... Anyway thanks 😁
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.
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. :(
@@MozillaDeveloper I understand. But the problem with it is that the image information is in two places. It's in the image file and in the HTML. If I want to substitute a different image I have to change the HTML too. This is not normal form (where a given piece of information should be stored in one place only - to avoid them getting out of sync) . I have a site where some images are in multiple places, so this gets to be major chore. I have to run around trying to remember all the pages that use it so I can modify the size attributes. What would be REALLY cool is if the server could include the image sizes of all the images on the page in the page header. Sure, it would only get the static images but it would still help a lot.
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.
@@ahsath This change shipped in Safari 13.1 this spring. I'm not sure where I can point you for documentation - for instance, this isn't really a new 'feature' that's listed on Can I Use - but I know from talking to engineers that this has definitely shipped in Safari, as well as Chrome, Edge, and Firefox. Testing should show as much.
@@JenSimmons yep, it ain't a feature here's some mdn docs for it developer.mozilla.org/en-US/docs/Web/Media/images/aspect_ratio_mapping thanks for let it me know that's is available for safari
hey Jen! how would you support images with variable widths in this way? if the image in the html is `` what would happen if the css applied was `width: 100%; height: auto;`?
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!
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 😊
i guess im randomly asking but does someone know of a way to log back into an instagram account??
I somehow forgot the account password. I love any tips you can offer me
Watching Jen's video is more addictive than watching Netflix. Supreb content with amazing explanation. Thank you so much.
I'm not a web developer. But, I find these videos incredibly interesting and well put together.
Watched and applied it immediately on my website. Boom experience is so much better now
height: doggo
Thank you for the help to stop "Janky" sites!
Great video, thanks. Whenever I see image size not reserved for images and web pages I think what is wrong with these people the solution has been in place since 1995. Always include height and width on IMG.
Thanks! This is now being added and tested in the open source CMS Zotonic.
What was the result of the convo? It's been 2 years and I haven't heard anything.
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.
Can't wait for a CSS aspect ratio property. It would make so many time consuming styles faster to write.
Fabulous video. I'd really appreciate your expertise in answering a couple of questions if you have the time!
If we want to use different pictures of different sizes according to a screen break. What would be the best way to approach this.
For instance
The issue above is that I can provide height and width for the mobile image, but if the user loads on the desktop, I don't understand yet, how to provide fixed width for that.
Would love to hear your thoughts on this! Thanks
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. :)
Does it work?
Automatic aspect ratios without JS... 🤯 Thanks goodness!
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.
@Mozilla Developer Hi Jen! Thank you for nice content on your channel. One small question. When Mozilla will start supports subgrid for CSS Grid?
@@MozillaDeveloper Nice! Many thanks!
Hi Jen, and thanks for another great video. To go slightly off-topic, are we ever getting a fallback image attribute for , 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.
@@MozillaDeveloper The thing I'm mentioning solves a problem that for whatever reason an image doesn't load e.g. was removed from the server, it would get replaced by some default placeholder image. You can see those examples all over the internet (primarily social platforms) and the way we solve it right now is with JS e.g. if an image returns 404 or if there's an error in general, you replace the image with a placeholder image. This is to keep the UI not show that ugly image missing icon, pretty much ruins the UI when it happens.
See these related issues: github.com/whatwg/html/issues/3858 + github.com/w3c/csswg-drafts/issues/656
I didn't know srcset existed...huh...very cool!!
Awesome! It works! Super helpful. THANKS
This is great news, thanks. Will the aspect ratio also be calculated for width and height attributes on `` and `` elements as well as ``? In fact, could widths and heights be applied to any block-level element?
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
If you're already using srcset AND sizes, would specifying the image width and height be necessary?
I love geeking out with Mozilla. Everyone seems like people I would have been pals with before the media went divisive in 2016 and split the world into two.
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.
Really good 👍. Thanks Jen
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.
I had the same thought about object fit.
I had the same thought and it believe would also go to art direction point. Some people may be fine with using object-fit: cover but some may not want the image to cut off some potentially important parts of an image that may be closer to the edge and may instead want to define their own custom aspect ratios so that the entire image always displays rather than being clipped or expanding outside the img/picture element.
Doesn't adding `object-fit` negate the thing that this feature is trying to introduce? With `object-fit` you're deffering the image size to be determined by the size of its container.
Great video Jen! Are there any plans to bring native lazy loading of images to Firefox?
Also my thought, and I am sure it is on the docket for a future release. Correct me if I am wrong but I don't believe this is part of the HTML standard - yet. I think it is just a draft made by a Chrome dev and so far has only been adopted by Chome/Blink. I am sure it will eventually be adopted by the HTML spec and other browsers will begin adding it.
Its in the works on firefox but there are some build errors. Also, webkit has build errors as well. Probably the most popular new feature on chrome currently.
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 elements if not , we left with padding hack to give the proper aspect ratio without jank
Very cool! Thanks for the info!
This is very useful! Many thanks!
Great video. Thanks to upload :)
What happen if I have to set dimensions with vh an vw?
this content is great, thanks heaps!
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?
Love mozilla
Something like this:
.responsive-img{
height: attr(data-ratio);
}
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?
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!😆
Hmm... I get that now... In older browser you can't get both (the solution of jankness and responsiveness) to work but the newer browser will try to grab the info of image and make a ratio and save our lives 😁 well, thanks! But if the solution is only work on newer browser, I think we better come up a backward compatible solution...
Anyway thanks 😁
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.
Huh! Everything old is new again :D
why dont just add new attribute named maintain which maintain the aspect
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. :(
So is this Firefox only solution?
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?
@@MozillaDeveloper I understand. But the problem with it is that the image information is in two places. It's in the image file and in the HTML. If I want to substitute a different image I have to change the HTML too. This is not normal form (where a given piece of information should be stored in one place only - to avoid them getting out of sync) . I have a site where some images are in multiple places, so this gets to be major chore. I have to run around trying to remember all the pages that use it so I can modify the size attributes.
What would be REALLY cool is if the server could include the image sizes of all the images on the page in the page header. Sure, it would only get the static images but it would still help a lot.
Wondering what I can do, whitout to know width and height...
Is there any update with width/height on the element? It's already almost a year passed, I need it badly 😢
Thanks!! :D
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.
Where have you been? 😄
2020 now! And this technique now works for any browser like latest version of Chrome and Safari?
It works for Chrome and Firefox, but not for Safari.
@@MozillaDeveloper awesome!
@@MozillaDeveloper Where can we see support for this in Safari?
@@ahsath This change shipped in Safari 13.1 this spring. I'm not sure where I can point you for documentation - for instance, this isn't really a new 'feature' that's listed on Can I Use - but I know from talking to engineers that this has definitely shipped in Safari, as well as Chrome, Edge, and Firefox. Testing should show as much.
@@JenSimmons yep, it ain't a feature here's some mdn docs for it developer.mozilla.org/en-US/docs/Web/Media/images/aspect_ratio_mapping thanks for let it me know that's is available for safari
Great video!
Will this work if you use compressive imagery?
What if we don't know the actual aspect ratio of the image?
@@MozillaDeveloper Thank You for for your answer Jen! I wish I knew this before
hey Jen! how would you support images with variable widths in this way? if the image in the html is `` what would happen if the css applied was `width: 100%; height: auto;`?
💪
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!
@Still waiting for Fry Retrocompatibility, in essence, where old browsers are not going to render things properly
@@xerzy How old should be a browser to not use width / height applied by css?
Давно пора!