An extended image asset schema with a custom input to watch the value and update the image's fields with values from the asset itself

ImageExtendedInput.tsx

import {useEffect, useState} from 'react'
import {ImageAsset, ObjectInputProps, Reference, set, unset, useClient} from 'sanity'

type ExtendedImageValue = {
  asset: Reference
  lqip?: string
  blurHash?: string
}

export default function ImageExtendedInput(props: ObjectInputProps<ExtendedImageValue>) {
  const {value, onChange, path} = props
  const client = useClient({apiVersion: `2023-09-01`})
  const [asset, setAsset] = useState<ImageAsset | null>(null)

  useEffect(() => {
    async function updateExtendedFields(id: string) {
      const asset = await client.fetch<ImageAsset>(`*[_id == $id][0]`, {id})
      setAsset(asset)
      if (asset.metadata.lqip) {
        onChange(set(asset.metadata.lqip, ['lqip']))
      }
      if (asset.metadata.blurHash) {
        onChange(set(asset.metadata.blurHash, ['blurHash']))
      }
    }

    // Set extended fields if asset is set
    if (value?.asset?._ref && !asset) {
      updateExtendedFields(value.asset._ref)
    }

    // Reset local state if image removed
    if (!value?.asset?._ref && asset) {
      setAsset(null)
    }

    // Unset extended fields if asset is unset
    if ((value?.lqip || value?.blurHash) && !value?.asset?._ref) {
      onChange([unset(['lqip']), unset(['blurHash'])])
    }
  }, [value, client, onChange, path, asset])

  return props.renderDefault(props)
}

imageExtendedType.ts

import {defineField, defineType} from 'sanity'
import ImageExtendedInput from './ImageExtendedInput'

export const imageExtendedType = defineType({
  name: 'imageExtended',
  type: 'image',
  components: {
    input: ImageExtendedInput,
  },
  fields: [
    defineField({
      name: 'lqip',
      title: 'LQIP',
      type: 'string',
      readOnly: true
    }),
    defineField({
      name: 'blurHash',
      type: 'string',
      readOnly: true
    }),
  ],
})