Blog ブログ

現在、WEBサイトで使用する画像は主にjpgかpngが主流です。

そのほかにロゴマークに最適なSVG形式もあります。

ファイル形式に迷ったら下記のように選択すると良いと思います！

• ・透明な要素がある、または色数の少ないグラフィック画像はpng
• ・人物や風景の写真画像はjpg
• ・ロゴマークや、アイコン、シンプルなグラフィック画像はsvg

jpg

静止画像のファイル形式で、1670万色のフルカラーに対応しています。

色数が多いので、風景や人物の写真画像やグラデーションの表現に最適な形式です。

圧縮率を調整し、小さなファイルサイズにすることも可能です。

ただし、jpgは非可逆圧縮なので一度保存したjpg画像は元に戻せません。

jpgからjpgへと何度も上書き保存してしまうとどんどん劣化してしまうので、保存の際には注意が必要です。

png

jpgと同じく静止画像のファイル形式ですが、jpgとは違って画像を透過できることが特徴です。
実はpngの形式には3つ種類があり、256色・1670万色・280兆色と表現できる色数が異なります。
透過できない種類もありますので、保存時にはご注意ください。

pngは可逆圧縮なので、高画質を保ったまま保存することができます。
そのためjpgと比べてファイルサイズが大きくなることが多いです。

ですが、色数の少ないグラフィック画像や、シンプルなイラスト画像はjpgよりも軽量で高品質に保存ができます!

svg

ベクター形式の画像データです。

Jpgやpngはラスター形式といって、ピクセル（ドット）で表現されていて拡大すると画像が荒く見えます。

それに対しベクター形式は、数値データでなめらかな線を表現するため、拡大しても画像が荒く見えません。

企業ロゴや、アイコンなどの画像形式として最適です。

Webサイトにおいて、ページの表示速度は重要です。

画像のサイズとファイル形式でファイル容量が変わり、ページ表示速度に直結します。

画像のファイルサイズに明確な目安はありませんが、劣化しているように見えない範囲でできるかぎり軽量化することが重要です！

目安として、Googleは１ページあたりの容量が、1.6MBとなるよう推奨しています。

参照：https://web.dev/total-byte-weight/?utm_source=lighthouse&utm_medium=lr

例えばですが、1ページに1枚200KBの画像を8枚使うとそれだけで1.6MBになってしまいます...！

画像のリサイズと適切なファイル形式選択をして、できるだけファイルサイズを小さくすることを心がけましょう！

現在『ホームページ制作 最大30万円割引キャンペーン』を実施中です！

ぜひお気軽にお問い合わせください。

詳しくはこちら

お問い合わせはこちら