コーダーが知るべき画像に関する12のこと

コーディングの中でも、画像の扱いはややこしいものも多く、疎かにしている方も多いのではないでしょうか。

初心者向けの書籍には書いていないこともあるので、知識が抜け落ちている方もいるかもしれません。

この記事では、コーダーが知るべき画像に関することをまとめました。思いつく限りのことを書いたつもりですが、他にもあればぜひX(旧Twitter)で記事のシェアと共に教えていただけると嬉しいです。

👇 メンターやってます 👇

模写修行やこのメディアを作ったエンジニア中心に、メンタリングサービスHello Mentorを運営しています。

• 独学に限界を感じている...
• 何をどこまで勉強すれば良いかわからない...
• 自分の書き方が正しいかわからない...
• 検索しても解決しない問題が多い...
• 転職や副業のアドバイスが欲しい...

このような方は、ぜひ下記のリンクからサービス詳細をご覧ください。無料相談もお気軽にお申し込みください。

👆 メンターやってます 👆

1. 画像サイズ(widthとheight)の扱い方

※ 初心者向けの内容

Hello Mentorでメンターをしていると、画像サイズ(widthとheight)の扱い方のコツを掴めていない方が多いと感じます。

具体的には、コードを提出してもらうと、画像に固定値を入れているせいで横スクロールしているケースが多いです。

画像サイズ(widthとheight)の扱い方は、ちょっとしたコツさえ掴めば良いので、怪しい方はぜひ下記の記事を読んでみてください。

HTMLの画像サイズ(widthとheight)の扱い方！

2. 画像の圧縮

画像は圧縮することで、かなりサイズを抑えることができます。

開発環境を整えて、自動で圧縮することもできますが、目視で確認して細かい調整もしたい場合は、ブラウザで動くツールを使うと良いです。

↓ Squooshは細かい調整や見た目の比較がしやすいです。

画像にもよりますが、圧縮率高め(70~80%)でもほとんど目視では違いがわからない場合も多いです。

圧縮率の高いWebPやAVIFについては後述します。

3. 画像のトリミング

aspect-ratioとobject-fitを使えば、imgタグで入れた画像を簡単にトリミングできます。それぞれ個別の記事で詳しく解説しているので、知らなかった方はぜひご覧ください。

CSSで画像をトリミングする方法を紹介！ 縦横比(アスペクト比)を固定できるaspect-ratioについて具体例を交えて解説！

【初学者・中級者の方】独学に限界を感じてませんか？

プログラミングやデザインは独学可能ですが、ほとんんどの方が苦戦します。

↓このように感じていませんか？

• 何をどこまで勉強すれば良いかわからない...
• 自分の書き方が正しいかわからない...
• 検索しても解決しない問題が多い...
• 転職や副業するまでの道が見えない...

そんな問題を解決するために、模写修行やこのメディアを作ったエンジニア/デザイナー中心に、メンタリングサービスHello Mentorを始めました。

初級者から中級者まで対応できる、数少ないサービスです。

スクールのような大金は必要ありません。高額な費用は払いたくないけど、プロのサポートが欲しい方は、ぜひ下記のリンクからサービス詳細をご覧ください。

👆 メンターは全員現役エンジニア 👆

4. 画像の最適化

imgタグのsrcset/sizes属性やpictureタグを使うと、ユーザーの環境によって、画像を出し分ける(最適化する)ことが可能です。

特にsrcset/sizes属性はかなりややこしいのですが、仕事をする上で覚えておく必要があることです。下記の記事で詳しく解説しています。

srcset/sizes属性やpictureタグを使ったレスポンシブイメージを解説

background-imageを最適化する、image-setも覚えておきましょう。下記の記事で紹介しています。

【Retina対応】background-imageを最適化する方法！

5. 画像のフォーマット

画像のフォーマットは、画像サイズに関わるので、とても重要です。

たくさんあるフォーマットの中で、特によく使う&知っておくべきだと思うのは、jpg / png / svg / WebP / AVIFの5つです。

ざっくりとした使い分けは、下記のようになります。

WebP / AVIFは圧縮率が高く、サイズがかなり小さくなります。どちらもpictureタグを使って、適切に書けば現在も使用可能です。あとは複数画像用意する工数との兼ね合いで対応するかどうかになるでしょう。

2種類の画像を使ってサイズ比較してみました。

