@renditions/get-srcset

Generate the srcset attribute for HTML img and picture tags.

Install

npm install @renditions/get-srcset

Usage

import getSrcset from '@renditions/get-srcset'

const srcset = getSrcset([
  {
    src: '/images/320.jpg',
    width: 320
  },
  {
    src: '/images/1024.jpg',
    width: 1024
  }
])

console.log({ srcset })
// { srcset: '/images/320.jpg 320w,/images/1024.jpg 1024w' }

Sorting

The first argument is expected to be an array sorted by width in ascending order.

To sort the array automatically, pass true for the second argument:

const unsortedRenditions = [
  {
    src: '/images/1024.jpg',
    width: 1024
  },
  {
    src: '/images/320.jpg',
    width: 320
  },
  {
    src: '/images/720.jpg',
    width: 720
  }
]

const srcset = getSrcset(unsortedRenditions, true)

console.log({ srcset })
// { srcset: '/images/320.jpg 320w,/images/720.jpg 720w,/images/1024.jpg 1024w' }

Using with React

import React from 'react'
import getSrcset from '@renditions/get-srcset'

const renditionWidths = ['320', '1024']

const Image = ({ filename, ext, ...rest }) => {
  const renditions = renditionWidths.map(width => ({
    width,
    src: `/images/${filename}_${width}.${ext}`
  }))

  const srcset = getSrcset(renditions)

  return <img srcSet={srcset} {...rest} />
}