原文地址：
1.每個(gè)人都應(yīng)當(dāng)壓縮圖片
在Mac下可以使用 ImageOptim 對(duì)圖片進(jìn)行無(wú)損壓縮，windows或者linux可以使用 FileOptimizer 對(duì)圖片進(jìn)行處理。
更具體的講，這些工具能夠移除圖片中的不需要的 EXIF meta-data 信息蝗罗。
- JPEGs 可以使用
MozJPEG(對(duì)于網(wǎng)絡(luò)內(nèi)容使用q=80或者更低都可以灾票，'q=80'表示原來(lái)質(zhì)量的80%) - PNGs 可以使用
pngquant - SVGs 可以使用
SVGO - 不要使用特別大的GIFs圖片，使用
H.264視頻代替(chrome崖面， firefox或者opera 可以使用WebM)术幔，如果不想使用視頻另萤，至少用[Giflossy](https://github.com/pornel/giflossy)處理一下 - 一些瀏覽器通過(guò)接收請(qǐng)求頭，這樣我們可以條件的選擇服務(wù)格式诅挑，對(duì)于 基于
blink內(nèi)核的瀏覽器四敞，比如Chrome, 可以使用有損的 WebP 格式, 其余瀏覽器可以使用JPEG/PNG格式作為fallbacks
2.簡(jiǎn)介
1.圖片仍舊是導(dǎo)致web浮腫的首要原因
圖像優(yōu)化由不同的措施組成, 可以減小圖像的文件大小。它最終取決于您的圖像所需的視覺(jué)保真度拔妥。
如圖1：
可以看出圖片優(yōu)化可以分為：
- 選擇正確的圖片格式
- 合適的尺寸
- 自適應(yīng)性
- 壓縮
- 確定關(guān)鍵圖像的優(yōu)先級(jí)
- 懶加載
- 使用工具處理
常見(jiàn)的圖片優(yōu)化包括壓縮忿危，依據(jù)屏幕尺寸使用 <picture>/<img srcset> 采用不同的圖片，以及減少圖片編碼的花銷
2.如何判斷我們的圖片需要優(yōu)化呢毒嫡？
可以使用以下幾款工具；
- WebPageTest 網(wǎng)頁(yè)性能測(cè)試網(wǎng)站( 很強(qiáng)大的網(wǎng)站 )，可以查看圖片壓縮情況兜畸，以及優(yōu)化方案
- 使用Chrome60+自帶的
Audits panel來(lái)查看
3.如何選擇圖片格式
正確的圖片格式是想要的視覺(jué)效果和功能需要的一種結(jié)合體努释。你是否使用過(guò)光柵圖片(Raster images) 或者 矢量圖(Vector images)
圖片2：
-
Raster graphics: 表示使用矩形柵格像素編碼的圖片，它們不是分辨率或者縮放獨(dú)立的咬摇。WebP和其它廣泛使用的格式伐蒂，比如JPEG,PNG,都是光柵圖像，還有Guetzli和MozJPEG也是 -
Vector graphics: 矢量圖使用點(diǎn)線面辦事圖像肛鹏。通常用于簡(jiǎn)單的幾何形狀逸邦，比如logos,它能夠提供一個(gè)高分辨率和縮放自由的圖片，比如SVG
選擇錯(cuò)誤的格式會(huì)讓你付出代價(jià)在扰，選擇正確格式的邏輯流程可能充滿危險(xiǎn)缕减，使用不同格式進(jìn)行存儲(chǔ)試驗(yàn)，可以謹(jǐn)慎的承擔(dān)這種風(fēng)險(xiǎn)芒珠。
1.謙卑的JPEG格式
JPEG是世界上使用最廣泛的一種圖片格式桥狡，各種設(shè)備對(duì)這種格式編碼支持性也十分友好。
JPEG是為了節(jié)省空間的一種拋棄信息壓縮算法皱卓，并且它在保存圖片視覺(jué)保真度的同時(shí)盡可能的減少圖片尺寸裹芝。
你的使用情況可接受的圖片質(zhì)量是什么？
所有的優(yōu)化工具都可以讓你自由的選擇想要的壓縮級(jí)別娜汁，高的壓縮級(jí)別可以減少圖片尺寸嫂易，但同時(shí)會(huì)產(chǎn)生失真，光暈掐禁，塊狀模糊
圖片3：
選擇質(zhì)量：
-
Best quality: 當(dāng)質(zhì)量要求大于帶寬支出時(shí)怜械。圖像在您的設(shè)計(jì)中具有很高的突出地位, 或者顯示為完全分辨率 -
Good quality；當(dāng)你想要更小的尺寸穆桂，但同時(shí)對(duì)圖片質(zhì)量影響太大時(shí)宫盔。用戶對(duì)圖片質(zhì)量比較在意時(shí) -
Low quality：當(dāng)帶寬更重要時(shí)，比較適合網(wǎng)絡(luò)情況比較差的情形 -
Lowest quality：帶寬節(jié)省是頭等大事時(shí)享完。用戶可以更快的加載頁(yè)面
JPEG壓縮模式
JPEG有多種壓縮模式灼芭，最流行的是：
- baseline(sequential) : 基本模式，圖片至上而下加載
- Progressive JPEG(PJPEG): 漸進(jìn)式模式般又，圖片由低質(zhì)量向高質(zhì)量過(guò)度
- lossless: 無(wú)損模式彼绷，通過(guò)移除
EXIF DATA完成
baseline模式圖：
圖片4
Progressive JPEG 漸進(jìn)式模式: PJPEGs 從低分辨率(blurry)開始加載到高分辨率
圖片5
漸進(jìn)式模式的優(yōu)勢(shì)：PJPEGs提供一個(gè)低分辨率的預(yù)覽，用戶會(huì)感覺(jué)圖片加載得更快了茴迁，這會(huì)提升用戶體驗(yàn)寄悯。
漸進(jìn)式模式的劣勢(shì)：PJPEGs比baseline模式解碼慢3倍。有時(shí)候這個(gè)3倍可能會(huì)花費(fèi)很長(zhǎng)時(shí)間堕义，對(duì)于桌面端有強(qiáng)大的CPU無(wú)所謂猜旬，但是對(duì)于移動(dòng)設(shè)備，這回占用更多的CPU資源
如何創(chuàng)建PJEPGs
工具和庫(kù)，比如 jpegtran, jpeg-recompress, imagemin等支持導(dǎo)出漸進(jìn)式JPEGs.如果你已經(jīng)有圖片優(yōu)化的管道洒擦，你可以直接的添加漸進(jìn)式加載功能：
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圖片
用戶可能通過(guò)高分辨率的桌面或者移動(dòng)顯示器訪問(wèn)網(wǎng)站椿争。Device Pixel Ratio(DPR), 也稱之為 'CSS pixel ratio', 用原來(lái)決定設(shè)備屏幕分辨率如何被CSS解釋的。DPR是手機(jī)提供商創(chuàng)建的熟嫩，用于增加移動(dòng)設(shè)備屏幕分辨率和銳度秦踪，同時(shí)元素看起來(lái)不會(huì)太小。
圖片6：
srcset 允許瀏覽器依據(jù)不同設(shè)備選擇最合適的圖片掸茅，例如椅邓，對(duì)于 2x 移動(dòng)顯示器 選擇 2x 圖片。對(duì)于不支持 srcset 的瀏覽器昧狮，可以<img>使用 src進(jìn)行回滾景馁。
<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">
相關(guān)教程：
5.懶加載圖片
懶加載就是只有用戶需要圖片時(shí)才延遲加載圖片，是一種常見(jiàn)的網(wǎng)頁(yè)開發(fā)模式陵且。比如裁僧，當(dāng)你滾動(dòng)條下拉時(shí)，圖片異步按需加載慕购。這可以作為圖片壓縮策略之后的進(jìn)一步處理聊疲。
懶加載的好處：
- 減少數(shù)據(jù)的使用： 因?yàn)槲覀兛梢约僭O(shè)用戶不一定需要所有的圖片，我們可以只加載最少量的資源沪悲，這對(duì)移動(dòng)端特別友好
- 減少電量使用：更少的工作量可以節(jié)省電量
- 提升下載速度：降低網(wǎng)頁(yè)整體加載時(shí)間获洲。對(duì)于圖片很多的網(wǎng)站，這會(huì)極大的提升用戶體驗(yàn)
有很多網(wǎng)站殿如，比如 Medium, 首先顯示一個(gè)小的贡珊，高斯模糊的內(nèi)聯(lián)預(yù)覽（100 bytes）,當(dāng)圖片完全加載之后再顯示full-quality圖片
圖片7
實(shí)現(xiàn)類似功能，可以參考：
如何實(shí)現(xiàn)懶加載
有很多技術(shù)和插件能夠?qū)崿F(xiàn)懶加載涉馁，推薦使用
- lazysizes 性能好门岔，功能全
這個(gè)庫(kù)不需要任何配置，只需要添加到網(wǎng)頁(yè)中即可烤送，然后添加class="lazyload" 到 images/iframes中寒随，并且使用 data-src 或者 data-srcset 屬性，另外對(duì)于低質(zhì)量的圖片可以使用 src 屬性
// 非響應(yīng)式的
// 響應(yīng)式 并且自動(dòng)計(jì)算大小
<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="http://www.youtube.com/embed/ZfV-aYdU4uE"
></iframe>>
另外一些CDN支持對(duì)圖片進(jìn)行裁剪和響應(yīng)式帮坚，比如阿里的OSS妻往，外國(guó)的Cloudinary
圖片8
(https://github.com/aFarkas/lazysizes) 的其它功能：
- 對(duì)當(dāng)前和未來(lái)懶加載的元素自動(dòng)檢測(cè)可視性變化
- 包含標(biāo)準(zhǔn)的響應(yīng)式圖片支持（
picture && srcset） - 添加自動(dòng)尺寸計(jì)算和媒體查詢功能別名
- 可用于images/iframes css和js文件很多的 頁(yè)面
- 擴(kuò)展性好，支持插件
- 輕量但是成熟的解決方案
- SEO友好：對(duì)于爬蟲不隱藏 images/assets
當(dāng)然 lazysizes 不是唯一選擇试和，其余的一些庫(kù)讯泣，比如 lazy load xt, blazy.js, unveil等等
懶加載是一種廣泛使用的模式，對(duì)節(jié)約帶寬阅悍，提升UE十分有用好渠。
6.避免display:none 陷阱
以前響應(yīng)式圖片解決方案經(jīng)常誤用 display css屬性昨稼，反而導(dǎo)致更多的圖片請(qǐng)求。現(xiàn)在一般更偏向使用 <picture> 和 <img srcset> 來(lái)加載響應(yīng)式圖片
你是否在媒體查詢中在特定的breakpoints使用 display: none 來(lái)設(shè)置圖片呢拳锚？比如
<style>
@media (max-width: 640px) {
img {
display: none
}
}
</style>
或者使用class來(lái)隱藏圖片
<style>
.hidden {
display: none;
}
</style>
<img src=“img-hidden.jpg" class="hidden">
這樣瀏覽器會(huì)將2個(gè)圖片都請(qǐng)求回來(lái)悦昵，設(shè)置 display: none 圖片還是會(huì)請(qǐng)求。但是下面使用 background: url() 的方式可以不用請(qǐng)求晌畅。背景圖片不會(huì)被計(jì)算和下載當(dāng)渲染文檔時(shí)
<div style="display:none">
<div style="background: url(dog.jpg)"></div>
</div>
雖然上面方式可行，但是更偏向使用<picture> 和 **<img srcset>
7.緩存圖片資源
可以使用 HTTP cache headers來(lái)緩存圖片資源寡痰，更具體點(diǎn)抗楔，使用 Cache-Control來(lái)定義緩存資源和緩存時(shí)間，比如 Cache-Control: public; max-age=31536000（即一年）
8.預(yù)加載重要的圖片資源 preload critical image assets
我們可以使用 <link rel="preload"> 預(yù)加載重要的圖片資源拦坠。<link rel="preload"> 允許我們強(qiáng)制瀏覽器請(qǐng)求資源而不阻塞文檔的 onload 事件连躏。這使得我們?cè)黾诱?qǐng)求那些可能只有文檔解析完成之后才能被發(fā)現(xiàn)資源的優(yōu)先級(jí)。
圖片可以使用 as="image" (我們也可以請(qǐng)求js資源 字體資源)
# 圖片資源
<link rel="preload" as="image" href="logo.jpg" />
# 字體資源
<link rel="preload" as="font"
type="font/woff2" crossorigin>
<link rel="preload"> 瀏覽器支持： chrome, 基于Blink內(nèi)核的瀏覽器贞滨，比如Opera, Safari開發(fā)版入热，firefox
示例網(wǎng)站：
圖片9
總結(jié)
擴(kuò)展閱讀
