【 WebP 】 これからの画像形式 FirE♯537
WEBデザインにおける画像形式を整理します。
また、RGBとCMYKについてもまとめます。
【 画像形式 】
画像ファイルには、様々なものがあります。
WEBサイトで使用する形式は主にこちらの5つです。
■ GIF
GIFファイルはアニメーションを作ることができることが特徴です。
256色までの画像を無劣化で圧縮することができる。
図やイラストなどの画像に向いている
■ JPEG
写真に適したファイル形式です。
画質を落としてファイルを圧縮するため、圧縮率を上げるとブロックの境界にブロックノイズと呼ばれるノイズが生じます。
一度圧縮すると、圧縮前の状態に完全に復元することはできません。
■ PNG
フルカラーの画像を無劣化で圧縮する。
図やイラストなど向いています。
■ WebP
Googleが開発し、強く推奨する画像形式です。
ファイルサイズはJPGと比較して25~34%小さくなる。
PNGと比較して26%小さくなる。
背景透過も可能です。
2022年にAdobeのソフト、Appleデバイスでも対応が完了し、今後はWEBにおいてはメインとなる画像形式です。
■ SVG
SVGファイルはベクタ形式の画像ファイルです。
そのため、拡大縮小でデータが劣化しません。
企業ロゴで使用されることが多い画像形式です。
また、JavaScriptやCSSでアニメーションを加えたりすることもできます。
この辺りの記事で、手書きの文字や、線を、WEBサイトでアニメーションさせる方法を書いています。
【 進化するWEB 】
WEBの世界は、進化が速く、新しい技術が次々に生まれています。
しかし、その技術も、それ単体では使えません。
画像においては、まさに、WebPが良い例です。
なんと、このWebPは2010年9月30日に仕様が公表されました。
10年以上の時を経て、主流となろうとしています。
なぜかというと、Apple、Adobeといったデバイスや、ソフト側の対応が完了していなかったからです。
どのような技術も、それを誰もが使える状態にならなくては、広がりません。
WebPのメリットは非常に多く、今回のApple、Adobeの対応完了で、使わない理由がなくなったと言えます。
Googleが強く推奨していることもあり、SEO的にも、表示速度の面で必要になります。
■ WebP変換
こちらのサイトでは、JPGファイルとWebPへ相互変換する作業が簡単にできます。
【 まとめ 】
画像形式について、まとめました。
様々な画像形式がありましたが、今後は、WebPとSVGに注目です。
しかし、そのほかのファイルも状況に応じて使えるように、特徴を知っておきましょう。
この記事が気に入ったらサポートをしてみませんか?