1

我一直在我的笔记本电脑上创建一个网站。我将标题图像的宽度保持为 100%，高度保持为 400px。我使用在线和离线优化工具优化了从 800 px x 600 px 到 1920 px x 1800 px 大小的图像，以降低到 20 Kbs 左右。无论哪个在我的屏幕上看起来不错，我都会使用它们。但是图像在更大的屏幕上会降低质量。

我想我的方法完全错误。

我不知道如何让我的标题图像在所有屏幕上都具有超高品质，而又不超过 20 kbs。（我相信相对于加载速度而言，页面上每个图像的权重相当不错）。我在这里可能完全不合时宜。我需要知道专业的开发人员和模板如何设法拥有那些完美的低重量高质量图像。它完全是一个 Photoshop 过程还是还有其他一些方法？

我指的页面在这里http://www.mylaundrywla.com

4

1 回答 1

4

您应该使用该picture元素。

<picture>
  <source media="(min-width: 40em)" srcset="big.jpg 1x, big-hd.jpg 2x">
  <source srcset="small.jpg 1x, small-hd.jpg 2x">
  <img src="fallback.jpg" alt="">
</picture>

图片元素是一种标记模式，允许开发人员为图像声明多个来源。通过使用媒体查询，它可以让开发人员控制何时以及是否将这些图像呈现给用户。

来源 - http://responsiveimages.org/

根据 caniuse.com的数据，全球浏览器支持率为 74.27%

图片填充

这可以用 Javascript 填充以在不受支持的浏览器中工作。

<picture>用于、srcset、等的响应式图像填充sizes。

https://github.com/scottjehl/picturefill

于 2017-01-05T14:09:38.950 回答