The Better Way to Load Images

[@soto5987]

progressive jpg and BlurHash exist ... and picture srcset

[@icodefor]

BlurHash is a pretty nice way to handle this considering the point is usually to reduce network latency

[@NickHamilton88]

Expo image has a placeholder prop you can pass a blurhash into 😎

[@alvesvaren]

@@NickHamilton88next too

[@BarakaAndrew]

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]

Can you explain flyimg further? Is it a library?

[@designerjehovah4453]

create a tutorial to teach others...now that'd be beneficial

[@andre__b]

So now its 2 requests instead of 1 for an image, and a node server backend instead if static cached content

[@EinChris75]

Yes it is. Not to mention all that additional JS crap you need to load as well.

[@vinniv6806]

BlurHash,ThumbHash anyone? the wheel doesn't need to be reinvented...

[@anotherzane]

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]

this is a resource platform...we always need solutions however they might be to problems devs encounter.

[@cyber-man]

Reinventing the wheel makes you a better programmer

[@virtual5754]

Reinventing wheel provides you with work in moment and in future. Need to justify your salary

[@akunbeben]

Thanks Josh! I just realized it could be implemented in any stack for sure!

[@zakir.nuriiev]

Thanks a lot Josh! It is a simple but cool trick!

[@menschentoaster]

I haven't watched the video fully, but I'd like to have a quick rant: <a href="#" class="seekto" data-time="25">0:25</a> 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]

Goat comment sir

[@RazexFX]

Not in a single word did Josh mention that for this feature the project needs to be run on Vercel. Chill.

[@menschentoaster]

@@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]

if the website is not hosted on vercel do I still get the optimization from image component or not

[@paw565]

@@raves_r3177 yes

[@whynot9963]

Why are we trying to solve issues that have been solved for years 😳

[@odra873]

So that new people can earn money with it?

[@EinChris75]

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.

[@armandsalle8447]

Really nice trick! Do you plan to do a video about caching with Cloudflare? ❤

[@alejandroechavarria539]

Josh, please do a video on cloudflare

[@rashidshahriar7913]

yes we need one

[@jamesfoley4426]

I would like to see you do a video on caching using cloudflare

[@h45e32u4f]

All types of caching in next js, and cloudflare with examples. I would get on my knees for it.

[@belkocik]

Cloudflare 🔥🔥

[@patrickle2500]

Yes there exist other packages, but I appreciate the rawness of this

[@thiagoaguiar658]

MAAAAN you really really saved me TYSM

[@ernst367]

Josh saving the day🎉. Thanks buddy

[@toruwalt]

You look like Sid from Toy Story

[@griffin955]

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.

[@fadio_]

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]

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_]

​@@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_]

@@Pipu748 I replied but my comment got removed. Twice!

[@fadio_]

@@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]

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]

if not hosting on vercel, that means i dont get the image optimization right? (unless i set up my own image optimization)

[@devfren]

@@raves_r3177yup

[@the-boring-guy-1]

@@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]

​@@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]

I never use vercel, so if i use vercel, using next/image is bad idea for nextjs?

[@sunequist2180]

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).

[@PerfumeBoxLotus]

thanks joshh

[@cleverprogrammer7409]

Josh i can't believe what you did awesomely. josh could you make Hono crash course

[@MrSofazocker]

The "better" way would be using progressive refinement of an image format such jpeg (PJPEG)

[@abdullahiali-n2u]

i think there is one for that [blurhash], don't reinvent the wheel

[@subrat_samal]

my man has finally upgraded his pc 🎉

[@okadz7037]

u r legendary 💫

[@lazyplayer1]

That sherk at <a href="#" class="seekto" data-time="440">7:20</a> literally made me scream

[@MrJfergs]

What about just using unpic for compression and multiple image sources on your own device?

[@zoefyt]

He was in toystory?

[@nick-ui]

Shrek example is siick ;)

[@irfansaeedkhan7242]

thank you

[@kristjanretter6851]

the real mvp

[@goodguyhenri2090]

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…

[@dreamsachiever212]

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]

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]

@@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]

@@raves_r3177no they stop rendering your images unless you pay them😢

[@haikalgakbar]

@@raves_r3177 if you exceed the limit Vercel will throw 402 status code and show alt text instead of the image

[@dreamsachiever212]

@@haikalgakbar ok thank you. These companies are greedy

[@inderpalsingh3387]

Will this technique improve the Largest Contentful Paint (LCP) score?

[@deezydoezeet]

Golden!

[@ramez3038]

LIFE SAVER

[@abdelmounaimammari9064]

Josh moved to MAC !

[@orzarhi4050]

👑👑👑

[@Amin-uo5un]

sweet

[@rorn-dev]

is it work after run build as production ?

[@codesera9416]

Hi josh I'm trying to join your discord server but this invite link is invalid or has expired is showing

[@yalamanchilivenusai8874]

Bro where is your old laptop??? I miss it lol

[@Hexalyse]

Why are my comments disappearing by magic? 🤔

[@jw200]

KZbin removes comments

[@Hexalyse]

@@jw200 KZbin themselves ? Not even the channel's owner ? Wait... how does it make sense? It sounds absolutely crazy

[@zinckk-1430]

Hono deployed on cloudflare worker does not seem to support sharp, do you have any other solution

[@faddoo]

Does this impact on INP?

[@11WicToR11]

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]

Transformation - resizing for different resolutions.

[@_nikeee]

You can just host imgproxy yourself. No need to build a service.

[@nandakishoregowdag]

Hi Josh , how do I contact you ?

[@miketoporkov1889]

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]

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]

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.

[@wilydeee]

Video starts at <a href="#" class="seekto" data-time="0">0:00</a>

[@berniko4954]

Thanks for the information, I did not know

[@dowellkin]

Or just use blurhash

[@swarajbachu8551]

code for this ?

[@Mheme-f7n]

Good to know, but too lazy to implement

[@ahsookee]

Average js developer:

[@rabi7331]

@@ahsookee for real

[@qudusayo]

It’s so nice seeing this first 🤡

[@chonkusdonkus]

or just use JPEG XL, oh wait, google killed that

[@bhxzbcx]

<a href="#" class="seekto" data-time="256">4:16</a> great! now someone will get into your server. never ever trust user input with things like this

[@EinChris75]

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.

[@kszyh_]

Nothing new, There are better approaches

[@kasutudotdev]

give me that

[@coding-master-shayan]

Wow you stole that image loading idea from web dev simplified 😂 but with a bit different way 👏

[@shakapaker]

Do we need to add an unoptimized image prop to the next image?

[@falahisnan4582]

First

[@raves_r3177]

doesnt Plaiceholder already do this

[@thekwoka4707]

...just srcset and don't try this bullshit loading state.

[@josh4play.youtube]

thank you