Inlining resized images

[Juhannuspukki]

I am currently inlining pretty much all the images on my website since that causes next to prefetch them making navigation appear instantaneous. Still, I figured out it might be a good idea to resize the thumbnail images on my blog in case someone accesses the page directly. It would appear to me that resizing and inlining is not possible, though. I tried stuff like

<img src={require("../static/img/blog/crowd.jpg?inline?resize&size=100")}/>

but no matter what I try, the image is either resized or inlined, but never both. Is what I am trying possible?

[cyrilwanner]

Hi @Juhannuspukki
Since we just pass everything to the resize webpack loader when ?resize is in the query param, I think it is correct right now that this doesn't work since the resize webpack loader doesn't support inlining images.

But your use-case makes definitely sense and I'll try to implement this later this week.

[millette]

In my case, I manually resized the image so I could inline it.

Funny story, the image was about 6k, 1500x500. I needed to resize it to 150x50 but when webpack did it, I ended up with a 6k image (with smaller dimensions). Why? My original was using a 2bit palette but the webpack resize set it back to full color. But now that I manually resized it, it's less then 1k.