关于html5:现代图片性能优化及体验优化指南-缩放精细化展示及避免布局偏移拉伸

本文是系列第三篇。系列文章：

1. 古代图片性能优化及体验优化指南 – 图片类型及 Picture 标签的应用
2. 古代图片性能优化及体验优化指南 – 响应式图片计划

图片资源，在咱们的业务中堪称是占据了十分大头的一环，尤其是其对带宽的耗费是非常微小的。

对图片的性能优化及体验优化在明天就显得尤为重要。本文，就将从各个方面论述，在各种新个性满头飞的明天，咱们能够如何尽可能的对咱们的图片资源，进行性能优化及体验优化。

图片的宽高比、裁剪与缩放

OK，上面进入到咱们的第三个模块，图片的宽高比、裁剪与缩放。咱们会介绍 4 个新的个性：

• aspect-ratio
• object-fit
• object-position
• image-rendering

应用 aspect-ratio 防止布局偏移

很多时候，只能应用固定尺寸大小的图片，咱们的布局可能是这样：

对应的布局：

<ul class="g-container">
    <li>
        <img src="http://placehold.it/150x100">
        <p> 图片形容 </p>
    </li>
</ul>

ul li img {width: 150px;}

当然，万一假如后端接口呈现一张非正常大小的图片，上述不加爱护的布局就会出问题：

所以对于图片，咱们总是倡议同时写上高和宽，防止因为图片尺寸谬误带来的布局问题：

ul li img {
    width: 150px;
    height: 100px;
}

同时，给 <img> 标签同时写上高宽，能够在图片未加载之前提前占住地位，防止图片从未加载状态到渲染实现状态高宽变动引起的重排问题。

当然，到明天，咱们还能够应用 aspect-ratio 设定图片的高宽比。

aspect-ratio CSS 属性为容器规定了一个期待的宽高比，这个宽高比能够用来计算主动尺寸以及为其余布局函数服务。

像是下面的代码，咱们就能够替换成：

ul li img {
    width: 150px;
    aspect-ratio: 3 / 2;
}

当然，有的时候，咱们的布局是响应式动静在变动的，容器的宽度也是不确定的，因而，有了 aspect-ratio 之后，咱们的写法就能够更佳的难受。

ul li img {
    width: 100%;
    aspect-ratio: 3 / 2;
}

这里，容器基于 Flex 弹性布局或者响应式布局，其宽度是不固定的，然而图片的宽高比是固定的，应用 aspect-ratio: 3 / 2 就能十分好的适配这种状况。

咱们借助了 aspect-ratio 这个 CSS 中较新的属性来始终主动取得正确的宽高比，无论其父元素的宽度如何变动。

当然，aspect-ratio 不仅仅只是能使用在这里，在 aspect-ratio 呈现之前，咱们只能通过一些其它的 Hack 形式，譬如设置 padding-top 等形式模仿固定的宽高比。在 aspect-ratio 之后，咱们终于有了设定容器固定宽高比的能力。

object-fit 防止图片拉伸

当然，限度高宽也会呈现问题，譬如图片被拉伸了，十分的难看：

这个时候，咱们能够借助 object-fit，它可能指定可替换元素的内容（也就是图片）该如何适应它的父容器的高宽。

ul li img {
    width: 150px;
    aspect-ratio: 3 / 2;
    object-fit: cover;
}

利用 object-fit: cover，使图片内容在放弃其宽高比的同时填充元素的整个内容框。

object-fit 的取值有 fill、none、contain、cover，与 background-size 相似，能够类比记忆。

也能够看看这张图，很易于了解：

object-fit 还有一个配套属性 object-position，它能够管制图片在其内容框中的地位。（相似于 background-position），默认是 object-position: 50% 50%，如果你不心愿图片居中展现，能够应用它去扭转图片理论展现的 position。

ul li img {
    width: 150px;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    object-position: 50% 100%;
}

像是这样，object-position: 100% 50% 指明从底部开始展现图片。这里有一个很好的 Demo 能够帮忙你了解 object-position。

CodePen Demo — Object position

