如何为网站使用不同分辨率的图像尺寸？答案

【问题标题】：How to work with image sizes for different resolutions for a website?如何为网站使用不同分辨率的图像尺寸？
【发布时间】：2022-02-03 08:09:11
【问题描述】：

在 1920x1080 像素的休闲台式电脑上，您会拍摄 1080 像素宽度的图像作为背景或滑块图像，但具有 WHQL 分辨率的网站访问者会获得可能导致像素化的小图像或放大图像。

另一方面，像手机这样的小型设备永远不需要宽度为 1080 像素的图像，因此加载大图像并让浏览器缩小尺寸会影响性能。

是否有推荐的方法也得到很好的支持？

【问题讨论】：

标签： images performance optimization

【解决方案1】：

`srcset`

img（或source）元素上的srcset 和sizes 属性允许作者定义各种图像资源和“提示”，帮助用户代理确定要显示的最合适的图像源（例如高分辨率显示器、小型显示器等）。

浏览器支持

很好的支持。如果您担心 IE 仍然有许多 polyfill，Picturefill 是一个流行的。

示例用法

普通图片：

<img src="example-image-800w.jpg">

使用srcset调整大小：

<img srcset="example-image-480w.png 480w,
             example-image-800w.png 800w"
     sizes="(max-width: 600px) 480px,
            800px"
     src="example-image-800w.png">

【讨论】：

【解决方案2】：

我通常会为每个尺寸的屏幕提供不同的图像，并使用 css @media 查询来显示不同的图像或根据需要更改内容。 https://www.w3schools.com/css/css_rwd_mediaqueries.asp

【讨论】：