The Better Way to Load Images

there's 2 problems I had with loading images in my projects: it can get expensive and rendering placeholders for near-instant load times is nowhere near as convenient as the docs make it sound.

This approach solves both, works very well so I wanted to share it with y'all

-- my links

[soto]

progressive jpg and BlurHash exist ... and picture srcset

[vinniv]

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

[andre__b]

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

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

[menschentoaster]

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.

[armandsalle]

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

[goodguyhenri]

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…

[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!

[patrickle]

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

[whynot]

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

[griffin]

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.

[lazyplayer]

That sherk at 7:20 literally made me scream

[the-boring-guy-]

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.

[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

[MrJfergs]

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

[dreamsachiever]

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?

[cleverprogrammer]

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

[codesera]

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

[ihonksz]

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