端末ごとに必要な画像だけを読み込ませる、レスポンシブWebコーディングの基本技法

こんにちは、新入社員のTです！普段は神保町のスポットを中心に紹介していますが、今回は趣向を変えて、Webコーディングについての話題をお届けします。

入社して半年が経ち、実務でさまざまなWebサイトの運用や実装を担当させていただく機会が増えてきました。
学生時代や入社直後は「とにかく見た目をデザイン通り再現すること」で精一杯だったのですが、実務を通して「サイトの表示速度」や「ユーザーの閲覧環境（SEOやアクセシビリティ）」まで考慮してコードを書く重要性を痛感しています。

今回は、実務の中で知って非常に便利だと感じた HTMLの<picture> タグ についてご紹介します。

以前の私：CSSの display: none で切り替えていた

以前の私は、PCとスマホで表示する画像を切り替えたいとき、以下のようにCSSで片方を非表示（display: none）にする方法を使っていました。

見た目上はこれでも問題なく切り替わって見えるのですが、先輩から「これだと画面上では消えていても、ブラウザは裏で両方の画像をダウンロードしちゃってるんだよ」と教えていただきました。

<picture> タグを使えば、必要な画像だけをスマートに読み込める！

そこで教えていただいたのが <picture> タグ です。

<picture> タグを活用すれば、画面サイズ（メディアクエリ）に応じて「ブラウザに必要な画像だけを選択してダウンロードさせる」ことが可能になります。

🌟<picture> タグの主なメリット

• 無駄な通信が発生しない（スマホユーザーの通信量を無駄に削らない）
• 次世代画像フォーマット（WebP等）への対応が簡単（未対応ブラウザへのフォールバックも同時に記述可能）
• ページの表示速度が上がり、SEO対策やユーザー体験（UX）の向上につながる

まとめ：ただ作るだけでなく「配慮ができるWeb担当」を目指して

コーディングは単に「画面に表示されればOK」ではなく、サイトを訪れるユーザーの閲覧環境や、検索エンジンからの評価までしっかり考えて組み立てるものなんだと学んだ半年間でした。

これからも「綺麗なコード」と「ユーザー目線の丁寧な実装」を意識して、日々の業務に取り組んでいきたいと思います！

次回のブログでは、また神保町の美味しいお店情報もお届けしますのでお楽しみに！