from Hacker News

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

by DivineTraube on 6/22/17, 2:11 PM with 37 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.

  • by wsxiaoys on 6/22/17, 5:55 PM

    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.

  • by matrix on 6/22/17, 5:48 PM

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

    https://github.com/haraldk/TwelveMonkeys

  • by Theodores on 6/22/17, 5:44 PM

    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.

  • by tobltobs on 6/22/17, 4:08 PM

    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 .

  • by cbr on 6/22/17, 5:59 PM

    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.

  • by fweespeech on 6/22/17, 3:20 PM

    > 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.

  • by vladdanilov on 6/22/17, 3:26 PM

    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

  • by ikennachifo on 6/24/17, 12:02 AM

    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.

  • by eeeps on 6/22/17, 6:21 PM

    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.

  • by rawrmaan on 6/22/17, 3:50 PM

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

  • by NicoJuicy on 6/22/17, 3:57 PM

    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

  • by r1ch on 6/22/17, 3:23 PM

    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.

  • by logicuce on 6/23/17, 3:09 AM

    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

  • by v3ss0n on 6/22/17, 3:39 PM

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

  • by focusgroup0 on 6/22/17, 4:19 PM

  • by tmaly on 6/27/17, 8:45 PM

    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.

  • by nielsole on 6/22/17, 6:53 PM

    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

  • by Mojah on 6/22/17, 4:09 PM

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

  • by silasb on 6/22/17, 3:34 PM

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

  • by iamonuwa on 6/24/17, 10:56 AM

    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.

  • by tyingq on 6/24/17, 3:28 AM

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

  • by anilshanbhag on 6/22/17, 3:18 PM

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