オブジェクトで異なる書き出しの最適な画像フォーマット

オブジェクトで異なる書き出しの最適な画像フォーマットのアイキャッチ画像

jpg,gif,pngはWebサイト制作における一般的な画像書き出しのフォーマットです。ただ綺麗に書き出せればいいのなら、png一択になりますが、それではWebサイトが重くなってしまうので、そえぞれ最適なフォーマットで書き出した方がWebサイトとしてのパフォーマンスは保てます。

Webサイトのパフォーマンスを最適に保つには適切なフォーマットで画像を書き出す

最近はサイトの軽さもSEOに影響するとかしないとか言われていますが、エンドのことを考えると、Webサイトも可能な限り軽い方がありがたいですよね。それにはまず画像です。パフォーマンス改善は様々な施策を施せますが、その中でも画像の占めるウェイトは少なくはありません。

jpgは単色が苦手で多色が得意

jpgは単色が苦手です。なので単色の場合はjpgは選択肢にあがりません。単色をjpgで書き出してしまうとモアレが目立ってしまいます。

しかし逆にjpgは色数の多い画像は得意です。jpgは情報を切り捨てて画像を圧縮します。色数が多いと切り捨てた箇所を滑らかに見せるごまかしがききますので、ある程度の見た目を維持したまま、画像を軽くすることが可能です。

gifは単色が得意

gifは単色が得意でファイルサイズが軽いのが特徴です。オブジェクトのディティールが複雑でも、単色の場合は積極的にgifを利用します。

pngは画質は良いがファイルサイズが大きくなる

pngは画質は良いのですがフルカラーになるとjpgよりファイルサイズが大きくなってしまうのが欠点です。jpgの圧縮率と画質によってはpngの方が良い場合もあります。

写真はjpg、複雑なイラストはpng、単色のオブジェクトはgif

jpg,png,gifの比較画像

難しいことを抜きにしてサクッと理解するなら写真はjpg、複雑なイラストはpng、単色のオブジェクトはgifで良いと思います。上の写真で言えば左からjpg,png,gifです。