Support for multiple image formats

[bre7]

Problem Description

Fancybox only allows a single image format to be used (https://github.com/fancyapps/ui/blob/main/src/Fancybox/plugins/Image/Image.js#L204). Since lightbox image viewers are meant to load higher quality images on click, allowing "next-gen" formats improves loading times.

Design

There are several ways to solve it, Photoswipe for instance provides a hardcoded attribute for webp since it's the most used nowadays.

Implementation Details

Simple

Assume most devs will just end up using webp. Create a new attribute (data-srcset-webp) for HTML markup.

HTML Markup

<a
    href="https://image.placeholder/rand.jpeg"
    data-fancybox="gallery"
    data-caption="Optional caption"
    data-srcset="https://image.placeholder/rand.jpeg 800w, https://image.placeholder/rand_1600w.jpeg 1600w"
    data-srcset-webp="https://image.placeholder/rand.webp 800w, https://image.placeholder/rand_1600w.webp 1600w"
>
    <div class="foo">
      <picture>
        <source type="image/webp" srcset="..." sizes="...">
        <source type="image/avif" srcset="..." sizes="...">
        <img sizes="..." src="https://lipsum.app/id/2/80x80" srcset="...">
      </picture>
    </div>
</a>

API

const gallery = [
  {
    src: "https://lipsum.app/id/2/800x600",
    thumb: "https://lipsum.app/id/2/80x80",
    caption: "First image",
    webp: "https://lipsum.app/id/2/800x600",
  },
  // ...
]

Fancybox.show(gallery, {
  // Your options go here
})

Advanced

Parse all attributes starting with data-source-xxx/data-srcset-xxx as sources.

HTML Markup

<a
    href="https://image.placeholder/rand.jpeg"
    data-fancybox="gallery"
    data-caption="Optional caption"
    data-srcset="https://image.placeholder/rand.jpeg 800w, https://image.placeholder/rand_1600w.jpeg 1600w"
    data-srcset-webp="https://image.placeholder/rand.webp 800w, https://image.placeholder/rand_1600w.webp 1600w"
    data-srcset-avif="https://image.placeholder/rand.avif 800w, https://image.placeholder/rand_1600w.avif 1600w"
    data-srcset-heic="https://image.placeholder/rand.heic 800w, https://image.placeholder/rand_1600w.heic 1600w"
>
    <div class="foo">
      <picture>
        <source type="image/webp" srcset="..." sizes="...">
        <source type="image/avif" srcset="..." sizes="...">
        <img sizes="..." src="https://lipsum.app/id/2/80x80" srcset="...">
      </picture>
    </div>
</a>

API

const gallery = [
  {
    src: "https://lipsum.app/id/2/800x600",
    thumb: "https://lipsum.app/id/2/80x80",
    caption: "First image",
    formats: {
        webp: "...",
        avif: "...",
    }
  },
  // ...
]

Fancybox.show(gallery, {
  // Your options go here
})

[fancyapps]

Hi,

I'm happy to announce that as of v5.0.13, Fancybox supports the <picture> element. Use Images.content option to create it according to your needs. Sample can be found here - https://fancyapps.com/fancybox/plugins/images/#using-html5-picture-element

[bre7]

Permalink changed ? https://fancyapps.com/fancybox/plugins/images/#picture

[fancyapps]

Yes, sorry for the inconvenience.