要素、srcset属性、sizes属性をご存知ですか?実は表示する画面が対応している解像度によって画像を変更したり、画面幅によって画像を出し分けることができます。今日はこれら画像サイズ最適化の基本とWordPressへの適応方法について見ていきましょう。アセットからの書き出しの機能を使えば簡単に1倍、2倍、3倍といった画像を書き出すことが可能です。例にとると画像を選択した状態からアセットの書き出しを行うことが可能です。いった文字がくっついている画像が作られることが確認できると思いますが、基本的にはこのファイル名の付け方を踏襲した命名を行います。いった名前で画像を作成します。2019年3月現在における最適な画像拡張子SVGロゴなどの背景として扱わないimg要素で表示するための単体画像は有無を言わさずSVGとして利用すること。SVGはベクターデータなので圧倒的に線がぼやけることなくきれいに表示されます。PNGimg要素または背景画像として利用する透過情報が必要な画像。img要素として利用する場合には基本的にはsvgを利用すること。縦横の大きさをそろえたい場合やWordPressのメディアとして登録するときにはPNGも選択肢に入ります。JPEG上記以外はすべてJPGとして利用すること。写真データなども基本的にはJPEGとして利用します。上記と比較すると圧倒的にファイルサイズが軽いことが特徴です。綺麗さを取るならSVG、ただし背景として指定する場合にはIEが対応していない場合が多いので問題が起きやすく使用を控えたほうが無難です。ファイルサイズが大きくなることを強要できて透過情報が必要かつ画像サイズをそろえたい場合にはPNG、その他基本的にはファイルサイズをできるだけ少なくして高速化を図るという目的でJPEGを選択という流れが拡張子を選択するときに考えるべき内容になります。属性を利用することで実現します。属性の書式は以下の形式です。画像ファイル名と解像度のセットをカンマ区切りで複数指定することが可能です。上記の指定によって対応解像度の違いによって画像を出し分けることが可能となります。これまで指定したことがない場合には単純に追加するだけでOKです。これを行うだけでレティーナディスプレイでもないのに2倍の重たい画像を表示する必要がなくなり、画像の読み込み速度が改善することによってページの表示速度の高速化に一定の効果があります。画面幅によって最適な画像を表示する方法に関しては2つの方法があります。属性を指定することによって画面幅によって画像を出し分けることが可能となります。画面幅に対応して画像を出し分けることが可能です。ちなみに、sizes属性を指定する場合にはsrcset属性も同時に指定する必要があることに注意が必要です。実装がないので、モダンブラウザ以外のレガシーな環境への対応には注意が必要です。要素を利用することによって画面幅による画像の出し分けが可能です。picture要素の子要素としてsource要素を作成し、そのmedia属性にメディアクエリを指定することによって画面幅による制御を実装することができます。上から順番に処理が行われ最初に一致したメディア属性に対応したsource要素で指定されている画像が表示される仕組みです。要素が表示されることになります。参考:picture要素とsrcset属性の基礎知識と使い分けと注意点をまとめるhttps://a.uotomizu.com/articles/picture-element-and-srcset-attributes/WordPressの画像サイズを最適化するさて、ここまでは静的なHTMLを書く上での実装についてみてきましたが、ここからはWordPressをどうやって上記に対応させるかという視点で見ていくことにします。いいプラグインないかなぁ...と思って調べてみたらありました。最終更新が少し古いので保守がちゃんとされていないような感じもしますが一応ちゃんと機能は実装されていそうな雰囲気はあるので以下のプラグインを使ってみることにしましょう。上記で挙げたデモサイトにも書かれていますが、めちゃめちゃ簡単です。プラグインをインストールして有効化して設定するだけでOK。sizes属性」にも「picture要素」にも両方に対応しています。WordPressで更に画像を最適化するためのプラグインとりあえずまずは以下のプラグインもサクッと導入してしまいましょう。導入前の状態と比べると、必ずあなたの力になってくれるはずです。Optimization導入することによって画像を圧縮してファイルサイズを縮小してくれるプラグインで、無料の範囲でも利用できるのが特徴です。ImagesImsanityサイズの大きな画像をアップロードするタイミングで設定したサイズまで全自動で縮小してくれるプラグインです。スマホで撮影した写真をそのままアップロードする場合やストックフォトサイトからダウンロードした大きなサイズの画像をそのままWordPressにアップロードする際などに威力を発揮します。縮小前のオリジナルのサイズが保持されない点だけ注意してください。Imsanityまとめ個人的にはレティーナ対応するために2倍の画像にしてくれと言われるたびに読み込み遅くするくらいなら1倍でいいんじゃないんかなぁと感じながら対応していたのですが、見た目の品質もコンテンツSEOとして大切な品質基準になっているので外すことができないということでレティーナディスプレイをはじめとする2倍や3倍など大きな画像への対応は必須となっています。これら巨大な画像をスマホで表示させるとなると読み込み速度に大きな悪影響があるため離脱率を改善するという目線から言えばかなりのマイナスポイントであると言えるでしょう。大切なことは、どちらを選ぶかということでもなく、適切に環境によって画像を出し分けるための設定を適切に行うことが重要だと言えるのではないでしょうか。私のウェブの制作スキルの関してはまだまだ修行の途中なので今後も継続的に今どきのウェブ制作について学びを深めていこうと思います。プロのコーダー/マークアップエンジニアとして仕事をしていく上では知らなかったでは済まされない領域ではありますが、正直世の中的にこのレベルまで全部できちゃう専門家の方はまだまだ多くないでしょう。初心者向けのスクールにおいても、これらのレベルを初心者向けのカリキュラムに入れてしまうと難易度が高くなりすぎて挫折する可能性が高くなるので私が初心者向けにコースを作るとしたらこれらの内容は含めないでしょう。初心者からもう一段上の技術を身に着けるためには日々研鑽を続けていく以外に道はありません。技術のレベルアップによってマークアップの専門家として周囲をけん引していけるような技術習得を皆さんも目指してください。私もまだまだ頑張ります。WordPressのスキルアップに欠かせない最適な書籍のご紹介WordPressのスキルを一歩上に高める最初のステップとしてオススメの書籍を1冊だけご紹介しますのでよかったら手に取ってみてください。公式アカウント資料ダウンロード会社やサービスに関する資料ダウンロードをご希望の方は右の資料ダウンロードページからご利用ください。ご希望の方は応募フォームからご応募ください。