Stop Broken Images in Marketing Cloud Emails & Landing Pages

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 originally intended for a square 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. 

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

The best thing 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.

Lastly, if the template is coded to maintain the aspect ratio of a specific image and then you change that image to one that is square instead of portrait, understand that the image won’t automatically resize or crop. First, you need to crop your image to the correct aspect ratio and then upload it. 

These steps will empower you to use any image you like in your designs.

Marketing Cloud email images

The way we do things at MarCloud is to use a static image width within the 600px body of the email and let the height auto-adjust. This 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.

Now, we could code the email template to crop the image, but we can’t predict where to crop 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

Let’s imagine placeholder hero images with text have been set up in your landing page template because you’ve yet to decide on/provide images to your developer. The template looks fantastic. But when your final 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.

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.

Lastly, if your images don't fit the intended aspect ratio of the template, crop before uploading.

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.