Replacing Picture tag feature for sites that support picture tags instead of image tags.

Avatar

Avatar
Shape 1
Level 1
sanjay_gaonkar
Level 1

Likes

0 likes

Total Posts

1 post

Correct reply

0 solutions
Top badges earned
Shape 1
View profile

Avatar
Shape 1
Level 1
sanjay_gaonkar
Level 1

Likes

0 likes

Total Posts

1 post

Correct reply

0 solutions
Top badges earned
Shape 1
View profile
sanjay_gaonkar
Level 1

19-05-2021

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. 

1 Comment

Avatar

Avatar
Boost 100
Level 7
rush_pawan
Level 7

Likes

127 likes

Total Posts

192 posts

Correct reply

81 solutions
Top badges earned
Boost 100
Validate 1
Ignite 1
Give Back 5
Give Back 3
View profile

Avatar
Boost 100
Level 7
rush_pawan
Level 7

Likes

127 likes

Total Posts

192 posts

Correct reply

81 solutions
Top badges earned
Boost 100
Validate 1
Ignite 1
Give Back 5
Give Back 3
View profile
rush_pawan
Level 7

20-05-2021

Hello,

 

If you want to replace the complete <picture> tag then create a <section> or <div> tag as a wrapper around the <picture> tag and associate with unique id to.

 

Now, you can replace the entire <picture> tag inside that wrapper tag by targeting through the id given in wrapper tag.

 

I hope it helps.