画像遅延読み込みに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属性対応も早く来てほしいなぁ。

参考


Related #next.js

FigmaでSVG Octocatを作る その3

アウトライン化大事

_this.auth.addAuthTokenListener is not a function

8.6.5にダウングレードした

Next.jsのPreview Mode時はAnalyticsを無効化する

cookieの__next_preview_dataキーで判定

PWAアプリにクイックショートカットを追加する

manifest.jsonにshortcutsを追加