コーディングしようする画像を書き出すときは何の拡張子を使ってますか？
jpg、png、svg、WebPなど、さまざまな画像フォーマットがありますが、状況に応じて使い分ける必要があります。
見た目の美しさやデータ容量、対応するデバイス環境などを考慮しないと、表示がぼやけたり、サイトの表示速度が遅くなったり、、、ここでは、よく使う画像拡張子の選び方と注意点を整理してみました！
Retina対応のための書き出し
近年のスマートフォンやPCでは、高解像度のRetina（レティナ）ディスプレイが当たり前になっています。
解像度の単位をピクセルと言いますが、Retinaディスプレイでは1ピクセルの中に2ピクセル×2ピクセルを表示しています。以下のようにRetinaの方が滑らかに表示されるのが特徴です！
（1つ1つポチポチして作るの大変だった笑）
Retinaディスプレイでは、1倍の画像だと文字やロゴがにじんだように表示され、見た目のクオリティが下がってしまうことがあります、、、そのため、画像は基本的に2倍サイズで書き出すのがおすすめです。
jpgとpngの使い分け
色々な拡張子がありますが、まずは一般的なpngとjpgから！
背景を透過させたいロゴやイラストなどにはpng形式を選ぶのが基本となります。
それ以外の画像についてはjpg形式が向いています。jpgは透過には対応してませんが、容量を軽く抑えられるためです。
svgとWebPに関しては
同じ画像でもjpgとpngでは大きく容量が異なることがあり、ある例ではjpgが203kbだったのに対し、pngでは573kbと2倍以上の差が出ました。ページ速度を考えると、どちらを選ぶかは慎重に判断する必要があります。
書き出し後の最適化
拡張子を選んで書き出したあとも、そのまま使うのではなく圧縮ツールを活用すると効果的です。tinypngなどのサービスを使えば、品質を大きく損なうことなくファイルサイズを削減できます。
先ほどのjpgで273kb、pngだと573kbの事例では、tinypngで圧縮すると以下のような結果になりました！
| 2倍書き出し後の容量 | 圧縮後の容量 | |
| jpgの画像 | 203kb | 49kb |
| pngの画像 | 573kb | 122kb |
ちなみにtinypngパンダちゃんがいるので、動物好きの1歳の娘はこのサイトを見るとフィーバーします。笑
↓画像をクリックするとtinypngに遷移します。
svgを活用できる場面
ロゴやアイコンのようにベクター形式で制作された画像は、jpgやpngではなくsvg形式にするのが理想です。svgは画面の表示を拡大や縮小しても劣化せず、容量も軽いため、レスポンシブデザインとの相性も抜群です。特に細かい線や文字を含むアイコン類はsvgにすることで、どの環境でも鮮明に表示できます。
ただしWordPressなどのCMSでは、デフォルトではセキュリティの観点からsvgを使用できないようになっています。画像をアップする分には問題がないのですが、悪意のあるJavaScriptを入れ込めてしまうためです。会員サイトなどで画像を一般の方がアップするような仕様の場合は使うのを控えた方が安心です！
svgをアップロードするために専用のプラグインを一つ紹介しておきますね。
↓参考のプラグイン
WebPでさらに軽量化
より軽く、かつ高画質を保てる次世代フォーマットとして注目されているのがWebPです。jpgやpngに比べて容量を大幅に削減できるため、表示速度の改善に大きく貢献します。
ただし古いブラウザや端末では対応していない場合もあるため、導入する際には互換性を確認する必要があります。WordPressを利用している場合は、プラグインを使って自動変換するのが手軽でおすすめです！
こちらはプラグインが結構大量にあるので、調べながら使ってみてください。
EWWW Image OptimizerやConverter for Mediaはよく聞くプラグインです！
まとめ
画像の拡張子選びは、見た目の美しさとサイトの快適さを両立させるための基本です。retina対応を意識して2倍サイズで書き出ししそのあとの圧縮を心がけるだけで一気にサイトが軽くなります。
写真の書き出しは透過が必要なものはpng、それ以外はjpgを基本ルールとしてみてください。プラグインを入れることにはなりますが、アイコンやロゴはsvgを使ったり、表示速度を重視するならWebPを使ったりすると、さらに表示速度や綺麗さにも影響がでてくると思います！
ちょっとした工夫でWebサイトの印象もパフォーマンスも大きく変わるので、日々の制作にぜひ取り入れてみてくださいね！
ちなみに、、、拡張子の使い分けについては数年前にインスタグラムで記事を作っていたのでこちらもシェアです☆
