【紙→Webデザイン】Webの画像は適材適所でファイル形式を使い分ける
こんにちは。
都内の制作会社、NO DEZAINでデザインをしているnaoです。
紙→Webの違いについて気づいたこと、学んだことのアウトプット。
今回は、Webサイト内で使用する画像のファイル形式についてです。
Webの画像はJPEGでしょと思っていた
さすがに紙とWebでは画像の扱いが違うことは知っていました。
カラーモードはPRGだし、解像度も考え方から違う。
（解像度については触れると長くなるので、割愛w）
でも！
Webの画像の形式といえばJPEGでしょ。
あとアニメーションGIF？ といった浅ーーーいイメージ。
…だったんですが、実際には紙よりも多く保存形式の使い分けがあり、なんとなく名前は聞いたことあるけど、どこでどう使えば…🤯 となった記憶が。。。
紙でDTPソフトに配置する画像はPSD、古くはEPS形式で保存が基本で。PSDで配置してOKになったのは革新的だったなぁ…（遠い目👀）
ようするに種類は少なかったのです。
適材適所のために、各形式を学ぶ
弊社のWeb制作の流れでは、デザインデータを構築チームに渡し、画像の書き出しまでしてもらうことが多く。実際にデザイナーが自分で画像を書き出すことは少ないです。
が、既存ページの改修、コンテンツ追加、オウンドメディアの更新…など、画像データのみを構築チームへ渡す場面も当然ながらあり。そもそもわからないままなんとなく書き出すのも気持ちが悪いので。
ファイル形式ごとの違いを理解した上で使い分けできるようになりたいと、簡単にまとめました📝
ファイル形式まとめ
▽JPG / JPEG
Joint Photographic Experts Group
色数：1,677万色（フルカラー）
圧縮：非可逆（一度圧縮すると元に戻せない）
透過：✗
アニメーション：✗
データ容量がめっちゃ軽くなる🎈
色数が多いので写真のなめらかな表現に向き。
写真は基本JPEGに書き出し。
シンプルなイラストなどは逆にデータが軽くならない場合も。
JPEGで保存を重ねると、非可逆圧縮で色情報を削りながらどんどん劣化するので注意。
▽GIF
Graphics Interchange Format
色数：256色
圧縮：可逆
透過：◎
アニメーション：◎
アニメーションGIFのGIF。
透過の表現ができるので、はるか昔には1px四方の透明な画像をspacer.gifとして使ってたよね。
色数が256色なので容量がとても小さい。
色数が少ないイラスト、アニメーション向き。写真のように色数が多いものには不向き。
▽PNG
Portable Network Graphics
色数：256色〜1,677万色（フルカラー）
圧縮：可逆
透過：◎
アニメーション：✗
Web沼にくるまでは、聞いたことはあるものの使ったことがなかったPNG。
それもそのはずで、Web上でGIFのデメリットを回避するために開発されたフォーマットなんだそう…💡
使用場面はGIFやJPEGの欠点を補う場合かな。
◎透過させたくて、色数を削りたくない画像（GIFはジャギる）
◎文字や図版など、輪郭をハッキリさせたい画像（JPEGはぼやける）
…など。
ただ、画像の容量はJPEGやGIFに比べて大きい。
あとややこしいのが、同じ拡張子のくせにで、3種類あるところ。
◎PNG-8：256色に対応
◎PNG-24：1,677万色対応
◎PNG-32：1,677万色対応+透過可能
Photoshopの場合は書き出し時に選ぶ感じ。
figmaやxdからは、種類が選べないんですが透過部分もきちんと書き出されるので、PNG-32だと思われます。
▽WebP
色数：1,677万色（フルカラー）
圧縮：非可逆圧縮 / 可逆圧縮
透過：◎
アニメーション：◎
「ウェッピー」と読む。かわいい🐣
わたしは初見で「ウェブッピ」だと思っていた。それでもかわいい🐣
noteに上げた画像も自動的にWebPに変換されてるのでお馴染み。
ここ最近現れたフォーマットかと思ったら2010年にGoogleから提供開始されていたんだそうです。
◎非可逆圧縮：JPGと比較して25-34%小さくなる
◎可逆圧縮：PNGと比較して28%小さくなる
…が最大のメリット。
やっぱり軽いのはWebサイトに於いて大正義だもんね✨
Googleが使用を推奨しているということもありSEO効果もあるとかないとか。これはちょっと真偽不明です。
古いブラウザだと表示対応していないのが唯一のデメリットか。
2022年からPhotoshopが対応したので、ぐっと身近になりました✨
figmaやxdからはまだ直接書き出せないので、一旦PNGに書き出してからPhotoshopで一括変換しています。早く対応しないかな。
ベクター画像はSVG
上記のファイル形式は、全てラスター画像のものですが、Webで使えるベクター画像の形式もあります。
▽SGV
Scalable Vector Graphics
アニメーション：◎
稀にCSVとまざって名前が出てこないw
SVGこそ本当にWeb沼へ来るまで知らなかったので、Webでパスが表示できるの！？と、驚きました。
ベクター画像なので、画質を損なうことなく拡大縮小が可能。
ロゴやアイコン向け。
XMLコードで記述されいて、検索エンジンがテキストを読み込めるのでチャートやグラフにも有効。
基本的にはラスター画像より容量が小さい。
古いブラウザや、BASEなどの外部サービスで非対応な場合がある。
結論
Webサイトに画像を使用するには、データの容量を抑えることも大切。
何を綺麗に表示させたいか、どこに何をどう表示させたいかも大切。
動きが早いWeb業界なので、今以上にメリットのあるファイル形式がある日突然出てくることもあるかもしれない。
柔軟にとらえて、それぞれの場所に適したファイル形式を使えるように、書き出しで構築チームに頼りっぱなしにならないように、より理解を深めていきたいと思います✊
ここまで読んでいただきありがとうございました☕
NO DEZAINはWebサイト制作を中心としたデザイン会社です。
Webサイト制作/グラフィックデザインのご相談がございましたら、お気軽にお問い合わせください☺
▼NO DEZAIN