ita6.work@gmail.com コーディングの最初に必要な画像書き出し。
でも画像の形式っていろいろあって何で書き出すのか正解か迷ったことはありませんか？
この記事では、JPG、PNG、SVGの違いについて解説していきます！
JPGとは？
写真や色が多く含まれる画像に適していて、圧縮によってファイルサイズを小さくできます。
ただし、圧縮によって画質が若干低下してしまうので綺麗に表示したい場合は注意が必要です。
背景透過の必要ない四角い写真はJPGを使います！
PNGとは？
背景透過ができるのが特徴です。
また、圧縮しても画質が落ちにくいですが、ファイルサイズが大きくなりがちです。
背景透過させたい画像はPNGで書き出します。
SVGとは？
ベクター形式の画像ファイルで、どんなに拡大・縮小しても画質が劣化しないのが特徴です。
ベクターで作れらているロゴやアイコンはSVGで書き出します！
その他、画像書き出しで注意すること
適切な画像形式で書き出すことも大切ですが、他にも気をつけることがあります。
まず、JPGやPNGで書き出すときには基本的には2倍書き出しをするようにしましょう。
2倍書き出しをすることによって、大きな画面で見ても画像が綺麗に表示されるようになります！
SVGは拡大・縮小しても画質が劣化しないので、2倍書き出しは不要です。
また、画像を使用する際は書き出してそのまま使ってしまうとサイトが重くなってしまうので、
圧縮してから使用するようにしましょう。
下記のサイトで無料で圧縮できます！
まとめ
画像形式は、画像が綺麗に見えるかどうかや、サイトのパフォーマンス（表示速度）に影響します。
適切な画像形式を選んで品質の良いサイトを作っていきましょう！