2

In the context of developing responsive web templates, I use the srcset attribute to load different images depending on the current viewport size. This works fine in general. But in production mode the images are loaded from a DAM (Digital Asset Management System) where special parameters are used to scale and crop the requested images e.g.

<img src="{url}/s,x,586,y,0/{img_id}"
     srcset="{url}/s,x,293,y,0/{img_id} 293w,
            {url}/s,x,440,y,0/{img_id} 440w,
            {url}/s,x,586,y,0/{img_id} 586w"
     sizes="(max-width: 520px) 100vw, (max-width: 1010px) 40vw, 15vw" />

The problem is: now every image is loaded twice (440w and 586w). Is this a caching problem?

GrübelDübel
  • 165
  • 10
  • I was not able to reproduce that issue. In my test (Firefox 49) only the 293w version was loaded. Can you provide a link to the affected page? Which browser and version did you use? – ausi Oct 12 '16 at 16:25

1 Answers1

0

Your code looks perfectly fine, the browser should load only one of the images, unless you resize the window or maybe rotate a tablet.

Nicolas Hoizey
  • 1,954
  • 1
  • 17
  • 24