イラスト画像

※ 括弧内は拡張子です。

目視では見た目の差をほとんど感じませんでした。

写真

※ 括弧内は拡張子です。

目視では見た目の差をほとんど感じませんでした。

今回は、圧縮(jpg)よりもWebP(webp)の方がサイズが大きくなりましたが、一般的にはWebP(webp)の方が小さいケースが多いです。

6. 高解像度ディスプレイについて

昨今、多くのユーザーが高解像度ディスプレイを使用しています。

高解像度ディスプレイを考慮すると、表示サイズの1倍の画像では、表示がぼやけて見えてしまいます。詳しくは参考サイトを貼っておきます。

高解像度ディスプレイの特徴や対策を把握しておきましょう。

7. レイアウトシフト

画像にwidthとheightを入れていない場合、レイアウトシフトという現象が起きてしまう可能性があります。

• 画像には必ずwidthとheightを入れる

このルールでコーディングすれば問題ありませんが、アートディレクションする際は工夫が必要です。下記の記事で詳しく解説しているので、ぜひご覧ください。

レイアウトシフト(Cumulative Layout Shift)とは？対策・改善方法も紹介！

8. decoding="async"とloading="lazy"

decoding="async"とloading="lazy"を使うと、パフォーマンス最適化ができます。

• decoding="async"：画像のデコードを非同期的に行う
• loading="lazy"：遅延読み込みをする

decoding="async" について詳しく調べてみるが検証含め詳しく解説されています。

正直今まではあまり検証することなく、下記で対応していました。

• decoding="async"はとりあえず指定
• FV以外ではloading="lazy"を入れても良い

loading="lazy"は画像の表示が遅く見える時があるので、画像を多用したサイトじゃない場合は、入れなくても良いと思っている派です。

AastroとNext.jsの<Image />コンポーネントでは、デフォルトでdecoding="async"とloading="lazy"の両方が自動で付きます。

何がベストなのか難しいですね...。個人的には画像を多用していないのであれば、どちらもつけなくても問題ないと思っています。

9. imgタグとbackground-imageの使い分け

セオリー通りであれば、下記のようになります。

• 意味のある画像であればimgタグ
• 装飾目的の画像はCSSの背景画像

ただし、imgタグで入れてもalt属性が空の場合は、装飾目的の画像と同じ扱いになります。

• 画像の最適化をする際はimgタグの方が都合が良い
• imgタグで入れた画像のトリミングもaspect-ratioとobject-fitを使えば可能

↑これらの事情もあるので、セオリー通りの使い分けではなくても良いのではないでしょうか。また、後述しますが、imgタグで入れた方が早く読み込まれるので、その点でもimgタグの方が良いです。

リピート画像など、background-imageでしかできない場合は、background-imageを使う。それ以外はimgタグを使うような使い分けでも良い気がしています。

10. alt属性の書き方

alt属性の書き方は今でも迷うポイントです。

下記の記事を参考にして書くのがおすすめです。

装飾目的の画像では、alt属性は空にする点もおさえておくと良いです。alt属性を入れないではなく、空にする(つまりalt=""こう書く)点に注意です。

11. レンダリングについて

ブラウザのレンダリングの仕組み上、imgタグで入れた画像とbackground-imageで入れた画像では、imgタグで入れた画像の方が優先的に読み込まれることが多いです。

したがって、FVの画像なんかはbackground-imageで入れると表示が遅くなり、気になることがあります。

imgタグで入れるか、下記のような対応をすると良いです。

<div class="img"></div>
<img src="img/img_sample03.jpg" width="2000" height="1333" alt="" class="img-dummy" />

.img {
    background-image: url("img/img_sample03.jpg");
    ...
}
.img-dummy {
    display: none;
}

このように書くと、imgタグで入れた時と同じように読み込んでくれるので、background-imageのみより表示が速くなるようです。(実際に検証して確かにそうなりました。)

12. 画像のアニメーション

画像のアニメーションに関しては、今まで使う機会がほぼなかったので、あまり知見がありません。

GIF / APNG / SVG / WebPではアニメーションが可能です。Lottieアニメーションも最近は聞く気がします。

自分はおそらく今後もあまり使う機会がないと思われますが、ちゃんとキャッチアップした際には追記したいと思います。

独学に限界を感じていませんか？