皆さんこんにちは、Good Web Designもアクセス数が少しづつですが伸びてきています。2024年10月18日現在、年間アクセス ユーザー数が7万人を超えています。ひとえに皆様のおかげです。ありがとうございます。とりあえず、年間ユーザー数を10万人を目標に頑張って更新しています。今後とも是非、Webデザインやコーディングの仕事や勉強のために、Good Web Designをご利用願います。
さて、今日は画像の軽量化とコーディング方法について解説していきたいと思います。2024年における王道のやり方のはずです。私も昨年からお仕事でコーディングする時に、実際に行っている方法ですので、現在コーディングを勉強している方はぜひ参考にしてください。
【ポイント1】画像はPC、スマホの2種類を準備！
近年はモニターの高解像度化により、PCで使用する画像サイズは巨大化しています。PCは基本的に光回線を想定してのコーディングになるので画像サイズが大きくなりますが、それをスマホで使用すると5G回線でも読み込み時間が掛かってしまうので、クライアントさんの指定がない限り、読み込み速度のことを考えて、私はPCをスマホを切り分けて考えて、コーデイングを行っています。
【ポイント2】画像は「webp」、「jpg」の2種類を準備！
2021年位から早い企業さんでは導入がすすめられた「webp」ですが、クライアントさんによっては中々、導入されない状況が続いていました。サーバー自体の設定が必要なのと、軽量化にあまり積極的ではない企業さんが多かったのも事実です。
2023年前半位までは、大手のクライアントさんでもサーバーが対応しておらずjpeg指定で納品を行う案件が多かったですが、2023年後半位から「webp」が一般化されてきた印象があり、「webp」」形式の画像データでコーディングするよう指定される仕事が増えています。
そこでコーデイング方法も変化していき、コーダーとしての工数は増えましたがスマホサイトの表示速度は圧倒的に速くなる「webp」と万が一表示できない場合に使う「jpeg」データの2種類を準備するコーデイング方法が2024年ではメインとなっています。
「jpg」より「webp」の方が軽い
ひと昔前までは画像データはjpegデータが主流でしたが、「webp」が主流になりつつあると感じています。クライアントさんによってはサーバーがまだ対応しておらずjpegデータのみでコーデイングする仕事もまた一部ありますが、ほとんどが「webp」「jpeb」形式の2種類を準備して納品しています。
【ポイント3】html・cssの記述が変わりました
webp、jpegの2種類をPC、スマホの2種類の端末で切り分けて表示させるので、1枚の画像を表示させるために「4種類」の画像をPhotoshopで書き出してコーディングをすすめます。なので今まで通り<img>タグで表示させるだけのHTMLの記述方法では対応できなくなっています。HTML・CSS共に新しい記述方法を理解する必要があります。
【ポイント4】<picture>タグと<source>タグを使用します
ユーザーの端末でアクセスした際にPCの場合はPC用の画像だけを読み込ませる。スマホの場合はスマホ用の画像だけを読み込ませる。という指定をHTMLだけで記述できます。そのHTMLの記述方法は<picture>タグと<source>タグを使用することになります。
ひと昔前はJavascriptを使用してPC、スマホの読み込み画像を分けていましたが、HTMLだけで実装できます。便利な時代になりました。
この書き方ですと、スマホの場合はPC用の画像は読み込まれないので、読み込み速度が向上します。PCの場合でもスマホ用の画像は読み込まれません。ブラウザーの方で無視してくれます。それでは実際にどのように記述するか見ていきましょう。
サンプルHTML
<picture>
<source srcset=”img/sp.webp” media=”(max-width: 768px)”>
<source srcset=”img/pc.webp” media=”(min-width: 769px)”>
<img src=”img/sp.jpg” class=”sp_display”>
<img src=”img/pc.jpg” class=”pc_display”>
</picture>
解説
上のHTMLのコードには4種類の画像が記述されています。最初に「webp」を次に「jpeg」を記述します。「sp.webp」「sp.jpg」がスマホ用の画像データ。「pc.webp」「pc.jpg」がPC用の画像データになります。このHTMLの記述方法と4種類の画像の準備で、読み込み速度を最適化できます。
CSSをjpeg用に準備する
<source>タグは直接ウィンドウサイズを記述しているのでCSSの設定は必要ありません。「jpeg」画像はcssで表示、非表示を切り替えるのでCSSの設定が必要になります。HTMLにはimgタグにclassを直接記述します。CSSの方で、display・visibilityを設定すれば簡単に実装できます。
サンプルCSS
.pc_diplay{
display: none;
visibility: hidden;
}
.sp_display{
display: inline-block;
visibility: visible;
}
@media screen and (min-width: 768px) {
.pc_diplay{
display: inline-block;
visibility: visible;
}
.sp_display{
display: none;
visibility: hidden;
}
}
まとめ
解説すると長くなりましたが、コーデイング初心者でも意外と簡単に導入できるコーディング方法です。複雑なプログラムをJavascriptで記述する必要も一切ありません。おそらく来年の2025年も主流となる記述方法だと考えています。ぜひ、皆様のお仕事や勉強の参考にしてみてください。
Image by freepik
最終更新日：
