Are you optimally loading your images?
Vložit
- čas přidán 5. 09. 2024
- Do you know how and when to use decoding=async, loading=lazy, fetchpriority, picture, aspect-ratio, or srcset?
A deep dive on optimally loading images in my latest blog post: builder.io/blo...
#html #webdev #performance #css #javascript
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
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 💪
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.
What a such beautiful explanation in a short video. Thank you for this!
the most productive 3 minutes of the day
Wow! I've learned so much! Thank you. Your channel deserves much more views and subs!
bro I'm really enjoying all your videos!
This was super insightful! Thank you so much for making this video!
This is amazing! Very cool, you gained a new follower.
fantastic
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❤
Thank you for your tipps.
2 years of studying html and I didn't know this tf
very concise. love these vids
so much of optimization Thanks for video
Amazing video so useful. Thank you so much. 🙏🙏🙏🙏
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
You started with background image and suddenly turned it into just img element
gawwddd damn! Loved this.
Great video and article! Shouldn't you also include sizes attribute on all your source elements?
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 !
❤❤
Really helpful!!!
That's why browsers are such a huge piece of software
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?
How can I apply this to background image
That escalated quickly
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.
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
Hey, steve any best solution with sveltkit please ? thank you
How does Next get those different sizes from one image src?
Very informative but it doesn't solve the issue at the beginning of the video, which is about a background image.
helping you to break CZcams algorithm
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
This is great, will Qwik City support this?
Absolutely will!
3:28 Show a lot of code which add some weights to html - and told - user have this optimization)
God bless u
wow
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
Make a playlist 1st