Automagically generate thumbnails about jus HOT 6 CLOSED

sharp-cli is perfect! Here's my usage:

{
  "scripts": {
    "start": "npm run thumbnail && jus serve ./src",
    "build": "npm run thumbnail && jus compile ./src ./dist",
    "thumbnail": "sharp -i ./src/images/*.jpg -o ./src/thumbnails resize 230"
  }
}

@zeke, thanks for pointing sharp-cli out to me. I guess next time I'll do some research before diving into rolling my own solution :p

Closing the issue.

from jus.

Hmm, looks like node-thumbnail depends on imagemagick - we probably don't want to add a non-npm dependency.

from jus.

I originally wrote pure stream of consciousness, but now am going to label these as two separate ideas. I think the first one is "meh" and like my second idea better.

Idea 1: Hmm... these are good questions. I like, in theory, the principle of auto-thumbnailing large images. I feel like the API could probably be even simpler, like just tacking "_thumb.png" or "_100x200.jpg" to the end of the filename. But that could mess up existing projects if they already had files named that way, which would be sad. It is also heavy on the magic, unexpected behavior... although admittedly if you had an image that ended with "_100x200.jpg" and you weren't expecting it to be 100x200 pixels, that would be kind of unexpected too.

Idea 2: Didn't HTML5 add some new mechanism like an image srcset that lets you specify multiple resolutions for images? Maybe we could do something with that. (Goes to Google to find that thing...) Yeah... link dump:

• http://caniuse.com/#search=srcset
• https://css-tricks.com/responsive-images-youre-just-changing-resolutions-use-srcset/

OK, thinking out loud here... Could we simply use an algorithm like:

• Find all <img> tags that point to a "large" image (where "large" is some heuristic to determine whether it deserves to be thumbnailed, like "larger than 64x64 pixels" or "larger than 5kb")
• If that <img> tag does not already have a srcset attribute
• Generate thumbnails at a few different sizes and add the corresponding srcset attribute to the img tag.

That seems to be the cool kid, let the browser decide what resolution to download, new-age way to do it. (I've never used srcset before, because I hate my users and just waste their bandwidth I'm lazy and never thought about it before.)

from jus.

node-thumbnail depends on imagemagick

sharp is working well for resizing electron app icons. It has a native dependency that has to be compiled at install time, but it works and it's fast. I tried jimp and it had lots of issues.

only generate thumbnails that were requested

👍

srcset attribute

👍 cool idea if it works.

Part of me is cool with adding this feature, but another part of me wants to remove all the image metadata magic from jus entirely: the EXIF extraction, image dimension checking, color palette extraction, etc. Those things are the heaviest of jus's dependencies, and I suspect they are probably also the least-used. 🤔

I personally would prefer to have a CLI (entirely apart from jus) that could generate thumbnails...

from jus.

sharp looks perfect! I like the external CLI idea. It could be something as simple as passing it files and having it generate thumbnails to some destination directory/file. Something like:

$ gen-thumbnail ./images/*.jpeg -o ./images/thumbnails

We can leave the actual usage of the generated images to the user - they could reference the images directly, or use srcset, or whatever they want.

A nice benefit to this approach is that the CLI can take additional options, like an output file name suffix for example.

I will probably not get to working on this until next week or the week after, but I will ping you guys when I do.

Leaving this issue open for further discussion, but if anyone else feels like this is a good solution feel free to close the issue.

from jus.

This seems like a common enough problem that there are probably already some good modules for.

This looks interesting: https://github.com/vseventer/sharp-cli

If nothing else, it might be a good reference for whatever you end up building.

from jus.