The Better Way to Load Images

  Рет қаралды 53,750

Josh tried coding

Josh tried coding

Күн бұрын

Пікірлер: 125
@soto5987
@soto5987 4 ай бұрын
progressive jpg and BlurHash exist ... and picture srcset
@icodefor
@icodefor 4 ай бұрын
BlurHash is a pretty nice way to handle this considering the point is usually to reduce network latency
@NickHamilton88
@NickHamilton88 4 ай бұрын
Expo image has a placeholder prop you can pass a blurhash into 😎
@alvesvaren
@alvesvaren 4 ай бұрын
@@NickHamilton88next too
@BarakaAndrew
@BarakaAndrew 4 ай бұрын
Just calculate blurhash on upload save it with the image or even use it as a name for the image. Also for resizing I just use flyimg in a docker container, one min to spin up and forget, no need to write any code. Handles all formats u can imagine, resizes quickly and doesn't hit your nextjs backend, spin once use forever for every site, from there its just dns settings on cloudflare.
@shamoilkhan888
@shamoilkhan888 4 ай бұрын
Can you explain flyimg further? Is it a library?
@designerjehovah4453
@designerjehovah4453 4 ай бұрын
create a tutorial to teach others...now that'd be beneficial
@vinniv6806
@vinniv6806 4 ай бұрын
BlurHash,ThumbHash anyone? the wheel doesn't need to be reinvented...
@anotherzane
@anotherzane 4 ай бұрын
Ofcourse there are better solutions but I think the point is to educate people who are new about how you can easily put together things like this yourself
@designerjehovah4453
@designerjehovah4453 4 ай бұрын
this is a resource platform...we always need solutions however they might be to problems devs encounter.
@cyber-man
@cyber-man 4 ай бұрын
Reinventing the wheel makes you a better programmer
@virtual5754
@virtual5754 3 ай бұрын
Reinventing wheel provides you with work in moment and in future. Need to justify your salary
@andre__b
@andre__b 4 ай бұрын
So now its 2 requests instead of 1 for an image, and a node server backend instead if static cached content
@EinChris75
@EinChris75 4 ай бұрын
Yes it is. Not to mention all that additional JS crap you need to load as well.
@zakir.nuriiev
@zakir.nuriiev 4 ай бұрын
Thanks a lot Josh! It is a simple but cool trick!
@ernst367
@ernst367 4 ай бұрын
Josh saving the day🎉. Thanks buddy
@menschentoaster
@menschentoaster 4 ай бұрын
I haven't watched the video fully, but I'd like to have a quick rant: 0:25 it's a thing I really hate to see in the Next.js community. “The next/image can get very expensive very fast”. The only thing it costs is server performance and storage for the images. And if your cache is persistent, you don't really have to worry about performance. So there is no real downside to using next/image. What you meant to say is, “On certain providers like Vercel, next/image can get very expensive very fast”. Next.js and Vercel, although from the same Company, are not equal. And I really dislike that everything about Next.js must always be about Vercel. Edit: You basically made (more or less) what next/image is. next/image does the exact same thing. You just need to run it somewhere else than Vercel. It's good you show the community, how something like this is made. But please, don't hint to your community that you must run on Vercel.
@paw565
@paw565 4 ай бұрын
Goat comment sir
@RazexFX
@RazexFX 4 ай бұрын
Not in a single word did Josh mention that for this feature the project needs to be run on Vercel. Chill.
@menschentoaster
@menschentoaster 4 ай бұрын
@@RazexFX He indirectly did. He said next/image was not a good option because of its cost. If not run on Vercel, it costs nothing/exactly the same as his implementation.
@raves_r3177
@raves_r3177 4 ай бұрын
if the website is not hosted on vercel do I still get the optimization from image component or not
@paw565
@paw565 4 ай бұрын
@@raves_r3177 yes
@akunbeben
@akunbeben 4 ай бұрын
Thanks Josh! I just realized it could be implemented in any stack for sure!
@patrickle2500
@patrickle2500 4 ай бұрын
Yes there exist other packages, but I appreciate the rawness of this
@whynot9963
@whynot9963 4 ай бұрын
Why are we trying to solve issues that have been solved for years 😳
@odra873
@odra873 4 ай бұрын
So that new people can earn money with it?
@EinChris75
@EinChris75 4 ай бұрын
Because we unsolved those issues by adding tons of arbitrary layers of stupid and slow code, because people think that adding another layer of abstraction makes anything faster, more secure or easier to maintain. I am officially old now.
@toruwalt
@toruwalt 4 ай бұрын
You look like Sid from Toy Story
@armandsalle8447
@armandsalle8447 4 ай бұрын
Really nice trick! Do you plan to do a video about caching with Cloudflare? ❤
@alejandroechavarria539
@alejandroechavarria539 4 ай бұрын
Josh, please do a video on cloudflare
@rashidshahriar7913
@rashidshahriar7913 4 ай бұрын
yes we need one
@jamesfoley4426
@jamesfoley4426 4 ай бұрын
I would like to see you do a video on caching using cloudflare
@h45e32u4f
@h45e32u4f 4 ай бұрын
All types of caching in next js, and cloudflare with examples. I would get on my knees for it.
@belkocik
@belkocik 4 ай бұрын
Cloudflare 🔥🔥
@MrJfergs
@MrJfergs 4 ай бұрын
What about just using unpic for compression and multiple image sources on your own device?
@inderpalsingh3387
@inderpalsingh3387 3 ай бұрын
Will this technique improve the Largest Contentful Paint (LCP) score?
@griffin955
@griffin955 4 ай бұрын
I feel this is definitely a "interesting to know but not amazing enough to use over the conventional way which is much easier" type of thing.
@dreamsachiever212
@dreamsachiever212 4 ай бұрын
WAIT! so using the next.js image component is a paid feature after 1000 ? what if the code is NOT hosted on vercel? what am i missing here?
@haikalgakbar
@haikalgakbar 4 ай бұрын
When you host your site on Vercel, the first 1000 images are optimized for free when using the Image component. Hosting elsewhere doesn't include this optimization, but you can still use the Image component at no cost.
@raves_r3177
@raves_r3177 4 ай бұрын
@@haikalgakbar does that mean that after the first 1000 images, vercel will just use the normal img tag or still the image component but without optimization
@devfren
@devfren 4 ай бұрын
@@raves_r3177no they stop rendering your images unless you pay them😢
@haikalgakbar
@haikalgakbar 4 ай бұрын
@@raves_r3177 if you exceed the limit Vercel will throw 402 status code and show alt text instead of the image
@dreamsachiever212
@dreamsachiever212 4 ай бұрын
@@haikalgakbar ok thank you. These companies are greedy
@PerfumeBoxLotus
@PerfumeBoxLotus 4 ай бұрын
thanks joshh
@fadio_
@fadio_ 4 ай бұрын
You should always process and re-encode uploaded images, as they might be hacked and contain injected javascript, you should also strip the extension and save them with random chars
@Pipu748
@Pipu748 4 ай бұрын
Hello. Kind sir. This comment has make me curious. While I do some reasearch about what u've said, because i want to learn, not because i believe u wrong. I would love if u could provide me with some buzzwords about the subject or any place to get info about this. Thank you.
@fadio_
@fadio_ 4 ай бұрын
​@@Pipu748 Basically, you would want to filter any potential threat, do these: 1- Check uploaded file extension and make sure it's one that you allow. 2- Don't trust the extension alone, check the MIME type of the image. 3- Check the image size (width and height) to make sure there's an image in there. 4- Re-encode the image (ex: to webp), and remove any potential harmfull data in the exif metadata. 5- Resize the image to a certain size. 5- Generate a random string as the new image name, and save the image to disk outside a publically accissable folder. (save it without an extension for extra safety) 6- Serve the images through code instead of a direct link. (there will be no direct link when you save them in non-public folders) Use sharp library for all of the above
@fadio_
@fadio_ 4 ай бұрын
@@Pipu748 I replied but my comment got removed. Twice!
@fadio_
@fadio_ 4 ай бұрын
@@Pipu748 Basically, you would want to filter any potential threat, do these: 1- Check uploaded file extension and make sure it's one that you allow. 2- Don't trust the extension alone, check the MIME type of the image. 3- Check the image size (width and height) to make sure there's an image in there. 4- Re-encode the image (ex: to webp), and remove any potential harmfull data in the exif metadata. 5- Resize the image to a certain size. 6- Generate a random string as the new image name, and save the image to disk outside a publically accissable folder. (save it without an extension for extra safety) 7- Serve the images through code instead of a direct link. (there will be no direct link when you save them in non-public folders) Use sharp library for all of the above
@the-boring-guy-1
@the-boring-guy-1 4 ай бұрын
For everyone who is confused whether the Image optimization is a paid service or not, if you are hosting your site on vercel then after 1000 image optimization your images won't load and give out an Error 401: Payment required. If you are hosting on your own server or any other service, then you are probably fine.
@raves_r3177
@raves_r3177 4 ай бұрын
if not hosting on vercel, that means i dont get the image optimization right? (unless i set up my own image optimization)
@devfren
@devfren 4 ай бұрын
@@raves_r3177yup
@the-boring-guy-1
@the-boring-guy-1 4 ай бұрын
@@raves_r3177 No, vercel limits the image optimization to 1000 but if you are using netlify or you own hosting then these limits won't apply. is a part of NextJS framework, it's not a vercel "feature".
@richmail
@richmail 4 ай бұрын
​@@raves_r3177as long as you use the Next Image component and you're hosting on your own server, you will get image optimization no matter how many images you have.
@reze_dev
@reze_dev 4 ай бұрын
I never use vercel, so if i use vercel, using next/image is bad idea for nextjs?
@sunequist2180
@sunequist2180 4 ай бұрын
Just load it in from cache or the assets folder, and if you want to optimize for a large amount of images, and use webassembly to load 100' of images quickly. P.S. webasm isn't worth it, if it's just an image or two, only do if it runs up in this 30-50s ish (amount of images).
@rorn-dev
@rorn-dev 4 ай бұрын
is it work after run build as production ?
@subrat_samal
@subrat_samal 4 ай бұрын
my man has finally upgraded his pc 🎉
@faddoo
@faddoo 4 ай бұрын
Does this impact on INP?
@lazyplayer1
@lazyplayer1 4 ай бұрын
That sherk at 7:20 literally made me scream
@cleverprogrammer7409
@cleverprogrammer7409 4 ай бұрын
Josh i can't believe what you did awesomely. josh could you make Hono crash course
@codesera9416
@codesera9416 4 ай бұрын
Hi josh I'm trying to join your discord server but this invite link is invalid or has expired is showing
@zinckk-1430
@zinckk-1430 4 ай бұрын
Hono deployed on cloudflare worker does not seem to support sharp, do you have any other solution
@zoefyt
@zoefyt 4 ай бұрын
He was in toystory?
@MrSofazocker
@MrSofazocker 4 ай бұрын
The "better" way would be using progressive refinement of an image format such jpeg (PJPEG)
@goodguyhenri2090
@goodguyhenri2090 4 ай бұрын
The Ideas in the video are very reasonable but I think there will be some performance problems, especially at scale: 1. reading the image from the filesystem in my testing with a similar approach I got VERY inconsistent read times with fs. I‘d at least recommend using a db for that. Postgres even has a proper type for storing byte code. 2. using sharp for resizing. Although sharp is quite performant, depending on the image size you might run into high latency by using sharp on every request. Although I think all options here aren‘t to great…
@nick-ui
@nick-ui 4 ай бұрын
Shrek example is siick ;)
@11WicToR11
@11WicToR11 4 ай бұрын
what do you pay for in Next Image? I thought it just caches stuff on your own server so that call to "random_url/image.png" actually hits your own server where its already cached ready to go. Where is that cost? What am I missing?
@dobroslav.radosavljevic
@dobroslav.radosavljevic 4 ай бұрын
Transformation - resizing for different resolutions.
@miketoporkov1889
@miketoporkov1889 4 ай бұрын
Maybe dumb question, but still, since loading big image always takes some time, can we transform the first received portion of buffer to convert to image placeholder instead? Like listening on loading events or sth...
@miketoporkov1889
@miketoporkov1889 4 ай бұрын
Ehhhh, there are only "load" and "loadstart" events, one when it's loaded and one for just notification that it started.... So nevermind, your way is the right one and only 😊, though can be improved by using srcset for different screens sizes)))
@miketoporkov1889
@miketoporkov1889 4 ай бұрын
Also, instead of using pre-created image with low resolution, can be used randomly, created gradient then blurred, etc. Though it is not the best option, but still relevant for some designs.
@swarajbachu8551
@swarajbachu8551 3 ай бұрын
code for this ?
@abdullahiali-n2u
@abdullahiali-n2u 4 ай бұрын
i think there is one for that [blurhash], don't reinvent the wheel
@nandakishoregowdag
@nandakishoregowdag 4 ай бұрын
Hi Josh , how do I contact you ?
@okadz7037
@okadz7037 4 ай бұрын
u r legendary 💫
@irfansaeedkhan7242
@irfansaeedkhan7242 4 ай бұрын
thank you
@ramez3038
@ramez3038 4 ай бұрын
LIFE SAVER
@abdelmounaimammari9064
@abdelmounaimammari9064 4 ай бұрын
Josh moved to MAC !
@kristjanretter6851
@kristjanretter6851 4 ай бұрын
the real mvp
@wilydeee
@wilydeee 4 ай бұрын
Video starts at 0:00
@berniko4954
@berniko4954 4 ай бұрын
Thanks for the information, I did not know
@deezydoezeet
@deezydoezeet 4 ай бұрын
Golden!
@yalamanchilivenusai8874
@yalamanchilivenusai8874 4 ай бұрын
Bro where is your old laptop??? I miss it lol
@Amin-uo5un
@Amin-uo5un 4 ай бұрын
sweet
@shakapaker
@shakapaker 4 ай бұрын
Do we need to add an unoptimized image prop to the next image?
@Mheme-f7n
@Mheme-f7n 4 ай бұрын
Good to know, but too lazy to implement
@ahsookee
@ahsookee 4 ай бұрын
Average js developer:
@rabi7331
@rabi7331 4 ай бұрын
@@ahsookee for real
@orzarhi
@orzarhi 4 ай бұрын
👑👑👑
@bhxzbcx
@bhxzbcx 4 ай бұрын
4:16 great! now someone will get into your server. never ever trust user input with things like this
@dowellkin
@dowellkin 4 ай бұрын
Or just use blurhash
@qudusayo
@qudusayo 4 ай бұрын
It’s so nice seeing this first 🤡
@Hexalyse
@Hexalyse 4 ай бұрын
Why are my comments disappearing by magic? 🤔
@Hexalyse
@Hexalyse 4 ай бұрын
@@jw200 KZbin themselves ? Not even the channel's owner ? Wait... how does it make sense? It sounds absolutely crazy
@_nikeee
@_nikeee 4 ай бұрын
You can just host imgproxy yourself. No need to build a service.
@chonkusdonkus
@chonkusdonkus 4 ай бұрын
or just use JPEG XL, oh wait, google killed that
@kszyh_
@kszyh_ 4 ай бұрын
Nothing new, There are better approaches
@EinChris75
@EinChris75 4 ай бұрын
What a sad state that internet has reached... paying to deliver images onto a web page because of some bloatet concept of software development. Not your fault, Josh, you are just delivering the sad news.
@kasutudotdev
@kasutudotdev 4 ай бұрын
give me that
@coding-master-shayan
@coding-master-shayan 4 ай бұрын
Wow you stole that image loading idea from web dev simplified 😂 but with a bit different way 👏
@raves_r3177
@raves_r3177 4 ай бұрын
doesnt Plaiceholder already do this
@falahisnan4582
@falahisnan4582 4 ай бұрын
First
@thekwoka4707
@thekwoka4707 4 ай бұрын
...just srcset and don't try this bullshit loading state.
@josh4play.youtube
@josh4play.youtube 4 ай бұрын
thank you
What Large-Scale Software Looks Like
18:32
Josh tried coding
Рет қаралды 35 М.
Learn NextJS's Superpower ISR in 15 Minutes
15:35
Josh tried coding
Рет қаралды 45 М.
Леон киллер и Оля Полякова 😹
00:42
Канал Смеха
Рет қаралды 4,7 МЛН
Une nouvelle voiture pour Noël 🥹
00:28
Nicocapone
Рет қаралды 9 МЛН
1% vs 100% #beatbox #tiktok
01:10
BeatboxJCOP
Рет қаралды 67 МЛН
I Found a Faster Way to Build Next.js APIs
15:57
Josh tried coding
Рет қаралды 32 М.
Don't build another effin' chatbot - Web Dev Challenge S1E1
21:54
Learn With Jason
Рет қаралды 159 М.
A New Drag And Drop Library For EVERY Framework
16:02
Theo - t3․gg
Рет қаралды 174 М.
The "Wrong Way" To Use React
39:30
Theo - t3․gg
Рет қаралды 142 М.
How Fast Can I Fill My Inbox?
13:30
Dev Detour
Рет қаралды 390 М.
Reacting to Controversial Opinions of Software Engineers
9:18
Fireship
Рет қаралды 2,1 МЛН
The Easy Way to Design Top Tier Websites
11:54
Sajid
Рет қаралды 632 М.
DON'T Serve Unoptimized Images - Webp, Srcset, ImageKit, and more!
18:29
How Slow Is JavaScript? | Prime Reacts
15:34
ThePrimeTime
Рет қаралды 185 М.
Леон киллер и Оля Полякова 😹
00:42
Канал Смеха
Рет қаралды 4,7 МЛН