Editing srcset images

If the image you personalized displays differently for mobile and desktop, the most likely culprit is due to srcset in the HTML.

Updated over a week ago

Occasionally websites will use srcset to define images meant for different screen sizes like tablet or mobile. To ensure that your personalizations render for all devices, it’s important to edit the HTML to ensure that the same image is showing for these different mediums.

What is srcset? This is HTML that is used to solve the problem of displaying identical image content, just larger or smaller depending on the device.

This appears when you are editing an image for an experience. When you change the editor view to mobile/tablet, as demonstrated in the screenshot below and the image looks different compared to the one for desktop the most likely culprit is srcset in the HTML.

Hover over the image, right click on it and click inspect. In the developer tools, click on the elements tab and examine the HTML. If you see that the image uses srcset, it will look like this:

To make the necessary changes to have your image appear universally follow these steps:

  1. Choose the HTML of the image by clicking inspect on it. Right click on the HTML and choose select element.

  2. Go to Mutiny and click on “Find Element” and paste that selector.

  3. Change all images contained in srcset of the HTML with the correct URL or image link

  4. Make any relevant changes - padding, layout, etc. to ensure the image displays correctly for the respective medium.

Did this answer your question?