I prefer a single sourceset and checking the accept header serverside to determine whether to send an avif, webp or png. Saves a bunch of html if you end up using this a lot of a single page, such as in an image gallery page.
it's good to know that there are tools for optimization because it would be a pain to build a gallery having to add all those lines to each and every image on a page.
From where, you learn these things.. I too surfing around the globe, still didn't notice these things... Can you pls explain how to start researching on certain things... It will be more helpful for me, Thank you❤
Awesome! Should the srcset be set to the below as default or do we need to try to figure out the sizes per width? /image.png?width=100 100w, /image.png?width=200 200w, /image.png?width=400 400w, /image.png?width=800 800w
I get these properties but I'm not sure if I understand them. My question is does this mean that you have to have multiple images of different sizes in assets folder or it will apply these effects on a single image with regard to what's most optimal at the time?
When you use a Db, usually save the path, but you can save the image using cdn like Cloudflare image, Next Image in Vercel this make easy this process, but if you can't paid you con try in language programming i know in PHP is possible using code.
Could you explain that srcset please. That mean I need to have 4 images in the server with 100, 200, 400, 800. Or they are created auto by the browser? Thanks
bro is there any way to preload videos at the startign only and then able to seek to any point without buffering, i dont know if youtube allow this or not but is it possible somehow through programming?
Learn more about the attributes mentioned, as well as a few more not covered in the video, in my full article: www.builder.io/blog/fast-images
I prefer a single sourceset and checking the accept header serverside to determine whether to send an avif, webp or png. Saves a bunch of html if you end up using this a lot of a single page, such as in an image gallery page.
the most productive 3 minutes of the day
I’m so glad I found your channel
Wow! I've learned so much! Thank you. Your channel deserves much more views and subs!
bro I'm really enjoying all your videos!
What a such beautiful explanation in a short video. Thank you for this!
it's good to know that there are tools for optimization because it would be a pain to build a gallery having to add all those lines to each and every image on a page.
ever heard of components?
Component 💪
This is amazing! Very cool, you gained a new follower.
This was super insightful! Thank you so much for making this video!
It is also reasonable to add onerror attribute to handle an error an onload to make Ajax loader animate if it is necessary
fantastic
Thank you for your tipps.
From where, you learn these things.. I too surfing around the globe, still didn't notice these things... Can you pls explain how to start researching on certain things... It will be more helpful for me, Thank you❤
very concise. love these vids
so much of optimization Thanks for video
Amazing video so useful. Thank you so much. 🙏🙏🙏🙏
gawwddd damn! Loved this.
That's why browsers are such a huge piece of software
Very good
Really helpful!!!
Great video and article! Shouldn't you also include sizes attribute on all your source elements?
Awesome!
Should the srcset be set to the below as default or do we need to try to figure out the sizes per width?
/image.png?width=100 100w, /image.png?width=200 200w, /image.png?width=400 400w, /image.png?width=800 800w
That escalated quickly
2 years of studying html and I didn't know this tf
Hey Bro, love this video, could you make a video about optimisations that can be done for video tag as well??
yeah that would be great !
❤❤
You started with background image and suddenly turned it into just img element
I get these properties but I'm not sure if I understand them. My question is does this mean that you have to have multiple images of different sizes in assets folder or it will apply these effects on a single image with regard to what's most optimal at the time?
Makes sense for static content. Just wondering how the same thing is applied when the images are user uploaded and coming from a database?
When you use a Db, usually save the path, but you can save the image using cdn like Cloudflare image, Next Image in Vercel this make easy this process, but if you can't paid you con try in language programming i know in PHP is possible using code.
Hey, steve any best solution with sveltkit please ? thank you
How can I apply this to background image
How does Next get those different sizes from one image src?
helping you to break UA-cam algorithm
Could you explain that srcset please. That mean I need to have 4 images in the server with 100, 200, 400, 800. Or they are created auto by the browser? Thanks
This is great, will Qwik City support this?
Absolutely will!
God bless u
bro is there any way to preload videos at the startign only and then able to seek to any point without buffering, i dont know if youtube allow this or not but is it possible somehow through programming?
3:28 Show a lot of code which add some weights to html - and told - user have this optimization)
wow
Very informative but it doesn't solve the issue at the beginning of the video, which is about a background image.
What's the React js equivalent to this Image component?
there's not, better use Nextjs which is React on steroids
@@ricko13 no custom made component by any other developer?
@@blackpurple9163 if it's in next probably there's one, or just use cloudinary
I always use 🤣🤣
Or just use nextJs
Great video Steve but you forgot to mention the CDN solutions 😂
This is just about the in HTML solutions and CDNs have prettt good mindshare
@@Xamy- i know , just a harmless joke between Steve and I.
he said cloudinary tho
Make a playlist 1st
Very good