Size a stack of images to the same dimensions
3 min read

Size a stack of images to the same dimensions

A stack of images with a random height and width that all need to go to the same dimensions. And you cannot use CSS cover option. Get out the digital scissors and maginifying glass.
Size a stack of images to the same dimensions
Take out the digital tools to resize and redimension images in bulk.

I had to bring 45 images with random dimensions all back to the same dimensions. Some nice digital production work but it sounds easier said than done. Even if only because you don't do it every day. I've written all the steps out and maybe you can use it too one day.

The images I wanted to edit were all on a web page. That page worked in Squarespace with a CSS setting that is really wonderful. It's called "cover" and it automatically brings all the images to the same size.

Styling property called cover

The new site in Leadpages didn't have this so I had to work with the digital scissors and magnifying glass. I had to start with a one size goal. The target dimensions were:

Width: 724 pixels
Height: 483 pixels

This is an aesthetically pleasing ratio between width and height. And with these sizes, the image in the web page is scaled back in a way that benefits the sharpness of HD screens. In this way, the extra pixels are used for more detailed display.

The stack of 45 images now contained images that were too high or too wide. But also images that were smaller than the intended height. In three steps I brought all the images to the same dimensions.

1. Make the same width

The first thing I did was to make everything the same width. The images were big enough so it came down to making them all smaller. I did that with a program called PhotoBulk. It was just too much work otherwise but you could also do it manually.

Make same with for digital images in bulk

2. Vertical crop

Now I had to vertically crop the images that were too high to 483 pixels. I did that with Apple Preview. All done manually so I could make the right selection with composition in mind.

Vertical crop with Preview

3. Expand and horizontally crop

Then there remained the images that were not high enough. I enlarged them to the desired height and then cropped them horizontally. Not sure I put it into clear words so I made this short video clip:

Scaling, cropping in Preview

After that I was able to load them into the program again and all in all the page with the 45 images has become better. It loads much faster because the images are now optimal. Nothing is loaded anymore that isn't shown and the images have the proper resolution.

You can see them in action here:

Maya.coach Associatiekaarten
Een set van 45 associatiekaarten. Voor de clienten, coaches en counselors zijn deze prachtige online associatiekaarten gratis te gebruiken.
Same sized images example

Read more

A Guide to Common Aspect Ratios, Image Sizes, and Photograph Sizes
Don’t know which size to use for your image or video? We’ve listed common aspect ratios to help you create your next project.