Using ImageMagick to make sharp web-sized photographs

Part of the reason rescaled images look dim and blurry is because rescaling software usually assumes gamma 1.0 instead of 2.2: <a href="http://www.4p8.com/eric.brasseur/gamma.html" rel="nofollow">http:&#x2F;&#x2F;www.4p8.com&#x2F;eric.brasseur&#x2F;gamma.html</a><p>There are many more good essays on image rescaling here: <a href="http://entropymine.com/imageworsener/" rel="nofollow">http:&#x2F;&#x2F;entropymine.com&#x2F;imageworsener&#x2F;</a>

Dissecting a bad oneliner:<p><pre><code> ls *.jpg|while read i;do gm convert $i -resize &quot;900x&quot; -unsharp 2x0.5+0.5+0 -quality 98 `basename $i .jpg`_s.jpg;done </code></pre> The part I take issue with is the unnecessary invocation of `ls`. The shell does the glob expansion. A `for` loop is better suited for this. Also, if using bash,* we can get rid of basename.<p><pre><code> for file in *.jpg; do gm convert $file -resize &quot;900x&quot; -unsharp 2x0.5+0.5+0 -quality 98 ${file%.jpg}_s.jpg; done </code></pre> * zsh fans, I&#x27;m sure it works there too.

mod_pagespeed (and ngx_pagespeed) can automate this for all your images. If you have inline width&#x2F;height or inline style dimensions, it will do the resampling on your behalf: <a href="https://developers.google.com/speed/pagespeed/module/filter-image-optimize" rel="nofollow">https:&#x2F;&#x2F;developers.google.com&#x2F;speed&#x2F;pagespeed&#x2F;module&#x2F;filter-...</a><p>The advantages of having correctly sized imagery are immense, but in short.. something like 70% smaller total byte payload for mobile, huge reduction in image decode &amp; resize cost, better scroll performance, and faster relayouts when orientation changes or browser window changes.<p>(And I do think browsers themselves should resample scaled images like this to achieve equal quality, but your users will benefit way more if assets are delivered well to begin with.)

My solution: <a href="https://github.com/vladstudio/Vladstudio-smart-resize-Bash-script" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;vladstudio&#x2F;Vladstudio-smart-resize-Bash-s...</a><p>The biggest problem of scaling down an image is to find right settings for resampling and sharpening. After many expreiments, I found it impossible to achieve good results by simply running convert with a line of arguments. So I came up with this script, which basically does the following:<p>* configures -interpolate bicubic -filter Lagrange; * resizes source image 80%; * applies -unsharp 0.44x0.44+0.44+0.008; * repeats steps 2 &amp; 3 until target size is reached.

Just for the record, the &quot;unsharp mask&quot; filter doesn&#x27;t really sharpen but it increases edge contrast, which makes it seem sharper. It <i>is</i> something that you should only apply to the final version of an image, after all resizing has been done, however.

Tangential to the point being made, 98 as quality seems way too high for an image to be shown on the web. 85 seems to be a decent tradeoff. Doing so might actually increase the image size.

The sharpened version looks over-sharp to me. You may find that a level or curves adjustment is more what this image needs to pop a little.

Trivia: The example image is taken at the Col de l&#x27;Iseran which, at 2770 metres, is the highest tarmacced road pass in Europe.

ImageOptim has been my best buddy, been getting very agreeable results with it. It&#x27;s just for compression but end results don&#x27;t seem to have the need for sharpening. Using ImageMagick this way might be best for special cases... <a href="http://imageoptim.com/" rel="nofollow">http:&#x2F;&#x2F;imageoptim.com&#x2F;</a>

Has anyone played &#x2F; tested this with regard to the responsive image hack&#x2F;trick by the filament group : <a href="http://filamentgroup.com/lab/rwd_img_compression/" rel="nofollow">http:&#x2F;&#x2F;filamentgroup.com&#x2F;lab&#x2F;rwd_img_compression&#x2F;</a>

For my games, I found out that the best thing when scaling is use IM Lancsoz filter.<p>Granted, my games use high-res hand-drawn vector-ish art (not pixel art, neither photo-style or paint-style art) so I dunno if this is applicable to photos.

I think the script to apply it to a folder could be clear with:<p>for image in *.jpg ; do gm convert $image -resize &quot;900x&quot; -unsharp 2x0.5+0.5+0 -quality 98 `basename $image .jpg`_s.jpg ; done

In my experience, scaling down an image makes it look <i>sharper</i>. A blurry image will often look perfectly fine when sufficiently scaled down; which is not surprising, because a blur with a five-pixel radius at camera size can easily become a fraction of a pixel at web size. Similarly, scaling down counteracts camera noise, because each output pixel averages out the noise between several different sensor pixels.<p>Of course, you can always make them even sharper with filters if you want.

Reduce the quality quotient (severely, like .98 -&gt; .3) and don&#x27;t cut the resolution as far, e.g. Keep 2x the pixels.<p>Much better appearance for the same file size.

Could also be useful to downscale images using the &#x27;high contrast downscale&#x27; filter (as we call it in our lab; maybe this isn&#x27;t the common name). For each set of pixels to become one, you compute min, max and mean, and select the one of {min, max} which is closer to mean.<p>Unfortunately, I don&#x27;t have any examples handy.

One problem I recently encountered is that some images refused to load on IE8. Turns out that the IE does not support CYMK color spaced images and the image appeared significantly differently on chrome and firefox. Was quite surprising since I had assumed that jpeg was a standard format and would be supported by all.

I think before <i>and</i> after shots would have been helpful.

I have noticed that sharpening an image makes them look <i>worse</i> on high resolution displays like the iPhone 4+ or Macbook Retina.

Is this to be regarded as image quality preservation or a photo manipulation that increases sharpness &quot;artificially&quot;?

It&#x27;d be great if you put two in this post so we can see the difference without having to run all of the commands first.

Flickr does this, don&#x27;t they? I always wondered why images on Flickr look sharper.

Is this tool doing anything other than a deconvolution?

madVR uses the ImageMagick jinc with anti-ringing filter to upscale video. Looks pretty good. :)

really who time to do all this, image by image.I use aperture which is ok.