Scripting Images Resize
Auto-resizing images to suit static sites
Mainroad theme in Hugo doesn’t resize images automatically, just copies from static folder. So we need to prepare scripto ro resize and crop images to proper size.
When
I have several image sources - smartphone and camera are the most frequently used. They are of different resolutions and aspect ratios.
So we need a processing sequence:
- central crop to aspect ratio
- resize (shrink) to two resolutions. Jpeg quality - 80% is good enough.
- 235x171
- 678x495
Where
Let’s assume source images are all in the folder ~/tmp/img_src We need to
- move result images to folders ~/tmp/img_235x171 and ~/tmp/img_678x495
- name images like
_235x171.jpg and _678x495.jpg
How
In ubuntu linux will be using imagemagick
sudo apt-get install imagemagick
Cropping step:
convert wizard.png -gravity center -extent 11:8 wizarc.jpg
# now check the geometry
identify wizard.png wizarc.jpg
Resizing step
convert wizarc.jpg -resize 678x495 -quality 80 -interlace plane wizarc_678x495.jpg
convert wizarc.jpg -resize 235x171 -quality 80 -interlace plane wizarc_235x171.jpg
# now check the geometry
identify wizarc.jpg wizarc_678x495.jpg wizarc_235x171.jpg
80 is a jpeg quality, and plane means progressive jpeg. It will help to load images faster on slow connections, not just because first will be loaded the thumbnail, but the file itself is smaller. At least in wizard’s case.
With borders
convert wizarc.jpg -resize 676x493 -quality 80 -interlace plane -border 1x1 wizarc_678x495.jpg
convert wizarc.jpg -resize 233x169 -quality 80 -interlace plane -border 1x1 wizarc_235x171.jpg
# now check the geometry
identify wizarc.jpg wizarc_678x495.jpg wizarc_235x171.jpg
The result image you see on in the head of this post and the proportions of the source image were looking like:
that’s after simple rescaling and adding border
convert wizard.png -resize 20% -quality 85 -interlace plane -border 2x2 wizard20.jpg
Other options
nautilus-image-converter
nautilus-image-converter is a nautilus extension to mass resize or rotate images. To install nautilus-image-converter in all currently supported versions of Ubuntu open the terminal and type:
sudo apt-get install nautilus-image-converter
It adds two context menu items in nautlius so you can right-click and choose “Resize Image”. (The other is “Rotate Image”).
You can do a whole directory of images in one go if you like and you don’t even have to open up an application to do so.
You need to restart your nautilus to see new context menus, run
nautilus -q
and then click the Home folder icon to reload nautilus with the new plug-in.
mogrify
The command mogrify overwrites the original files with the resized images:
mogrify -resize 50% *.png # keep image aspect ratio mogrify -resize 320x240 *.png # keep image aspect ratio mogrify -resize 320x240! *.png # don’t keep image aspect ratio mogrify -resize x240 *.png # don’t keep image aspect ratio mogrify -resize 320x *.png # don’t keep image aspect ratio
Other useful tools
Get image meta details - like resolution, bitdepth etc. - part of imagemagick package.
identify image.jpg
would produce something like
image.jpg JPEG 720x482 720x482+0+0 8-bit DirectClass 100KB 0.000u 0:00.009
