0

we are implementing Picturefill (version 2.2.0) at the moment in our site. The picture element look like this:

<picture>
    <source media="{query_size1}" srcset="/images/size1.jpg"></source>
    <source media="{query_size2}" srcset="/images/size2.jpg"></source>
    <source media="{query_size3}" srcset="/images/size3.jpg"></source>
    <source media="{query_size4}" srcset="/images/size4.jpg"></source>
    <source media="{query_size5}" srcset="/images/size5.jpg"></source>
</picture>

As you can see, we have 5 sources for a single picture with complex media-queries as we consider normal media queries and pixel-ratio. Such a query could look like the following:

(max-width: Xpx) and (-webkit-max-device-pixel-ratio: 1.0), 
(max-width: Xpx) and (-o-max-device-pixel-ratio: 1/1),   
(max-width: Xpx) and (max-resolution: 100dpi),
(max-width: Xpx)  and (-webkit-max-device-pixel-ratio: 1.5), 
(max-width: Xpx)  and (-o-max-device-pixel-ratio: 15/10), 
(max-width: Xpx)  and (max-resolution: 150dpi),
(max-width: Xpx)  and (-webkit-max-device-pixel-ratio: 2),
(max-width: Xpx)  and (-o-max-device-pixel-ratio: 2/1),
(max-width: Xpx)  and (max-resolution: 200dpi),
(max-width: Xpx)  and (-webkit-max-device-pixel-ratio: 2.4), 
(max-width: Xpx)  and (-o-max-device-pixel-ratio: 24/10), 
(max-width: Xpx)  and (max-resolution: 240dpi)

Now I am wondering if this enormous queries, that have to be analysed by regular expression (correct me if I am wrong) in the browser, could slow down the browser, because if we have 10 pictures on a site, there would be 10 X 5 = 50 such complex RegEx calculations.

Would be great to hear what you think... ;)

Best regards...

leppie
  • 115,091
  • 17
  • 196
  • 297
steven
  • 383
  • 1
  • 3
  • 20

1 Answers1

0

In general no. The media attribute is handled by window.matchMedia and not with regular expression. Also while regular expression are slow string operation those are x times faster than the normal DOM traversing/manipulation which needs to be done to implement picture/srcset.

But looking at your media it seems to me that you are doing something wrong. Picture is about art direction (different images for different layouts), not for different image sizes. In case you have different image sizes use only srcset. Also note, that you can combine picture with srcset in case you have 2 different images and multiple sizes for them.

In case performance is important for you you should consider trying respimage polyfill or lazySizes RIaS extension.

alexander farkas
  • 13,754
  • 4
  • 40
  • 41