imgixによる画像サイズの出し分けをpictureタグで対応する

imgix

2021/08/23

りゅーそう

この記事は公開後、1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

https://prtimes.jp/main/html/rd/p/000000005.000062982.html

imgixを使用すればレスポンシブ対応など様々な画像の配信・加工を簡単に行うことが出来ます。今回はhtmlの picture タグと組み合わせて、デバイスサイズに合わせて画像を配信する方法を紹介します。

microCMSは画像管理をimgixを経由して行っているため、画像URLにパラメーターを付与することでimgixの機能を最大限に活用することが出来ます。
imgixの機能の全容は以下のドキュメントをご覧ください。
https://imgix.com/solutions

imgixの紹介

公式サイト：https://imgix.com/

imgixはアップロードした画像に様々な加工・最適化するCDNです。公式サイトのトップページをご覧いただくと、パラメーターを付与することで様々な加工が出来ることが分かるかと思います。
imgixの画像ホスティング先に「AWS S3」「Google Cloud」「Web holder」などを指定し、imgixを経由して利用することでimgix上の機能を利用することが出来ます。
そういった意味ではmicroCMSのメディア管理もimgixの画像アップロード先と考えることが出来ます。
microCMSのプランではimgixの利用料金も含まれているので、気軽に試すことが出来ます。

imgixを試してみる

まずはimgixの使用方法を理解するために、imgix自体からの画像アップロードを試してみます。
登録・ログインして、imgixを体験してみましょう。

画像アップロード先等を設定します。サブドメインなどを設定することも出来ます。

ログイン後、images画面で画像アップロードなどを行うことが出来ます。
各画像詳細に記載されているのが画像配信URLです。

これをHTMLの img タグのsrcなどに設定することで、画像を呼び出すことが出来ます。

  <img src="https://example.imgix.net/kyoto.JPG" alt="京都の桜の画像" />

以下が実行結果です。

元の画像データサイズが大きすぎたため、画面には一部しか表示されていません....。このような時、CSSで width height を指定することで任意のサイズで画像を表示することが出来ます。
しかし、それはパフォーマンスの観点からおすすめ出来ません。また解像度が適切ではない画像を配信してしまうことになります。

imgixにパラメーターを付与することで、最適化を行ってから画像を配信することが出来ます。
width height を指定するには以下のようにパラメータを設定します。

<img src="https://example.imgix.net/kyoto.JPG?h=600&w=600" alt="京都の桜の画像" />

良い感じに表示されました！このように様々なパラメーターを付与することで、最適な形式で画像を配信できるのがimgixの魅力です。
そのほかのパラメーターはドキュメントをご覧ください。aspect比を調整したり、文字を入れたり様々なことが出来ます！！
https://docs.imgix.com/

pictureタグでレスポンシブ対応を行う

前章で述べた最適な画像サイズは、デバイスの画面サイズによって異なります。
ここでは、デバイスサイズに応じた画像を配信する方法を紹介します。これはHTMLの picture タグを使用することによって、実装することが出来ます。

詳細はMDNをご覧ください。
MDN <picture>: 画像要素

以下のように設定することでデバイス幅に合わせた画像サイズで配信することが出来ます(デバイスサイズなどは一例です。altタグなど省略しています)。

      <picture>
        <source
          srcSet="https://example.imgix.net/kyoto.jpg?h=1200&w=1000"
          media="(min-width: 1000px)"
        />
        <source
          srcSet="https://example.imgix.net/kyoto.jpg?h=1000&w=800"
          media="(min-width: 800px)"
        />
        <img src="https://example.imgix.net/kyoto_sakura.jpg?h=800&w=600" />
      </picture>

picture タグに対応していないブラウザや source の条件などに当てはまらなかった場合には通常の img タグの画像が読み込まれます。
source の media 属性に条件を設定することによって、その条件に合致した画像をimgixを経由して取得します。これは画面サイズによって出力するサイズを変更するサンプルです。
このように画面サイズによって適切なサイズや画像を設定することが出来ます。

出力結果

デバイスサイズ1000px以上

デバイスサイズ800px以上

デバイスサイズ800px以下(配信画像も桜のみの画像に変更)

他にもブラウザ判定やWebPなどの次世代フォーマットの出しわけなど、様々なケースで使用することが可能です。

microCMSとimgix

先に述べた通り、microCMSはimgixを経由して画像を管理しています。ですので、上記のような機能をmicroCMSで管理している画像でも活用出来ます。

画像フィールドをもつコンテンツ(API)を作成し、APIプレビューを実行してみましょう。
画像フィールドの url というパラメータにファイルの配信URLの値があるので、こちらのURLにimgixに対応したパラメーターをフロントエンド側で追加することによって、画像の最適化などを行うことが出来ます。

実際にはコンテンツAPIを叩いて image.url を取得し、その末尾に?w=600&h=400 のようなパラメータを付与するというような実装が考えられます。

このようにimgixは画像最適化・加工を行う上で便利な機能が多くあります。
imgixの便利な機能を実感して頂けたら幸いです。
ぜひ、お試しください！！

-----

microCMSは日々改善を進めています。
ご意見・ご要望は管理画面右下のチャット、公式Twitter、お問い合わせフォームからお気軽にご連絡ください！
引き続きmicroCMSをよろしくお願いいたします！