Ask HN: Best Self-Hosted, Server-Side Image Optimization Tools? | Hacker News Reader

Ask HN: Best Self-Hosted, Server-Side Image Optimization Tools?

59 pointsDivineTraube37 comments

Compressing images is extremely important for web performance. There are several desktop apps (e.g., ImageOptim, Trimage, ImageAlpha) and web services (e.g., TinyPNG, Kraken, Cloudinary, Imgix, CompressPNG, ImageOptim) that perform optimizations.

Thumbor (http://thumbor.org/ ) is a tool that can be installed locally in an application architecture. However, it is focused on cropping & resizing, though it can also transcode to WebP and call external optimizers.

What is the most complete solution you are aware of that compresses & optimizes png, jpeg, and webp and can be operated on a server? It should not only be able to optimize as part of the build process but also in response to user-generated content.

View on HN

I believe the most complete solution is a full unix environment with shell piping the image stream. so i make https://bash.rocks, which is a web frontend backed by a unix environment.

Snippets:

1. Resizing with imagemagick: https://bash.rocks/Gxlg31/3

2. Resizing and convert to webp: https://bash.rocks/7J1jgB/1

After creating the snippet, you could either use GET https://bash.rocks/0Be95B (query parameters become environment variable) or POST https://bash.rocks/jJggWJ (request body become stdin).

It's not hard to roll your backend like this for private usage (simply exec from node). I'm also working on an open source release.

And now the backend (running arbitrary unix command as http service) is open sourced at https://github.com/bashrocks/shebang

For Java (or other JVM languages such as Kotlin), TwelveMonkeys is powerful and does not have external dependencies:

https://github.com/haraldk/TwelveMonkeys

Google Pagespeed for Nginx and Apache is another way to go. The benefit of this approach is that you don't have to bulk out your code.

As for metadata, today I decided to add it back in.

https://www.gs1.org/sites/default/files/docs/gdsn/Product_Im...

For ecommerce it will eventally help to have product data, e.g. brand, product name etc embedded in the image.

My other tip if you go the Imagemagick/PAGESPEED route then you can use 4:2:2 colour space and ditch half the bits used for chroma.

In my experience not the optimization is the hard part. But the eventually necessary scaling down you have to do first. Doing this with Imagemagick, Pillow or whatever will result in possible OOMs or gigabyte sized, not so temporary files filling your /tmp dir for large source images.

The only tool I ever found which does this job reliable even for huge images is http://www.vips.ecs.soton.ac.uk .

Need to use the thumbnail flag with imagemagick. Gives it a huge performance boost and strips the metadata out of the file.

Be very careful with this one!

-thumbnail causes ImageMagick to embed "freedesktop.org Thumbnail Managing Standard" metadata into the output image. Such metadata includes the full local path (!). I found this by accident on our wiki (Mediawiki, which uses ImageMagick).

https://phabricator.wikimedia.org/T108616

Was not aware of that....

The thumbnail flag doesn't change the way Imagemagick creates a pixelmap of the complete image.

In my experience graphicsmagick solves most OOM problems of Imagemagick. It's also faster.

I used to work on mod_pagespeed / ngx_pagespeed, and I'm very proud of our image optimization: https://modpagespeed.com/doc/filter-image-optimize

It compresses and optimizes png, gif, and jpeg, creates webp for browsers that support it, inlines small images into your html, longcaches images, and even creates srcsets.

> What is the most complete solution you are aware of that compresses & optimizes png, jpeg, and webp and can be operated on a server? It should not only be able to optimize as part of the build process but also in response to user-generated content.

Tbh the UGC side is just triggering the "build process side" as the upload occurs.

As far as best,

https://github.com/MediaCrush/MediaCrush/blob/b32e2752d1a19d...

I'd suggest you look there for some decent examples of how to go about it. They may be defunct but I use a similar approach (slightly different knob tweaks with the same binaries) and it works fine. May not be 100% optimal but its good enough imo.

I'm working on Optimage [1] for both lossless and visually lossless (lossy) optimizations. Right now it's available for Mac only. But I have a Linux version working internally as part of the upcoming Server plan.

[1] http://getoptimage.com

With this recent addition(https://webspeedtest.cloudinary.com) to tools you can use, Cloudinary(http://cloudinary.com) is hands down the best for me, In all the time I've been using it, It usually has a way of meeting all my needs. I'm obsessed with page speeds and Optimization, like I have sleepless nights optimizing, but since using Cloudinary, I can sleep well on some nights now. And No! I don't work there, but bless the people that work there.

Disclaimer: I work for Cloudinary. But: all of the services that you mention have an awful lot to offer, over roll-your-own solutions. Reliability and scalability, sure — but also, right now, just flat-out-better performance and output. From big flashy features like automatic optimization using perceptual metrics and on-the-fly responsive resizing with Client Hints ... all the way down to nitty gritty stuff that doesn’t get press releases like, say, dialed-in custom resizing algorithms... in 2017, hosted, paid services can do a lot more a lot better than anything you can set up yourself using free tools.

Images are complicated and important enough that I don't see that changing any time soon.

I'm sorry but I beg to differ. Cloud firms are trying to suffocate self-service tooling and images are, frankly, not that complicated. If you want to sell to technology illiterates then fine but this is an attempt to kill expert solutions. No FUD please

I also beg to differ. Images are pretty complicated. Just simple downscaling is obviously not that hard (unless you're like me and you worry about which colorspace you do it in, with which filter, what kind of performance for huge images, etc). But other things like lossy compression quality setting selection, automatic cropping for responsive art direction, etc etc: those things are not trivial at all.

Don't get me wrong: I'm a big fan of FOSS, and I think it's great to have in-house image management solutions based on FOSS tools like ImageMagick, mod_pagespeed and thumbor. And if your website is relatively small and the image workflows are relatively simple, that might very well be the best solution.

But I also think that for companies who just need some image management solution for their website or app, it can make a lot of sense to use an external service. It is simply a matter of dev effort and risk management. It makes more sense to have your devs focus on the core business. Building some simple in-house image management infrastructure is not that hard, but what when the next ImageTragick happens, or some new image format arrives, or browsers get new responsive image features which require more variants or server-side cleverness? Do you really want your devs to have to think about that stuff? Maybe, maybe not. If not, then moving it to an external cloud service does make sense.

Disclaimer: I work at Cloudinary; I'm also the creator of FLIF (https://github.com/FLIF-hub/FLIF).

Sharp for node.js has proven to be powerful, flexible and fast for my needs: https://github.com/lovell/sharp/

We also used sharp as part of a flow based pipeline for image analysis powered by NoFlo/Flowhub: https://github.com/noflo/noflo-sharp

We have been processing >3k images/day and >60k images/month.

I use ImageResizer 4.3.2 for Asp.Net MVC ( it's free), new versions are less free though... Best thing is, if you want to resize, you can just do it through the url. Eg. /Assets/img/logo.png?Width=200

I use a combination of jpegoptim, optipng, advpng and zopflipng.

Be especially careful with these utilities when running them on UGC. PNG / JPEG bombs can easily cause OOM or CPU DoS conditions etc.

I think Thumbor fits the bill very well. In fact, using something like APSL's thumbor docker image [1], you get the complete setup including the optimizers, object detection, etc. ready to go.

It works really well for UGC as an ondemand optimizer but you can easily make some URL calls to include it in the build time as well.

[1] https://github.com/APSL/docker-thumbor

pilbox is very powerful : https://pypi.python.org/pypi/pilbox

I was going to mention Pillow, the python successor to PIL, which powers Pilbox.

Is that still a PITA to install correctly?

Nope. Not any more.

https://github.com/image-server/image-server

I ended up writing something in Go that resizes images to different devices after a user uploads the food image.

I originally tried to use Google Pagespeed but I was getting some strange error message from image compression.

Haven't tried it out, but looked quite promising: https://github.com/thephpleague/glide/ Does everything basic, that I would look for in an image API

I automated my workflow server side with OptiPNG. https://ma.ttias.be/optimize-size-png-images-automatically-w...

https://github.com/h2non/imaginary appears to support quality/compression settings.

This is the best. I have been using this for a while and It was very easy to run this in our vps.

Agree also...

Cloudinary in my opinion is also the best place for optimized photo delivery. The important part is you needn't spent any buck out of your pocket to try it. It has some amazing tools like image breakpoint, auto quality and format which delivers extremely optimised images speedily.

pilbox is very powerful : https://pypi.python.org/pypi/pilbox

However with the recent addition by cloudinary (https://webspeedtest.cloudinary.com), the tool is awesome for me.

https://pngquant.org lossy optimization of png images.

optipng and jpegoptim are pretty good. Have a feeling most of these tools use these utilities inside them.

Reply on news.ycombinator.com