低像素佔位圖片 (Low quality image placeholder)
前言
有時候我們會發現,單我們載入網頁的時候,圖片並不會馬上就讀取成功。我們可以欣賞到圖片重上到下,逐行生成的過程。一般來說,你當然不希望發生這種尷尬的情形。你希望使用者可以永遠看到網頁最美的一面。
我們可以使用 Web API 原生的 Lazy loading 來加快圖片的載入。現在的高清圖片動輒幾個mb,就算經過壓縮,圖片也可能接近一個 mb。針對這些需要花時間載入的圖片,我們可以做點什麼呢?
Progressive Image
據我所知,JPEG 圖片分成 non-progressive 還有 progressive 圖片。Non-progressive 的圖片,簡單來說,就是我們平常看到的圖片,圖片會逐行像素生成,所以當圖片載入的時候,我們會看到大片空白。
Progressive 圖片會快速載入整張圖片的底層像素,這時候圖片會以低像素呈現。接下來,圖片會持續載入剩餘的像素,並漸漸提高畫質直到整張圖片完成載入。
如果你想要更詳細了解兩者的分別,你可以在 Google 上搜尋 “jpeg progressive image” 來找到更多資料,或在 Youtube 上觀看影片,來直接查看相關影片。
用 Progressive Image 可以在某種程度上解決相片載入的問題,但你也可以使用另一個方案。
Low Quality Image Placeholder (LQIP)
LQIP 在圖片載入的時候,會使用同一張圖片的極低像素版本來佔位,直到原始圖片完整載入後,才會顯示原始圖片。
以下是我寫的一個 React Image Loading Component,簡而言之,這就是一個 LQIP 工具。
import React, { useEffect, useRef, useState } from "react"; interface ImageLoaderProps { placeholderImgSrc: string; realImgSrc: string; } /** * * @param {Object} props * @property {String} props.placeholderImgSrc * @property {String} props.realImgSrc * @returns {JSX.Element} Component */ const ImageLoader: React.FunctionComponent<ImageLoaderProps> = ({ placeholderImgSrc, realImgSrc }: ImageLoaderProps) => { const [blur, setBlur] = useState(true); const realImageRef = useRef<HTMLImageElement>(null); function handleLoadEvent() { setBlur(false); } useEffect(() => { const imageElement = realImageRef.current; if (imageElement) { if (imageElement.complete) { handleLoadEvent(); } imageElement.addEventListener("load", handleLoadEvent); return () => { imageElement.removeEventListener("load", handleLoadEvent); }; } }, []); return ( <div className={`image-container ${blur ? "blurred" : "not-blurred"}`}> <img alt="" className="placeholder-image" src={placeholderImgSrc} /> <img ref={realImageRef} alt="" className="real-image" src={realImgSrc} /> </div> ); }; export default ImageLoader;
想要看完整的 Code Sandbox 範例,可以看這裡。
如何製造低像素相片
觀看範例,我們會發現,我們會需要一張原圖的低像素版本。
製作方法很簡單,我們可以用任何一個圖片編輯器。一般來說,我們在網路上搜尋 "photo resize online" ,隨便選一個搜尋結果的圖片編輯器即可。
接下來我們只要把原圖等比縮小到一個極小的尺寸(比如從 1000 * 1000 縮小到 30 * 30),就完成了我們的低像素圖片。原理是,當你把一張很小的圖片,放在一個很大的框框 (e.g. image container),當圖片填滿整個框框的時候,圖片就會呈現一種低像素的感覺。
這個時候,我們只要在佔位圖片 (placeholder)上加一層 CSS 模糊濾鏡,我們就完成了我們的 LQIP。
如果這篇文章有幫的上忙,請幫忙點讚,追蹤及分享。
我是老虎!
Happy Coding !
Reference
喜欢我的作品吗?别忘了给予支持与赞赏,让我知道在创作的路上有你陪伴,一起延续这份热忱!
- 来自作者
- 相关推荐