Description -
In order to improve end user experience on our site we have implemented image optimization. Here we use different dimensions of same image to fit as per different dimensions of the device that end users use like mobile, ipad, desktop. We use a picture tag to deliver these images so that the end browser will decide which is the best suitable image that suits the browser and downloads it.
We are trying to replace image using AB testing feature in Adobe Target.
Our picture tag looks like
<picture>
<sourcemedia="(max-width:750px) and (min-width:320px)"srcset="/-/media/images/content/background/media-center/microsoft-alliance-partner-year.webp?la=en&ver=4&w=1&hash=9563B200569D110D40EE678A20F9D116"type="image/webp ">
<sourcemedia="(max-width:1024px) and (min-width:768px)"srcset="/-/media/images/content/background/media-center/microsoft-alliance-partner-year.webp?la=en&ver=4&w=320&hash=55421C596ED4BB5620E183BA6418D90D"type="image/webp ">
<sourcemedia="(min-width:1025px)"srcset="/-/media/images/content/background/media-center/microsoft-alliance-partner-year.webp?la=en&ver=4&w=320&hash=55421C596ED4BB5620E183BA6418D90D"type="image/webp ">
<sourcemedia="(max-width:750px) and (min-width:320px)"srcset="/-/media/images/content/background/media-center/microsoft-alliance-partner-year.jpg?la=en&ver=4&w=1&hash=10F5A22FD0FCA601949FDAE83BA9248A"type="image/jpeg">
<sourcemedia="(max-width:1024px) and (min-width:768px)"srcset="/-/media/images/content/background/media-center/microsoft-alliance-partner-year.jpg?la=en&ver=4&w=320&hash=17C160F5B747589116BF321E2D409ED5"type="image/jpeg">
<sourcemedia="(min-width:1025px)"srcset="/-/media/images/content/background/media-center/microsoft-alliance-partner-year.jpg?la=en&ver=4&w=320&hash=17C160F5B747589116BF321E2D409ED5"type="image/jpeg">
<imgsrc="/-/media/images/content/background/media-center/microsoft-alliance-partner-year.jpg?la=en&ver=4&w=320&hash=17C160F5B747589116BF321E2D409ED5"loading="eager"class="attachment-homepage-thumb"alt="Microsoft Alliance Partner Year" />
</picture>
When we try to replace the image using AB testing, what happens in the background is the img tag (bold one) inside the picture tag gets replaced by the new image tag. However the rest of the source tags inside picture tag stay as it is. Thus the browser does not download the new image. Instead it still downloads old images which are part of source tag. That’s because, that’s how a picture tag works.
Our ask – is there a way we can resolve this? I know, we can edit the html of the picture tag and replace it by img tag. But editing html will be a challenging task for Marketing team who are not that techno savy and do not understand html in detail.
