#imagemagik | #linux | #foss

June 21, 2018

Useful Commands - Image manipulation

I often work with images to go onto e-commerce sites, so getting them as small as possbile (file size wise) is what I aim for, for performance There are plenty of good, paid tools out there such as Kraken or ImageOptim and there are even some good, free (web based) tools you can use such as TinyPNG and Compressor but I was looking for something a I could add into my workflow (read automated and scriptable)

My needs were very specific. Each input image was the same dimensions (2048x) and is a .png and they needed to stay square. Initialy I combined the tools within ImageMagik, pngquant and jpegoptim I could get the original 3-4mb image down to 132kb (@ 1024x1024) or 37kb (@512x512) with very little noticable quality differences. But then I started just using ImageMagik to get similar results, but only needing the convert tool

Using all 3 tools

  1. Drop the quality pngquant --quality=85-100 in.png #This is destructive, but you can specify out.png if needed
  2. Lets resize it and convert to jpeg convert in.png -resize 1024 bigimage.png bigimage1024.jpg
  3. Strip metadata and make it progressive jpegoptim --all-progressive --strip-all -m85 bigimage1024.jpg

Here are some tests, resizing to 1024 and 512 using both methods

#Start
george@GEORGE-LT:$ file bigimage.png
bigimage.png: PNG image data, 2048 x 2048, 8-bit/color RGBA, non-interlaced

george@GEORGE-LT:$ ls -lah bigimage.png
-rwxrwxrwx 1 george george 3.9M Jul  4  2017 bigimage.png

george@GEORGE-LT:$ pngquant --quality=85-100 bigimage.png

george@GEORGE-LT:$ convert bigimage.png -resize 1024 bigimage1024x.jpg

george@GEORGE-lt$ ls -lah bigimage*
-rwxrwxrwx 1 george george 115K Jun 21 09:22 bigimage1024x.jpg
-rwxrwxrwx 1 george george  37K Jun 21 09:23 bigimage512x.jpg
-rwxrwxrwx 1 george george 4.0M Jun 21 09:20 bigimage.png

george@GEORGE-LT:$ jpegoptim --all-progressive --strip-all -m85 bigimage1024x.jpg
bigimage1024x.jpg 1024x1024 24bit N JFIF  [OK] 117484 --> 93472 bytes (20.44%), optimized.

george@GEORGE-LT:$ jpegoptim --all-progressive --strip-all -m85 bigimage512x.jpg
bigimage512x.jpg 512x512 24bit N JFIF  [OK] 37769 --> 30200 bytes (20.04%), optimized.

george@GEORGE-LT:$ ls -lah bigimage*
-rwxrwxrwx 1 george george  92K Jun 21 09:24 bigimage1024x.jpg
-rwxrwxrwx 1 george george  30K Jun 21 09:24 bigimage512x.jpg
-rwxrwxrwx 1 george george 4.0M Jun 21 09:20 bigimage.png

Using just convert

  • convert -resize 1024 -quality 85 -trim -interlace Plane bigimage.png bigimage1024.jpg
george@GEORGE-LT:$ convert -resize 1024 -quality 85 -trim -interlace Plane bigimage.png bigimage1024.jpg
george@GEORGE-LT:$ convert -resize 512 -quality 85 -trim -interlace Plane bigimage.png bigimage512x.jpg
george@GEORGE-LT:$ ls -lah bigimage*
-rwxrwxrwx 1 george george  75K Jun 21 09:30 bigimage1024.jpg
-rwxrwxrwx 1 george george  26K Jun 21 09:30 bigimage512x.jpg
-rwxrwxrwx 1 george george 4.0M Jun 21 09:20 bigimage.png

george@GEORGE-LT:$ file bigimage1024.jpg
bigimage1024.jpg: JPEG image data, JFIF standard 1.01, aspect ratio, density 1x1, segment length 16, progressive, precision 8, 1024x1024, frames 3

Just for fun, here is some tests without resizing the iamges, so you can see how powerful it is with a good comparison

george@GEORGE-LT$ convert -trim -quality 85 -interlace Plane bigimage.png bigimageoptimised.jpg
george@GEORGE-LT:$ ls -lah bigimage*
-rwxrwxrwx 1 george george 250K Jun 21 10:09 bigimageoptimised.jpg
-rwxrwxrwx 1 george george 4.0M Jun 21 09:20 bigimage.png

Conclusion

So you can see that just using convert to do all the works gives you slightly better results then the other tools. You can tweak it further to get better results, but in my trials I found that 85% quality was the best for keeping almost quality while getting the smallest file size. If you go too low in quality, you get a much smaller file, but the quality starts getting noticably bad

These sizes and qualities are perfect for online viewing. When 75+% of the viewing is done on mobile devices, users will not at all see the difference. And they look good on desktop too.

Given that I originally wanted this to be somewhat automated and scriptable, I started a project over on my Github to get this optimisation web based (and eventually with an API). You can check it out here

Similar articles: