Stop Broken Images in Marketing Cloud Emails & Landing Pages

Marketing Cloud assets can break from time to time, and often, this has to do with your image formatting. Take email, for example - everything can look great in the Email Builder, but when a test email lands in your inbox, the images are broken or distorted. Or your latest landing page template has been meticulously designed, yet your selected image just won’t render beautifully across devices. 

You won’t be the first, and you’re certainly not the last to tear your hair out over broken or skewed images in Marketing Cloud emails and landing pages. Before you go blaming the platform, consider this: email and landing page templates only do what the developer told them to.

When a landscape image is dropped into position and doesn’t intuitively crop into a perfect square, it’s not the template or even a ‘quirk’ of Marketing Cloud at fault. The template is just following the rules it was given. The real issue is how we think about templates and images. 

When a template is built to handle any size image - square, landscape, portrait, or even round - you won’t see nearly as many struggles. 

“Bring the right-shaped image, get the right-shaped template!”

The best way to achieve this is to share your image examples early on so that developers can ensure your Marketing Cloud emails or landing pages are coded correctly.

Next, learn which image ratio and dimensions should be used in your templates and format your desired images accordingly.

Marketing Cloud email images

When it comes to Marketing Cloud email templates, width can be set to an exact value to ensure consistency across all clients, and the height set to auto. This setup allows for any image size to work without worrying that it’ll break the layout. Whether an image is square, landscape, or portrait, the template can handle it, but you still need to upload the right sized images in the right places.

Hiccups happen when a landscape image gets uploaded into a placeholder for a square image. Now, we could design the email template to crop the image, but where should we cut it? We could also force the height to match the width and create a square, but do we want to revisit the distorted images of the early 2000s? No, thank you.

Email templates are flexible, but they’re not that flexible. They can handle almost anything you throw at them, but a little help from the image side makes all the difference.

In terms of optimal image sizes that keep you out of the spam folder, your developer should be able to guide you through that.

Landing page images

For Let’s imagine placeholders for hero images with text have been set up in your landing page template, in the absence of provided images. The template looks fantastic. But when real images are added, things get tricky. Without knowing what the final image will look like, developers have crossed their fingers and hoped there’s no clash between the text and the visual elements of the image. This means the text is cut off, unsymmetrical, or looks bad.

It’s like setting up the perfect stage for a performance, only to have the seemingly perfect banner cover the performers’ heads. Developers can’t foresee where the key parts of the image will land, and that’s where the challenge arises. 

Again, the template is doing what it was told, but it can’t process visual information on an image like AI can. It’s still just a web page.

The solution for perfect Marketing Cloud images

Marketers and designers, a little planning can save you - and your developers - from digital chaos. 

Here’s the key takeaway: during the planning phase, have a clear idea of what images will be used. Provide those visuals to the developers early on if possible.

Secondly, if you have a placeholder for a square image, upload a square image! Crop or resize your image before uploading if need be.

Lastly, for landing pages, share details about the style and colour of the hero image you intend to use so developers can ensure your template looks the absolute best it can.

Marketing Cloud templates are like toolboxes. You’ve got all the right tools to build something amazing, but if you try to hammer in a screw, it might cause you some pain.

For Marketing Cloud email and landing page templates coded for your business needs, book a call with MarCloud. We build custom templates based on your brief, delivered fully branded and with training on your new asset.