Generating more interesting image previews using imagemagick(ognjen.io)
ognjen.io
Generating more interesting image previews using imagemagick
https://ognjen.io/generating-more-interesting-image-previews-using-imagemagick/
46 comments
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..
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
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".
Although I honestly was expecting all the images of women to get cropped to "boobs and face".
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.
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.jpgThis 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.
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.
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
Yeah, the idea was that the preview would be generated on upload
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
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.
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.
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.
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 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.
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.
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.
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...
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
I suspect this technique is how the Imagemagick author generated the noisy twigs image: https://legacy.imagemagick.org/Usage/fourier/twigs.jpg
(removed because I posted this on the wrong article comment section!)
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.”
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.”
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.
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?