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.
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.
@@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.
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
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.
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
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.
@@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
@@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
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 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".
@@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.
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).
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.
@@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
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…
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...
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)))
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.
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?
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.
progressive jpg and BlurHash exist ... and picture srcset
BlurHash is a pretty nice way to handle this considering the point is usually to reduce network latency
Expo image has a placeholder prop you can pass a blurhash into 😎
@@NickHamilton88next too
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.
Can you explain flyimg further? Is it a library?
create a tutorial to teach others...now that'd be beneficial
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.
Goat comment sir
Not in a single word did Josh mention that for this feature the project needs to be run on Vercel. Chill.
@@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.
if the website is not hosted on vercel do I still get the optimization from image component or not
@@raves_r3177 yes
BlurHash,ThumbHash anyone? the wheel doesn't need to be reinvented...
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
this is a resource platform...we always need solutions however they might be to problems devs encounter.
Reinventing the wheel makes you a better programmer
Reinventing wheel provides you with work in moment and in future. Need to justify your salary
So now its 2 requests instead of 1 for an image, and a node server backend instead if static cached content
Yes it is. Not to mention all that additional JS crap you need to load as well.
Thanks a lot Josh! It is a simple but cool trick!
Thanks Josh! I just realized it could be implemented in any stack for sure!
Yes there exist other packages, but I appreciate the rawness of this
Josh saving the day🎉. Thanks buddy
Really nice trick! Do you plan to do a video about caching with Cloudflare? ❤
Josh, please do a video on cloudflare
yes we need one
I would like to see you do a video on caching using cloudflare
All types of caching in next js, and cloudflare with examples. I would get on my knees for it.
Cloudflare 🔥🔥
Why are we trying to solve issues that have been solved for years 😳
So that new people can earn money with it?
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.
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.
You look like Sid from Toy Story
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
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.
@@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
@@Pipu748 I replied but my comment got removed. Twice!
@@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
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.
if not hosting on vercel, that means i dont get the image optimization right? (unless i set up my own image optimization)
@@raves_r3177yup
@@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".
@@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.
I never use vercel, so if i use vercel, using next/image is bad idea for nextjs?
thanks joshh
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).
Josh i can't believe what you did awesomely. josh could you make Hono crash course
my man has finally upgraded his pc 🎉
thank you
Shrek example is siick ;)
The "better" way would be using progressive refinement of an image format such jpeg (PJPEG)
What about just using unpic for compression and multiple image sources on your own device?
Will this technique improve the Largest Contentful Paint (LCP) score?
i think there is one for that [blurhash], don't reinvent the wheel
That sherk at 7:20 literally made me scream
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?
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.
@@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
@@raves_r3177no they stop rendering your images unless you pay them😢
@@raves_r3177 if you exceed the limit Vercel will throw 402 status code and show alt text instead of the image
@@haikalgakbar ok thank you. These companies are greedy
You claimed that using next js Image component is expensive but you still use it
He was in toystory?
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…
sweet
Video starts at 0:00
Thanks for the information, I did not know
Hono deployed on cloudflare worker does not seem to support sharp, do you have any other solution
Josh moved to MAC !
is it work after run build as production ?
Does this impact on INP?
u r legendary 💫
Hi josh I'm trying to join your discord server but this invite link is invalid or has expired is showing
LIFE SAVER
the real mvp
Golden!
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...
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)))
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.
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?
Transformation - resizing for different resolutions.
code for this ?
👑👑👑
Hi Josh , how do I contact you ?
Bro where is your old laptop??? I miss it lol
4:16 great! now someone will get into your server. never ever trust user input with things like this
Or just use blurhash
Why are my comments disappearing by magic? 🤔
@@jw200 UA-cam themselves ? Not even the channel's owner ? Wait... how does it make sense? It sounds absolutely crazy
You can just host imgproxy yourself. No need to build a service.
It’s so nice seeing this first 🤡
or just use JPEG XL, oh wait, google killed that
Nothing new, There are better approaches
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.
Good to know, but too lazy to implement
Average js developer:
@@ahsookee for real
give me that
Do we need to add an unoptimized image prop to the next image?
Wow you stole that image loading idea from web dev simplified 😂 but with a bit different way 👏
doesnt Plaiceholder already do this
...just srcset and don't try this bullshit loading state.
First
thank you