最近2018中文字幕在日韩欧美国产成人片_国产日韩精品一区二区在线_在线观看成年美女黄网色视频_国产精品一区三区五区_国产精彩刺激乱对白_看黄色黄大色黄片免费_人人超碰自拍cao_国产高清av在线_亚洲精品电影av_日韩美女尤物视频网站

小編給大家分享一下怎么處理Web圖片優(yōu)化，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

創(chuàng)新互聯(lián)建站-專業(yè)網站定制、快速模板網站建設、高性價比孟連網站開發(fā)、企業(yè)建站全套包干低至880元,成熟完善的模板庫,直接使用。一站式孟連網站制作公司更省心,省錢,快速模板網站建設找我們，業(yè)務覆蓋孟連地區(qū)。費用合理售后完善，10余年實體公司更值得信賴。

計算 JPG 文件尺寸

未壓縮圖片的尺寸很容易計算，只需將圖片的長寬相乘（px 值），再乘以 3 字節(jié)（因為 RGB 色彩系統(tǒng)使用 24 個位元）。所得結果除以 1,048,576（1024 * 1024）即得到兆字節(jié)。

image_size = (image_width * image_height * 3) / 1048576

比如，計算分辨率為 1366px x 768px 的未壓縮圖片的大?。?/p>

1366 * 768 * 3 / 1048576 = 3Mb

現(xiàn)在網站的尺寸平均在 2Mb 和 3Mb 之間，想象一下，一張未壓縮的圖片就占掉了 80% 的流量。在網速較慢的移動網絡上，3Mb 大小的圖片要花很久才能加載完畢。如果等待網站加載的用戶大部分時間花在等待單張圖片加載，那網站會損失不少流量。想想就可怕，是嗎？

所以，在保證圖片分辨率和畫質可接受的前提下，我們可以做什么來優(yōu)化下圖片呢？

在線圖片優(yōu)化

如果你的項目是一個簡單的靜態(tài)網站，只有少量不經常變動（甚至從來不會變動）的圖片，那么你可以直接使用在線工具。這些工具使用各種算法壓縮圖像，效果很不錯，對簡單項目而言完全夠用。

就我個人所知，比較著名的在線工具有：

•  Compressor.io，支持 JPG、PNG、SVG、GIF，每次上傳 1 個文件

•  Squoosh，支持 JPG、PNG、SVG、GIF，每次上傳 1 個文件

•  Optimizilla，支持 JPG、PNG，最多每次上傳 20 個文件

•  TinyPNG，支持 JPG、PNG，最多每次上傳 20 個文件

•  SVGMinify，支持 SVG，每次上傳 1 個文件

•  svgomg，支持 SVG，每次上傳 1 個文件

自動化解決方案

然而，如果你做的是多人協(xié)作的復雜項目，使用大量圖片，在加入每張圖片時都手動操作一下很乏味。同時，還存在由于人為錯誤或其他因素導致一些圖片沒有優(yōu)化的風險。

復雜項目常常使用同樣復雜的構建系統(tǒng)，比如 Gulp、Webpack、Parcel。配置一下這類構建系統(tǒng)，加入圖片優(yōu)化插件很方便。這樣就可以完全自動化圖片優(yōu)化過程，在項目中加入圖片后就可以優(yōu)化它們。

就我所知，最有名的插件是 imagemin，可以作為命令行工具使用，也可以作為構建工具的插件使用：

•  imagemin-cli

•  gulp-imagemin

•  imagemin-webpack

•  parcel-plugin-imagemin

圖片加載優(yōu)化

我們前面介紹了如何通過壓縮圖片降低文件尺寸，但不過多改變圖片分辨率和影響畫質。盡管優(yōu)化圖片后文件尺寸能降低不少，但一次性加載大量優(yōu)化過的圖片（比如電商網站的商品列表頁面）還是會影響性能。

懶加載

懶加載也叫按需加載，意思是僅加載當前視圖（用戶屏幕顯示范圍）內的圖片，不加載其他圖片（直到它們出現(xiàn)在當前視圖內時才加載）。

