Using ImageMagick to make sharp web-sized photographs
1–10 of 64 posts
Re: Using ImageMagick to make sharp web-sized photographs
#2My solution: https://github.com/vladstudio/Vladstudio-smart-resize-Bash-s...
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:
* configures -interpolate bicubic -filter Lagrange; * resizes source image 80%; * applies -unsharp 0.44x0.44+0.44+0.008; * repeats steps 2 & 3 until target size is reached.
Re: Using ImageMagick to make sharp web-sized photographs
#3Just for the record, the "unsharp mask" filter doesn't really sharpen but it increases edge contrast, which makes it seem sharper. It is something that you should only apply to the final version of an image, after all resizing has been done, however.
Re: Using ImageMagick to make sharp web-sized photographs
#4mod_pagespeed (and ngx_pagespeed) can automate this for all your images. If you have inline width/height or inline style dimensions, it will do the resampling on your behalf: https://developers.google.com/speed/pagespeed/module/filter-...
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 & resize cost, better scroll performance, and faster relayouts when orientation changes or browser window changes.
(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.)
Re: Using ImageMagick to make sharp web-sized photographs
#5I think the script to apply it to a folder could be clear with:
for image in *.jpg ; do gm convert $image -resize "900x" -unsharp 2x0.5+0.5+0 -quality 98 `basename $image .jpg`_s.jpg ; done
Re: Using ImageMagick to make sharp web-sized photographs
#6Part of the reason rescaled images look dim and blurry is because rescaling software usually assumes gamma 1.0 instead of 2.2: http://www.4p8.com/eric.brasseur/gamma.html
There are many more good essays on image rescaling here: http://entropymine.com/imageworsener/
Re: Using ImageMagick to make sharp web-sized photographs
#7Trivia: The example image is taken at the Col de l'Iseran which, at 2770 metres, is the highest tarmacced road pass in Europe.
Re: Using ImageMagick to make sharp web-sized photographs
#8Just for the record, the "unsharp mask" filter doesn't really sharpen but it increases edge contrast, which makes it seem sharper. It is something that you should only apply to the final version of an image, after all resizing has been done, however.
Sharpening improves "acutance"; your perception of boundaries. https://en.wikipedia.org/wiki/Acutance
Unsharp masking is mostly aesthetic. For an image like the example, a mountainside, it gives you a feeling of crisp details, but there isn't any more data there. It looks great on a landscape, but it can be disastrous on a portrait of a person (pores and stubble will be highlighted, usually in an unpleasant way).
(EDIT: incorrect assertion about unsharp masking before or after scaling removed)
Sometimes it's better to unsharp-mask it to a degree that looks slightly oversharpened at a large size, but looks great when reduced - especially for very small images, like avatars or other icons.
Re: Using ImageMagick to make sharp web-sized photographs
#9The 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.
Re: Using ImageMagick to make sharp web-sized photographs
#10I think the script to apply it to a folder could be clear with: for image in *.jpg ; do gm convert $image -resize "900x" -unsharp 2x0.5+0.5+0 -quality 98 `basename $image .jpg`_s.jpg ; done
The script on the linked page deals with filenames with spaces while that for loop does not.
Neither of them deal with filenames with \n in them, eg 'pretty
sunset.jpg'
For that, you'll want to run find:
find . -name '*.jpg' -exec convert '{}' -resize "900x" -unsharp 2x0.5+0.5+0 -quality 98 `basename '{}' .jpg`_s.jpg \;