Question about <picture> for WebP/AVIF support

[martynhoyer]

This is more of a curiosity than a feature request and might be limited by my own understanding as responsive images can melt the brain a bit!

Is your feature request related to a problem? Please describe.
I'm using Contentful and I've done some basic experiments with unpic-img and the results are good, however, I was rather hoping to automatically serve the more optimised formats like webp and avif where applicable. It seems that the Contentful API image formatting parameter doesn't accept auto like some of the other CDNs do, which allows them to pick the right format at request time (I think?!), so the alternative is to use the <picture> element and drop in the avif and webp paths as <source> elements before the <img>... (see Salma's responsive image React component for inspiration)

Describe the solution you'd like
Not too sure as it might be more of Contentful's problem, but perhaps an exported Picture (if it's JS/React, <unpic-picture> for WebC maybe) with some options for opting in the additional formats.

Describe alternatives you've considered
Rolling my own component like Salma's referenced above is an option of course, but the Unpic API is very nice, so would be a shame to not use it! It seems like the heavy-lifting is generating the srcsets and that's already done, so maybe adding the <source> options is straight forward, but I could be very naive and trying to make this component do too much and it varies quite wildly between the CDNs I think...?

[ascorbic]

I hadn't even noticed that Contentful didn't support auto-format! That's quite a shortcoming. I have thought about creating a <picture> component, mainly to support art direction, though in this case it seems format would be useful too. The main question is what the API should be.

[jasikpark]

I would lean towards a composable API similar to vanilla v.s. creating a picture component with a bunch of props

[hwride]

Lack of art direction is my biggest bugbear with Next image. We often want to show different crops on desktop and mobile and picture tag would be ideal. At the moment we render two image tags and display: none one according to device. But the downside of this is priority images will load both images still.

[ascorbic]

The biggest problem we have for creating a <picture> tag is that we rely on inline styles to set aspect ratio, which means we can't use media queries. Users would need to do their own styling to avoid layout shift.

[hwride]

Ah I see. Would be interested if you have any recommendations for solving the art direction problem and avoiding duplicate requests with priory images using unpic. Understood if not something tackled yet! Thanks.

[hwride]

Or perhaps a custom class which is affected by media queries like tailwind…

[ascorbic]

I think the simplest might just be to let the user handle it. Anyone who is doing art direction clearly wants full control of the image layout

[ascorbic]

<picture> tag support is in the latest release: https://dev.to/ascorbic/level-up-your-web-images-with-unpic-picture-tags-4jh1

[grgcnnr]

If anyone stumbles across this and wants a starter, here's my first crack at it in a NextJS project. Note this is for adding AVIF support and doesn't have any art-direction features.

import { Image, Source, ImageProps } from "@unpic/react"
import { clsx } from "clsx/lite"
import React from "react"

type TContentfulImageProps = {
  fit?: "pad" | "fill" | "scale" | "crop" | "thumb"
  focusArea?: string | null
  formats?: Array<"jpg" | "png" | "webp" | "gif" | "avif">
  radius?: "max"
  quality?: number
  style?: React.CSSProperties
} & ImageProps


export const ContentfulImage = ({
  alt,
  fit = "fill",
  focusArea,
  formats = ["avif", "webp", "jpg"],
  background = "auto",
  className,
  radius,
  quality = 75,
  src,
  ...props
}: TContentfulImageProps) => {
  // Ensure the src is an absolute URL this should never happen but... u know
  src = src.startsWith("http") ? src : `https:${src}`
  focusArea = focusArea ?? "faces"

  const url = new URL(src)
  url.searchParams.append("fit", fit)
  url.searchParams.append("f", focusArea)
  url.searchParams.append("q", quality.toString())
  if (radius) {
    url.searchParams.append("r", radius)
  }

  const sourceTags = formats.map(format => {
    const sourceUrl = new URL(url)
    sourceUrl.searchParams.append("fm", format)
    return (
      <Source
        type={`image/${format}`}
        {...props}
        key={format}
        src={sourceUrl.toString()}
      />
    )
  })

  return (
    <picture>
      {sourceTags}
      <Image
        className={clsx(
          styles.image,
          className
        )}
        {...props}
        background={background}
        alt={alt}
        src={url.toString()}
        cdn={"contentful"}
      />
    </picture>
  )
}