Categories:
mailchimp image size replace images

How to add Retina Ready Images without Distortion in MailChimp

Category : Email Coding

In 2007, Apple took the mobile device industry by the storm by introducing the 1st generation iPhone. Even though Blackberry was already popular for supporting push email in their devices, Apple iPhone added the much needed leverage in making email responsive.

In 2011, Apple’s 4th Generation iPhone i.e. iPhone 4S was introduced with a Retina display and the need for catering high definition images on all fronts became the industry standard. In a domain where images actually speak more than words, email marketers effortlessly adopted the best practice of having every image in their emails be retina compliant. You can check out our infographics on the Best practices for Retina ready emails.

mailchimp image size-Retina

With more and more people making use of the Master Templates to send different types of emails from one single skeleton template, image replacement is one of the major deal breakers. Unfortunately, MailChimp’s Editor poses certain roadblocks when it comes to editing and replacing retina images within an email template or Master Template.

How to edit images in Mailchimp?

In any email template that can be edited in MailChimp, it is important to specify which sections in the email can be edited by using the tag ‘mc:edit’.

mailchimp image size-Image-editor-width

In the above sample email, the image has the ‘mc:edit’, so the option to edit pops-up on mouse hover.

mailchimp image size-Without-Edit-code

In the same email, this image doesn’t have the ‘mc:edit’ so no option to edit.

To edit as a text or as an image?

As most of the emails are coded in a table layout, most of the sections are as below

Now depending on where you place ‘mc:edit’ tag, MailChimp offers a different editor.

  1. Place it within <td> tag and MailChimp identifies it as a text and provides the text editor option.

    mailchimp image size-Image-editor-width
    Now, in this case, you can replace the image but since retina images are twice the resolution of an ordinary image, there is a chance that your image shall be cropped or won’t stay bound within the width of <td> tag.
  2. Place the ‘mc:edit’ within the image source.

    In this case, MailChimp identifies the section to be an image and provides an image editor.
    mailchimp image size Image-editor

But as you can observe, the image resolution causes MailChimp to show a warning that images of this size can be problematic. And when the image is replaced, it goes out of the bounds.

mailchimp image size-Without max-width

Solution in both scenarios

You need to provide a max-width by going to settings and specifying the width. Enable the ‘Keep proportions’ checked and the image height is adjusted accordingly.
Please Note: This is not supported by the custom editor. So it is better that you provide ‘mc:edit’ alongwith the image when you upload the template.

mailchimp image size-Image-editor-width

In case you replace the image in the text editor

mailchimp image size-Image-editor-width

In case you replace the image by using image editor

Wrapping Up

With more and more devices flooding the market with HD, FHD, 2K, 4K and other numerological K resolutions, it is important for the images you use in your emails to be very sharp and crisp. For DIY email marketers all around the world, it should not be the end of the road if they find it difficult dealing with replacing retina images. Have you come across any similar tweaks? Spark the conversation in the comments below.

 

 

The following two tabs change content below.
Kevin George
Kevin is the Head of Marketing at EmailMonks, one of the fastest growing email design and coding companies. He loves gadgets, bikes, jazz, and breathes ‘email marketing’. He is a brand magician who loves to engage, share insights with fellow marketers, and enjoys sharing his thoughts on the latest email marketing best practices at EmailMonks Blog.

Leave a Reply

Your email address will not be published. Required fields are marked*