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

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

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

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

頁面加載速度;

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

轉(zhuǎn)化率;

用戶參與;

用戶體驗;

資源的下載時間。

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

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

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

正確的格式很重要

在優(yōu)化過程中，選擇正確的圖像格式非常重要，因為每種格式都是為了滿足特定的需求。

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

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

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

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

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

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

以下一代格式如WebP和AVIF提供圖像是最近的一個趨勢。

選擇圖像壓縮

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

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

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

不要跳過CDN

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

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

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

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

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

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

安全的存儲容量。

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

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

易于集成和配置ImageEngine CDN;

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

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

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

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

設(shè)置瀏覽器緩存

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

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

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

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

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

禁用盜鏈

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

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

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

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

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

處理響應(yīng)圖像

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

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

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

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

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

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

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

響應(yīng)的圖像

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

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

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

提高頁面加載速度;

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

通過持續(xù)的用戶體驗提高轉(zhuǎn)化率和銷售額;

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

促進(jìn)對話。

客戶端提示

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

客戶端提示ImageEngine

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

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

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

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

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

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

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

包裝起來

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