6 ms·
Generating more interesting image previews using imagemagick
- oofabz 5y agoIf 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_applications https://legacy.imagemagick.org/Usage/fourier/#ft_application...
- rognjen 5y agoThat's quite interesting. I wonder if it could be used for the blur step because it did take a long while to run.
- oofabz 5y agoNoise 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 https://legacy.imagemagick.org/Usage/fourier/twigs.jpg
- blunte 5y ago(removed because I posted this on the wrong article comment section!)
- SamBam 5y agoI'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.
- blunte 5y agoCrap. I clicked the wrong comment link. My bad! I'll remove my post.
- bredren 5y agoHaving 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.”
- bberenberg 5y agoI think this is a really interesting idea. Would love to see these results and other experiments also compared in terms of resulting file size.
- dpflan 5y agoThe 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)?
- rognjen 5y agoThat's a good point. It would definitely be worth A/B testing the results.
- rognjen 5y agoThat'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
- AndrewOMartin 5y agoThis 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.
- _def 5y agoThere is no need to generate more than one.
- serjester 5y agoWhile I’m not an expert, stitching together images like that seems like a far from a trivial problem.
- donkarma 5y agoIt might be an issue to automate but it should be pretty simple manually
- rognjen 5y agoGiven 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.
- hypertele-Xii 5y agoDoing the transform each time the image is requested would be stupid. You'd do it once on upload.
- rognjen 5y ago> fixed seed Yeah, the idea was that the preview would be generated on upload
- asiachick 5y agoI 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.
- devmunchies 5y agodon'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
- asiachick 5y agonode-canvas will not give you the features mentioned in my comment
- rognjen 5y agoI did a similar thing using the IMGKit gem https://github.com/csquared/IMGKit https://github.com/csquared/IMGKit that uses wkhtmltoimage to generate a PNG from HTML. I believe you could use wkhtmltoimage directly and skip Puppeteer.
- simion314 5y agoWhy 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.
- randcraw 5y agoI 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.
- hans-moleman 5y agoAnyone 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?
- SamBam 5y agoI 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.
- ______- 5y ago> 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.
- nolok 5y ago> 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.
- barbazoo 5y ago> 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.
- rognjen 5y agoProbably a different use case then what you might have imagined.
- angryasian 5y agoGreat 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.
- rognjen 5y agoThanks. Yeah, it was mostly to try something different. Maybe this isn't ideal but might be the next step to something even better.
- flir 5y agoI'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?
- timpark 5y agoTwitter's done some work in this area. https://blog.twitter.com/engineering/en_us/topics/infrastructure/2018/Smart-Auto-Cropping-of-Images.html https://blog.twitter.com/engineering/en_us/topics/infrastruc...
- acomjean 5y agoI 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..
- jodrellblank 5y agoAuto-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
- flir 5y agoI like the way you think. Although I honestly was expecting all the images of women to get cropped to "boobs and face".