custom responsive picture item using pixboost service

ResponsiveImage.jsx

import React from 'react'

const host = 'https://media.jefrancomix.work'
const apiKey = 'pixboost'

const imageBoosted = (relativeUrl, resize = false) => {
  return 'https://pixboost.com/api/2/img/' +
    host +
    relativeUrl +
    (resize
      ? '/resize?size=' + parseInt(resize, 10) + '&'
      : '/optimise?') +
    apiKey
}

export function ResponsiveImage ({
  relativeUrl,
  alternateText,
  widthRatio,
  breakpointRatios = {}
}) {
  return (
    <picture>
      <source
        media='(max-width: 480px)'
        srcSet={imageBoosted(relativeUrl, 480 *
          (breakpointRatios[480] ? breakpointRatios[480] : widthRatio))}
      />
      <source
        media='(max-width: 576px)'
        srcSet={imageBoosted(relativeUrl, 576 *
          (breakpointRatios[576] ? breakpointRatios[576] : widthRatio))}
      />
      <source
        media='(max-width: 768px)'
        srcSet={imageBoosted(relativeUrl, 768 *
          (breakpointRatios[768] ? breakpointRatios[768] : widthRatio))}
      />
      <source
        media='(max-width: 992px)'
        srcSet={imageBoosted(relativeUrl, 992 *
          (breakpointRatios[992] ? breakpointRatios[992] : widthRatio))}
      />
      <source
        media='(max-width: 1200px)'
        srcSet={imageBoosted(relativeUrl, 1200 *
          (breakpointRatios[1200] ? breakpointRatios[1200] : widthRatio))}
      />
      <source
        media='(max-width: 1366px)'
        srcSet={imageBoosted(relativeUrl, 1366 *
          (breakpointRatios[1366] ? breakpointRatios[1366] : widthRatio))}
      />
      <img
        src={imageBoosted(relativeUrl)}
        alt={alternateText}
      />
    </picture>
  )
}