Another optimization you can set is decode=async along with your loading lazy attribute. From Mozilla Docs, "Decode the image asynchronously and allow other content to be rendered before this completes."
Thank you! I was just thinking about switching out my images to use webp and avif, after Chrome's Lighthouse screamed at me lol but seeing you can also compress images was very helpful!
Great job explaining image optimization and lazy loading! How can I efficiently handle responsive images in situations where I have various screen sizes and resolutions to consider, especially for background images in web design?
I'm missing the height and with on the img tag. You want to set them so that you don't get any CLS during loading of the page. This also helps improve your SEO score.
@@blackpurple9163 Cumulative Layout Shift (CLS) is a stable Core Web Vital metric. It's an important, user-centric metric for measuring visual stability because it helps quantify how often users experience unexpected layout shifts. A low CLS helps ensure that the page is delightful
There is actually a substantial group of people that use text only browsers, such as lynx, etc. Mostly a bit nerdy or unaware of these. Why are they used? Fast fast fast! They show the alt in place of the image. No waiting for the big browsers to load and unload. I also use title occasionally where it's helpful. (Not that often). Also, text only means no Javascript. Which is both good and bad. element is helpful there.
Great video! Thank you. I have a request for you. Your videos are engaging to watch. Could you create a video showing how to style images to make them responsive? I mean, for example, if we have a large image on the homepage, what CSS properties can we apply to make it look nice on every device? Maybe we also need to change the image from a 16:9 aspect ratio to a 9:16 aspect ratio on smaller devices. I'm looking for someone like you to create a detailed video about this. Thank you in advance.
I disagree that phone uses a lower quality. Lots of phones have significantly higher pixel density / are more likely to be "retina" (pixel indistinguishable) at the typical viewing distance compared to computer monitors.
Dev you have been of a great help to me in the last few years as a self-taught developer. Right now I need a job. It has been a real issue for me. I have been a developer of self, building projects for clients as a freelance but I really want to go out of this shell and work in real life company. This is a great problem for me. Please I need your help.
Hello, very useful video! I was following the steps and I don't get why the picture tag gives an automatic resizing to my images. Is it something to do with the fact that I'm using bootstrap? maybe it impresses default sizes to the tag? I'm still figuring it out, if someone has the answer, I would appreciate it. Thanks for the tutorial!
Hey ed, Really appreciate your🤘🏻 hard work, honestly saying your topics are catchy i am regularly watching your videos, it helps me to fix my mistakes. There is one request. I want you to make one video on creating E-commerce application using MERN from scratch. This will help us to get an idea about how to create any app from scratch. Thank you🤝
i think the best for img in csas for default values to use max-width: 100% some images won't be fit for big containers and forcing it at 100% might make it pixelated
Sir how to optimize nextjs images i am so frustrated when i used them width is required or fill layout or even we give width and height it yelling about priority but i don't need because i want lazy loading i am so obsessed with this
I have a question next js related. How can I do the same thing what you did with the picture tag but now with Image? for some reason it does not work. probably bc the picture element is just a wrapper of the img and not the Image it self.
NB : img should be used with " " and not a div as parent container 😡. You dont need to set a height of auto for an img, as long as its width 100% and whatever object-fit you want to use. the width of the parent is enough to constraint the img, and keep the image ratio. (as long as you ofc don't set a height to the parent, even tho generaly you want to avoid set height to anything, unless really necessary)
Animating images under certain conditions like when you reach a breakpoint and another image is to be rendered, like in your case it went from horizontal dolphin in desktop mode to vertical one in tablet and lower, in the case if the div containing it could rotate it'd look fun, more lively instead of just simply changing the image, or add blur or pixelation/mosaic effect when the images swap, would it be possible to do with minimal code? I use react js
that would be unnecessary since device width do not change, so it will be either one image or another. There is no way for a user to change their device width apart from a desktop user changing the size of the window, which is unlikely. Breakpoints are used to define what happens at what screen size , how it happens does not matter because it will always be on either one side of the breakpoint, they will not be transitioning from one side to other. On the other hand it is very much possible, just rotate the div or add a filter using some svg or any other effect and set transition and duration for that effect, and voila you have ur required transition when size changes which 99% of the audience wont see haha
