Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
Bedrock Mission!

Learn more

View all

Sign in to view all badges

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
Give Back 100
Community Advisor
Pawan_Gupta_
Community Advisor

Likes

139 likes

Total Posts

199 posts

Correct reply

84 solutions
Top badges earned
Give Back 100
Ignite 5
Ignite 3
Give Back 50
Give Back 25
View profile

Avatar
Give Back 100
Community Advisor
Pawan_Gupta_
Community Advisor

Likes

139 likes

Total Posts

199 posts

Correct reply

84 solutions
Top badges earned
Give Back 100
Ignite 5
Ignite 3
Give Back 50
Give Back 25
View profile
Pawan_Gupta_
Community Advisor

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.