Generating more interesting image previews using imagemagick | Hacker News Reader

Generating more interesting image previews using imagemagick

ognjen.io

145 pointsrognjen46 comments

Anyone that buys art assets online will tell you this is a bad idea. You’re obscuring the subject of the image and changing the feel of the picture. Watermarks and low res previews make sense because they will just make the image look worse while still being 100% recognizable. In his examples I cannot tell anymore that it’s an image of two men fighting.. so why would I buy that picture if I can’t tell what I’m looking at?

> You’re obscuring the subject of the image and changing the feel of the picture

For those who have turned meme-creating into a sport, watermarks and other attributable data are vital in seeing how that meme spreads. I know people that deliberately put a yellow 1px border beneath each image they share (and created) so that if they spot it somewhere else, both they and others can guess where it originated. There are other more sophisticated methods which I can't mention here for detecting meme spread, but watermarks are a big deal in the meme world.

> There are other more sophisticated methods which I can't mention here

I found that very funny in a austin power kind of way, like this is some sort of giant secret technology.

The most efficient methods of watermarking pictures in ways that are easy to detect, easy to hide for the viewer yet hard to remove for the copier are all well known and detailed on the internet, in fact wikipedia is a decent source before going into more technical content.

And in terms of "memes", this sort of watermark is most often done by individual users for reasons related to ego rather that copyright protection. Because the actual money making memes oriented websites will prefer the good old heavy duty watermark all over the picture, since it will be copied anyway they figure they might as well ensure the final viewer knows where it came from so he can look for it and get them new traffic.

I agree. I also just don't understand the logic behind obscuring the most important part of the image, the one that people will base their decision on.

A small, lower resolution image seems ideal. Anyone who's even considering buying a full-res photo isn't going to see a 200x300 image and say "what the heck, I'll just take that instead." If they did, they weren't going to buy the original either.

And if you want to give the users a sense of the final resolution, you could take a corner of the image and show that at full-resolution, while making it clear in the UI that it's only a corner.

If tied with a "make a paid account to access the obscured images", the non-obscured images may be useful enough on their own to be worth the initial buy-in. And the obscuring makes for a pretty strong block on use without at least some payment, as it's far harder to remove than most watermarks.

I do agree that a watermark is (strongly) preferable for choosing which individual images to buy - small details can make or break images, and this obscures a lot of the image. Just pointing out that there may be uses on the same kinds of sites.

It's an interesting case of "here's my idea for a product I didn't launch" ia likely inferior to an idea that passed customer acceptance testing.

I work for a company that sells images online. I could see a technique like this being used for NSFW images that come up in our search results. It would allow you to have an idea of the image before clicking into the image detail page to see the normal watermarked image.

That's an interesting hypothesis.

Duckduckgo does some kinds of shenanigans with images that appear as a result of an NSFW search.

"more interesting" is definitely a term of opinion. I'd agree I don't see these as useful for anything that I can imagine, but if we limited things others can do to "what I can imagine" the world would be a semi-dull place.

That was my thinking exactly.

Why a blurred image do better then a low resolution or watermarked img ? I only seen this blurred stuff with dating sites where they send you some blurred img of someone that "is interested" , in this case I see maybe some way where the blur is trick to make you wonder what is under the blur, let me know if there are other uses that I can't think of.

I agree, a 4x or 16x downsampled version seems like the obvious way to quickly denature an image without bias. The algorithm is trivial to implement and will run insanely fast. And the smaller amount of data has the added bonus of loading faster too.

If you want to go even further, Imagemagick can operate on the discrete Fourier transform of an image. The effects are unintuitive but powerful. Read the documentation at:

https://legacy.imagemagick.org/Usage/fourier/#ft_application...

That's quite interesting. I wonder if it could be used for the blur step because it did take a long while to run.

Noise shows up as light gray lines or dots in the DFT. In the Imagemagick example, this noise is removed by replacing those parts with black. But you want to do the reverse, so you should add noise by adding light gray features to the DFT.

I suspect this technique is how the Imagemagick author generated the noisy twigs image: https://legacy.imagemagick.org/Usage/fourier/twigs.jpg

This is a nice simple article exploring an interesting problem.

I hope they use a fixed seed for their random function when probabilistically covering parts of the image.

If not it might mean one could refresh the image a few times and get different parts covered. If so, you could then knit together a full image by combining just the uncovered parts.

While I’m not an expert, stitching together images like that seems like a far from a trivial problem.

It might be an issue to automate but it should be pretty simple manually

