How to force cache update for pictures included in our email signature?

Question

I want to include an image in our email signatures displaying information regarding incoming events. To avoid everyone updating their image signature every 3 months, I want to be able to change this image on our server in order to update the email signatures.

Problem is, the cache prevents it and displays the previous version of the image when I change it.

To avoid hurting deliverability, I tried finding a solution in html only.

I need the displayed image to be up to date without changing the source url or the image. I simply replace the image on the server.

I tried to add a variable to the url that changed everytime the image is modified in order to force the client to download it again but it doesn't work.

Here is how I call the image : <img style="display: block; max-width: 430px;" src="https://loremipsum.com/cdn/shop/files/event_banner.png" alt="event_banner" width="430" />

I tried this : <img style="display: block; max-width: 430px;" src="https://loremipsum.com/cdn/shop/files/event_banner.png?lastModified("https://loremipsum.com/cdn/shop/files/event_banner.png") alt="event_banner" width="430" />

Answer 1

Changing the image path would be the easiest solution. That said, changing the image path each time you need the recipient to see the new image isn't necessary. You can instead add URL parameters which change to force the email client to clear its cache.

See the following example:

document.getElementById('email-img').src = `https://www.eteknix.com/wp-content/uploads/2015/06/imgur-e1433423720776-800x508.jpg?date=${new Date().getTime()}`;

console.log(document.getElementById('email-img').src);

<img id="email-img" style="display: block; max-width: 430px;" src="https://www.eteknix.com/wp-content/uploads/2015/06/imgur-e1433423720776-800x508.jpg" alt="event_banner" width="430" />

All I'm doing is adding new Date().getTime() to a made up date variable at the end of the image src path. This addition allows you to always ensure the user is shown the most up-to-date image living on your server at the defined file path.