如何降低JPEG图片带宽？加载图片设尺寸后体积仍过大求解

嘿，我懂你的困扰——你通过height和width属性调整了图片的显示尺寸，但浏览器其实还是在下载完整的原始大图，这就是为什么体积没变小的原因。这些属性只是告诉浏览器怎么渲染图片，完全不会改变图片文件本身的大小。咱们来看看可行的解决办法：

一、最彻底的方案：后端生成缩略图 #

这是从根源解决问题的办法，因为前端只能处理显示层面，真正要减小下载体积，得让服务器提供已经压缩好的小尺寸图片：

• 用后端图像处理工具（比如Python的Pillow、Node.js的Sharp、PHP的GD库），把原始图片缩放成20×20的缩略图，同时压缩图片质量（比如把JPEG的质量调到合适的数值）。
• 存储这个缩略图，然后让前端加载缩略图的URL，而不是原始图片的URL。这样浏览器下载的就是体积很小的缩略图，完美解决问题。

二、前端临时优化（适合无法修改后端的场景） #

如果暂时没法改后端，也可以在前端做一些补救，虽然没法避免初始下载大图，但能让最终显示的图片体积更小：

使用Canvas重新绘制并压缩图片 #

你可以把原始图片画到Canvas上，然后导出成压缩后的小尺寸图片，示例代码如下：

// 创建Canvas元素
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
canvas.width = 20;
canvas.height = 20;

// 加载原始图片
const img = new Image();
// 如果图片跨域，需要设置这个（前提是服务器允许CORS）
img.crossOrigin = 'anonymous';

img.onload = function() {
  // 将原始图片缩放到20×20绘制到Canvas
  ctx.drawImage(img, 0, 0, 20, 20);
  // 导出为压缩后的JPEG，第二个参数是质量（0-1，数值越小体积越小）
  const compressedSrc = canvas.toDataURL('image/jpeg', 0.5);
  // 创建img元素并添加到页面
  const smallImg = $('<img>', { id: 'theImg', src: compressedSrc });
  $('#table-body').prepend(smallImg);
};

img.src = "the_image_url.jpeg";

⚠️ 注意：这个方法还是会先下载原始大图，只是之后用压缩后的图显示，所以初始加载的体积还是大；另外跨域图片需要服务器配置CORS才能正常使用。

额外优化：延迟加载 #

如果图片不是首屏必须显示的，可以给img标签加上loading="lazy"属性，让浏览器在图片进入视口时再加载，提升页面的初始加载速度，不过这不会减小图片本身的体积。

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