如今，“極品飛車(chē)”是每個(gè)網(wǎng)站的遺愿清單上必不可少的一項(xiàng)。為什么不呢?增強(qiáng)的速度是直接負(fù)責(zé)轉(zhuǎn)換流量為付費(fèi)客戶(hù)端。

任何行業(yè)的任何人都希望提高他們網(wǎng)站的加載速度，提供更好的用戶(hù)體驗(yàn)。另外，不要忘記升級(jí)的網(wǎng)站速度也會(huì)使網(wǎng)站在搜索引擎結(jié)果頁(yè)面上的排名上升到更有競(jìng)爭(zhēng)力的位置，并改善核心的web關(guān)鍵。那么，如何才能實(shí)現(xiàn)這種對(duì)速度的需求呢?答案是圖像優(yōu)化。

什么是圖像優(yōu)化?

圖像優(yōu)化是一個(gè)以適當(dāng)?shù)母袷?、大小和分辨率提供?yōu)質(zhì)圖像的過(guò)程，同時(shí)保持壓縮大小。如果做得好，圖像優(yōu)化不僅能提高網(wǎng)站的性能，還能提高其他一些指標(biāo)，如:

頁(yè)面加載速度;

搜索引擎優(yōu)化排名;

轉(zhuǎn)化率;

用戶(hù)參與;

用戶(hù)體驗(yàn);

資源的下載時(shí)間。

然而，如果遵循一些現(xiàn)代的技巧，圖像優(yōu)化過(guò)程可以加速以提高效率。ImageEngine憑借其在圖像優(yōu)化行業(yè)多年的經(jīng)驗(yàn)，精心挑選了一些可以在2021年及以后幫助企業(yè)的建議。

2021年完美的圖像優(yōu)化技巧

在這篇文章中，列出了優(yōu)化圖像的五大技巧，以幫助您最大化商業(yè)機(jī)會(huì)。所有的技巧包括全面的研究和多年的經(jīng)驗(yàn)支持的圖像優(yōu)化行業(yè)。

正確的格式很重要

在優(yōu)化過(guò)程中，選擇正確的圖像格式非常重要，因?yàn)槊糠N格式都是為了滿(mǎn)足特定的需求。

JPEG:最適合靜態(tài)圖像、真實(shí)圖像和復(fù)雜的著色;

PNG:最適合網(wǎng)頁(yè)圖像，如logo和平面圖像;

GIF:最適合低分辨率的圖片、動(dòng)畫(huà)、小圖標(biāo)和簡(jiǎn)單的圖片——但是，不建議使用GIF格式，而應(yīng)該使用mp4或webp格式;

TIFF:最適合高質(zhì)量和大尺寸打印圖形;

WebP:一種現(xiàn)代的圖像格式，在保持高質(zhì)量的同時(shí)提供優(yōu)越的壓縮。

選擇正確的格式可以減少帶寬消耗，提高網(wǎng)頁(yè)加載速度。然而，一種新的格式加入了這個(gè)俱樂(lè)部:AVIF，它涵蓋了上面所有圖像格式的優(yōu)良品質(zhì)，甚至超過(guò)了WebP，同時(shí)保持了出色的壓縮比。與JPEG格式相比，AVIF格式在大小上節(jié)省了近50%。

以下一代格式如WebP和AVIF提供圖像是最近的一個(gè)趨勢(shì)。

選擇圖像壓縮

一旦選擇了正確的格式，通過(guò)壓縮方法減小圖像的大小就變得非常重要。壓縮圖像有兩種方法:

無(wú)損壓縮:這種壓縮方法在不降低圖像質(zhì)量的前提下，去除與圖像鏈接的所有不必要的元數(shù)據(jù)。在網(wǎng)站或應(yīng)用程序上展示圖片時(shí)，元數(shù)據(jù)可以被安全刪除。

有損壓縮:在這種壓縮方法中，圖像的質(zhì)量略有降低，以實(shí)現(xiàn)較小的尺寸。有損轉(zhuǎn)換得到的文件大小低于無(wú)損壓縮，但是肉眼無(wú)法突出顯示原始圖像和有損壓縮圖像之間的區(qū)別。

