使用picture标签加快img加载

picture标签 压缩图片

<picture> 
    <source srcset="/document.designmode.avif" type="image/avif"> 
    <source srcset="/document.designmode.jxl" type="image/jxl"> 
    <img src="/document.designmode.jpeg" alt="Screenshot on iOS with selected text, showing a popup with options to make text Bold, Italic, or Underlined" width="375" height="153" class="border"> 
</picture>

使用​​.avif​​格式来加载图片，更加节省流量，当然并不是所有浏览器都支持；浏览器将选择它支持的第一个。

php页面加载avif

$browser = get_browser(null, true);
$name = $browser['browser'];
$version = intval($browser['majorver']);

// Firefox >= 93 and Chrome >= 85 support AVIF
if ($name === 'Firefox' && $version >= 93 || $name === 'Chrome' && $version >= 85) {
header('Link: rel=preload; href=/document.designmode.avif; type=image/avif');
} else {
header('Link: rel=preload; href=/document.designmode.jpeg; type=image/jpeg');
}

关于​​avif​​​​什么是avif​​

refer：​​来源​​

你要保守你心，胜过保守一切。