TechBlog結局レスポンシブデザインでは何種類のサイズの画像を用意すればいいか概要ウェブサイトの表示速度はSEOに大きな影響を与えます。その中でも今回はウェブページの要素の中で大きな容量を占める画像サイズにフォーカスします。表示する領域に適切なサイズの画像でないと、小さすぎる場合はぼやけてしまい、大きすぎる場合は無駄に画像データを転送することになり表示に時間がかかります。参考リンクPR目的ウェブサイトの表示速度はSEOに大きな影響を与えます。updateと呼ばれるアルゴリズムによって、ウェブページのリクエストから表示までのパフォーマンスが重要視されています。ページの読み込み速度をモバイル検索のランキング要素に使用しますまたモバイルのトラフィックがインターネットのトラフィック全体の半分以上を占め、また表示が遅いと直帰率が上がります。これは関連する記事を見てもらいたいメディアや、商品を購入してもらいたいECサイトではウェブページの表示の遅さ見過ごすことはできません。speed今回は、ウェブページの要素の中で大きな容量を占める画像サイズにフォーカスします。ウェブページの表示領域に適切なサイズの画像でないと、小さすぎる場合はぼやけてしまい、大きすぎる場合は無駄に画像データを転送することになり表示に時間がかかってしまいます。レスポンシブデザインや、Macに搭載されているRetinaディスプレイなどの高い解像度のディスプレイの場合、一体どの種類の画像を用意するべきか混乱しやすいため、どのサイズの画像を用意するべきか整理します。対象読者WebサイトやWebシステムのSEO・パフォーマンスに興味があるプロダクトオーナー、ソフトウェアエンジニア、FigmaやXDでデザインを行うデザイナPRUZUMAKIではアジャイル開発で新規事業の開発から、大規模Webアプリケーションのアーキテクチャ更新などの開発をしています。お問い合わせはUZUMAKIのHPのお問合せフォームから株式会社UZUMAKIUZUMAKI(うずまき)はエンジニア・デザイナー・ディレクターで構成されるギルド型開発チーム。成長するWebサービスやアプリのリニューアル・リファクタリングに強みがあります。高解像度ディスプレイ(Retinaディスプレイ)とは近年のiPhoneやmacに搭載されているディスプレイは、Retinaディスプレイといい、1インチあたりのピクセル(ドットの数)が通常のディスプレイのN倍となっています。Proの場合は9倍)。AndroidにもiPhoneの様に高解像度ディスプレイのものが当たり前のようにあり、ハイエンドなWindowsのPCもWindows10から高DPIスケーリングという機能でmacのRetinaディスプレイと同等の対応が必要です。ちなみにこの位置インチあたりのドットの数をPPIやDPIといい、ディスプレイの解像度の文脈では場合は同じ意味です。ピクセル比(または疑似解像度)を表し、実際の画面のピクセル数と、ソフトウェア上で計算されるピクセル数の比を表します。大雑把に実践的な言葉で表現するならば、デバイスピクセル比で掛けたサイズの画像を用意しないとぼやけてしまうということです。PCPCの場合は、実際の解像度とディスプレイの表示設定によって1ピクセルあたりの何ピクセル分の画像を表示するかが決まります。1,920ピクセルとなっています(下記画像左下参照)。Windowsも同様に、Windows10から高DPI対応というものがあり、Surfaceなどは高解像のディスプレイのものは推奨サイズが200%を推奨サイズとされています。多くのユーザはこの解像度設定をデフォルトで使っていると仮定すると、下記の表の様に高解像度ディスプレイ向けに表示する領域の2倍の画像を用意する必要があります。1,664モバイルiPhoneやハイエンドなAndroidのデバイスピクセル比は2-4と、最低でも表示する領域の2倍の画像を用意する必要があります。デバイスピクセル比が3倍や4倍の画像が小さいモバイルの画面上で本当になのかどうか、後述の比較のサンプルを各人の端末で確認してください。360その他iOSの端末のデバイスピクセルやポイント数はこちらのサイトがまとまっています。ResolutionsHTMLでデバイスピクセル比をどの様に処理するか下記のURLで固定の画面幅で1〜3倍のサイズの画像を表示している。デバイスピクセル比の2以上の端末で動作を確認してみてください。macのRetinaディスプレイの場合、1倍の画像だと若干ぼやけて見えます。これが文字を含んでいるとフォントが霞んで見えるのが顕著である。文字が滲んだ画像のウェブサイトを見かける場合はこれが原因です。ディスプレイ解像度ごとの画像確認codepen.ioこの表示領域に対して適切なサイズの画像を表示する方法は、<img>タグのsrcset属性と<picture>タグを使い複数の解像度の画像ソースを用意してブラウザに適切な画像を選択させる方法があります。今回は<image>タグのsrcset属性を使った例を使います。この機能は実質的にどのブラウザでも機能しているいってよいでしょう。万一srcsetが対応していない場合もsrc属性で定義した画像を表示する仕組みなので問題ありません。4xなどデバイスピクセル比に対応した画像を定義してあげるとブラウザが自動的に最適な画像をロードして画面に表示します。srcsetで用意した画像をブラウザが全部DLして余計なデータ通信を行いません。このコードのサンプルも先程と同じリンク先の下の方にスクロールすると確認できます。Proで確認すると3xの画像を使用していることを確認できます。2xまでの画像を用意して、3xを用意していない場合にデバイスピクセル比が3の端末で表示した場合は、ブラウザはsrcsetで定義されている中で一番解像の高い2xの画像を自動的に選択してくれるので安心です。proで2xの画像と3xの画像を見比べたときにそれほど差を感じなかったので、運用の手間を考えると2021年現在では2xの画像まで用意して置くだけでも良いかもしれません。画面幅いっぱいに表示したり囲まれた領域の幅のいっぱいに画像を表示する場合は、表示する対象のデバイスの横幅に最適な画像でないとぼやけたり、表示領域に大きすぎる画像をロードする事になってしまいます。※レスポンシブサイトの場合、画面幅いっぱいに表示する画像や、下記のようにPCで表示する2列で表示するが、モバイルで表示すると1列で表示するような場合があります。2xではなく、wを使ったウインドウサイズを使います。ウインドウサイズはブラウザが実際に表示しているデバイスのピクセル数だと考えると理解しやすいです。デバイスピクセル比が2のデバイスの場合、見た目上320ピクセルの領域が表示されているので、使用さされる画像は320x2の640wがそれに当たります。PCの場合は開いているブラウザの画面幅が予測できないので、適当なウインドウサイズの画像を用意してブラウザに自動的に最適な画像を選択させるようにします。toolsなどのデバッグツールのnetworkを開きながら画面幅をだんだん広くしていくと自動的に最適な横幅いっぱいの画像がロードされるのを確認できます。この様にレスポンシブに真摯に対応しようとするとレスポンシブ向けに画像を沢山用意するのは面倒すぎる。cloudinary社が提供するレスポンシブサイト用の画像を自動生成してくれる下記のようなサービスを利用するが良いでしょう。写真のような細かい画像ではなく、シンプルなイラストやアイコンではベクター形式のSVGを積極的に使うと多数の画像ファイルを用意する必要がなくて良いでしょう。表示する画像のサイズが同じでもデバイスピクセル比が違うディスプレイの場合は表示サイズの2倍(場合によっては3倍、4倍)の画像を必要とすることがわかりました。レスポンシブ対応において画面幅いっぱいの画像を適切なサイズを用意するためには、複数枚用意する必要がありかなり手間が発生してしまいます。この問題を作業の手間を縮小化するため、フロントエンドのライブラリであるNext.jsを用いて実際に動作確認しました。10以上)では動的に生成する手段が提供されています。Next.jsのImageライブラリはレスポンシブ画像やデバイスピクセル比に対応した画像を動的生成Next.jsではImageコンポーネントで<img>タグを、srcset属性を用いたHTMLを生成することができ、その対象の画像についても動的に生成する事ができます。動的に画像を生成する際に画像の圧縮率高いWebP対応のブラウザからのリクエストでは、WebP形式の画像を生成して返します。同じリクエストが来た際にもキャッシュを利用して画像生成のコストを下げる機能もあります。3840w">srcset中の640から3840wという区切りは、Next.jsのデフォルトの設定に則っています。設定ファイルで変更はできますが、設計者が考え抜いて設定されていると思われるので強いこだわりがなければデフォルトの設定で良いでしょう。万能に見えるNext.jsのImageコンポーネントですが、現在のところコンパイル時に静的に画像を生成しておくことはできません。使うためにはCloudinaryを始めURLで画像を生成するサービスを利用する必要があります。Next.jsを開発している最近流行りのVercelにデプロイする場合は細かい設定が不要です。GitHub.github.comまとめウェブサイトの表示速度はSEOや直帰率に大きな影響を与えます。今回は表示速度に大きな影響を画像にフォーカスしました。macやiPhone以外にもハイエンドなAndroidやWindowsも高解像度の画像が必要でした。実際の画面を構成するピクセル数とソフトウェア的なピクセル数の比の概念は、デバイスピクセル比を用いて表すことがわかりました。レスポンシブデザインに必要な画像を用意するべきか洗い出しました。静的に用意するのは手間がかかるので、Next.jsを用いてレスポンシブデザインに対応する画像を動的に生成するサンプルも提案しました。10のnext/imageによる画像最適化を試してみたPRXではUZUMAKIの新しい働き方や日常の様子を紹介!ぜひフォローをお願いします!noteではUZUMAKIのメンバー・クライアントインタビュー、福利厚生を紹介!UZUMAKI|note株式会社UZUMAKIです。代表の工藤が投稿してますが、ほかのメンバーもたまに投稿します。受託開発を生業としてますが、リモートワークを通じて、今までにない組織形態での働き方を模索、実践しています。note.comUZUMAKIではRailsエンジニアを絶賛募集中です。採用情報これを実践するには、通常の社会で求められる上司による部下の管理が必要という前提が不要になってきます。時間管理をしない、圧倒的な性善説で動く、メンバーは自発的に動くということをUZUMAKIでは当たり前のように行っております。...job.uzumaki-inc.jp是非応募宜しくおねがいします!。