Example React component abstraction of an Image CDN. Built with CloudImage and an alias in mind, customise as your setup and provider.

1-usage.js

import Image from '../components/Image'

export default function () {
  return (
    <Image
      src="otter.jpg"
      alt="an otter standing on a log looking majestic"
      srcset={[300, 450, 600, 800, 1000, 1200]}
      sizes="100vw"
      width="1200"
      height="800"
      loading="lazy"
      className="image-class mb-xl"
    />
  )
}

2-Image.js

import { useEffect, useState } from "react";

const CDN_BASE = "https://example.imagecdn.com";

const defaults = {
  alt: "",
  srcset: [300, 450, 600, 800, 1000, 1200],
  sizes: "(min-width: 82rem) 80rem, calc(100vw - 2rem)",
  loading: "lazy",
  className: false,
  picClassName: false,
  lowdpiQuality: 80,
  hidpiQuality: 40
};

const Image = (props) => {
  const [fallback, setFallback] = useState("");
  const [srcset, setSrcset] = useState("");
  const [hidpiSrcset, setHidpiSrcset] = useState("");

  useEffect(() => {
    const path = `/cdn/${props.src}`;
    const lowdpiQuality = props.lowdpiQuality || defaults.lowdpiQuality;
    const hidpiQuality = props.hidpiQuality || defaults.hidpiQuality;

    const lastWidth = props.srcset[props.srcset.length - 1];
    setFallback(createSrc(path, lastWidth, lowdpiQuality));
    setSrcset(createSrcset(path, props.srcset, lowdpiQuality));
    setHidpiSrcset(createSrcset(path, props.srcset, hidpiQuality));
  }, [props.src, props.srcset, props.lowdpiQuality, props.hidpiQuality]);

  return (
    <pre>
      <picture className={props.picClassName || defaults.picClassName}>
        <source
          media="(-webkit-min-device-pixel-ratio: 1.5)"
          srcset={hidpiSrcset}
          sizes={props.sizes || defaults.sizes}
        />
        <img
          className={props.className || defaults.className}
          alt={props.alt || defaults.alt}
          src={fallback}
          srcset={srcset}
          sizes={props.sizes || defaults.sizes}
          width={props.width}
          height={props.height}
          loading={props.loading || defaults.loading}
          decoding="async"
        />
      </picture>
    </pre>
  );
};

// customise this function depending on your image CDN and setup
function createSrc(path, width, quality) {
  return `${CDN_BASE}${path}?w=${width}&q=${quality}`;
}

function createSrcset(path, widths, quality) {
  const srcsetArr = widths.map((width) => {
    const url = createSrc(path, width, quality);
    return `${url} ${width}w`;
  });
  return srcsetArr.join(",");
}

export default Image;