低像素佔位圖片 （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