使用HTML原生lazy loading和async decoding仍加载缓慢，如何优化图片异步加载？

一、从图片资源本身压缩体积 #

• 生成适配尺寸的缩略图：当前图片显示尺寸固定为60x60px，但直接加载原图会浪费大量带宽。后端需生成对应尺寸的缩略图，将模板中的{{ limited[3] }}替换为缩略图地址，可直接把图片体积降到几KB级别。
• 切换高效图片格式：将图片批量转换为WebP、AVIF这类现代格式，相同视觉质量下体积比JPG/PNG小50%以上。用<picture>标签做格式兼容，确保旧浏览器也能正常加载：

  <picture>
    <source srcset="{{ limited[3].replace('.jpg', '.avif') }}" type="image/avif">
    <source srcset="{{ limited[3].replace('.jpg', '.webp') }}" type="image/webp">
    <img class="card-img-top" src="{{ limited[3] }}" loading="lazy" decoding="async" style="width:60px; height:60px" alt="{{ limited[0] }}">
  </picture>
  

• 压缩现有图片：用图片压缩工具批量处理原图，去除冗余元数据，进一步缩小体积。

二、优化懒加载逻辑 #

• 添加占位符避免布局偏移：使用纯色占位或低质量模糊图（LQIP），让页面加载时保持稳定布局，同时给用户明确的加载反馈。示例代码：

  <img class="card-img-top" src="{{ limited[3]_lqip }}" data-src="{{ limited[3]_thumbnail }}" loading="lazy" decoding="async" style="width:60px; height:60px" alt="{{ limited[0] }}">
  

  （limited[3]_lqip是低质量占位图地址，limited[3]_thumbnail是适配尺寸的缩略图地址）
• 自定义懒加载触发时机：原生懒加载的触发距离固定，用IntersectionObserver自定义触发阈值，比如图片距离视口200px时就开始加载，避免用户滚动时出现加载等待：

  document.addEventListener('DOMContentLoaded', function() {
    const lazyImgs = document.querySelectorAll('img[data-src]');
    const observer = new IntersectionObserver((entries) => {
      entries.forEach(entry => {
        if (entry.isIntersecting) {
          const img = entry.target;
          img.src = img.dataset.src;
          observer.unobserve(img);
        }
      });
    }, { rootMargin: '200px 0' });
    
    lazyImgs.forEach(img => observer.observe(img));
  });
  

三、调整资源加载优先级 #

• 优先加载首屏图片：给首屏内的卡片图片添加loading="eager"和fetchpriority="high"，让浏览器优先加载可见区域的资源，加快首屏渲染速度：

  <img class="card-img-top" src="{{ limited[3]_thumbnail }}" loading="eager" fetchpriority="high" decoding="async" style="width:60px; height:60px" alt="{{ limited[0] }}">
  

• 合并小图片减少请求：把所有60x60的小图片合并成一张雪碧图，通过CSSbackground-position定位显示对应图片，大幅减少HTTP请求数量：

  <div class="card-img-top" style="width:60px; height:60px; background-image: url({{ sprite_url }}); background-position: {{ x_pos }}px {{ y_pos }}px;"></div>
  

  （x_pos和y_pos为每个图片在雪碧图中的坐标，由后端循环计算传入）

四、后端与缓存层面优化 #

• 启用CDN加速：将图片托管到CDN，利用边缘节点缓存，缩短图片加载的网络传输距离。
• 设置合理缓存策略：给图片资源配置长过期时间（如30天），同时启用ETag或Last-Modified，让浏览器缓存图片，避免重复请求。
• 分页加载卡片数据：如果limiteds数据量极大，不要一次性渲染所有卡片，采用分页或无限滚动模式，每次仅加载20-30条，减少初始页面的资源请求量。

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