不要跳過(guò)CDN

圖像優(yōu)化和圖像cdn是天作之合。網(wǎng)站圖像不僅需要優(yōu)化，但必須快速和容易交付以及。如果圖像不能快速傳輸，那么優(yōu)化后的圖像是沒(méi)有用的。圖像CDN(內(nèi)容交付網(wǎng)絡(luò))滿(mǎn)足了這一需求。它通過(guò)減少在線(xiàn)訪問(wèn)者和服務(wù)器之間的距離，使優(yōu)化圖像的快速傳遞成為可能。

全球形象CDN還有很多其他的好處，比如:

通過(guò)云加速實(shí)現(xiàn)全球快速覆蓋;

用戶(hù)細(xì)分(基于設(shè)備視口)變得容易;

它省去了在世界不同地區(qū)投資獨(dú)立服務(wù)器供應(yīng)商的需要，從而節(jié)省了許多成本;

降低服務(wù)器的負(fù)載，以降低交付成本;

安全的存儲(chǔ)容量。

ImageEngine精心設(shè)計(jì)的圖像CDN以其獨(dú)特的特征與其他的區(qū)別如下:

圖像優(yōu)化后，交付速度比市場(chǎng)上其他cdn快30%;

易于集成和配置ImageEngine CDN;

圖像自動(dòng)優(yōu)化為相關(guān)格式，根據(jù)用戶(hù)的視口大小;

圖像可提供下一代格式，如AVIF和WebP;

所傳送的圖像既縮小了尺寸(不論采用何種格式)，又有卓越的品質(zhì);

ImageEngine廣泛的全球CDN網(wǎng)絡(luò)提供了對(duì)HTTP, HTTP/2, WAF和DDoS保護(hù)的支持。

設(shè)置瀏覽器緩存

當(dāng)位置上沒(méi)有緩存規(guī)則，或者過(guò)期時(shí)間設(shè)置得過(guò)低時(shí)，“利用瀏覽器緩存”警告會(huì)顯示在谷歌PageSpeed Insights工具上。簡(jiǎn)單來(lái)說(shuō)，這個(gè)警告是一個(gè)提高網(wǎng)站速度的建議。

瀏覽器緩存指示訪問(wèn)者的瀏覽器將一些特定的文件保存在訪問(wèn)者的本地系統(tǒng)中，而不是重復(fù)下載它們。例如，訪問(wèn)者在第一次訪問(wèn)時(shí)需要下載一個(gè)網(wǎng)站的logo圖像。然而，在每次后續(xù)訪問(wèn)之后，這樣的訪問(wèn)者將從網(wǎng)站的本地緩存加載logo文件，前提是瀏覽器緩存已經(jīng)啟用。結(jié)果呢?更快的加載，因?yàn)樵L問(wèn)者不再需要從網(wǎng)站的服務(wù)器直接獲得一切。瀏覽器緩存可以用于圖像和許多其他類(lèi)型的文件，如統(tǒng)計(jì)資源和對(duì)象數(shù)據(jù)。

有很多方法來(lái)利用瀏覽器緩存，但簡(jiǎn)單地添加以下幾行代碼到.htaccess文件是最有效的一種:

瀏覽器緩存將圖像存儲(chǔ)在一個(gè)確定的時(shí)間間隔內(nèi)，以方便和快速訪問(wèn)。為此，可以遵循自定義時(shí)間線(xiàn)或行業(yè)標(biāo)準(zhǔn)。上面共享的代碼片段中的時(shí)間軸是一年。

htaccess文件可以在FTP程序的幫助下找到，以連接到網(wǎng)站服務(wù)器的根目錄。

禁用盜鏈

