search

Niels-IO / next-image-export-optimizer

Use Next.js advanced <Image/> component with the static export functionality. Optimizes all static images in an additional step after the Next.js static export.
MIT License
461 stars 56 forks source link

Inline images for a blur placeholder #237

Open markvital opened 1 month ago

markvital commented 1 month ago

Hi there,

I was wondering if it’s possible to inline blur placeholders as Base64 data URLs to reduce load time?

In my current project, I display 50 images in a grid on each page. Loading 50 placeholder images via HTTP as separate files seems to create unnecessary overhead. It would be great if this plugin could support inlining these placeholders to improve performance. I couldn’t find an option for this feature in the existing implementation.

Here’s an example of the current behavior:

Screenshot 2024-10-18 at 6 26 52 PM

And here’s what I’d love to see:

Screenshot 2024-10-18 at 6 26 52 PM copy

Thanks for considering this feature request!

Niels-IO commented 1 month ago

Hi @markvital,

I thought about this feature a while ago, and I don't think it's possible in the way this library works currently. The library would need to modify all occurrences of ExportedImage and change the source code itself.

The only way I can think of is, that the library spits out a JSON file of the image file names as keys and the base64 placeholder images as values.