只有較新版本的瀏覽器才支持原生的懶加載特性，不過有許多基于 JavaScript 的方案。

•  原生懶加載 

•  基于 JavaScript 的方案

就我所知，最知名的方案有：

verlok/lazyload

yall.js

Blazy （現(xiàn)在沒有維護）

漸進式圖片

盡管懶加載在性能方面表現(xiàn)出色，但是用戶滾動屏幕后需要盯著空白區(qū)域等待圖片加載，這樣的用戶體驗不太好。網速慢的情況下，下載圖片會非常慢。所以我們還需要漸進式圖片。

漸進式圖片的意思是在高畫質圖像加載完之前會先顯示低畫質版本。低畫質版本由于畫質低、壓縮率高，尺寸很小，加載很快。在兩者之間我們也可以根據(jù)需要顯示不同畫質的版本。

類似于先加載頁面的骨架，漸進式圖片這一技術讓用戶產生圖片加載變快的印象。用戶不再盯著一片空白區(qū)域等待事情發(fā)生，而能看到圖像變得越來越清晰。

漸進式圖片有基于 JavaScript 實現(xiàn)的方案：

progressive-image。

響應式圖片

我們還需要留意使用尺寸合適的圖片。

例如，假設圖片在桌面瀏覽器上顯示的最大寬度為 1920px，平板上的最大寬度為 1024px，手機上的最大寬度為 568px，那么最簡單的方案是使用 1920px 的圖片，這樣可以滿足所有場景。不過，這種情況下，網速慢、網絡不穩(wěn)定的智能手機用戶需要等很久圖片才能加載完畢，這就又碰到了我們文章開頭提到的問題。

好在我們可以通過 picture 元素告訴瀏覽器基于媒體查詢下載相應的圖片。盡管現(xiàn)在 93% 的用戶使用的瀏覽器都支持這一特性，但是這個元素內部還是包含了一個 img 元素，以兼容不支持這一特性的瀏覽器。

使用 cdn

Cloudinary、Cloudflare 之類的 CDN 服務可以在服務器上優(yōu)化圖片，將優(yōu)化后的圖片傳送給用戶。如果你的站點使用 CDN，可以看下靜態(tài)資源優(yōu)化選項。這樣我們就不用操心圖片優(yōu)化，由 CDN 在服務端完成優(yōu)化。我們只需要操心懶加載、漸進式圖片等前端的加載方案。

WebP 圖像格式

WebP 是由 Google 開發(fā)的專為 web 優(yōu)化的圖像格式。根據(jù) canIUse 的數(shù)據(jù)，大部分用戶使用的瀏覽器支持 WebP 格式。另外使用 picture 元素也可以很方便地兼容不支持 WebP 的瀏覽器。

有很多在線文件格式轉換工具可以把圖片轉為 WebP 格式，不過 CDN 服務可以在服務端完成這一格式轉化。

為高分屏優(yōu)化

考慮高分屏很有必要，不過這個更多的是用戶體驗優(yōu)化。

例如，假定我們在 768px 的屏幕上顯示一張 768px x 320px 的圖片。但是屏幕有 2x 的密度，也就是說屏幕寬度實際是 2 x 768 = 1536 px。這就意味著我們將 768 px 的圖片拉升到 1536 px，這就導致高分屏上的圖片看起來很模糊。

為了解決這一問題，我們需要提供為高分屏優(yōu)化的圖片。我們需要單獨創(chuàng)建相當于普通屏幕 2 倍或 3 倍分辨率的圖片，然后在 srcset 屬性上使用 2x 標簽表明這是為高分屏準備的圖片。

例子

支持高分屏的響應式 WebP/PNG 圖片：

以上是“怎么處理Web圖片優(yōu)化”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

分享名稱：怎么處理Web圖片優(yōu)化
鏈接地址：http://fisionsoft.com.cn/article/pjcjop.html