lorem-co-ltd0スマホとパソコンで違う画像を出し分けるようなレスポンシブ対応は今では当たり前になりました。方法は色々あってCSSでのメディアクエリやJavaScriptの条件分岐での方法が主流かと思いますが、初学者の方には少し難しいのではないでしょうか?今回はHTMLだけで画像のレスポンシブ対応をする方法を紹介していきますので、初学者の方でも安心して実装できます。動画もあるので必要に応じて活用してください。結論、pictureタグを使うと画像のレスポンシブ対応をすることができます。100%;}pictureタグは画像の切り替えを行うためのタグで、実際の画像の表示はsourceタグとimgタグを使って書きます。pictureタグのルールとしては3点です。</picture>〜省略〜sourceタグには3種類の属性があります。jpegであれば省略OK)ブラウザをリロードして検証ツールでそれぞれの画面サイズで表示される画像を確認してみましょう。画像のレスポンシブ対応が実行されていますね。CSSやJavaScriptで制御するレスポンシブ対応より簡単かつシンプルになったかと思います。sourceタグについては複数書くことができるので、ブレークポイントを増やすことも可能です。3パターンのブレークポイントを設定してみましょう。</body></html>最近では色んなサイズのデバイスが登場したことにより、同じ画像でも縦横比が違うことで中身のレイアウトや文字サイズを作り替えて用意することが当たり前になっています。画像のレスポンシブ対応は初学者の方でも必須の作業になりますので覚えておきましょう。レティーナ対応についてpictureタグを使うと画像のレスポンシブ対応ができることが分かりました。このpictureタグの特性を利用すると、別の使い道で利用されることがあります。代表例としては「レティーナ対応」というものがあり、テクノロジーの進化でレティーナディスプレイという画面を持つデバイスが登場しました。簡単にいうと高画質なデバイスでは一定レベルの画質の画像を用意しないと、画面で見た時に荒く見えてしまうことが問題になりました。現状のトレンドとしては「レティーナディスプレイ用の画像」「それ以外の画像」といった具合に、同じ画像でも2パターン用意しておく方法です。このレティーナ対応にもpictureタグを活用することができます。</body></html>書き方はレスポンシブ対応の時と大きく変わらないのですが、sourceタグのsrcset属性の書き方が工夫があります。srcsetは画像のパスを書くのですが、「,」で区切って画質ごとのパスを書くことができるルールになっています。プログラムの世界では通常の画質を「1x」、高解像度を「2x」という表現をします。</picture>〜省略〜詳しくはレティーナ対応でググってもらえると色んなナレッジがあります。ちなみにレティーナディスプレイは主にApple製品に使われています。webp対応についてpictureタグの活用方法について代表的なものに「webp対応」というものもあります。画像ファイルには「.png」「.jpg」など拡張子がついていて、新しい拡張子で「.webp」というものが登場しました。従来のものとの違いは「ファイルサイズが非常に軽量」である点です。それによってユーザーとしても読み込みが早くなり、事業主としてもSEOに少しばかり加点されるというメリットが出ました。IEなどマイナーなブラウザではwebp画像を読み込むことができないという問題があります。こちらもレティーナ対応同様にpictureタグを活用することで解決できます。</body></html>sourceタグにtype属性というものがあり、こちらで画像の拡張子を記載するルールになっています。いえpngやjpgなど従来の拡張子については省略できる仕組みのため、webpの時だけに書くことが多いです。あとはsrcsetでこれまで同様にwebp画像があるパスを指定するだけです。webp画像が読み込めない場合にはimgタグでpngやjpgなどの拡張子で画像を用意しておくのを忘れないようにしましょう。今回参考にした本はこちらになります。良ければこちらからどうぞ。