低像素佔位圖片 (Low quality image placeholder)

TigerCodingStudio
·
·
IPFS
·
網頁圖片載入緩慢,載入的圖片還會顯示尷尬的空白,這些問題既影響美觀還降低使用者的體驗。如果你也遇過這些問題,不妨試試看低像素佔位圖片(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

  1. https://stackoverflow.com/questions/51296701/how-to-replace-a-low-resolution-background-image-with-a-better-one-once-the-high
  2. https://medium.com/hd-pro/jpeg-formats-progressive-vs-baseline-73b3938c2339
CC BY-NC-ND 2.0 授权

喜欢我的作品吗?别忘了给予支持与赞赏,让我知道在创作的路上有你陪伴,一起延续这份热忱!