【 WebP 】 これからの画像形式 FirE♯537

WEBデザインにおける画像形式を整理します。

また、RGBとCMYKについてもまとめます。

【 画像形式 】

画像ファイルには、様々なものがあります。

WEBサイトで使用する形式は主にこちらの5つです。

■ GIF

拡張子「 .gif 」
約256色
圧縮方法：色数を減らす
透過可能△
写真×
アニメーション機能あり

GIFファイルはアニメーションを作ることができることが特徴です。

256色までの画像を無劣化で圧縮することができる。
図やイラストなどの画像に向いている

■ JPEG

拡張子「 .jpg 」
約1670万色
透過不可×
写真◎
圧縮方法：画質を落とす
RGBフルカラー

写真に適したファイル形式です。

画質を落としてファイルを圧縮するため、圧縮率を上げるとブロックの境界にブロックノイズと呼ばれるノイズが生じます。

一度圧縮すると、圧縮前の状態に完全に復元することはできません。

■ PNG

拡張子「 .png 」
約280兆色（実際は、PING8=256色、PING24=1670万色）
透過可能◎（半透明可能）
ベクトルデータ・レイヤー情報を保存可能

フルカラーの画像を無劣化で圧縮する。
図やイラストなど向いています。

■ WebP

拡張子「 .webp 」
約1670万色
透過可能◎
JPEG、PNGなどと比べて30％ファイルサイズが小さい
Googleが開発し、強く推奨
Adobe、Appleも対応完了
※元画像と色が変わることがある

Googleが開発し、強く推奨する画像形式です。

ファイルサイズはJPGと比較して25～34%小さくなる。
PNGと比較して26%小さくなる。
背景透過も可能です。

2022年にAdobeのソフト、Appleデバイスでも対応が完了し、今後はWEBにおいてはメインとなる画像形式です。

■ SVG

拡張子「 .svg 」
約1670万色
透過可能〇
ベクトル画像形式
拡大しても画像が荒れない
JavaScriptで加工可能

SVGファイルはベクタ形式の画像ファイルです。
そのため、拡大縮小でデータが劣化しません。

企業ロゴで使用されることが多い画像形式です。

また、JavaScriptやCSSでアニメーションを加えたりすることもできます。

この辺りの記事で、手書きの文字や、線を、WEBサイトでアニメーションさせる方法を書いています。

【 進化するWEB 】

WEBの世界は、進化が速く、新しい技術が次々に生まれています。

しかし、その技術も、それ単体では使えません。

画像においては、まさに、WebPが良い例です。

なんと、このWebPは2010年9月30日に仕様が公表されました。

10年以上の時を経て、主流となろうとしています。

なぜかというと、Apple、Adobeといったデバイスや、ソフト側の対応が完了していなかったからです。

どのような技術も、それを誰もが使える状態にならなくては、広がりません。

WebPのメリットは非常に多く、今回のApple、Adobeの対応完了で、使わない理由がなくなったと言えます。

Googleが強く推奨していることもあり、SEO的にも、表示速度の面で必要になります。

■ WebP変換

WEBP変換ツール (jpg、pngとwebpを相互変換)

こちらのサイトでは、JPGファイルとWebPへ相互変換する作業が簡単にできます。

【 まとめ 】

画像形式について、まとめました。

様々な画像形式がありましたが、今後は、WebPとSVGに注目です。

しかし、そのほかのファイルも状況に応じて使えるように、特徴を知っておきましょう。