盜鏈?zhǔn)侵競(jìng)€(gè)人或企業(yè)復(fù)制屬于另一個(gè)網(wǎng)站的圖像的URL，并將其嵌入自己的網(wǎng)站。這導(dǎo)致圖像被顯示為一個(gè)擁有的內(nèi)容。盜鏈?zhǔn)前鏅?quán)侵犯的近鄰，但盡管如此，這種做法還是很普遍的。在許多情況下，盜鏈?zhǔn)菬o(wú)意的，但它可能會(huì)讓圖像的原始所有者付出一些錢(qián)。如果服務(wù)器的資源耗盡，它甚至?xí)绊懢W(wǎng)站的性能。

優(yōu)化松散的連接

如果一個(gè)網(wǎng)站有很多內(nèi)容和豐富的圖像提供，但訪問(wèn)該網(wǎng)站的一部分用戶(hù)沒(méi)有一個(gè)可靠的互聯(lián)網(wǎng)連接，那么這部分訪客不會(huì)轉(zhuǎn)換。這種情況和失去商業(yè)機(jī)會(huì)沒(méi)有什么不同。并非所有網(wǎng)站訪客都能使用快捷可靠的互聯(lián)網(wǎng)設(shè)施;因此，建議為不穩(wěn)定的連接優(yōu)化圖像內(nèi)容。

一個(gè)值得信賴(lài)的優(yōu)化慢速連接圖像的方法是實(shí)時(shí)適當(dāng)?shù)貕嚎s圖像。然而，即使在壓縮圖像之前，重要的是確定訪問(wèn)頁(yè)面的用戶(hù)的網(wǎng)絡(luò)速度，然后根據(jù)連接類(lèi)型(如4G、3G、2G或慢2G)將它們分類(lèi)到桶中。

但是ImageEngine簡(jiǎn)化了整個(gè)壓縮過(guò)程。它直接從URL獲取并優(yōu)化圖像的正確格式，尺寸和質(zhì)量，然后通過(guò)全球圖像CDN在網(wǎng)站的前端交付這樣的圖像。

處理響應(yīng)圖像

很多流量來(lái)自移動(dòng)設(shè)備，因此，有一個(gè)完美的策略來(lái)響應(yīng)圖像是很重要的。

如果正在使用基于矢量的圖像，那么使用SVG格式將是一種很好的方法，可以針對(duì)任何視圖優(yōu)化圖像，而不必?fù)?dān)心大小，因?yàn)镾VG圖像與分辨率無(wú)關(guān)。

使用媒體查詢(xún)背景圖像或通過(guò)CSS生成的圖像是向移動(dòng)設(shè)備顯示較小圖像的最佳方式。

對(duì)于內(nèi)聯(lián)圖像，可以使用srcset屬性或picture元素等技術(shù)。

srcset屬性:該屬性可以在img元素上實(shí)現(xiàn)，用于定義不同大小的圖像，以便瀏覽器可以根據(jù)設(shè)備特征(如寬度)選擇最佳選項(xiàng)。

圖片元素:如果需要根據(jù)設(shè)備的顯示尺寸顯示不同的圖片，最好使用圖片元素。

上述所有討論的選項(xiàng)提供了不同的方式顯示優(yōu)化的圖像，以游客取決于他們?nèi)绾尾榭淳W(wǎng)站。可以參考MDN的響應(yīng)式圖像指南和谷歌開(kāi)發(fā)者的圖像指南，了解更多關(guān)于響應(yīng)式圖像和使用圖片元素或srcset屬性的知識(shí)。

響應(yīng)的圖像

圖像需要響應(yīng)，以提供正確的最佳圖像的每個(gè)屏幕大小。它增強(qiáng)了用戶(hù)體驗(yàn)并減少了加載時(shí)間。根據(jù)查看圖像的瀏覽器或設(shè)備，顯示不同大小的圖像，如全尺寸、縮略圖或特色圖像。要?jiǎng)?chuàng)建響應(yīng)式映像，您需要該映像的不同版本。

問(wèn)題在于優(yōu)化高分辨率圖像，使其在移動(dòng)設(shè)備上顯示的細(xì)節(jié)看起來(lái)很棒;細(xì)節(jié)可能會(huì)被忽略，因此，與其縮小圖像細(xì)節(jié)，不如考慮為移動(dòng)設(shè)備裁剪或縮小圖像。

