画像遅延読み込みにlazysizesを使う

ここ最近はTailwind CSSやnext/imageを使うことが増え、lazysizesの代わりにimgタグのloading属性を使うことが増えていた。

ただ、ネイティブのloading属性はまだSafariが対応していないこともあり、未対応ブラウザで多数の画像を表示する場合に無駄な画像読み込みが発生してしまう。

そこでlazysizesを使ってSafariでも画像遅延読み込みに対応させることにした。

以前の記事でもlazysizesで画像を遅延読み込みさせるというのを書いたが、改めて導入手順をまとめておく。

以前の記事はソースコードをダウンロードして設置していたが、今回はnpm packageを利用することにした。

yarn add lazysizes

lazyloadオプションを受け取れるImageコンポーネントを作成。

lazyload時は画像読み込みが完了するまでの代替画像として1px x 1pxの透過png画像を読み込ませるようにしておく。

ls.attrchange プラグインはReactやVueを使う場合には必須。（参考）

import 'lazysizes'
import 'lazysizes/plugins/attrchange/ls.attrchange'

type Props = {
  path: string
  alt: string
  lazyload?: boolean
}

export const Image = ({ path, alt, lazyload = false }: Props) => {
  const className = lazyload ? 'lazyload' : ''
  const src = lazyload ? "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=" : path

  return (
    <img
      src={src}
      data-src={path}
      alt={alt}
      className={className}
    />
  )
}

これでChromeだけでなくSafariでも画像遅延読み込みができるようになった。

Safariのloading属性対応も早く来てほしいなぁ。

参考

• aFarkas/lazysizes
• Transparent PNG Pixel Base64 Encoded