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.

Жыл бұрын

You can generate these images with a microservice. Around 700kb with Go as a on demand container. Request the image from the webservice. In the webservice check the screen size or parameters. This obviously has implications. As you do a crop/cut on the images without knowing the content. However it can help reducing manual work needed. The webservice can cache, create thumbnails, ...

@Canemahue

9 ай бұрын

in my work we have the images in a s3 bucket, then i implemented a lambda function that resizes the image when there is a request for a specifically image size.

@pg_ml538

7 ай бұрын

Is ther benefit in doing scrset if you are using WebP?

@iamtharunraj

20 күн бұрын

​@@pg_ml538As far as I understand, webp is a nicely compressed image format and it reduces the image size(and quality). But still the resolution of the image does matter. So it's better to have multiple dimensions of the same image so that you can use the srcset to load them appropriately. A big image will cause the site to load slowly.

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.❤

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!

So good man!! Love the content

Amazing as always Kyle!

Best video on picture & img srcset. Thanks Kyle.

Loved the breakdown.

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

great work thank you

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

12:33 Thanks for clarifying that the picture element with srcset swaps back and forth between the various images. Otherwise I was already wondering if different image ARs could also be achieved with a simple img srcset.

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. 🤓

@pierre-jeanchancellier8955

Жыл бұрын

Do you mean webp ? webm seems to be for audio or video files. Doesn't it ?

@almannazyrov394

Жыл бұрын

@@pierre-jeanchancellier8955 Ah, ya, that's correct, webp v2, just confused with the video type file 🥴🥴🥴

@Xamy-

Жыл бұрын

It’s called do both

@chriss87878

11 ай бұрын

I the think AVIF format is even better for compressing images to the web.

@almannazyrov394

11 ай бұрын

@@chriss87878 yes, they are even +5% more performed then webp but pagespeed insights recommend to use webp just for seeing 90+ performance. For AVIF, insights show warning but it could be shut down in JavaScript.

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?

❤❤ thank you

thx Kyle

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.❤

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

Hey what are your thoughts on using a CDN like Cloudinary? I heard it will do automatic responsive images for you, is that true?

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?

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.

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

Great video. I wonder if this is also possible for background images?

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

I love you man love from india your r fab. Bro I have a request that make projects with mern !!❤❤

Is it also possible to combine this method with the picture attribute with the lazy load you showed? Because I want to have different pictures on different screensizes but have a nice loading ;-)

@hetoverseo3887

9 ай бұрын

yes.

So what should be the three different image sizes on average? Also how are the original source images cropped to any give width and height, by using figma or image editing software?

@trainjumper

Жыл бұрын

You can choose any number of sizes to serve (rather than just three), but for three images a good rule of thumb might be, calculate the size of your element on a HD desktop display (1080p or 1440p), alongside a half-resolution version, and lastly either a UHD version for 4k displays (if you can comfortably support that bandwidth), or a quarter-resolution version if you'd like to lazy-load low res content initially to improve site loading times

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

Awesome👍, first comment

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

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?

How do you change image according to screen width not image/file width?

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

@boomshakalaka656

Жыл бұрын

Very interesting question

How does this work if the pictures are loaded by JS? The Dom doesn't know the srcsets already and it fails to load the different images

I could only get responsive images working correctly on desktop. When I used phones, due to pixel density, my breakpoints no longer worked. I was using w instead of px, so I don't understand what was wrong

Doesn’t framworks like next js do it outof the box ?

max-width and min-width in sizes in SAFARI browser is still not supported. How to handle different sizes images load on safari?

please make video on drizzle orm

can you make some content on solidJS please?

W video

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

@CrAzZyKiLleR01

Жыл бұрын

True. Also didn't get that

@MsDreamzHD

Жыл бұрын

He does not have a medium image, so it can't show on the page, it was just for demonstration

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.

Between 500 and 800 I thought it would default to the image defined in the img tag src attribute. Guess not.

Frist one

13:15 , "more for artistic design purposes" ; aka art-directed media. The talk around this feature is weird like battery/cpu perf don't exist or have tradeoff with bandwidth. Larger images do impact cpu/gpu performance, and the UX perf and the users eyesight and the users battery. Changing back to a smaller image should be encouraged for any device, mobile , desktop, and tablet. It isn't a case of: because you can load a bigger image doesn't mean you should. More over it's that that once an image is loaded doesn't mean it should remain large and stay in use because srcset cached it.

I keep forgetting about this. Why is this so unintuitive?

first

@WebDevSimplified- Kyle buy an extra guitar stand, dude! Seeing this horror scene makes my eyes bleed.

Good job bro, JESUS IS COMING BACK VERY SOON;WATCH AND PREPARE

you are good but you talk aa lotttttttttt bro you just keep talking!

How could you do this with background images? Say you have a section with bg parallax img, how to swap out a huge img for a smaller img on mobile devices?