问在头版上，最大的标题图片的大小是多少？

EN

最好的尺寸是最小的。因为这样的图片，文件大小越大，下载的时间就越长。我也看到了这样的图片，它们让我感到很奇怪:人们试图在设计方面赢得一些东西，但在用户体验方面却更加松散，因为大的(无疑是美丽的)图像需要越来越多的时间来加载。

这些是最大限度地减少大图像的加载时间影响的最佳实践--试着按照站点的需要进行调整：

• 根据设备类型，借助媒体查询使用或加载图像，
• 为每种设备类型(桌面、智能手机、平板电脑)创建图像版本
• 发布前剥离图像元数据
• 在网络中使用图像(低dpi)分辨率
• 使用类似于compressor.io的东西来优化图像大小
• 最好加载这个大图像异步并推迟:创建一个<span class="image-defer" data-src="my-big-img.png">Hello World!</span>，写入span中的一两个有意义的句子，并在页面的源代码这个javascript的末尾包含。通过这种方式，人们来到页面上，在span中阅读您的句子，而图像加载。延迟javascript的作者在他的要旨页上描述了这种技术。

在现代网络上，你不需要选择。

您现在可以使用srcset规范来响应图像。有关更多细节，请参阅此云四大系列，一定要阅读整个系列。这允许您为不同的屏幕大小提供不同大小的图像。

你今天可以使用srcset。64.65%的全球用户(在编写源代码犬科时)拥有支持它的浏览器。

使用图片填充填充，您将得到更多的支持。

srcset最重要的一点是，对于不支持srcset的浏览器，它仍然能像以前一样工作。

<img src="cat.jpg" alt="cat"
  srcset="cat-160.jpg 160w, cat-320.jpg 320w, cat-640.jpg 640w, cat-1280.jpg 1280w"
  sizes="(max-width: 480px) 100vw, (max-width: 900px) 33vw, 254px">

不支持它的浏览器将只使用cat.jpg，而支持srcset的浏览器将从srcset属性中为其视口选择最合适的图像。

为了让您开始，您可以查看新的工具响应断点开始确定您的网站的一些断点。

哦，正如Evgeniy在他的演讲中所说的，不要忘记优化图像。