如何在不像素化的情况下创建有效的 header 图像以适应所有屏幕尺寸

Question

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

我想我的方法完全错了。

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

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

Answer 1

您应该使用 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>

The picture element is a markup pattern that allows developers to declare multiple sources for an image. By using media queries, it gives developers control as to when and if those images are presented to the user.

Source - http://responsiveimages.org/

全球浏览器支持率为 74.27% according to caniuse.com

图片填充

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

A responsive image polyfill for <picture>, srcset, sizes, and more.

https://github.com/scottjehl/picturefill

如何在不像素化的情况下创建有效的 header 图像以适应所有屏幕尺寸

how to create effective header images to adapt to all screen sizes without pixelating

html

css

image-resizing

image-optimization

image-resolution

图片填充