簡(jiǎn)談Web前端針對圖片顯示的優(yōu)化方案

　　"淺談Web前端針對圖片顯示的優(yōu)化方案3"

　　他們選擇圖片的一種主顏色，并用其作為占位塊的背景色。這樣做會(huì )給用戶(hù)一種圖片加載速度更快的體驗。

　　更先進(jìn)的方法：.的200 byte技術(shù)

　　年初.發(fā)表過(guò)一篇"The technology behind preview photos"的文章，這篇文章主要說(shuō)明如何預覽一個(gè)沒(méi)有JPEG頭的42 * 42px的圖片。 使用場(chǎng)景有些不同，這“圖片”被用于.的手機端，它知道如何組成一個(gè)有效的JPEG圖片。此處我們在Web端使用的話(huà)需要編寫(xiě)JavaScript代碼，這樣做同樣會(huì )增加存儲資源。當然我們可以通過(guò)在服務(wù)器端組成這個(gè)圖片解決這一問(wèn)題，但是這樣仍需要一些JavaScript代碼發(fā)送申請圖片資源的請求。

　　無(wú)論如何，這個(gè)方法對于Web端來(lái)說(shuō)有點(diǎn)大材小用，但我還是希望能夠將其作為一個(gè)參考。Using WebP for generating this preview images同樣可以節省內存，并且不需要使用如此創(chuàng )造性的解決方法。

　　LQIP: Low Quality Image Placeholders

　　與其等待最終的圖像呈現,我們可以先提供一個(gè)高度壓縮的圖片,然后切換到大圖。這就是LQIP方法的思路。這一方法與Medium相似，不過(guò)是使用相同尺寸，但壓縮更高的圖片。

　　總結

　　隨著(zhù)頁(yè)面加載的圖片越來(lái)越多，需要勤于思考頁(yè)面的加載過(guò)程。因為這會(huì )影響加載效率和用戶(hù)體驗。 如果你生成幾個(gè)縮略圖大小的圖片，你可以實(shí)驗使用一個(gè)非常小的圖片作為背景，等待最終圖片被加載出來(lái)。

【簡(jiǎn)談Web前端針對圖片顯示的優(yōu)化方案】相關(guān)文章：

web前端應聘自我介紹02-25

網(wǎng)站圖片優(yōu)化的技巧08-22

web前端實(shí)訓總結（通用6篇）02-02

網(wǎng)站圖片seo優(yōu)化的細節08-19

SEO圖片優(yōu)化解析01-11

網(wǎng)易web前端開(kāi)發(fā)師面試問(wèn)答的經(jīng)歷08-19

web前端學(xué)習心得體會(huì )范文01-09

電商網(wǎng)站的圖片怎么優(yōu)化08-20

web前端開(kāi)發(fā)工程師工作的崗位職責01-23

web前端工程師實(shí)習心得體會(huì )09-29