画像ファイルっていろいろなファイル形式がありますが、ウェブ制作には何を使えばいいんですか？

では今回は、ウェブ制作に使う主流のファイル形式を説明していくぞよ。

画像のファイル形式について

画像には、様々なファイル形式が存在しています。

不適切な形式で保存してしまうと、画質が劣化したり、データ量が多くなってしまうので、適切なファイル形式を使い分けていきましょう。

サイト制作で主に使用するのは、写真用のJPEG、イラスト用のPNGなので、とりあえずこの2つを覚えておけば大丈夫です。

最近は、次世代画像形式の「WebP（ウェッピー）」や「AVIF」も出てきましたが、まだ対応していないブラウザや端末もあるため、もう少し普及してから使う方がよいかと思います。

画像をサイトに表示する

サイトに画像を表示したいときは<img>タグを使用します。
たとえば『sample.jpg』を表示したいときは、下記のような記述になります。

<img src=”images/sample.jpg” alt=””>

src（ソース）内には表示したい画像のurlを、alt（オルト）には画像の説明テキストを記述します。
この2つは<img>タグの必須属性になります。

▼altについて
altに設定したテキストは、画像が表示されなかった際の代替テキストとして利用されます。
また、検索エンジンにどういう画像なのか伝える役割があります。

代替テキストで表現する必要のない画像（装飾やイメージ画像など）については、空のalt属性を指定します。

▼サイズ指定について
画像のサイズ指定は、CSSもしくはwidth属性・height属性から行えます。

CSSにサイズを記述すると管理がしやすく、HTMLを複雑にしないなどの利点があります。
近年、属性でサイズを指定する利点もでてきていますが、2020年時点ではCSSでの指定が主流となっています。

画像を綺麗に表示する方法

サイト制作をしていると、埋め込んだ画像がぼやけてる…？なんてことがあるはずです。

画像を綺麗に表示するためには、用意する画像のサイズやサイズ指定に工夫が必要なんです。

例えば、表示したい画像のサイズが幅100px高さ100pxだとします。
用意した画像が100px以下だった場合、小さい画像を無理矢理引き伸ばして表示することになるので、当然ぼやけます。

最低でも実際に表示したいサイズの画像を用意しましょう。

また、高解像度デバイス（iPhoneやRetinaディスプレイのMacなど）でサイトを見ると、他の環境では綺麗に表示されていたはずの画像がぼやけて見えることがあります。

長くなるため理由は省略しますが、対処法として実際に表示したいサイズの2倍サイズの画像を用意します。

2倍サイズで画像を書き出す癖をつけていれば、画像がボヤけている！現象を避けることができます。

ですが、全ての画像を2倍で書き出す必要はありません。

ぼかし効果を使った画像や写真などは、元のサイズのままでも問題ないことがあります。
どの画像を2倍にするかしないかは、その都度判断する必要があります。

画像の容量を軽くする方法

2倍サイズで書き出した画像は、データ容量が増えてしまいます。

データ量が増えると、読み込みの遅いサイトになってしまい、ユーザーの離脱率が上がるだけではなく、SEO評価がマイナスになってしまう恐れがあります。

そういった事態を避けるために、画像圧縮ツールを使用します。

「画像圧縮ツール」は出来るだけ画質を落とさず、データ量だけを削減してくれます。

検索すると画像を圧縮してくれるサイトやソフトが出てきますので、自分にあったツールを探してみましょう。

ふわ～！
画像についてだけでも、けっこう奥が深いんですね。

画像がボヤけていたり、重い画像をアップしているサイトもよく見かけるので、そうならないようにしっかり意識してね。