Support srcset for multiple image formats #1241

Open
DanielHeath opened this Issue Nov 15, 2016 · 3 comments

Projects

None yet

2 participants

@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
Owner

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
Owner

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment