Is there any CSS or JS trick that can do the work automatically? For example, if the device is a smartphone then the image will downsize automatically?
Good to know, I hadn't heard of srcset before. Thanks! I know the real point of this video was to highlight srcset, but the opening frames it as a video about optimizing images. For that, I try to load SVG files over raster images whenever possible - much smaller foot-print and they scale.
Can someone explain what she means by how an image should be no more than 200 kb times the portion of the screen it takes up? How do you know the portion of the screen it takes up? Front end noob here just starting out
Is it not better to put the image dimensions in the img element and then to use mod_pagespeed to create the srcset images? In this way you don't need to care about resizing your asset images manually.
Is there an amount of srtSets where the performance of the page gets affected ? if i have an image service and add a srcSet per 10px up to 4000px how will that affect performance ?
Well paradoxically the mobile image is still bigger than desktop one. I think you could be fine with one medium image in webp in this example. Better example would be with desktop image much bigger than mobile image. Like in hero or carousel.
Yes, you only need to choose when a version of your image will be used. In the example he showed to us what images would be used in a 400 width screen and 100 width screen. The screen's size of a Pixel 2 apparently is 411 width and 731 height, so the image loaded was the one assigned to this situation. Another thing to think about is if a 400 width assigned image would be used until 199 width in thsi example.
CSS cant "load" images. If you are referring to using background-image instead of using an tag no images will even begin to download until all CSS is downloaded, parsed, and the CSSOM built. Even if you dont care about proper semantics (which you should) using background-image will give the worst possible performance.
There's no "voilà"... Nothing in this video indicates that an image from the srcset property was chosen over the one from the src property. And, in my case, it's always choosing the largest image from the srcset.
Look at the network tab and reload the page at different sizes, then you’ll see images loading at different sizes. If it’s always loading the largest image then the code probably has a bug.
![srcset and sizes attributes - [ images on the web | part one ]](http://i.ytimg.com/vi/2QYpkrX2N48/mqdefault.jpg)
Nice to gain this valuable info on image sizes. 😊
In the case of that specific image, it's an icon so using an SVG image would be way smaller and look crisp always.
I only use le GIF
Is there any CSS or JS trick that can do the work automatically? For example, if the device is a smartphone then the image will downsize automatically?
Good to know, I hadn't heard of srcset before. Thanks!
I know the real point of this video was to highlight srcset, but the opening frames it as a video about optimizing images. For that, I try to load SVG files over raster images whenever possible - much smaller foot-print and they scale.
Can someone explain what she means by how an image should be no more than 200 kb times the portion of the screen it takes up? How do you know the portion of the screen it takes up? Front end noob here just starting out
how did it work if you didnt specified sizes attribute?? I have understood that if you use "w" descriptor in srcset you MUST specify a sizes atrr
Is it not better to put the image dimensions in the img element and then to use mod_pagespeed to create the srcset images? In this way you don't need to care about resizing your asset images manually.
Thank you, but what about "sizes" attribute?
Great insights into image loading on browser, your accent made it more cool.
super good video
Hello and thank you! How can I structure the code when I want to have webp and jpg images in different sizes depending on the viewport?
only problem is it doesn't work on resizing because it is cached..!!! Need To Refreshed hard one.
This is so true..been procrastinating on this srcset..time to duplicate them images..tomorrow
2:20 - "Here you show that you have a medium jpeg image".... All I see is a couple of PNGs?
Is there an amount of srtSets where the performance of the page gets affected ?
if i have an image service and add a srcSet per 10px up to 4000px how will that affect performance ?
Great Info. More tutorials on other components that could slow down the webpages
I don't have the audit tap in on my browser, how can I get it?
We use it already! :)
"200 kilobytes times the portion of the screen it takes up"... what do you mean? Can you explain this one please?
I think if the image takes 10% of the screen 200kb*10% = 20kb ? but I m not sure
🇺🇸🇰🇭@@mancesnowdon1757
Great Explanation!
Where to add that "srcset" attribute in WordPress? Do I need to add it to every single image manually every time I upload?
It would have to be built into the Wordpress theme that you’re using.
Thanks a lot :)
Well paradoxically the mobile image is still bigger than desktop one. I think you could be fine with one medium image in webp in this example. Better example would be with desktop image much bigger than mobile image. Like in hero or carousel.
merci boucoup
Cool tip, using this
So with this attribute srcset="" we don't need to use with it the sizes="" attribute?
Yes, you only need to choose when a version of your image will be used. In the example he showed to us what images would be used in a 400 width screen and 100 width screen. The screen's size of a Pixel 2 apparently is 411 width and 731 height, so the image loaded was the one assigned to this situation. Another thing to think about is if a 400 width assigned image would be used until 199 width in thsi example.
Amazing video
Great video
nice video!
Those images would also be more practical as SVGs since they are mostly simple geometric figures.
I have to remind myself that images in srcset and image in src are not supplementary.
You forgot to mention images loaded by CSS
CSS cant "load" images. If you are referring to using background-image instead of using an tag no images will even begin to download until all CSS is downloaded, parsed, and the CSSOM built. Even if you dont care about proper semantics (which you should) using background-image will give the worst possible performance.
you can use media query in css
they did not forget, they decided to make video simple
use media queries. css has nothing to do with srcset
Yeah, image-set is neat, but this video is about srcset
There's no "voilà"... Nothing in this video indicates that an image from the srcset property was chosen over the one from the src property. And, in my case, it's always choosing the largest image from the srcset.
Look at the network tab and reload the page at different sizes, then you’ll see images loading at different sizes. If it’s always loading the largest image then the code probably has a bug.
Wow and wow
Oh for the day when the browser api will auto compress images
First comment ...💗
You thought it was!!! :)