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

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

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

圖像優(yōu)化是一個以適當的格式、大小和分辨率提供優(yōu)質圖像的過程，同時保持壓縮大小。如果做得好，圖像優(yōu)化不僅能提高網站的性能，還能提高其他一些指標，如:

頁面加載速度;

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

轉化率;

用戶參與;

用戶體驗;

資源的下載時間。

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

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

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

正確的格式很重要

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

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

PNG:最適合網頁圖像，如logo和平面圖像;

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

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

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

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

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

選擇圖像壓縮

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

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

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

不要跳過CDN

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

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

通過云加速實現全球快速覆蓋;

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

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

降低服務器的負載，以降低交付成本;

安全的存儲容量。

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

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

易于集成和配置ImageEngine CDN;

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

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

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

ImageEngine廣泛的全球CDN網絡提供了對HTTP, HTTP/2, WAF和DDoS保護的支持。

設置瀏覽器緩存

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

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

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

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

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

禁用盜鏈

盜鏈是指個人或企業(yè)復制屬于另一個網站的圖像的URL，并將其嵌入自己的網站。這導致圖像被顯示為一個擁有的內容。盜鏈是版權侵犯的近鄰，但盡管如此，這種做法還是很普遍的。在許多情況下，盜鏈是無意的，但它可能會讓圖像的原始所有者付出一些錢。如果服務器的資源耗盡，它甚至會影響網站的性能。

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

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

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

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

處理響應圖像

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

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

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

對于內聯圖像，可以使用srcset屬性或picture元素等技術。

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

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

上述所有討論的選項提供了不同的方式顯示優(yōu)化的圖像，以游客取決于他們如何查看網站。可以參考MDN的響應式圖像指南和谷歌開發(fā)者的圖像指南，了解更多關于響應式圖像和使用圖片元素或srcset屬性的知識。

響應的圖像

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

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

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

提高頁面加載速度;

通過智能手機響應式設計增加你的覆蓋面;

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

減少服務器負載和服務器內存;

促進對話。

客戶端提示

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

客戶端提示ImageEngine

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

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

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

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

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

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

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

包裝起來

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