Get 20% off with our early-bird discount. For a limited time only!

HTML5 Picture Tag Support

Lightbox.js supports the HTML5 picture element, and in this guide, we'll be taking a look at how to display this element in the lightbox.


Let's get started! First, we'll need to import the SlideshowLightbox component, plus the CSS file which provides the styling for the library:

import 'lightbox.js-react/dist/index.css'
import {SlideshowLightbox} from 'lightbox.js-react'

Creating the Metadata

Next, let's initialize the metadata that contains the relevant information and links needed to render the picture tag:

let media = [
  {"picture": {
    'image/webp': {
    srcSet: 'Image URL here',
    sizes: '100vw'
    'image/jpeg': {
      srcSet: 'Image URL here',
      sizes: '100vw'
    'fallback': 'Image URL here'

Just remember to add your image URLs to the above code for the srcSet properties, as well as the fallback property too.

Then just pass this array to the images prop in the SlideshowLightbox component.

<SlideshowLightbox images={images} lightboxIdentifier="lbox1" showThumbnails={true}>
   { => {
       return <img src={item["picture"]['image/jpeg'].srcSet} data-lightboxjs="lbox1"  />


For further customization, be sure to take a look at the SlideshowLightbox documentation, which lists the various customization options and props you can update to edit the theme and so forth.