microCMS

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

エンジニアリング
野﨑 洋平

こんにちは。
microCMSは先日、米国imgix社に日本企業として初めてパートナーに認定されました。
以下はその際のプレスリリースです。

microCMSは日本の企業として初めて米国imgix社(以下 「imgix」)が提供するリアルタイム画像処理CDNサービス「imgix」のサービスパートナーおよびコンテンツ管理パートナーに認定されました。

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 タグの画像が読み込まれます。
sourcemedia 属性に条件を設定することによって、その条件に合致した画像を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をよろしくお願いいたします!

ABOUT ME

野﨑 洋平
1994年生まれ。ネット上では「りゅーそう」という名前で活動。 前職は高校地理歴史科教員。社内(校内?)の働き方改革を進めるためにプログラミングを独学する。2021/9〜microCMS入社。React/TypeScriptが好き。愛猫/愛犬家。

microCMSとは

  1. 開発者、編集者どちらも分かりやすい管理画面

  2. 細かな権限管理や豊富な外部サービス・データ連携

  3. 安心の日本製・日本語でのチャットサポート