Fixing e-commerce image aspect-ratios by “uncropping” – generating new background

A common problem when running e-commerce websites is images with different aspect ratios. Here I’m demonstrating an elegant solution I figured out for a Shopify client.

E-commerce. Different images with different aspect-ratios. What a pain in the ass. Could the whole world just agree that every product image will be a 1:1 square, from now until the end of time? 😩

Probably not. Until then, we gotta solve it ourselves. And today, I think I found a pretty nice solution.

While it is possible and easy to crop images, the end result can be cutting people off in weird places. The end result might be pretty bad. Sometimes, like in this example we’d prefer want to “uncrop” images, basically generate more new background space, so we won’t have to crop the model at all.

Here’s how it works.

Basically, you’ll create a Photoshop action. Make the canvas the desired aspect-ratio. Use marquee tool to select the new blank generated blocks. Use content-aware fill (new lovely artificial intelligence tool from Adobe) to generate seamless background space without having to do that manually. Then you run an automation to do all these steps for 100s of images.

Ready to upload to Shopify (or whatever you’re using)

ps. Feel free to hit me up if you need help with your e-commerce stuff — @hire