今回は、Webサイトでもよく見かける様々な形式の画像の違いと、各形式のメリット・デメリットを紹介します。
Web上で見かける主な画像形式による違いとは？画像形式ごとのメリット・デメリットも紹介
様々な画像フォーマットの中でもWebサイトなどでよく使われるものには、下記の形式のものがあります。
画像形式①「jpg」「jpeg」（ジェイペグ）
非可逆圧縮方式を利用した形式で、jpg画像を画像編集アプリケーションで編集→保存を繰り返すと、画質が落ちる。
pngとは違い、背景透過の状態でjpg形式を指定して保存すると白く塗りつぶされる。画像のファイルサイズは軽め。
※「jpeg」拡張子の画像は今でも見かけますが、「jpg」との違いはありません。
画像形式②「png」（ピング）
可逆圧縮方式を利用した形式で、jpgと違い、編集→保存を繰り返しても画質が落ちない。
また、背景透過の状態で、png形式を指定して保存すると、背景透過のままで保存が可能。画像のファイルサイズはjpgと比べて重い。
※画像の中でも多くの割合を占める形式がここまでの「jpg」「png」になります。
画像形式③「gif」（ジフ）
可逆圧縮方式を利用した形式で、pngと同じく編集しても画質が落ちず、背景透過で保存が可能。pngと大きく違う部分は、gifアニメーションとも呼ばれる通り、アニメーション画像として保存できる点。
photoshopなどで複数のレイヤーをまとめてgif形式で保存することでパラパラ漫画のような画像が作れる。レイヤーが多い状態での保存や、動画編集ソフトでmp4形式の動画をgif形式で保存すると、かなり重いファイルになる。
画像形式④「webp」（ウェッピー）
非可逆圧縮方式を利用した形式で、背景透過、アニメーション画像として保存できます。webp形式の大きなメリットはjpgやpngに比べてもかなり軽量（7割）ほどで、サイトの読み込みが遅かったりでユーザビリティの低下が懸念されるサイトなどにはおすすめの形式です。
デメリットとしては、windowsなどの画像プレビューで確認できない為、ブラウザにドラッグして画像の確認をする必要があります。
画像形式⑤「svg」
可逆圧縮方式を利用した形式で、パスデータで作成されている為、拡大縮小や編集→保存の連続により、画質が悪くなることはありません。
Illustratorをよく使うWebエンジニアの方はわかると思いますが、保存したsvgファイルをテキストエディターにドラッグするとhtmlタグで表示されます。このコード自身のサイトの記述に追加し、jQueryやcssを加えることでアニメーションを付けられるなど、svgファイルはwebサイトを制作する上で多くのメリットがあり、最近Webサイト上でもよく見かけるようになった画像形式の一つです。
デメリットとしては、wordpressなどでメディアのアップロードをする際、このsvg画像はセキュリティの観点などでアップロードができない為、FTPやファイルサーバーからsvgを直接アップロードする必要があるところ。
[inter id=”440″]
※ほかにも「tiff」などの画像フォーマットがありますが、今回は紹介を省きます。
まとめ
今回はWebサイトでもよく見かける様々な形式の画像の違いと、各形式のメリット・デメリットを紹介しました。
保存して閲覧する分には「jpg」「png」「gif」などで問題ありませんが、Webサイトの制作に携わるなどの場合は、上記形式について理解しておくといいと思います。
前へ
