Next.js图片缩小宽高后清晰度丢失问题排查

核心问题分析 #

你设置的图片宽高（150×75）和原图（1203×885）比例严重不匹配（原图比例≈1.36:1，设置的比例是2:1），这是导致垂直挤压、底部模糊的主要原因；另外如果Logo是PNG格式，quality参数不会生效——该参数仅针对JPEG/WebP等有损压缩格式。

具体解决方案 #

1. 修正宽高比例，避免挤压 #

按原图比例计算正确的缩小尺寸：

• 若宽度设150，对应高度应为 150 ÷ (1203/885) ≈ 110
• 若高度设75，对应宽度应为 75 × (1203/885) ≈ 102

也可以用fill布局配合父容器控制尺寸，同时强制保持图片比例：

import Image from "next/image";
import Link from "next/link";

const NavbarBrand = () => {
  return (
    <Link href="/" className="navbar-brand ms-5" style={{ position: "relative", width: 150, height: 110 }}>
      <Image 
        src="/logo.png" 
        alt="logo" 
        fill
        objectFit="contain" // 保证图片完整显示且比例不变
        quality={100} 
      />
    </Link>
  );
};

export default NavbarBrand;

2. 针对PNG格式的清晰度优化 #

如果Logo是PNG：

• 优先用Photoshop、Figma等工具提前导出适配目标尺寸的Logo，替换原文件，避免运行时缩放导致的模糊
• 静态导出场景下，可开启unoptimized属性跳过Next.js的图像优化，直接使用原始文件：

<Image 
  src="/logo.png" 
  alt="logo" 
  width={150} 
  height={110}
  unoptimized
/>

3. 优化缩放算法 #

Next.js默认的缩放算法对精细线条/文字的处理效果一般，可通过sharpOptions指定更适合的算法：

<Image 
  src="/logo.png" 
  alt="logo" 
  width={150} 
  height={110}
  quality={100}
  sharpOptions={{
    resize: {
      kernel: "lanczos3" // 更适合保留文字和线条细节的缩放算法
    }
  }}
/>

内容的提问来源于stack exchange，提问作者Morgana Freeman