PageSpeed Insights问题求助：低分辨率图片与对比度不足

1. 图片分辨率不足问题修复 #

PageSpeed提示的“图片尺寸与屏幕/像素比不匹配”，核心是忽略了设备像素比（DPR）——手机、平板等设备的DPR通常是2或3（比如iPhone是3），这意味着屏幕上1px的显示空间，需要图片提供2-3px的原始像素才能保证清晰。你之前只靠CSS设置max-width:147px，但图片原始尺寸没跟上DPR要求，所以上传更大图后仍被提示。

具体解决步骤：

• 计算目标图片尺寸：以你设置的max-width:147px为例，需要准备至少3种尺寸的图片：
  • 基础款：147px（DPR1，适配低分辨率设备）
  • 2倍图：294px（DPR2，大部分手机）
  • 3倍图：441px（DPR3，高端手机）
• 用srcset和sizes属性适配不同设备，不要硬写height值，用height:auto保持比例：

<img 
  src="image-147px.jpg" 
  srcset="image-147px.jpg 1x, image-294px.jpg 2x, image-441px.jpg 3x" 
  sizes="(max-width: 768px) 147px, 147px" 
  style="max-width:147px; height:auto;" 
  alt="图片描述"
>

• 避免直接用超大图靠CSS缩小：这会浪费带宽，PageSpeed也会判定“尺寸不合理”，必须按DPR提供对应尺寸的图片。
• 用压缩工具优化各尺寸图片的体积，保证清晰度的同时减少加载时间。

2. 自定义主题下提升颜色对比度 #

低对比度文本违反WCAG无障碍标准，自定义主题下可以按以下步骤修复：

• 定位问题元素：打开浏览器DevTools（F12），用选择工具选中低对比度文本，查看其color和background-color属性，确认是哪些元素的对比度不达标。
• 调整颜色值：确保文本与背景的对比度至少达到AA级（4.5:1）（普通文本），或AAA级（7:1）（大文本，字号≥18pt）。可以用DevTools的颜色选择器自带的对比度检测功能（选色时会显示对比度数值）。
• 自定义主题适配方案：
  • 如果主题用CSS变量管理颜色：直接修改对应变量的值，比如：

    :root {
      --text-color: #333333; /* 原低对比度颜色改为深色 */
      --bg-color: #ffffff; /* 背景色保持明亮 */
    }
    

  • 如果是CMS主题（比如WordPress）：进入主题自定义面板，找到“颜色设置”模块，调整文本、背景、链接等颜色，实时预览对比度变化。
  • 注意交互状态：hover、focus的文本/背景对比度也要达标，比如链接hover时的颜色不能太浅。

内容的提问来源于stack exchange，提问作者Agustí Pardo