咨询通过sharp获取云端图片尺寸需抓取的最小有效字节数

我在云端存了大量图片，需要获取它们的尺寸信息，打算用 sharp 的 metadata 接口实现。想知道针对 .jpeg、.png、.webp、.gif 这几种格式的图片，最少需要抓取文件的多少字节才能有效获取尺寸？这种方式可行吗？

我目前的代码如下：

import sharp from 'sharp';
import axios from 'axios';

async function getDimensions(src: string, mime: string): Promise<{ width: number; height: number }> {
  // TODO: get max range by mime type
  const maxRange = 1024 * 1024;
  // END TODO
  const headers = {
    Range: `bytes=${0}-${maxRange}`,
  };
  const response = await axios.get(src, {
    headers,
    responseType: 'arraybuffer',
  });
  const data = await sharp(response.data).metadata();
  return {
    width: data.width,
    height: data.height,
  };
}

可行性说明 #

完全可行。sharp 的 metadata 接口本身会尽可能少读取文件内容提取元数据，只要提供的字节包含格式头部的尺寸信息，就能成功解析。

各格式所需最小有效字节数 #

针对你提到的几种格式，所需最小字节数参考如下：

• .png：尺寸信息在文件开头的 IHDR 块中，通常前 24字节 就包含足够信息（文件签名8字节 + IHDR块头8字节 + 宽高各4字节），保守取100字节可覆盖所有标准PNG场景。
• .jpeg：尺寸存储在 SOF（帧开始）标记中，该标记位置可能有差异，但前 512字节 能覆盖绝大多数JPEG情况，极端场景1KB以内基本足够。
• .webp：尺寸信息在开头的 VP8/VP8L 头部中，前 30字节 左右可获取宽高，保守设置100字节即可。
• .gif：尺寸在开头的逻辑屏幕描述块中，前 16字节 就包含宽高信息（文件签名6字节 + 屏幕描述块10字节），取50字节完全足够。

优化后的代码 #

可根据不同 MIME 类型设置对应最大抓取字节数，减少不必要的带宽消耗：

import sharp from 'sharp';
import axios from 'axios';

async function getDimensions(src: string, mime: string): Promise<{ width: number; height: number }> {
  // 根据MIME类型设置对应最大字节范围
  const rangeMap: Record<string, number> = {
    'image/jpeg': 512,
    'image/png': 100,
    'image/webp': 100,
    'image/gif': 50,
    // 默认 fallback 到1KB，覆盖边缘情况
    'default': 1024
  };
  const maxRange = rangeMap[mime] || rangeMap['default'];

  const headers = {
    Range: `bytes=0-${maxRange}`,
  };
  
  const response = await axios.get(src, {
    headers,
    responseType: 'arraybuffer',
  });
  
  const data = await sharp(response.data).metadata();
  
  if (!data.width || !data.height) {
    // 极端情况：抓取字节不足，尝试扩大范围到1KB
    const fallbackResponse = await axios.get(src, {
      headers: { Range: `bytes=0-1024` },
      responseType: 'arraybuffer',
    });
    const fallbackData = await sharp(fallbackResponse.data).metadata();
    return {
      width: fallbackData.width!,
      height: fallbackData.height!
    };
  }

  return {
    width: data.width!,
    height: data.height!
  };
}

注意事项 #

• 部分特殊处理的图片（如带自定义元数据、非标准编码的图片）可能需要更多字节解析，但上述数值已覆盖绝大多数常规场景。
• 需提前确认云端存储服务支持 Range 请求，否则该方式会失效。

内容的提问来源于stack exchange，提问作者Pavlo Naumenko