How to Image Swap Dynamic Content on Apple Mail With Litmus Personalize

An issue with using dynamic content on Apple clients is that Mail Privacy Protection (MPP) caches images—and only displays the cached image. This is a big problem, as dynamic content is usually time sensitive. Therefore when Apple caches images when an email is sent, by the time the recipient has opened the email, the content is no longer relevant.

We ran into this problem for recent email campaign—and Carin Slater (our Email Marketing Specialist) found a workaround. She figured out a different way to swap the image out, so the content wouldn’t be irrelevant for subscribers opening on Apple clients. Read on to find out how we did this for an email sent to promote Litmus Live 2022.

At Litmus Live 2021, Jay Oram spoke about using an external CSS to change an image in an email by having the image be a background image, then updating the external CSS document. So initially, we tried putting the tag from the rule as the background image, but found that the MPP still cached that image—at least for a period of time before the CSS was called again. However, Litmus Personalize doesn’t just do dynamic images. It also does dynamic links.

Instead of concentrating on having the links change, we used a dynamic link that changed to point to different CSS files that had corresponding images from the content automation tags.

Step 1

First we set up the MPP version in the email code.

We then set it up with an image inside the <a> tag and then put the show/hide code in the external CSS file:

Then show the content in the .mac-agenda class on Apple/iOS and hide the .agenda class block.

Now the .mac-agenda block is showing, but it’s showing the static image. So, we hid that image, but kept the dimensions in place by using opacity and visibility properties. We then used the desktop content automation image URL for the background image on the <a> tag and give it a size so it would show up.

Adding a media query to account for mobile and then did the same with the background image as before, but with the mobile content automation image as the background image, and did the mobile/desktop hide/show technique.

That produced one CSS file for one session. Copying that and putting in the different content automation images resulted in 39 CSS files: one for each Litmus Live session (35), two end-of-day emails, one pre-show email, and one default email.

Step 2

With the code all set up, we hosted the CSS files on our FTP. Then, we set up the rule for MPP. When assigning a static image for a rule, you are able to put in a URL to go with each image. We then put the URL for the CSS file that corresponded with the session and then used any random image:

Once the rule was set up, we took the URL from the rule tag and put it in the external link code in the email:

So now whenever the email is opened, the external CSS will pull the new CSS file that matches the session and will show the correct background image.

There is a different user experience between MPP and non-MPP. For MPP, the subscriber needs to refresh their email, meaning they need to close it and come back to it to see the changes. For non-MPP, the image will update automatically even if the email is left open.

Is Apple a popular client among your subscribers? If so, give this a try.