Make Your Site Lightning Fast With Responsive Images

Loading the right image based on screen resolution, size, and medium is difficult unless you know about the picture element. The picture element makes responsive images trivial. This will not only drastically increase the loading speed of your page for mobile users, but it will also increase the user experience for everyone that uses your site.

📚 Materials/References:

🌎 Find Me Here:

⏱️ Timestamps:

00:00 - Introduction
00:43 - img srcset Attribute Basics
06:35 - img srcset Attribute Advanced
10:12 - picture Element

#HTMLPicture #WDS #ResponsiveImages

[amiralishoja]

I really needed this video to be able to use the images in the best possible way in my project. Kyle, thank you for sharing this topic with your community in the best possible way.❤

[alman_harbi]

Instead of changing the resolution of images (it will eat large portion of content images, from 1600 to 400-800, for example, put commerce banners, there will be half of the cuted content), better to compress jpg, png files to webp v2.0 without losing quality, saving 90 - 98% of file size. Lighthouse strongly recommend to do this (❗include next-gen format images to webp) in order to maximize performance. 🤓

[agraiskr]

I just came across a question about screen pixelrate and I couldn't really find info about its effect and the point of playing with it, because I couldn't really see the difference in the page display when it was inherited, and here it is! - your video explained everything! thank you!

[amodmanjarekar]

For anyone else confused, this is not a single image that is being resized. The 1600x400, 800x200, 400x100 are three different png images with different resolutions.

If you want to implement this, you'll have to manually duplicate and resize your images to the desired resolutions and include each of them in your source.

[vaishnavi_s]

Finally understood how srcset works... thank you so much🙇🏻‍♀️❤️

[kaustavroy]

Best video on picture & img srcset. Thanks Kyle.

[codegenesis]

It is undeniably great video. It helped me a lot clearing my confusions.

Can you please upload videos on tricks on extremely fast loading websites?

[jangradev]

Hello sir,
I am trusting on your content that are providing in your vedios, as i am learner, i am trusting that u always giving best content.❤

[sruthikrishnakumar]

Never been here this early! Thanks for sharing awesome content 😊

[chip_a]

what about AVIF, WEBP? and fallback with png or jpg?

[innerinsights]

I really want your react course but I don't have money for it I live in south africa the currency to us dollar is dogshit rn.

[gyunayify]

I like this but aren't the majority of phone screens around 2k resolution?

[peter-bash]

Hi Kyle, brilliant video as usual mate.
I have a request please, Would you please make a projet video on how to BUILD A BLOG USING ASTRO AND MDX FILES. how to upload images and and update content.

[sherifsaleh]

Hi Kyle, is there's a performance reason not using the min-width media query to follow CSS mobile first logic?

[avneet]

There's no image between 500px and 800px? Why not? There's a max-width: 800px media query exactly for that reason, right?

[biLLie_wiLLie]

Does it mean that the browser is gonna download images less size? Can it save me from downloading big images?

[EnglishRain]

6:17 - if screen size increases for whatever reason, does it blank out while the bigger image is downloaded?

[adarsh-chakraborty]

Why i need to use the picture element to use different images on different resolutions, What if I put different images link in the first step you shown

[jaysiefamily]

Thank you for your amazing video. I saw many videos from many people, but now I don't understand what a good structure of a project implement by React. Could you make video about fully structure web application for real work by React and frameworks that you actually use with react such as (Nextjs, Redux, Tailwild, axios, NextAuth) by The project has login system and public page and work with Restful service from Backend, I'm curious about structuring the right way with the technology of 2023. Can you recommend or make a video tutorial for me?

[dawid_dahl]

Does anyone know if this is something Next’s Image component is doing under the hood, or should I use this stuff in Next as well?