Are you optimally loading your images?

[@Steve8708]

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

[@dopetag]

Wow! I've learned so much! Thank you. Your channel deserves much more views and subs!

[@ricko13]

bro I'm really enjoying all your videos!

[@zindev]

What a such beautiful explanation in a short video. Thank you for this!

[@harshsonar9346]

the most productive 3 minutes of the day

[@scyfox.]

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.

[@tapes.3757]

ever heard of components?

[@JeanDidier]

Component 💪

[@Mitsunee_]

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.

[@arks.lacerda]

This is amazing! Very cool, you gained a new follower.

[@namankeshari7332]

This was super insightful! Thank you so much for making this video!

[@--VICKY-]

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❤

[@codesymphony]

very concise. love these vids

[@nivaldolemos5280]

fantastic

[@Peterstavrou]

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

[@cryptobrarry]

It is also reasonable to add onerror attribute to handle an error an onload to make Ajax loader animate if it is necessary

[@NoName-1337]

Thank you for your tipps.

[@pauloluguenda8397]

2 years of studying html and I didn't know this tf

[@ashish_prajapati_tr]

so much of optimization Thanks for video

[@christopheanfry2425]

Amazing video so useful. Thank you so much. 🙏🙏🙏🙏

[@theechocolatpapii4052]

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?

[@yassinesafraoui]

That's why browsers are such a huge piece of software

[@aleksd286]

That escalated quickly

[@reaper84]

Really helpful!!!

[@filipkovac767]

Great video and article! Shouldn't you also include sizes attribute on all your source elements?

[@felipefregginrules]

gawwddd damn! Loved this.

[@ahooton]

Makes sense for static content. Just wondering how the same thing is applied when the images are user uploaded and coming from a database?

[@celadon01]

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.

[@jazzdestructor]

Hey Bro, love this video, could you make a video about optimisations that can be done for video tag as well??

[@iyannazarian866]

yeah that would be great !

[@3hustle]

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?

[@dzwoneczek9124]

You started with background image and suddenly turned it into just img element

[@ziat1988]

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

[@fazediesel]

[@fazediesel]

❤❤

[@ashish_prajapati_tr]

helping you to break KZbin algorithm

[@good-dev-student]

Hey, steve any best solution with sveltkit please ? thank you

[@oladimejiolawale5443]

How can I apply this to background image

[@none0n]

How does Next get those different sizes from one image src?

[@jonathangamble]

This is great, will Qwik City support this?

[@Steve8708]

Absolutely will!

[@ukrainetoday960]

3:28 Show a lot of code which add some weights to html - and told - user have this optimization)

[@maelstrom-qw1jl]

Very informative but it doesn't solve the issue at the beginning of the video, which is about a background image.

[@lararawf6100]

God bless u

[@taukirsheikh9405]

wow

[@blackpurple9163]

What's the React js equivalent to this Image component?

[@ricko13]

there's not, better use Nextjs which is React on steroids

[@blackpurple9163]

@@ricko13 no custom made component by any other developer?

[@8koi245]

@@blackpurple9163 if it's in next probably there's one, or just use cloudinary

[@SanjuKumar-hk8yy]

I always use 🤣🤣

[@hrithikvishwakarma001]

[@josh-dev]

Great video Steve but you forgot to mention the CDN solutions 😂

[@Xamy-]

This is just about the in HTML solutions and CDNs have prettt good mindshare

[@josh-dev]

@@Xamy- i know , just a harmless joke between Steve and I.

[@8koi245]

he said cloudinary tho

[@gpudoctor]

Or just use nextJs

[@Rajesh-rg6fw]

Make a playlist 1st