应用 image-rendering 设置图片缩放算法

绝对于下面几个新个性，image-rendering 会更为冷门。

很多时候，咱们设置一个图片在页面上的展现大小为 200px x 200px，然而图片的原始尺寸可能是 800px x 800px，也可能是 50px x 50px。

这个时候，咱们就能够利用 image-rendering，设置图片在缩放状态下的展现算法。

image-rendering 在特定的场景下，可能起到奇效。

来看这样一个有意思的 DEMO，假如咱们有这样一个原图成果，它是一个二维码，大小为 100px x 100px：

如果咱们将它放大，放到很大，显著，这个二维码会失真，像是这样：

OK，在这种放大失真的状况想，能够应用 image-rendering 扭转图片缩放算法，这里咱们试一下 image-rendering: pixelated：

.img {image-rendering: pixelated;}

成果变动，如下图所示：

能够看到，image-rendering: pixelated 解决过的图像，居然变得如此清晰！

CodePen Demo — QrCode Image-rendering demo

来看看 image-rendering 的几个取值：

• image-rendering: auto：自 Gecko 1.9（Firefox 3.0）起，Gecko 应用双线性（bilinear）算法进行从新采样（高质量）。
• image-rendering: smooth：应用能最大化图像主观观感的算法来缩放图像
• image-rendering: high-quality：与 smooth 雷同，但更偏向于高质量的缩放。
• image-rendering: crisp-edges：必须应用可无效保留对比度和图像中的边缘的算法来对图像进行缩放，并且，该算法既不会平滑色彩，又不会在处理过程中为图像引入含糊。适合的算法包含最近街坊（nearest-neighbor）算法和其余非平滑缩放算法，比方 2×SaI 和 hqx-* 系列算法。此属性值实用于像素艺术作品，例如一些网页游戏中的图像。
• image-rendering: pixelated：放大图像时，应用最近街坊算法，因而，图像看着像是由大块像素组成的。放大图像时，算法与 auto 雷同。

尽管标准定义了挺多值，然而实际上，古代浏览器根本临时只反对：auto、pixelated、以及 -webkit-optimize-contrast（Chrome 下的 smooth）。

看形容都会挺懵逼的，理论应用的时候，最好每个都试一下验证一下成果。总结而言，image-rendering 的作用是 在图像缩放时，提供不一样的渲染形式，让图片的展现状态更为多样化，或者说是尽可能的去缩小图片的失真带来的信息损耗。

咱们再看一个 DEMO，原图如下：

实际效果：

当然，看上去 pixelated 的成果挺好，这是因为这是一张偏差于矢量的图片，细节不多，对于高精度的人物图，就不太实用于 pixelated。容易把图片马赛克化。

真正标准心愿的在放大后让图片尽可能不失真的 crisp-edges 成果，目前临时没有失去浏览器的实现。前面能够期待一下。

CodePen Demo — Image-rendering demo

总结一下

这一章，咱们介绍了 4 个较新的 CSS 个性：

• aspect-ratio：管制容器的宽高比，防止产生布局偏移及抖动
• object-fit：设定内容应该如何适应到其应用高度和宽度确定的框，防止图片拉伸
• object-position：基于 object-fit，设置图片理论展现的 position 范畴
• image-rendering：管制图片在缩放状态下的展现算法

正当利用它们，能够给用户在图片上以更好的体验。

当然，本文是 古代图片性能优化及体验优化指南 的第三篇，后续将给大家带来图片在：

• 懒加载 / 异步图像解码计划
• 可拜访性以及图片资源的容错及错误处理

上的古代解决方案，感兴趣的能够提前关注。

最初

OK，本文到此结束，心愿本文对你有所帮忙 :)

想 Get 到最有意思的 CSS 资讯，千万不要错过我的公众号 — iCSS 前端趣闻 😄

更多精彩 CSS 技术文章汇总在我的 Github — iCSS，继续更新，欢送点个 star 订阅珍藏。

如果还有什么疑难或者倡议，能够多多交换，原创文章，文笔无限，满腹经纶，文中若有不正之处，万望告知。