Considering adding high-density display optimization to your Mailchimp template design package?
There are a few things you should know and consider up front before you make your decision.
The good news is we offer a high-density display optimization add on to our Mailchimp packages that will ensure your images look great on high density or retina displays. However, there is a downside to this add-on and it makes editing your imagery within the Mailchimp editor more complicated.
Why is editing high-density display imagery more complicated?
Ultimately it comes down to how Mailchimp handles the editing of imagery within their campaign editor. Even if we were to include the necessary code for high-resolution imagery (as we do, of course when this option is selected) the Mailchimp editor strips this code out when you swap out the imagery using the standard image editing process (i.e. hovering over the image and clicking the “edit” button that appears). See Mailchimp’s official response on this issue below for further clarification.
To provide some background here, when an image is replaced in the campaign builder the image properties such as the width set in the tag are removed as they were specific to that image.
One thing that can be done to work around this is to have those images be changed in the template’s coding directly rather than in the campaign builder. This should allow those images to keep that designated width and keep them from staying at that larger size.
PROS
CONS
What does this mean for me, the Mailchimp user?
Simply put, editing your imagery will be slightly more complicated. By more complicated, we mean, that you’ll need to swap out imagery utilizing the URL versus being able to simply click edit, and then upload your new imagery.
How would I edit imagery if I choose this option?
You can review our walkthrough on high-density image editing here. This will give you an idea of what will be involved in the image editing process should you select high-density display optimization.
Mailchimp’s Offical Response On Editing High Res Imagery In Custom Templates
Thanks for following up with that information! It was very helpful for visualizing and troubleshooting the issue here.
I took a look at that campaign, and I see that those images in the columns are not rendering responsively when swapped out in the campaign builder. I checked out your code for that template as well, and it looks like it’s set up to have fluid images there. The code also seems to be set up to shrink down high definition images when they are brought into that campaign.
In this case, it looks like when your template is being tested, edited, and a campaign is drafted with that template, everything works as expected. However, when that image is swapped out in the campaign builder directly, the image that is brought in no longer has the width designated for high-res images, and stops rendering in the appropriate size. To provide some background here, when an image is replaced in the campaign builder the image properties such as the width set in the tag are removed as they were specific to that image.
One thing that can be done to work around this is to have those images be changed in the template’s coding directly rather than in the campaign builder. This should allow those images to keep that designated width and keep them from staying at that larger size. Another alternative to consider is to host those images in a URL outside of Mailchimp, and upload the image to that URL when needed. If the URL remains unchanged, it should apply those size settings to that URL even if the image is swapped out server-side. This option may be a bit more client-friendly than editing the code itself.
That should get things moving in the right direction! Please feel free to contact us if you have any additional questions.
What happens if I load high-resolution imagery into my standard, non-optimized template?
Initially, all may seem well! As Mailchimp resizes your imagery within the editor and will scale down your image to fit the template specifications. The issue comes into play when your campaign is sent and processed through various email clients. Some will continue to display your imagery in an acceptable manner but some will display your imagery at it’s, very large, original size as high-resolution imagery is often 2-3 times the size of the intended output image.
Why do I have to edit my image’s URL? Can’t you just set a hard width in my template’s code?
The issue here is two-fold. Firstly, in order for your images to scale proportionally in mobile environments, a maximum width is set in your template’s coding. This allows you to upload any imagery up to the maximum allotted size outlined in your template’s code. This also allows your image to scale down in size to as small as may be required. This is important in ensuring your template can scale and restack correctly in mobile environments.
Editing your imagery’s URL directly prevents Mailchimp’s campaign editor from stripping out or removing the high-resolution coding tied to your imagery. This is an issue with how Mailchimp handles image editing and high-density display and not an issue with the way our templates are coded. Please see Mailchimp’s official response for further clarification.
In this example, imagery is displayed in the template at 240 pixels wide. For high-density displays, a 480-pixel image is loaded to the initial master template. This imagery retains its sizing UNTIL the client attempts to replace the image with another similarly high-resolution image.
The image has now been swapped out in the campaign editor for another 480-pixel wide image. All seems well in the editor but look what happens when you preview your campaign…
