整合營(yíng)銷(xiāo)服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢(xún)熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢(xún)熱線：
片的批量壓縮和轉(zhuǎn)換是我們經(jīng)常使用的一個(gè)功能，但是無(wú)論是壓縮還是轉(zhuǎn)換都是統(tǒng)一的設(shè)置。如果用戶(hù)想要對(duì)不同的文件進(jìn)行不同設(shè)置的話(huà)，那么只有分批逐次進(jìn)行操作才可以。但是這樣的話(huà)又會(huì)消耗太多的時(shí)間和精力去操作，為了提高效率，就要想辦法盡量減少用戶(hù)的操作步驟。
自定義設(shè)置壓縮比和格式
其實(shí)之所以遇到這樣的煩心事，主要的問(wèn)題還是用戶(hù)無(wú)法自定義進(jìn)行壓縮和轉(zhuǎn)換操作，所以我們只需要選擇可以自定義設(shè)置的軟件就可以了。現(xiàn)在從網(wǎng)上下載一款名為 Imagine 的工具（https://github.com/meowtec/Imagine/），解壓以后運(yùn)行文件夾里面的可執(zhí)行文件即可。接下來(lái)點(diǎn)擊工具欄中的“添加”按鈕，在彈出的對(duì)話(huà)框中選擇需要進(jìn)行壓縮或者轉(zhuǎn)換的圖片。當(dāng)然用戶(hù)也可以直接在資源管理器中選擇這些文件，然后通過(guò)鼠標(biāo)拖拽的方式將它們添加到窗口中進(jìn)行釋放。
現(xiàn)在我們就可以在窗口列表中看到添加圖片的縮略圖，而且在每一個(gè)縮略圖的下方都可以看到“質(zhì)量”這個(gè)調(diào)整滑塊，通過(guò)它就可以進(jìn)行圖片壓縮比的調(diào)整。軟件默認(rèn)將“質(zhì)量”參數(shù)設(shè)置為80%，用戶(hù)可以自定義對(duì)其進(jìn)行調(diào)整，當(dāng)然隨著“質(zhì)量”的減小圖片的壓縮比也會(huì)隨之增大（圖1）。
另外點(diǎn)擊軟件界面右上角的按鈕，就可以統(tǒng)一設(shè)定不同圖片格式的輸出品質(zhì)和壓縮比（圖2）。
除此以外，在“質(zhì)量”的下方還有一個(gè)圖片格式的列表，默認(rèn)情況采用的是導(dǎo)入圖片的格式。用戶(hù)通過(guò)它可以選擇其他的格式，進(jìn)而就能完成圖片的轉(zhuǎn)換操作了。所有的設(shè)置完成以后，在任意一個(gè)預(yù)覽縮略圖上進(jìn)行雙擊操作，這樣就可以看到壓縮后圖片和壓縮前圖片的對(duì)比效果了（圖3）。點(diǎn)擊工具欄中的“保存”按鈕，在彈出的菜單里面選擇“導(dǎo)出到文件夾”命令。這樣就可以在圖片轉(zhuǎn)換完成以后，將它們保存到我們指定的全新目錄里面。
批量進(jìn)行自定義壓縮操作
如果用戶(hù)不喜歡下載安裝 Imagine 這款工具的話(huà)，那么還可以通過(guò)瀏覽器利用 Picdiet 這項(xiàng)服務(wù)來(lái)進(jìn)行操作。首先通過(guò)瀏覽器打開(kāi)它的頁(yè)面（https://www.picdiet.com/），點(diǎn)擊網(wǎng)頁(yè)最下方的“簡(jiǎn)體中文”選項(xiàng)，使頁(yè)面切換到簡(jiǎn)體中文的操作界面。接著對(duì)網(wǎng)頁(yè)中的“輸出圖像質(zhì)量”中進(jìn)行調(diào)整，這個(gè)壓縮比越小的話(huà)壓縮的體積就會(huì)越小，隨之而來(lái)的就是圖片的質(zhì)量也會(huì)變得非常的差。然后點(diǎn)擊網(wǎng)頁(yè)里面的“選擇你的圖片”按鈕，在彈出的對(duì)話(huà)框中選擇要進(jìn)行壓縮的圖片。當(dāng)圖片選擇完成以后就會(huì)馬上對(duì)選擇的圖片進(jìn)行壓縮操作，當(dāng)壓縮操作完成以后我們可以看到圖片的壓縮信息，點(diǎn)擊“下載文件”按鈕后就可以將文件保存到硬盤(pán)里面了（圖4）。
小提示：由于這項(xiàng)服務(wù)使用了 HTML5 技術(shù)，所以它的所有操作都是在本地瀏覽器里面進(jìn)行的，因此對(duì)用戶(hù)上傳的圖片沒(méi)有任何的限制。
行 阿里云開(kāi)發(fā)者 2024年07月15日 08:31 浙江
阿里妹導(dǎo)讀
對(duì)電商網(wǎng)頁(yè)的性能而言，圖片優(yōu)化是至關(guān)重要的事情，本文就此探討了一些簡(jiǎn)單、可靠的圖片優(yōu)化手段。
一、圖片對(duì)網(wǎng)頁(yè)性能優(yōu)化的重要性
對(duì)電商網(wǎng)頁(yè)的性能而言，圖片優(yōu)化是至關(guān)重要的事情，一個(gè)典型的電商網(wǎng)頁(yè)加載的圖片無(wú)論從數(shù)量還是字節(jié)數(shù)都不容小覷。
而圖片優(yōu)化的思路非常清晰明了，常見(jiàn)的有三個(gè)方向：
隨著圖片壓縮技術(shù)和瀏覽器渲染技術(shù)的發(fā)展，既淘汰了很多過(guò)時(shí)的圖片性能優(yōu)化技巧，又應(yīng)運(yùn)而生了不少簡(jiǎn)單、可靠的圖片優(yōu)化手段。
二、提前首屏圖片的加載時(shí)機(jī)
一般首屏使用的圖片決定了頁(yè)面的 LCP[1]指標(biāo)，首屏圖片的加載優(yōu)先級(jí)至關(guān)重要，而盡可能提前加載圖片是圖片性能優(yōu)化的首要問(wèn)題。
2.1 優(yōu)化網(wǎng)絡(luò)建連
在用戶(hù)首次訪問(wèn)居多的場(chǎng)景，網(wǎng)絡(luò)建連時(shí)間是一個(gè)被大部分人忽略，但至關(guān)重要的因素，也許我們的性能優(yōu)化輸在了起跑線上，這部分介紹的內(nèi)容不止對(duì)圖片加載有效，對(duì)于所有靜態(tài)資源乃至 HTML、異步接口等道理相似。
CDN 的重要性不用贅述，將內(nèi)容緩存到離用戶(hù)更近的邊緣服務(wù)器上，可以顯著提升網(wǎng)絡(luò)建連效率，當(dāng)然更重要的是使用 CDN 減少了數(shù)據(jù)在用戶(hù)和服務(wù)器之間傳輸?shù)木嚯x，大幅提升資源下載速度。
HTML 默認(rèn)支持兩種預(yù)建連機(jī)制：
<head>
<link rel="dns-prefetch" href="https://examplecdn.com">
<link rel="preconnect" href="https://examplecdn.com">
</head> 在 HTTP/1.1 協(xié)議下，由于瀏覽器通常會(huì)對(duì)每個(gè)域名并行連接數(shù)的限制（大部分瀏覽器限制在6個(gè)左右），在多個(gè)域名間分散圖片曾經(jīng)是常見(jiàn)的優(yōu)化手段，以此突破對(duì)單一域名的并發(fā)限制。然而這也意味著對(duì)于每個(gè)新的域名，瀏覽器必須進(jìn)行額外的 DNS 查找，并且可能需要建立新的TCP連接，這可能會(huì)增加一定的延遲。?
HTTP/2 開(kāi)始支持多路復(fù)用，意味著多個(gè)請(qǐng)求可以在單個(gè)TCP連接上同時(shí)進(jìn)行，減少了對(duì)多個(gè)域名的需要。因此在 HTTP/2 環(huán)境中，收斂圖片域名反而可以?xún)?yōu)化圖片加載，因?yàn)?
HTTP/3 是下一代 HTTP 協(xié)議，基于 QUIC（Quick UDP Internet Connections）協(xié)議。QUIC 是由 Google 開(kāi)發(fā)并隨后由 IETF 標(biāo)準(zhǔn)化的傳輸層協(xié)議。HTTP/3 對(duì)網(wǎng)絡(luò)建連進(jìn)行了優(yōu)化，和建連、傳輸性能相關(guān)的主要有
2.2 流式渲染 preload
很多頁(yè)面為了性能優(yōu)化引入了 SSR 技術(shù)，這樣 HTML 請(qǐng)求發(fā)起后，頁(yè)面組建在服務(wù)器進(jìn)行渲染，完成后返回給客戶(hù)端。如果沒(méi)有配合流式渲染，會(huì)讓頁(yè)面等待服務(wù)器取數(shù)、渲染出現(xiàn)較長(zhǎng)時(shí)間的白屏。
流式渲染通過(guò) HTTP 1.1 引入分塊傳輸 Transfer-Encoding: chunked 特性，允許一個(gè) HTTP 的請(qǐng)求的連接中可以多次響應(yīng)，在 SSR 的場(chǎng)景中，服務(wù)端在響應(yīng)一個(gè) HTML 頁(yè)面的請(qǐng)求時(shí)至少可以拆分成兩個(gè)分塊。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>流式渲染優(yōu)化頁(yè)面性能</title>
<link rel="preload" href="頁(yè)面LCP圖片地址" as="image" />
<link rel='dns-prefetch' href='https://s.alicdn.com'>
<link rel='preconnect' href='https://i.alicdn.com'>
<link rel="stylesheet" href="頁(yè)面樣式地址">
<script src="頁(yè)面腳本地址"></script>
</head>
<body>
<!--骨骼圖-->
<!--流式渲染后續(xù)內(nèi)容-->
</body>
</html>在流式渲染首段返回內(nèi)容中可以通過(guò) preload 讓頁(yè)面提前加載首屏確定性的圖片，提升頁(yè)面圖片加載速度。當(dāng)然流式渲染不僅僅可以?xún)?yōu)化圖片加載，充分利用服務(wù)器計(jì)算時(shí)間，頁(yè)面可以對(duì)部分域名提前建連、提前加載頁(yè)面 CSS 和 JavaScript、加載骨骼圖，等手段優(yōu)化頁(yè)面性能。
如果使用的 CDN 廠商支持邊緣計(jì)算，可以將頁(yè)面靜態(tài)部分換存在 CDN，用戶(hù)請(qǐng)求時(shí)第一時(shí)間返回，同時(shí) CDN 向源站請(qǐng)求頁(yè)面后續(xù)動(dòng)態(tài)內(nèi)容，來(lái)進(jìn)一步提升網(wǎng)頁(yè)性能。
?前端性能優(yōu)化：當(dāng)頁(yè)面渲染遇上邊緣計(jì)算-阿里云開(kāi)發(fā)者社區(qū)[2]?。
2.3 fetch-priority
在 web 開(kāi)發(fā)中資源的加載順序?qū)?yè)面的性能有顯著影響。瀏覽器通常會(huì)根據(jù)資源類(lèi)型、它們?cè)贖TML文檔中的位置以及一些內(nèi)部算法來(lái)決定資源加載的優(yōu)先級(jí)。然而瀏覽器的默認(rèn)優(yōu)先級(jí)可能并不總是與開(kāi)發(fā)者的意圖或頁(yè)面性能最優(yōu)化的目標(biāo)一致。
fetch-priority 特性就是為了解決這個(gè)問(wèn)題而提出的。通過(guò)顯式地設(shè)置資源的fetch-priority 屬性，開(kāi)發(fā)者可以指示瀏覽器按照特定的優(yōu)先級(jí)順序加載資源。一般情況下圖片的加載優(yōu)先級(jí)相對(duì)較高，但為了更精準(zhǔn)控制，可以使用 fetch-priority 調(diào)整。
<img src="important-image.png" fetch-priority="high" alt="Important Image">
<img src="less-important-image.png" fetch-priority="low" alt="Less Important Image">fetch-priority 屬性可以設(shè)置不同的優(yōu)先級(jí)值，high、low 和 auto（默認(rèn)）。可以應(yīng)用于各種資源，如<img>、<link>、<script>等元素。目前 Chrome、Safari、Edge 均已支持。
三、降低加載圖片的體積
在保證清晰度滿(mǎn)足要求的前提下，減少圖片的字節(jié)數(shù)明顯可以改善圖片加載性能。
3.1 圖片字節(jié)數(shù)的構(gòu)成
圖像的尺寸可以表示為橫向像素?cái)?shù)×縱向像素?cái)?shù)，圖像的總像素?cái)?shù)（即分辨率）是橫向像素?cái)?shù)和縱向像素?cái)?shù)的乘積。例如，一個(gè)1920×1080的圖像含有2,073,600個(gè)像素點(diǎn)，通常稱(chēng)為二百萬(wàn)像素。決定圖片字節(jié)數(shù)的有幾個(gè)關(guān)鍵因素。
顯然圖片格式、分辨率可以顯著影響圖片的字節(jié)數(shù)。
3.2 圖片縮放、裁剪、壓縮
根據(jù)顯示場(chǎng)景不同，調(diào)整圖片的尺寸、分辨率、質(zhì)量可以改變圖片的字節(jié)數(shù)，最常見(jiàn)的方法就是：
設(shè)計(jì)師、開(kāi)發(fā)可以通過(guò)工具實(shí)現(xiàn)對(duì)圖片的調(diào)整，但成本略高，比較簡(jiǎn)單的做法是讓源站或者 CDN 可以根據(jù)圖片 URL 參數(shù)對(duì)圖片進(jìn)行處理。阿里云目前具備完整的圖片處理能力
有了圖片裁剪、縮放能力，在必要的時(shí)候可以響應(yīng)式加載圖片：
@media screen and (min-width: 1200px) {
img {
background-image: url('a.png?image_process=resize,fw_200,fh_200.jpg');
}
}
@media screen and (min-width: 1400px) {
img {
background-image: url('a.png?image_process=resize,fw_250,fh_250.jpg');
}
}也可以使用 HTML5 的 picture 標(biāo)簽：
<picture>
<source srcset="a.png?image_process=resize,fw_200,fh_200.jpg" media="(min-width: 1200px)" />
<source srcset="a.png?image_process=resize,fw_250,fh_250.jpg" media="(min-width: 1400px)" />
<img src="a.png?image_process=resize,fw_100,fh_100.jpg" />
</picture>?甚至可以每次用戶(hù)加載頁(yè)面，根據(jù)用戶(hù)的性能表現(xiàn)進(jìn)行快慢網(wǎng)分級(jí)，并記錄到圖片域名的 cookie 中。下次用戶(hù)發(fā)起圖片請(qǐng)求，CDN 可以根據(jù) cookie 中的快慢網(wǎng)信息，決定返回給用戶(hù)的圖片質(zhì)量。
3.3 選擇合適的圖片格式
大部分 Web 開(kāi)發(fā)者對(duì) WebP 格式非常熟悉了，但可能對(duì) AVIF 格式還沒(méi)有開(kāi)始應(yīng)用。AVIF 是一種基于 AV1 視頻編碼的新圖像格式，用于將AV1壓縮的圖片或圖片序列存儲(chǔ)為HEIF文件格式。相對(duì)于JPEG，WEBP 這類(lèi)圖片格式來(lái)說(shuō)，它的壓縮率更高，并且畫(huà)面細(xì)節(jié)更好，AVIF vs JPEG 大小節(jié)省約 50%，AVIF vs WebP 大小節(jié)省約 20%。
?Comparing AVIF vs WebP file sizes at the same DSSIM?
以 JPEG 做基點(diǎn)總體來(lái)看，AVIF全面領(lǐng)先，甚至是邊界條件下，也表現(xiàn)較好。而 WebP 邊界條件下可能會(huì)超過(guò) JEPG。
類(lèi)型 | 50分位數(shù)壓縮率 | 85分位數(shù)壓縮率 |
WebP | -30% | -20% |
AVIF | -50% | -40% |
主流瀏覽器的支持情況非常不錯(cuò)，唯一的遺憾是 Edge 還不支持。
瀏覽器在在其圖片請(qǐng)求時(shí)候會(huì)在 Accept 頭部信息中聲明支持的圖片格式，可以利用這個(gè)在 CDN 識(shí)別，使用相同的圖片地址，返回不同格式的圖片內(nèi)容。
避免前端加載 1px 透明圖判斷瀏覽器是否支持特定圖片格式，然后修改圖片 URL 來(lái)獲取對(duì)應(yīng)格式圖片。這樣的處理方式有兩個(gè)弊端:
在 Chrome Dev Tools 網(wǎng)絡(luò)面板中可以看到淘寶、京東等網(wǎng)站都已經(jīng)開(kāi)始使用 AVIF 格式圖片。
3.4 堪稱(chēng)雙刃劍的漸進(jìn)式加載
圖片的漸進(jìn)式加載是一種在網(wǎng)頁(yè)瀏覽過(guò)程中逐步顯示圖片的技術(shù)。圖片沒(méi)有完全下載前用戶(hù)先看到圖片的低質(zhì)量版本，然后圖片會(huì)逐漸變得更清晰，直到完全加載完成。一般有兩種做法：
圖片漸進(jìn)式加載效果類(lèi)似于加強(qiáng)版的骨骼圖，然而漸進(jìn)式加載也有幾個(gè)問(wèn)題
To be or not to be, that is the question.
四、減少加載圖片數(shù)量
4.1 CSS sprites 可能過(guò)時(shí)了
CSS sprites 將多個(gè)小圖像合并成一個(gè)大圖像，利用 CSS 的背景定位屬性，可以?xún)H顯示合并圖像中相應(yīng)的部分，來(lái)代替單獨(dú)的圖像文件。減少HTTP請(qǐng)求的數(shù)量，這在HTTP/1.1時(shí)代是提升頁(yè)面加載速度的常用方法。
然而在 HTTP/2 情況發(fā)生了變化，HTTP/2 引入多路復(fù)用、頭部壓縮等特性，顯著改善了同時(shí)發(fā)送多個(gè)請(qǐng)求的性能。多路復(fù)用允許多個(gè)請(qǐng)求通過(guò)單一的TCP連接并行傳輸，減少了由于建立多個(gè)連接而產(chǎn)生的延遲。因此在HTTP/2 環(huán)境下，CSS sprites 的性能優(yōu)勢(shì)不如HTTP/1.1時(shí)那么明顯，甚至可能產(chǎn)生反效果，因?yàn)椋?/span>
同時(shí) CSS sprites 需要額外的維護(hù)工作，每當(dāng)圖像發(fā)生變化時(shí)，都需要重新生成整個(gè)sprite圖，并更新CSS定位，這使得管理起來(lái)更加復(fù)雜。在 HTTP/2 時(shí)代 CSS sprites 可能不再是性能優(yōu)化的最佳方案，icon fonts、base64 或 SVG 圖像可能是更好的選擇。
4.2 load="lazy" 不依賴(lài) JavaScript 的懶加載
在圖片較多的場(chǎng)景通常會(huì)對(duì)非首屏圖片懶加載，一般通過(guò) JavaScript 實(shí)現(xiàn)，現(xiàn)在大部分主流瀏覽器通過(guò)load="lazy"原生支持了圖片懶加載，使用方法也非常簡(jiǎn)便。
<img src="image-to-lazy-load.jpg" loading="lazy">這個(gè)屬性有三個(gè)可能的值：
1.lazy：?jiǎn)⒂脩屑虞d。瀏覽器會(huì)在圖片即將進(jìn)入視口時(shí)才開(kāi)始加載。
2.eager：禁用懶加載。圖片會(huì)隨著頁(yè)面加載立即開(kāi)始加載，無(wú)論圖片位置如何。
3.auto：瀏覽器自行決定何時(shí)加載圖片，這是默認(rèn)值。
當(dāng)對(duì)圖片設(shè)置了這個(gè)屬性后，瀏覽器會(huì)根據(jù)自己的啟發(fā)式算法決定圖片的加載時(shí)機(jī)。這些算法會(huì)考慮多個(gè)因素，比如圖片即將進(jìn)入視口的距離，或者用戶(hù)當(dāng)前的網(wǎng)絡(luò)條件等。通常啟發(fā)式算法的工作方式如下：
雖然開(kāi)發(fā)者無(wú)法精準(zhǔn)控制圖片加載的時(shí)機(jī)，但瀏覽器原生支持考慮的因素不僅僅是滾動(dòng)位置，相對(duì)而言更加合理。順便說(shuō)一句，使用 JavaScript 懶加載本身也有性能開(kāi)銷(xiāo)，可能會(huì)影響到頁(yè)面的 FPS。
4.3 content-visibility 另外一種懶加載
content-visibility 是 CSS 屬性，允許瀏覽器跳過(guò)不在屏幕上的元素的渲染工作，直到用戶(hù)滾動(dòng)到它們的位置。通過(guò)跳過(guò)不可見(jiàn)內(nèi)容的渲染，content-visibility 可以顯著減少頁(yè)面的初始加載時(shí)間，并降低內(nèi)存的使用，從而改善用戶(hù)體驗(yàn)。配合 contain-intrinsic-size 屬性可以對(duì)容器進(jìn)行渲染前的占位。
<style>
.image-gallery {
content-visibility: auto;
contain-intrinsic-size: 1000px 500px; /* 設(shè)置一個(gè)合適的占位大小 */
}
</style>
<div class="image-gallery">
<img src="image1.jpg" alt="描述1">
<img src="image2.jpg" alt="描述2">
<!-- 更多圖片 -->
</div>content-visibility 的瀏覽器兼容性并不是非常樂(lè)觀，需要開(kāi)發(fā)者在使用時(shí)候加以判斷。
4.4 decoding="async" 非首屏圖片異步解碼
解碼圖像和視頻是計(jì)算密集型的操作，可能會(huì)占用大量的CPU資源，特別是對(duì)于高分辨率或者復(fù)雜編碼格式的媒體文件，如果主線程被圖像或視頻的解碼操作阻塞，用戶(hù)在滾動(dòng)頁(yè)面或嘗試交互時(shí)可能會(huì)感受到卡頓或延遲。
對(duì)非首屏圖片或視頻添加 decoding="async" 可以允許瀏覽器在后臺(tái)處理圖片、視頻解碼，而不阻塞主線程，繼續(xù)處理和渲染頁(yè)面的其余部分，這樣可以有助于改善頁(yè)面的加載性能，減少用戶(hù)感知到的延遲，并提供更加平滑的用戶(hù)體驗(yàn)。
<img src="image.jpg" decoding="async">參考鏈接：
[1]https://web.dev/articles/lcp?hl=zh-cn
[2]https://developer.aliyun.com/article/762599
點(diǎn)贊 + 關(guān)注 + 收藏 = 學(xué)會(huì)了
*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
