2019 年网络图片指南

封面照片由JfXie 拍摄

这篇文章的目的是让您了解当前的 Web 功能，并帮助您确定一些机会领域：

关于您阅读这篇文章的一些假设：

• 您熟悉 HTML。
• 您了解诸如jpg、png和之类的基本图像格式svg。
• 您对 CSS 有一定的了解，并且有足够的专业知识来阅读、理解和实施 MDN 文档。

介绍

Web 发展日新月异。作为开发者，你应该熟悉一些新功能，以下是一些常见的功能：

• 国际化（i18n）。
• 前端路由。
• 响应式网页设计。
• 前端用户身份验证。
• 搜索引擎优化。
• 页面速度优化。

HTML 规范中的新功能

HTML5 规范旨在服务于移动网络，你可以把它看作是两件事：一组HTML 标签和几个新的 API

让我们逐一修改一些新的标签和属性，之后我将添加一个使用所有这些的示例。

<picture>

你可以把它看作是一个更灵活地显示图像资源的标签。它允许我们为高DPIimg显示器提供更高密度的图像版本。根据 MDN 的描述，让我们看看它是什么样子的：

HTML 元素包含零个或多个元素和一个元素来为不同的显示/设备场景提供图像的版本。

<source>

HTML<source>元素为<picture>、<audio>元素或<video>元素指定多个媒体资源。

srcset属性

此属性与 类似src，但用于定义多个图像src，有多种方法可以实现此源

只需声明一次属性，即可使用多张图片，并将 src 设置为 default 。查看webkit.org上的原始来源。

<img 
  src="image-src.png" 
  srcset="image-1x.png 1x, 
          image-2x.png 2x,
          image-3x.png 3x, 
          image-4x.png 4x"
>

另一种方法是声明多个源，每个源中都有一个srcset。您可以在下面的示例中看到。主要区别在于第二种方法对图像显示有更具体的条件。

综合起来：

在 Codepen 上查看

<picture>
  <source media="(max-width: 799px)" srcset="https://placekitten.com/200/300">
  <source media="(min-width: 800px)" srcset="https://placekitten.com/400/600">
  <img src="https://placekitten.com/600/800" alt="A cute black cat showing his love">
</picture>

新的相关 CSS 属性

如果你还不知道，剧透一下，CSS 4 并不存在。取而代之的是，现代浏览器对 CSS 4 的支持有所提升。以下是一些值得注意的属性：

object-position

顾名思义object-position， 定义了对象在框中的定义方式。它与 非常相似background-position。您可以在 中查看代码笔示例，感谢@Robin Rendle。

image-rendering

此属性用于告诉浏览器如何渲染图像。其值描述了缩放图像所采用的算法。截至撰写本文时，可能的值包括：

• auto：默认值，浏览器的算法将决定如何缩放图像。
• crisp-edges：它保留图像中的对比度和边缘。
• pixelated：顾名思义，随着视口的增大，浏览器将保持其像素化样式。

您可以在Codepen 上的这个示例中看到这三幅图像的行为方式。

或者检查其image-rendering是否适用于二维码。

图像格式

<img alt="Apple iPhone 7 Plus, GSM Unlocked, 32GB - Rose Gold (Refurbished)" src="https://images-na.ssl-images-amazon.com/images/I/51gVm-dTdvL._AC_SY200_.jpg" class="product-image" height="200px" data-a-hires="https://images-na.ssl-images-amazon.com/images/I/51gVm-dTdvL._AC_SY400_.jpg">

延迟加载

延迟加载图像意味着图像的加载速度很慢，除非有必要，否则不会加载。

一旦实施，对于最终用户来说，这通常意味着提供更小的捆绑包、更快的加载速度和更好的整体体验。

交叉口观察器 API

首先，您可能想要使用 Intersection Observer API。

简而言之，API 为用户提供了一种观察给定元素并监视它们与给定祖先元素或视口本身的交集变化的方法。

如果您使用 Gatsby，Gatsby Link已经在后台使用它了。

• MDN 上的 Intersection Observer API。
• caniuse.com 上支持 Intersection Observer API。
• 很棒的文章：掌握交叉口观察器 API。

对于现代框架，您可能需要研究以下一些 npm 包：

• 反应可加载。
• Vue 延迟加载。
• React 延迟加载图像组件
• Angular 延迟加载模块。

骷髅

即使启用了延迟加载，用户的网速也可能会变慢或中断，即使在城市地区，即使用户自己没有意识到，所以最好能有一些提示让用户看到。这就是骨架的作用所在。

骨架是需要等待加载的地方的占位符

你可能以前见过，骨架是这样的：

https://codepen.io/oslego/pen/XdvWmd

您可以使用一些 npm 包来实现此功能，但根据经验，让我们使用一些更简单的包。

引入:empty伪类

根据 MDN 文档：

empty表示任何没有子元素的元素。子元素可以是元素节点或文本（包括空格）。注释、处理指令和 CSS 内容不会影响元素是否被视为空元素。

因此骨架可以简单到

/*
 * ...your styles
 */

.user-data:empty {
  background: rgba(130, 130, 130, 0.2); 
}

您可以使用 CSS或:empty在 MDN Docs 上查看动画骨架屏幕。

介绍 WebP

WebP 是一种专为 Web 设计的图像格式，于 2010 年 9 月发布，目前除 Safari 外，大多数现代浏览器都已支持WebP。如果您在dev.to上查看自己的个人资料图片，可能会发现它已经在使用 WebP 了。我会在最后部分列出几篇文章。

更多资源

• MDN 移动优化
• Google 的移动测试工具。
• 网站速度测试图像分析工具。
• HTML5 备忘单。
• 了解Dimitry Nicholas如何使用 Lepto 自动化您的图像优化过程。
• 通过 CLI 和 Web 界面自动进行图像编辑、优化和分析。
• 盖茨比形象。
• Lozard JS：高性能、轻量~1kb、纯 JS 可配置的延迟加载器，不依赖响应式图像、iframe 等https://apoorv.pro/lozad.js/demo/
• Google Developers上有关 WebP 的文章。
• 维基百科上的 WebP。

就这样吧，感谢大家坚持到了最后，继续学习吧。

干杯。