ホームページの画像形式といえばGIFとJPEGが主流だった時代から、PNGとJPEGが主流になり、最近ではWebPも選択肢となりました。ホームページ制作上の画像形式の特徴を説明します。
GIF（ジフ／ギフ）
特長としては色数が256色と少なく透過も1色のみで、可逆圧縮の画像です。色数の少ないイラストやボタン向けで、小さい解像度のアニメーション（GIFアニメ）にも向いています。色数が少ないのでファイルサイズが小さく軽いという利点があります。
アニメーション（パラパラアニメ）が必要ならアニメGIFを選択
JPEG、JPG（ジェイペグ）
色数はフルカラーで不可逆圧縮の画像です。写真やグラデーション画像等も綺麗に表示できます。圧縮率も柔軟に変更できる特長がありますが、高圧縮すると画像が荒れてしまったり、編集を繰り返すと画像が荒れてしまいます。適度な圧縮でファイルサイズを調整して加工する必要があります。
透過が必要ない写真や画像全般はJPEGを選択
PNG（ピング）
特長としては色数が256色～フルカラーまで対応でき透過も1色～256色に対応している、可逆圧縮の画像です。GIFアニメを除けばGIFのほぼ上位互換と言って良い画像形式です。しかし色数が多いのでファイルサイズが大きめになる特徴があります。可逆圧縮の画像なので、劣化はしずらいですが、ファイルサイズが大きい場合にはJPEGに変換して利用する等の工夫が必要です。
透過が必要なロゴやイラスト、高精度のイラストや写真PNGを選択
WebP（ウェッピー）
Googleが開発した画像形式で、フルカラーで透過も可能な非可逆圧縮の画像です。JPEGやPNGよりも2〜3割程度データサイズが軽くなる利点がありますが、WebPの表示をサポートしていないブラウザがあったり、画面の印刷時には画像が印刷されない等の弊害もありますので、高速に画像を表示させる用途にのみ用いられ始めています。
利用しているブラウザを判定して代替画像（PNGやJPEG）を指定できる環境では、WebPと併用
Photoshop 23.1 以前のバージョンでのWebP保存と読み込み
JPEGやPNGであればメニューバーの「ファイル」にある「書き出し」から出力ができますが、WebP形式ではこの方法は使えません。WebP形式で保存する場合には、メニューバーの「コピーを保存で行う」で保存します。
PhotoshopでWebPを開くためにはソフトの機能を拡張できるプラグイン「WebPShop」のインストールが必要になります。
Photoshop 23.2 以降では、WebPが標準サポートされるようになりました。
画像のdpi（1インチあたりのドット数）
ホームページ用の画像は一般的には72dpiで制作します。印刷原稿では300dpi以上で制作しますが、300dpiの画像ファイルはサイズが大きくでホームページの表示に時間がかかってしまう為です。
