How I prepare images for this blog

software

A quick story about which programs I use to prepare images for this blog.

Don't worry, there will be copy-pasteable code inside 😃

The batch script I use is located in my Hexo folder in a sub-folder called optimization. The script itself is called optimize.bat. To use it I run this from the command line:

1
optimize.bat PATH_TO_IMAGES

Here’s the actual code:

optimize.bat
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
@echo off
set EXEPATH=%CD%
set WATERMARK=\"(c) TurboBlog\"
cd ..\source\_posts\%1
rem Lowercase
for /F %%a in ('dir /L /B') do rename %%a %%a
rem JPEG: Resize and watermark
forfiles /M *.jpg /s /c "cmd /c @\"%EXEPATH%\convert.exe\" @file -resize 1920 -pointsize 15 -gravity SouthEast -stroke #000C -strokewidth 2 -annotate +5+5 %WATERMARK% -stroke none -fill white -annotate +5+5 %WATERMARK% @file"
rem JPEG: Lossy 
forfiles /M *.jpg /s /c "cmd /c @\"%EXEPATH%\jpegoptim.exe\" --max=88 --strip-all @file"
rem JPEG: Lossless
forfiles /M *.jpg /s /c "cmd /c @\"%EXEPATH%\jpegtran.exe\" -optimize -progressive -copy none @file @file"
rem PNG: Resize and watermark
forfiles /M *.png /s /c "cmd /c @\"%EXEPATH%\convert.exe\" @file -resize 1920 -pointsize 15 -gravity SouthEast -stroke #000C -strokewidth 2 -annotate +5+5 %WATERMARK% -stroke none -fill white -annotate +5+5 %WATERMARK% @file"
rem PNG: Lossless
forfiles /M *.png /s /c "cmd /c @\"%EXEPATH%\pngout.exe\" @file"
rem Go back
cd %EXEPATH%

This script is based on the one described here:
http://blog.stationfour.com/how-to-automate-png-jpg-image-optimization-in-windows/

Here’s what going on:

  1. First I convert all filenames to lowercased, based on a StackOverflow answer; this is needed for consistency, so that when I move my files to Linux or other systems where filenames are case sensitive (e.g. foo, Foo and FOO are 3 different files), I won’t run into problems.

  2. Then I use convert.exe from ImageMagick’s portable-Q16-x64 Windows binary to resize everything to a maximum width of 1920 pixels and watermark it; problem here is that it also upscales images, so will need to update this part in the future.
    Out of all that package I needed convert.exe, magic.xml and type.xml.

  3. jpegoptim.exe is next and it simply converts the image to quality of 88 (arbitrary number that I like and seems to strike good balance between image quality and file size) and removes all meta-data.

  4. Last step for JPEGs is jpegtran.exe which does lossless optimization to squeeze a couple extra kilobytes from what’s left after the previous step.

  5. Watermarking for PNGs is currently the same as for JPEGs, but I want to this to be a separate step in case I decide to change something in the future.

  6. Last but not least is pngout.exe that makes PNGs really small without any quality loss.

Size of that photo at the beginning of this post was reduced from 3 340 228 bytes (8 megapixels) to just 351 148 bytes (1920 by 1080)! Almost 10 times (9.5 to be exact)!

Fun fact: while writing this post I modified my script quite a bit and the image you see at the beginning is the first version.