Support srcset for multiple image formats

[DanielHeath]

We're using photoswipe and would like to serve webp images to chrome users.

I've considered the following options:

• Compute a different the URL if webp is supported (doesn't play nice with server rendering)
• Make the same URL return webp if the requesting browser is chrome (doesn't play nice with major CDN providers)
• Use <picture> <source srcset="..." type="image/webp" /> (doesn't work with PhotoSwipe)

Would a PR introducing support for multiple image formats be welcome?

[dimsemenov]

Well, you can already serve webp in PhotoSwipe, either serve the image from server side based on headers, or detect webp support via JS (with something like Modernizr) and just rewrite the URL, e.g. like so:

pswp.listen('gettingData', function(index, item) {
  if (supportsWebp) {
    item.src = item.src.replace('.jpg', '.webp');
  } 
});

[DanielHeath]

Right - as I listed in the options considered:

• Serve the image from server side based on headers: This doesn't work with Akamai, Cloudflare or Cloudfront if you want caching. Using a CDN isn't some obscure use case; it's how most of the internet works.
• Detect webp support via JS: This is a performance disaster as your images don't start to load until after your JS runs.

[dimsemenov]

Not quite understand your second point, as PhotoSwipe is a JS library, and loads all images dynamically.

[dimsemenov]

closed by v5 #1749