图片处理

2017-10-14  本文已影响51人  JamesSawyer

原文地址：

1.每个人都应当压缩图片

在Mac下可以使用 ImageOptim 对图片进行无损压缩，windows或者linux可以使用 FileOptimizer 对图片进行处理。
更具体的讲，这些工具能够移除图片中的不需要的 EXIF meta-data 信息。

2.简介

1.图片仍旧是导致web浮肿的首要原因

图像优化由不同的措施组成, 可以减小图像的文件大小。它最终取决于您的图像所需的视觉保真度。

如图1：

#1 image-optimisation.jpg

可以看出图片优化可以分为：

常见的图片优化包括压缩，依据屏幕尺寸使用 <picture>/<img srcset> 采用不同的图片，以及减少图片编码的花销

2.如何判断我们的图片需要优化呢？

可以使用以下几款工具；

3.如何选择图片格式

正确的图片格式是想要的视觉效果和功能需要的一种结合体。你是否使用过光栅图片(Raster images) 或者 矢量图(Vector images)

图片2：

#2 raster 和 vector.png

选择错误的格式会让你付出代价，选择正确格式的逻辑流程可能充满危险，使用不同格式进行存储试验，可以谨慎的承担这种风险。

1.谦卑的JPEG格式

JPEG是世界上使用最广泛的一种图片格式，各种设备对这种格式编码支持性也十分友好。

JPEG是为了节省空间的一种抛弃信息压缩算法，并且它在保存图片视觉保真度的同时尽可能的减少图片尺寸。

你的使用情况可接受的图片质量是什么？

所有的优化工具都可以让你自由的选择想要的压缩级别，高的压缩级别可以减少图片尺寸，但同时会产生失真，光晕，块状模糊

图片3：


#3 jpeg格式压缩.jpg

选择质量：

JPEG压缩模式

JPEG有多种压缩模式，最流行的是：

baseline模式图：

图片4

#4 baseline模式.jpg

Progressive JPEG 渐进式模式: PJPEGs 从低分辨率(blurry)开始加载到高分辨率

图片5


#5 渐进式模式.jpg

渐进式模式的优势：PJPEGs提供一个低分辨率的预览，用户会感觉图片加载得更快了，这会提升用户体验。

渐进式模式的劣势：PJPEGs比baseline模式解码慢3倍。有时候这个3倍可能会花费很长时间，对于桌面端有强大的CPU无所谓，但是对于移动设备，这回占用更多的CPU资源

如何创建PJEPGs

工具和库，比如 jpegtran, jpeg-recompress, imagemin等支持导出渐进式JPEGs.如果你已经有图片优化的管道，你可以直接的添加渐进式加载功能：

const gulp = require('gulp');
const imagemin = require('gulp-imagemin');

gulp.task('images', function() {
    return gulp.src('images/*.jpg')
        .pipe(imagemin({
            progressive: true
        }))
        .pipe(gulp.dest('dist'));
})

4.使用 srcset 传递HIDPI图片

用户可能通过高分辨率的桌面或者移动显示器访问网站。Device Pixel Ratio(DPR), 也称之为 'CSS pixel ratio', 用原来决定设备屏幕分辨率如何被CSS解释的。DPR是手机提供商创建的，用于增加移动设备屏幕分辨率和锐度，同时元素看起来不会太小。

图片6：


#6 device-pixel-ratio.jpg

srcset 允许浏览器依据不同设备选择最合适的图片，例如，对于 2x 移动显示器 选择 2x 图片。对于不支持 srcset 的浏览器，可以<img>使用 src进行回滚。

<img srcset="paul-irish-320w.jpg,
             paul-irish-640w.jpg 2x,
             paul-irish-960w.jpg 3x"
     src="paul-irish-960w.jpg" alt="Paul Irish cameo">

相关教程：

5.懒加载图片

懒加载就是只有用户需要图片时才延迟加载图片，是一种常见的网页开发模式。比如，当你滚动条下拉时，图片异步按需加载。这可以作为图片压缩策略之后的进一步处理。

懒加载的好处：

有很多网站，比如 Medium, 首先显示一个小的，高斯模糊的内联预览（100 bytes）,当图片完全加载之后再显示full-quality图片

图片7

[lazysizes] #7 懒加载 先模糊后高清.jpg

实现类似功能，可以参考：

如何实现懒加载

有很多技术和插件能够实现懒加载，推荐使用

这个库不需要任何配置，只需要添加到网页中即可，然后添加class="lazyload" 到 images/iframes中，并且使用 data-src 或者 data-srcset 属性，另外对于低质量的图片可以使用 src 属性

// 非响应式的
![](image.jpg)

// 响应式 并且自动计算大小
<img 
    data-sizes="auto"
    data-src="image2.jpg"
    data-srcset="image1.jpg 300w,
        image2.jpg 600w,
        image3.jpg 900w"
    class="lazyload" />

// 使用iframe
<iframe
    frameborder="0"
    class="lazyload"
    allowfullscreen=""
    data-src="//www.youtube.com/embed/ZfV-aYdU4uE"
></iframe>>

另外一些CDN支持对图片进行裁剪和响应式，比如阿里的OSS，外国的Cloudinary

图片8

#8 cloudinary-responsive-images.jpg

(https://github.com/aFarkas/lazysizes) 的其它功能：

当然 lazysizes 不是唯一选择，其余的一些库，比如 lazy load xt, blazy.js, unveil等等

懒加载是一种广泛使用的模式，对节约带宽，提升UE十分有用。

6.避免display:none 陷阱

以前响应式图片解决方案经常误用 display css属性，反而导致更多的图片请求。现在一般更偏向使用 <picture> 和 <img srcset> 来加载响应式图片

你是否在媒体查询中在特定的breakpoints使用 display: none 来设置图片呢？比如

![](dog.jpg)

<style>
    @media (max-width: 640px) {
        img {
            display: none
        }
    }
</style>

或者使用class来隐藏图片

<style>
.hidden {
  display: none;
}
</style>
![](img.jpg)
<img src=“img-hidden.jpg" class="hidden">

这样浏览器会将2个图片都请求回来，设置 display: none 图片还是会请求。但是下面使用 background: url() 的方式可以不用请求。背景图片不会被计算和下载当渲染文档时

<div style="display:none">
  <div style="background: url(dog.jpg)"></div>
</div>

虽然上面方式可行，但是更偏向使用<picture> 和 **<img srcset>

7.缓存图片资源

可以使用 HTTP cache headers来缓存图片资源，更具体点，使用 Cache-Control来定义缓存资源和缓存时间，比如 Cache-Control: public; max-age=31536000（即一年）

8.预加载重要的图片资源 preload critical image assets

我们可以使用 <link rel="preload"> 预加载重要的图片资源。<link rel="preload"> 允许我们强制浏览器请求资源而不阻塞文档的 onload 事件。这使得我们增加请求那些可能只有文档解析完成之后才能被发现资源的优先级。

图片可以使用 as="image" (我们也可以请求js资源 字体资源)

# 图片资源
<link rel="preload" as="image" href="logo.jpg" />

# 字体资源
<link rel="preload" as="font" 
href="//www.crsc.philips.com/images/123.woff2" type="font/woff2" crossorigin>

<link rel="preload"> 浏览器支持： chrome, 基于Blink内核的浏览器，比如Opera, Safari开发版，firefox

示例网站：

图片9


#9 使用preload和不使用的区别.jpg

总结

扩展阅读

上一篇 下一篇

猜你喜欢

热点阅读