Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
2
Help us understand the problem. What is going on with this article?
@citron1605

Gatsby-imageプラグインを導入して画像の読み込みを早くする

gatsby-imageとは

gatsby-imageとは、画像読み込みを最適化してくれるGatsbyのブラグインです。

Webサイトにおいて画像読み込みの最適化は手間がかかりますが、それらをいい感じにやってくれます。

gatsby-imageを使用すると↓

gatsby-picture.png
画像元

これだけ画像のサイズや読み込み速度が変わります。

gatsby-imageを導入すれば、サイトが速くなること間違いなさそうです。

gatsby-imageがしていること

gatsby-imageは、ビルド時に以下の6つのことを行い画像の最適化をしています。

1, 画像サイズや解像度を最適化
与えられたクエリを元に、画像をsourceから取得し、そのクエリを元に画像の変換や加工をします。

2, PCやスマホのサイズに対応した画像を別々に生成
疑似要素のpaddingを使って画像のアスペクト比を変更します。

3, PCやスマホに対応した画像をデバイス毎に表示
srcsetを指定してデバイス毎に表示する画像自体を切り替えています。

4, 画像をレンダリングする前に軽量なダミー画像を生成&表示
ビルド時に画像からトレースしたSVG画像を生成します。本画像が表示されるまで軽量なSVG画像を表示しておきます。本画像がloadされると切り替わります。

5, Base64でinline化 (base64とは )
画像をBase64に変換してinline化します。HTTPリクエスト回数を減らすために行います。

6, 画像からメタデータを削除
画像からメタデータを削除します。

これら 全て をgatsby-imageプラグインがやってくれます。

通りで画像の表示が速いわけです。

gatsby-image化した画像は一旦ぼやけた後、素早く綺麗な画像を表示しています。
これは、ビルド時に画像からトレースした軽量なSVG画像をとりあえず表示して本画像が読み込まれるまで待ってるのでこのような画像の表示になります。

ふわっと画像が出てる感じが個人的にはいいなと思います(笑)

gatsby-imageのデメリット

AMP対応が難しい

AMPとは↓

AMP(Accelerated Mobile Pages、アンプ)は携帯端末向けサイトの閲覧を高速化し、ユーザー体験を向上させることを目的に、Googleが中心になって2015年に立ち上げたプロジェクトです。
現時点ではTwitterやGoogleの検索結果などではAMPページが優先的に表示されます。
GoogleはAMPの導入を推奨しているため、将来的にはAMPを導入したサイトがSEOの面で恩恵を受けられることが考えられます。
AMPとは?

gatsby-imageは画像をBase64でinline css(background-image)として展開します。そのため、tagの長さに制限があるAMPの制約を満たしてくれません。

現状ではgatsby-imageの使用とAMP対応を同時に行うのは難しいようです。

どうしてもAMPに対応したいなら、gatsby-imageを取り除いて↓を
画像サイズや解像度を最適化
PCやスマホのサイズに対応した画像を別々に生成
PCやスマホに対応した画像をデバイス毎に表示
画像をレンダリングする前に軽量なダミー画像を生成&表示
Base64でinline化
画像からメタデータを削除
自作すればいいようです。(笑)

まとめ

gatsby-image化された画像は表示が速い

しかし、AMP化と並行してできない問題点もあります。

今後、SEOで検索順位を上げていきたいとか、ユーザビリティを上げたいならWebサイトのAMP対応が必要になると思います。

個人的に、スマホからのサイトへのアクセスが多いのでAMP対応を優先した方がいいのかなと思ったりもします。ユーザーのサイト直帰率の減少とユーザー満足度の向上が見込めそうですし...

引用

AMP
画像

2
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
citron1605
弓道部専用のwebアプリHiRateを開発しています。研究は深層学習を用いて、てんかん波の検出を行ってます。釣りとお酒が好きです🥃
admin-guild
「Webサービスの運営に必要なあらゆる知見」を共有できる場として作られた、運営者のためのコミュニティです。

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
2
Help us understand the problem. What is going on with this article?