響應(yīng)圖像的優(yōu)點(diǎn):

提高頁(yè)面加載速度;

通過(guò)智能手機(jī)響應(yīng)式設(shè)計(jì)增加你的覆蓋面;

通過(guò)持續(xù)的用戶(hù)體驗(yàn)提高轉(zhuǎn)化率和銷(xiāo)售額;

減少服務(wù)器負(fù)載和服務(wù)器內(nèi)存;

促進(jìn)對(duì)話(huà)。

客戶(hù)端提示

客戶(hù)端提示的基本原理很簡(jiǎn)單——客戶(hù)端通過(guò)設(shè)備向服務(wù)器發(fā)送一些關(guān)于需求的提示。負(fù)責(zé)的服務(wù)器根據(jù)提示為他們提供正確的資源。例如，通過(guò)提示，瀏覽器向服務(wù)器請(qǐng)求設(shè)備布局的600px圖像——根據(jù)請(qǐng)求的參數(shù)提供的圖像。即使客戶(hù)端通知啟用了數(shù)據(jù)保護(hù)模式，服務(wù)器也會(huì)提供輕量級(jí)版本的相同圖像。瀏覽器和服務(wù)器通過(guò)客戶(hù)端提示交互，作業(yè)變得可讀，更短，功能相同。

客戶(hù)端提示ImageEngine

ImageEngine提供所需的圖像寬度、DPR和數(shù)據(jù)保護(hù)程序。響應(yīng)映像是基于關(guān)于寬度和DPR的客戶(hù)機(jī)提示創(chuàng)建的，稍后還會(huì)涉及到數(shù)據(jù)保護(hù)程序客戶(hù)機(jī)提示。

優(yōu)化視網(wǎng)膜顯示的圖像

蘋(píng)果公司創(chuàng)造了“視網(wǎng)膜顯示”這個(gè)術(shù)語(yǔ)，即顯示清晰且密集的像素，在適當(dāng)?shù)挠^看距離提供完美的視覺(jué)?，F(xiàn)在，大多數(shù)智能手機(jī)和臺(tái)式機(jī)都為用戶(hù)提供了一種高度簡(jiǎn)潔的瀏覽體驗(yàn)。蘋(píng)果視網(wǎng)膜在相同的空間中壓縮了4倍的像素，使屏幕密度達(dá)到每英寸326像素(PPI)，使顯示更加流暢。

為什么優(yōu)化視網(wǎng)膜圖像?

平均屏幕像素密度非常低，因此基于web的標(biāo)準(zhǔn)圖像需要包含72ppi來(lái)覆蓋一定的高度和寬度。

我們需要保持適當(dāng)?shù)南袼孛芏?。否則，圖像將填塞或拉伸。結(jié)果，一個(gè)模糊的圖像被創(chuàng)建與鋸齒邊緣，分散觀眾從你的品牌。為了解決這個(gè)問(wèn)題，視網(wǎng)膜類(lèi)顯示器開(kāi)始發(fā)揮作用。它們提高了圖像分辨率，在小空間中優(yōu)化了高像素密度，甚至在大屏幕上體面地顯示圖像。

如今，人們用不同的設(shè)備進(jìn)行瀏覽;大多數(shù)用戶(hù)通過(guò)智能手機(jī)而不是臺(tái)式電腦訪問(wèn)圖片。所以你需要優(yōu)化視網(wǎng)膜顯示的圖像。

包裝起來(lái)

有許多技巧和技巧來(lái)優(yōu)化圖像，但在所有這些技巧中，使用CDN已被證明是全球許多企業(yè)最有效和長(zhǎng)期的解決方案。映像cdn自動(dòng)優(yōu)化流程，使業(yè)務(wù)正確地專(zhuān)注于其核心活動(dòng)。好的一面是，整合image CDN并不都是昂貴的。它很容易開(kāi)始并在很短的時(shí)間內(nèi)生成結(jié)果。