Cloudflare搭配Next.js Image加载小尺寸图片时模糊问题求助

所有以小尺寸渲染的图片都模糊且有明显颗粒感，即使将quality设为100也没有改善，使用的是Next.js Image组件。

ImageTile组件代码 #

该组件用于适配任意尺寸网格，自动匹配网格宽度，但渲染出的图片模糊：

import Image from "next/image"

<div className='z-10 hover:cursor-pointer relative'>
        <Image
            className="object-cover object-center w-full max-w-full h-40 rounded-lg"
            src={url}
            alt=""
            width={500}
            height={500}
        />
</div>

效果展示 #

自定义Cloudflare图片Loader函数 #

'use client'

export default function myImageLoader({ src, width, quality }) {
    return process.env.NEXT_PUBLIC_CLOUDFRONT_DISTRIBUTION + `${src}?format=auto&quality=${quality || 75}&width=${width}`
}

已尝试的解决方法 #

• 设置fill={true}
• 增大width和height属性值
• 将quality设为100

next.config.js配置 #

/**
 * @type {import('next').NextConfig}
 */
const nextConfig = {
  reactStrictMode: false,
  experimental: {
    appDir: true,
    serverComponentsExternalPackages: ["mongoose"],
  },
  images: {
    loader: 'custom',
    unoptimized: false,
    loaderFile: './components/images/Loader.jsx',
    remotePatterns: [
      {
        protocol: 'https',
        hostname: 'lh3.googleusercontent.com',
        pathname: '**',
      }
    ],
  },
  webpack(config) {
    config.experiments = {
      ...config.experiments,
      topLevelAwait: true,
    }
    return config
  }
}

module.exports = nextConfig

问题原因及解决方案 #

1. 自定义Loader未适配设备像素比（DPR） #

Next.js Image组件会根据容器尺寸计算所需宽度，但未考虑设备像素比，导致返回的图片分辨率不足以适配高清屏幕，拉伸后出现模糊。修改Loader，将宽度乘以设备像素比：

'use client'

export default function myImageLoader({ src, width, quality }) {
  const dpr = typeof window !== 'undefined' ? window.devicePixelRatio : 2
  const actualWidth = Math.round(width * dpr)
  return `${process.env.NEXT_PUBLIC_CLOUDFRONT_DISTRIBUTION}${src}?format=auto&quality=${quality || 100}&width=${actualWidth}`
}

2. Image组件尺寸配置不合理 #

固定的width/height属性会限制图片的自适应能力，改用fill模式配合容器尺寸，同时指定sizes属性让组件更精准地选择图片尺寸：

import Image from "next/image"

<div className='z-10 hover:cursor-pointer relative h-40 w-full'>
  <Image
    className="object-cover object-center rounded-lg"
    src={url}
    alt=""
    fill
    sizes="100vw" // 根据实际网格布局调整，比如3列网格可设为"33vw"
    quality={100}
  />
</div>

3. 强制使用高清图片格式 #

在Loader中指定WebP格式，提升图片清晰度和加载效率，同时确保Cloudflare开启了图片优化功能：

return `${process.env.NEXT_PUBLIC_CLOUDFRONT_DISTRIBUTION}${src}?format=webp&quality=${quality || 100}&width=${actualWidth}`

4. 验证原图分辨率 #

如果原始图片本身尺寸小于容器所需的高清尺寸（比如容器宽300px，DPR2需要600px宽的原图），优化也无法解决模糊，需更换更高分辨率的原图。

内容的提问来源于stack exchange，提问作者Sam Munroe