如何用TypeScript审核图片alt文本质量并检测影响LCP的懒加载

目前遇到的问题 #

• 空值或低质量alt文本（如IMG_1234这类文件名）未被拦截
• 首屏Hero图片设置loading="lazy"，损害Largest Contentful Paint (LCP)评分
• 仍在使用JPEG/PNG格式图片，未替换为体积更小的WebP/AVIF格式

已尝试的方案及不足 #

尝试的代码 #

// 手动检查alt文本——能捕获空字符串，但无法识别文件名式alt
images.forEach(img => {
  if (!img.alt || img.alt.trim() === '') {
    console.warn(`Missing alt text: ${img.src}`);
  }
});

// 无懒加载识别、格式检测及评分逻辑

存在的问题 #

• 无法识别IMG_1234或photo.jpg这类文件名式alt文本
• 未区分首屏与非首屏图片的懒加载逻辑
• 仅输出控制台警告，无带严重级别的结构化结果

需要实现的功能 #

1. Alt文本审核功能 #

需实现analyzeAltText函数，支持检测空alt、文件名式alt，同时检查关键词是否包含在alt中，并给出0-100的评分：

const images = [
  { src: '/hero.jpg', alt: '', loading: 'lazy', isAboveFold: true, width: 1200, height: 630 },
  { src: '/IMG_1234.png', alt: 'IMG_1234', loading: undefined, isAboveFold: false },
  { src: '/product.webp', alt: 'Blue widget', loading: 'lazy', isAboveFold: false },
];

const altResult = analyzeAltText(images, 'blue widget');
console.log(altResult.issues);
// [
//   { id: 'empty-alt', severity: 'warning', src: '/hero.jpg', message: '缺少图片替代文本' },
//   { id: 'filename-as-alt', severity: 'warning', src: '/IMG_1234.png', message: '替代文本为文件名，缺乏描述性' },
// ]
console.log(altResult.keyphraseInAlt); // true
console.log(altResult.score);          // 0–100

2. 懒加载审核功能 #

需实现auditLazyLoading函数，检测首屏图片的lazy加载设置，以及非首屏图片是否缺失懒加载配置：

const lazyResult = auditLazyLoading(images);
console.log(lazyResult.issues);
// [
//   { src: '/hero.jpg', type: 'lazy-above-fold', severity: 'error', message: '首屏Hero图片设置lazy加载会降低LCP评分' },
//   { src: '/IMG_1234.png', type: 'missing-lazy', severity: 'warning', message: '非首屏图片建议添加lazy加载优化性能' },
// ]

3. 图片格式分析功能 #

需实现analyzeImageFormats函数，统计旧格式图片数量，并给出格式替换建议：

const formatResult = analyzeImageFormats(images);
console.log(formatResult.legacyFormatCount); // 2
console.log(formatResult.results);
// [{ src: '/hero.jpg', currentFormat: 'jpeg', isModern: false, recommendation: '建议替换为WebP或AVIF格式以减小体积' }]

4. 图片站点地图生成功能 #

需实现generateImageSitemap函数，生成符合规范的图片站点地图XML：

const xml = generateImageSitemap([
  {
    pageUrl: 'https://example.com/products/widget',
    images: [
      { src: '/products/widget.jpg', alt: 'Blue widget' },
    ],
  },
]);

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