DON'T Serve Unoptimized Images - Webp, Srcset, ImageKit, and more!
ฝัง
- เผยแพร่เมื่อ 7 ก.ค. 2021
- Unoptimized images leads to a bad user experience. Don't make the mistake of serving massive images which leads to longer load times and frustrated users and customers.
In this video, we'll cover a few ways to optimize your images for the web. You can start by using something like tinypng.com/ to compress your images. Then, you can take it to the next level with ImageKit.
ImageKit can dynamically create multiple different sizes of your images. When you combine this with the srcset propert in HTML, you can always serve the correct size depending on the user's screen size and pixel density. It can also determine the optimal image format to send to the user based on the browser.
ImageKit docs : docs.imagekit.io/features/ima...
ImageKit blogs on resizing: imagekit.io/blog/tag/image-re...
Srcset with Kevin Powell - • srcset and sizes attri...
_____________________________________________
Newsletter 🗞
Interested in exclusive content and discounts? 🤯 Sign up for the newsletter!
www.jamesqquick.com
_____________________________________________
Connect with me 😀
Live streams on Twitch - / jamesqquick
Follow me on Twitter - / jamesqquick
Join the 💬 Discord Server 💬 - / discord
_____________________________________________
COURSES 💻
Learn how to build Fullstack apps with React and Serverless Functions - www.jamesqquick.com/courses/r...
Learn everything you need to know about Visual Studio Code - www.udemy.com/learn-visual-st...
Build a Quiz App - www.udemy.com/build-a-quiz-ap...
![srcset and sizes attributes - [ images on the web | part one ]](http://i.ytimg.com/vi/2QYpkrX2N48/mqdefault.jpg)
![srcset and sizes attributes - [ images on the web | part one ]](/img/tr.png)
Thanks for sharing.
I've just finished my portfolio site and yes, images takes about 40% of loading time.
This gonna be useful.
You are the only image kit tutorial video on youtube... You should have a lot more hits!
Such great AWESOMENESS! How did I miss this one! Great stuff thank you as usual!!
I love this tutorial... simple, usefull and beautiful. Thank you for sharing.
Good video. I've been doing all these optimizations just recently to improve our LCP score. The only thing missing is webp. We have our own asset server so I'm going to have to dive deep to see what needs to be changed...
I was just wondering, if I had like 100 JPGs, and I wanted to serve them as webp, I'd have to convert the whole batch beforehand right? Converting on the fly might not create any benefits no?... Just wondering...
THAT IS VEEEERY INTERESTING! Thanks James 🚀🚀🚀
If you don't have much time, make it Quick. Cause this guy got you covered.
Lol thanks!
What to do in case a cloud service stops responding for some reason? Can we set a fallback local image to show up instead of an alt attribute text?
I wonder if imagekit support adding metadata such as title or description when requesting and getting response
I would love something like this for next/image since I'm currently using that and deployed a Netflix-Clone, but i'm having a hard time optimizing the images. And if I use next/image all of my styling breaks...
Thank you so much for this tip!!
Very well done. I needed to know this like right now! 🤣
Hi James. I'm curious about one thing; can you please explain why you decided to create an array with the numbers 1-10 and using Foreach, as opposed to using a for loop which wouldn't necessitate creating an array for indexes?
Great points. Unfortunately this was just an oversight. As I changed the way demo I did the demo, I forgot to update some parts of the code. Sorry for the confusion!
Helped so much❤
What was the vscode theme name you used?
so cool! thanks
Thank you so much , man ❤
This is awesome! thanks for sharing :)
Glad you enjoyed it!
@@JamesQQuick Are there any optimizations we can make around serving gifs via imagekit? Currently it seems like cloudfront caching (media served through static s3 bucket via aws) is more performant than imagekit for Gifs, but I'm unsure if this is because I haven't configured imagekit correctly to serve Gifs
That's what I need. Thanks.
Could you please walk us through uploading on imagekit via client, react to be specific.
VERY VERY NICE!
what is the vscode theme you're using?
This is gold
First like comment then see complete video...that much I trust you...
Fun watching this now that you told us how it was all done on the last Compressed 🍻
Is it not loosing the quality of image when you compressed it?
Now I'm curious on how image kit protects itself from denial of service attacks or prevents people from causing crazy costs to a company by abusing the dynamic imagine generation 🤔
You can restrict requests via "named-transformations" meaning you create pre-made transformations and name them, then, if you choose, imagekit can deny any transformation that isn't named. I believe there is throttling as well, plus if you call the same transform over and over it's cached
I always use the picture tag with webp and fallback, while using imagekit as cdn
Very nice!
thank you for tutorial. Maybe you can use Webpack to compress assets image during building production.
That’s a good idea too!
You can do this. I've used a webp loader, however dynamic content that users upload obviously doesn't run through webpack. This is a great option for doing that outside
Nice tutorial! What if the requirement was that people need to upload images on let's say a contact form and you need to compress/optimize those before the user uploading them?
You could do a check on the file size of the image they are looking to upload and show an error message if it's too big. Is that what you mean?
@@JamesQQuick Thanks for the reply! In stead of the error msg, it would be nice to automattically reduce images that are beyond certain file size (let say >2MB) so to minimize bad user experience by showing just the error. I find people using contact forms with file upload fields on their cell phones don't necessary know how to reduce them if they encounter an error while uploading. Are there good JS library's for this, how to use them or what do you recommended?
@@renatoloefstop Search about sharp js, cdns and optimizing user input media.
Thanks 👍
Why srcset doesn't work. I don't se the changes, but if i 'm making changes in src by addin tr attribute it works fine
These thumbnails with ❌ and ✔️ are great attention-grabbers! keep 'em coming please
Thanks! They definitely seem to get more visibility
And what about when you have API, with images, where that was loaded/apply be users, and u aas frontend web dev should make this images smalled? Have you any idea ? You dont want every image translate by hand.
BlurHash is also another good method for showing blurry placeholder images while waiting for the larger images to load.
pretty neat
great!
Compare a compressed file in the png format and in webp format.
Webp is superior to true color PNG in lossless and far better in lossy
what about video optimization?
That’s something I don’t know as much about. I assume similar principles apply though
#AVIF to rule them all 💪
Theres room for JXL
I recommend compress.js
9:22 hoy vi ese video.
You're missing a really huge way to optimize your site with those images: you don't even need 80% of the ones you showcased. Most of it is text on a background. Just put the text as actual text. and put the profile picture circles as the only pictures on the page. It looks like some of them were reused so you'd only need to load 1 or 2 much smaller images instead of 6 huge, mostly-redundant images.
Text shouldn't be in images unless it's a logo or wordmark.
Also your contrast is pretty awful with the black leading 00 on top of a black background. Vincent Flanders of WPTS would have a field day with those images on a website.
WebPs are also just bad for the end user if they want to save them. Lazy loading is the same. It doesn't work if JS is turned off or not supported. Those substitutions and calculations also cost computing power.
For thousands of years (decades, but that's not as fun to say), man has used thumbnails with real image formats. It worked on dial-up. It works today. Just optimize the image by making thumbnails. It's simpler, faster, cheaper, and just works.
dynamic imagekit.io
im interested in this. but i dont like to put 18 minutes of my life to watch this.
Hmmm how much time can you give?
if you can, atleast 10mins max. but if it cant really be compressed in a short video, make sure what you say is not repeated. i noticed your intro is almost 2 mins long. at most 30 secs will do. and what you said there was once again repeated later in the vid, wastes time.
also, make use of sections/timestamps. just a simple big title on screen on what part you are taking about.
but hey, im just a random internet dude in your comment section. it's your choice if you want to follow my opinions/recommendations.
i'll be wishing you luck on your youtube career.
I watched this in 1.5X speed and was able to follow along just fine.
@@JamesQQuickShould have used ImageKit to compress your video! (j/k)