klz-cables.com/lib/imgproxy-loader.ts

import { getImgproxyUrl } from './imgproxy';

/**
 * Next.js Image Loader for imgproxy
 *
 * @param {Object} props - properties from Next.js Image component
 * @param {string} props.src - The source image URL
 * @param {number} props.width - The desired image width
 * @param {number} props.quality - The desired image quality (ignored for now as imgproxy handles it)
 */
export default function imgproxyLoader({
  src,
  width,
  _quality,
}: {
  src: string;
  width: number;
  _quality?: number;
}) {
  // Skip imgproxy for SVGs as they are vectors and don't benefit from resizing,
  // and often cause 404s if the source is not correctly resolvable by imgproxy.
  if (src.toLowerCase().endsWith('.svg')) {
    return src;
  }

  // We use the width provided by Next.js for responsive images
  // Height is set to 0 to maintain aspect ratio
  return getImgproxyUrl(src, {
    width,
    resizing_type: 'fit',
    gravity: 'fv', // Use face-aware focusing (face detection)
  });
}