如何在网页上实现HDR效果

本文介绍如何在现代浏览器上实现HDR图片显示

HDR（高动态范围）图片可以显示更多的亮度和色彩细节，使得网页图片更为生动和逼真。在网页开发中，常用的图片格式如JPEG和PNG不支持HDR。而AVIF（AV1 Image File Format）作为一种新兴的图片格式，具有高压缩率和HDR支持的特点，逐渐被主流浏览器和平台接受。

可以通过以下代码检测浏览器是否支持 AVIF 格式：

function supportsAVIF() {
  return new Promise((resolve) => {
    const avif = new Image();
    avif.src = 'data:image/avif;base64,AAAAFGZ0eXBhdmlmAAAAAG1pZjFtaWYxAAABCG1hdGEAAAAYbWlmeCEAAAA';
    avif.onload = () => resolve(true);
    avif.onerror = () => resolve(false);
  });
}

supportsAVIF().then((supported) => {
  if (supported) {
    console.log('浏览器支持 AVIF 格式');
  } else {
    console.log('浏览器不支持 AVIF 格式');
  }
});