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, ...
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_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.❤
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. 🤓
@@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.
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!
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.
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.
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 ;-)
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?
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
Thank you for this special tutorial on responsive image with HTML ... but the the article version is more digest. I have a question : what is the impact in SEO if we choose to use the 'PICTURE tag instead of the 'IMG' ?
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?
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
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?
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
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.
