Hello Code Rangers, Don't forget to check out the Part 2 of Responsive Images to get an overall view of this topic. In that video I talk about using different images / image formats for different viewport / screen sizes with help of the element. Here's the link to the video : th-cam.com/video/EOmQXGrEMGs/w-d-xo.html
In this video, are the images of different pixels already downloaded to your folder ? Or its just one picture downloaded and when the browser detects it needs a higher resolution picture it changes the picture automatically to suit it?
17:46 I swear I watched about 20 videos and I didn't find anyone explaining this matter, especially this part, and the problem is that this part is the most important, even I started to doubt my mind 😂
after the 4x image dont you think its where we should have put the fall back image? because we only need the fall back image incase the other pixel images are not supported on ones screen?
The fallback image is the src attribute of the img element. It doesn't matter whether you write src before or after all the srcset attributes. If something goes wrong, the browser will use the image mentioned in the src attribute. So it's very important to mention src but not so important whether you write it before or after the srcset attributes.
Hi Michael, I think my next video on Responsive Images might solve your problem. In it I talk about using different images / image formats for different viewports. It's about the element. Here's the link to it : th-cam.com/video/EOmQXGrEMGs/w-d-xo.html Let me know if it helps.
@@CodeRange Thank you for your answer. I tried already this:
It works in Firefox but Chrome only puts out the biggest (big.webp) in all viewports. Do you have an idea how to solve that? That would be very kind of you!
@@michaeljanik1489 Hi Michael, So for different viewports, you need to add media conditions using the media attribute inside the different source elements in the picture element. Try this instead,
I have not found anyone who explains this matter as brilliantly as you. You answered all my questions and concerns. Thank you. Thank you. I am now pleased.💐
Let's say - the desktop loads a low-resolution image due to a network issue and stores it in cache memory. What will happen if I visit the same site after some moments when the network issue is gone? Will it display that low-resolution image or the high-resolution one? What will happen in cache memory? Thanks in advance.
Thank you for the kind and encouraging words! I am currently on a break from creating new videos due to unavoidable circumstances, but will definitely start soon again.
![[HTML-Tutorial-15] picture element | Responsive Images (Part -2) | Web Development for Beginners](http://i.ytimg.com/vi/EOmQXGrEMGs/mqdefault.jpg)
![[HTML-Tutorial-15] picture element | Responsive Images (Part -2) | Web Development for Beginners](/img/tr.png)
![srcset and sizes attributes - [ images on the web | part one ]](http://i.ytimg.com/vi/2QYpkrX2N48/mqdefault.jpg)
Hello Code Rangers,
Don't forget to check out the Part 2 of Responsive Images to get an overall view of this topic.
In that video I talk about using different images / image formats for different viewport / screen sizes with help of the element.
Here's the link to the video :
th-cam.com/video/EOmQXGrEMGs/w-d-xo.html
Nice one. Very helpful. Thank you !
Another very useful video! It seems like you keep addressing the exact issues I had with my most recent website!
Thank you! Glad to know that you find the videos helpful! Do share them with your friends as well.
Excellent explanation!!! Thank you for your video. You saved my day. I got what I was looking for.
That's awesome! Good to know that. Good luck with your project!
In this video, are the images of different pixels already downloaded to your folder ?
Or its just one picture downloaded and when the browser detects it needs a higher resolution picture it changes the picture automatically to suit it?
There are different images of different resolutions saved in my folder. The browser chooses the most optimal image from those.
17:46
I swear I watched about 20 videos and I didn't find anyone explaining this matter, especially this part, and the problem is that this part is the most important, even I started to doubt my mind 😂
Please do not stop keep creating more videos the way you explain things are so deatiled☺️
Thank you for the kind words. Will try my best to start again.
your teaching skill is outstanding anyone can easily understand@@CodeRange
Very Informational video. Thanks for creating this. Would be great if you can create video for How to use Webp Images..
Thank you for the kind words! Good to know that you found it helpful. I will definitely think about creating a video on Webp images.
after the 4x image dont you think its where we should have put the fall back image? because we only need the fall back image incase the other pixel images are not supported on ones screen?
The fallback image is the src attribute of the img element. It doesn't matter whether you write src before or after all the srcset attributes. If something goes wrong, the browser will use the image mentioned in the src attribute. So it's very important to mention src but not so important whether you write it before or after the srcset attributes.
Did you first download the images in different pixels?
And put them in. One folder?
Yes, all the different resolution images are in one folder
Thank you Code Range Team. How can I structure the code when I want to have webp and jpg images in different sizes depending on the viewport?
Hi Michael,
I think my next video on Responsive Images might solve your problem. In it I talk about using different images / image formats for different viewports. It's about the element.
Here's the link to it :
th-cam.com/video/EOmQXGrEMGs/w-d-xo.html
Let me know if it helps.
@@CodeRange Thank you for your answer. I tried already this:
It works in Firefox but Chrome only puts out the biggest (big.webp) in all viewports. Do you have an idea how to solve that?
That would be very kind of you!
@@michaeljanik1489 Hi Michael,
So for different viewports, you need to add media conditions using the media attribute inside the different source elements in the picture element. Try this instead,
Let me know if it solves your problem.
Thi is awesome. Thank you so much.
Thank you. Glad to know that you found it useful. Hope you like my other videos as well.
Srcset and size are very difficult to understand
I have not found anyone who explains this matter as brilliantly as you. You answered all my questions and concerns. Thank you. Thank you. I am now pleased.💐
Let's say - the desktop loads a low-resolution image due to a network issue and stores it in cache memory. What will happen if I visit the same site after some moments when the network issue is gone? Will it display that low-resolution image or the high-resolution one? What will happen in cache memory? Thanks in advance.
thank you very much po
Very clear explanation. But I don't know where (Location) to add that srcset attribute in WordPress?
Thank you. Hope you find my other videos useful as well. I am sorry, I don't know much about WordPress.
why don't you make more videos ma'am, the way you explain is exceptional and easy to understand. keep it up
Thank you for the kind and encouraging words!
I am currently on a break from creating new videos due to unavoidable circumstances, but will definitely start soon again.
Thank you so much
Thank You!!!! Finally, I understand responsive images to an extent.
Awesome! Glad to know you found it informative.
Thanks, great information.
Thank you. Hope you find my other videos useful as well!
So detailed and well explained.
Thank you. Glad to know you found it useful. Do check out my other videos as well.
Does the code change the resolution of "a" image or is there 4 different images stored and ready to call upon???
There are 4 different images.
@@CodeRange Thanks