Given the polygons are regular shape and size it would be simpler then you might imagine. It just might take a couple of tries to get the size correct.

For the blurred triangles I think it would take a bit more work but I'm fairly sure there are ways to detect which image has more edges based on which you can guess which is the blurred segment.

There is no need to generate more than one.

Doing the transform each time the image is requested would be stupid. You'd do it once on upload.

> fixed seed

Yeah, the idea was that the preview would be generated on upload

Great article, this is the content I come here for. I think its a really interesting thought experiment in how we might want to try things differently. Also thanks for sharing your experience with imagemagick and code.

Thanks. Yeah, it was mostly to try something different. Maybe this isn't ideal but might be the next step to something even better.

Having bought image assets in the past, I agree these these ideas would not make it easier to decide whether to license something.

Sometimes I’ve taken design drafts very far along, including manually removing the watermark, to see a full, if lower res, composite before deciding to license imagery for a final work.

That said there is some useful examples of working with imagemagic here and it does deliver on “more interesting image previews.”

Makes sense. Your use-case is definitely more demanding so I understand how this would not be useful.

A useful blog entry nonetheless. Thank you.

> After all, users would need to get a sense of what it looks like before they’d want to buy it.

Interesting work but I doubt it's what anyone buying these assets would want.

Probably a different use case then what you might have imagined.

I think this is a really interesting idea. Would love to see these results and other experiments also compared in terms of resulting file size.

The impetus for this was to create a less blurred, more coherent preview image that is not the original image. Why is that? I suspect to entice people to want to pay for the images that are being previewed. The question is now: given there are different techniques, which techniques lead to a higher rate of purchases of previewable content (right)?

That's a good point. It would definitely be worth A/B testing the results.

That's a good point I didn't really consider. Here're the resulting file sizes.

The triangles used a larger image as a starting point though.

   75K image-previews-adaptive-blur-output.jpg
   13K image-previews-gaussian-blur-output.jpg
  9.1K image-previews-plain-blur-output.jpg
   55K image-previews-input-1.jpg
   52K image-previews-probability-triangle-output.jpg
   61K image-previews-wave-gradient.jpg
   79K image-previews-rippled-output.jpg
  300K image-previews-circle-map-blur-output.png
  373K image-previews-output-with-triangles.png
  461K image-previews-output-with-probability-triangles.png
  1.2M image-previews-transparent-triangles.jpg
  217K image-previews-plain-blur-lg-output.jpg

I'm interested in the related problem of cropping an image to a new aspect ratio automatically.

Idle thought: Take a bunch of sample images, show them to humans, record heat maps of where the humans look. Use this data to train a GAN to generate heatmaps from images.

Feed the GAN a new image. Crop the image to keep the parts where the GAN "looks".

Thoughts? Any reason why it wouldn't work?

Twitter's done some work in this area. https://blog.twitter.com/engineering/en_us/topics/infrastruc...

I took over an open studios site 10+ Years ago. The original web developer/ graphic designer asked for square thumbnails. then proceeded to crop them down about 30% before displaying on certain pages. Artists reacted by only uploading usable images in the remaining area (so the whole image filled the thumbnail). The uploaded images had the right and tops blank.

Sometimes it’s best to let the originator of the image control it.

Though it would be fun to try some automation..

Auto-cropping images to the subject's crotch might make your company look a bit weird, even if that is where people look.

https://kottke.org/07/03/men-look-at-crotches

I like the way you think.

Although I honestly was expecting all the images of women to get cropped to "boobs and face".

I used puppeteer (headless chrome) to generate image previews. Can use the Canvas API and/or WebGL1 and WebGL2. Can also auto-add titles etc... You could even overlay HTML styled with CSS (vs drawing text with the Canvas API) and use the Puppeteer API to take a screenshot instead of using the canvas API to capture the canvas.

don't need all of headless chrome to use the canvas. can just use node-canvas.

https://github.com/Automattic/node-canvas

node-canvas will not give you the features mentioned in my comment

I did a similar thing using the IMGKit gem https://github.com/csquared/IMGKit that uses wkhtmltoimage to generate a PNG from HTML. I believe you could use wkhtmltoimage directly and skip Puppeteer.

(removed because I posted this on the wrong article comment section!)

I'm confused, because not only is the article not in "dark mode" in any way (it has a bright white background) but it's css doesn't even seem to include a dark-mode version, so I don't know what you're seeing.

Crap. I clicked the wrong comment link. My bad! I'll remove my post.

Reply on news.ycombinator.com