imgタグで使用する画像の拡張子は何がいいのか、画像の参照の仕方

Question

現在Reactjsとstyled-componentsでポートフォリオサイトを作成しています。webサイトで画像を表示する場合はimgタグないでsrcとして画像を参照しないといけないと思うのですが、画像の拡張子は何がいいとかはあるのでしょうか。理由も合わせて回答いただけるとありがたいです。また、オンライン上から撮ってくることも出来ると思うのですが、ローカル？（webサイトがデプロイされているサーバー）内で画像を参照するには絶対パスでsrcに入れればいいのでしょうか。以上２点についてお聞きしたいです。

Answer 1

まずは「ファイル形式」と「拡張子」の区別をきちんと認識してください。
拡張子は、ファイル形式を表すことが多いだけの、ただの名前の一部です。

その上で画像の形式について。
とりあえずJPEGとPNGだけ抑えておけばなんとかなります。

• JPEG

非可逆圧縮です。圧縮率を変えられます。
空間周波数の低い(すなわち色の変化が滑らかな)画像に向きます。典型的なのは風景写真など。このような画像では画質の劣化はほとんど目につきません。
空間周波数の高い(色の変化が急峻な)画像に使うと、画像中のエッジ付近にモスキートノイズと呼ばれるノイズが発生し見栄えが悪くなります。アイコンや文字の入った画像などに不向きです。
色要素のサンプリングという概念があり、多くのソフトで普通に保存すると色要素のサンプリングが間引かれ(カラーサブサンプリング)、色にじみが発生します。

• PNG

可逆圧縮です。画質の劣化は一切ありません。
複雑な色数の多い画像では極端にファイルサイズが大きくなります。この点で写真などには不向きです。
アイコンなどは向いており、JPEGよりファイルサイズが小さくなることも多いです。
また、JPEGと違い(半)透明が扱えます。

その他、

• GIF

昔からある。可逆圧縮だが最大256色。静止画ではPNGでなくあえてこちらを使う必要は無いが、簡単にアニメーションが使えるのでよく使われる。

• SVG

ベクタ形式。ベクタが何かの説明は割愛する。拡大してもぼやけない。アイコンやロゴに向く。

• WebP と AVIF

最近の流行り。JPEGに似てJPEGより高圧縮。半透明も扱える。
最近のブラウザはほぼ対応。

参考: 画像ファイルの種類と形式ガイド

ローカル？（webサイトがデプロイされているサーバー）内で画像を参照するには絶対パスでsrcに入れればいいのでしょうか。

普通は相対パスにすると思います。