Remember those shape-sorter toys we had as kids (you know the one by that large plastic storage container company)? The brightly coloured boxes with star, circle, and square cut-outs, and the challenge of putting the right block into the right hole? Most of us learned at an early age that a square peg doesn’t fit into a round hole. Yet, when it comes to managing websites as adults, that simple lesson seems to have been forgotten.
The big culprit is image selection. Using a portrait image in a space designed for a landscape image (or vice versa) rarely works well. At best, it looks cramped or awkward, and at worst, key parts of the photo get cropped, and the overall design loses its impact.
Why image aspect matters
Websites are designed with specific image aspect ratios in mind, whether it’s a banner, thumbnail or hero image. If your images don’t match those spaces, you end up with one of two outcomes: unwanted white space or cropped-out content. Neither makes your site look polished or professional.
By taking some time to plan and select the right image up front, you can make sure your image fit the space you’re working with. That might mean choosing a different photo altogether, or doing a little editing to adjust the crop so it works better. Taking time here avoids headaches later and preserves the overall feel of your site.
How Statamic can help
If like the majority of our clients you’re working with Statamic you’re already in a better position. Statamic includes handy features like focal cropping and focal points. These allow you to specify the most important part of an image so the CMS can automatically crop around that focus when displaying it in different aspect ratios. This reduces the risk of cutting off faces or key details.
That said, nothing beats starting with the right image in the right shape. Focal cropping is a great safety net, but it can’t fix an image that’s fundamentally the wrong orientation for the space.
Start with the right shape
Think back to that childhood toy. If you start with the right shape, everything fits perfectly. By planning your images to match the spaces they’ll site in you’ll create a website that looks professional, cohesive, and visually consistent.
Michael Scruse
Michael brings a rare blend of technical, web and sales expertise to every project, backed by over 30 years of experience in the IT industry.
He’s also a qualified chef, though these days his culinary skills are mostly reserved for the home kitchen. A self-confessed history buff, Michael is currently deep into researching his own family tree.