Resizing web images with ease: Introducing Habasizer

Creating the perfect website sometimes means finding images with very specific aspect ratios or sizes.

Habanero has been passionate about human-centred design since our inception, leveraging its tools and techniques to create the best experiences possible. When it comes to user experience, people often consider the end-user, but those that create and manage content can be forgotten.

We’re always trying to make content authoring easier for our intranet and website projects with thoughtful page template design, content creation shortcuts, contextual content authoring tips and simple content lifecycle management. Taking the guesswork out of content creation is especially important in organizations that use a distributed content authoring model, where employees in various roles across the organization are responsible for creating and publishing content.

During training, we’ve found that many content authors run into issues around resizing and cropping images. They often don’t have access to the graphics software or skills needed to format their images correctly, resulting in author frustration and pages that don’t look great. So, we created the Habasizer, a free tool that anyone can use to prepare their images for publishing.

Habasizer is primarily an image resizer that can crop images to a specific aspect ratio. But it goes further: it also can resize and optimize your image, preparing it for use directly on your website or on social media.

You don’t need to be using SharePoint, Sitecore or even be a Habanero client to use the Habasizer. Here’s how it works:

Websites

Website performance is critical in reducing abandonment and increasing your conversion rates. We always advise our clients to optimize their images before uploading them to their site. Nobody wants to arrive on your website and wait forever for your image to load! So, even if you don’t need to crop your images, you could still use the Habasizer to optimize them.

Social media

Social media dimensions seem to change every year. We’ve taken the guesswork out of it by creating presets for all your social channels. For example, one of the most common image dimensions used for sharing links is 1200x630px. Seeing as it’s so common, it’s the first preset you see in the tool.

Other image optimizers ask you to upload your image to their server for processing, and there’s no way to know if they’re keeping a copy. All Habasizer functionality occurs client-side in your browser, ensuring your images don’t leave your computer.

Personalized links

You can also create a link to the Habasizer with a preset aspect ratio, image width, image format and optimization (or not). After you update the image options, the URL of the page will change to preserve your changes. You can bookmark these links or embed them within your style guide or your CMS for quick access.

Weaving it into GO Intranet’s Brandmate

When we expanded GO Intranet to include Brandmate, we knew it made sense to bring in the features of the Habasizer into the tool.

Brandmate houses your organization’s brand assets such as photography, iconography, presentation templates and more, all in one place. Gone are the days of people making shadow repositories on their own computer. With Brandmate, you can centralize all your assets, creating a spot for all your approved brand assets that employees can refer to again and again.

We found that, similar to website content authors, communicators and intranet managers also struggled with cropping, resizing and downloading optimized images. They needed to download imagery to use on their SharePoint site or PowerPoint presentations, or save an image in another file format. Now they can visit one place and download the size and format of photo that they need.

Try it out for yourself!

Check out Habasizer, or view the source code on GitHub to include it in your next project.

Stories say it best.

Are you ready to make your workplace awesome? We're keen to hear what you have in mind.

Interested in learning more about the work we do?

Explore our culture and transformation services.