Magic using ImageMagick

Photo by Julius Drost on Unsplash

Its time to create images for uploading product images.

So I have a grid of images.
1 large image containing individual product icons. 8x8 or 5x5.

Being a programmer I considered using ImageMagick to programatically split.

convert large_matrix.jpeg -crop 4@x4+200+200 +repage +adjoin cereal_44_%d.jpeg

This does the job.

I referred the documentation (https://www.imagemagick.org/), the examples are self explanatory.
Here using @ splits using approximate Parts. So if length is not accurately divisible, it

The 200+200 takes some extra part of neighbour diced. As My Image is not a perfect matrix but close enough, sometimes expected image moves or there is a cut. So I take some extra part and manually trim. This helps me as nothing is cut.

But the finished Image(dice) is very huge. Each filesize is approx 5mb.

Adding below params reduced filesize by 80%.

-sampling-factor 4:2:0 -strip -quality 85 -interlace JPEG -colorspace RGB

So one of my actual spippets is the one below.

convert cereal_14_3.png -crop 4@x1+300+200 +repage +adjoin -scale 640x640 -sampling-factor 4:2:0 -strip -quality 85 -interlace JPEG -colorspace RGB cereal_1431_%d.jpeg

Now individual file-size is around 30kb, as I am scaling down and compressing. previously it was 5mb.

This will help make page lightweight and SEO friendly.