Webデザインに必須の画像ファイルの種類を覚えよう
Webサイトは、テキストと呼ばれる文字データと画像データで作られています。
Webサイトで使われる画像データは、複数の種類があって、それぞれ違った特徴を持っています。
この記事では、Webデザイン制作をするにあって基本的な知識である画像データの種類と特徴について、Webデザイナー初学者でもわかりやすく説明したいと思います。
この記事はWebデザイナー歴18年のフリーランスが書いています
Webデザインは、PhotoshopやIllustratorといったデザインソフトを使って作られます。
Webコーダーは、デザイナーが作ったデザインデータの中から画像のみを取り出して保存します。
この保存を行う際に、PNG,JPEG、GIFと3つの中からどの画像形式にするかを選ぶことができます。
この制作の流れを意識しながら、画像ファイルについて学んでいきましょう！
画像ファイル形式・拡張子ってなに？
先ほども言った通り、画像ファイルはそれぞれ違ったファイル形式を持っています。それらは、画像を作った人（WebデザイナーやWebコーダー）が選んでつけています。
PNG形式で保存すれば、PNGファイル。JPEG形式で保存したファイルは、JPEGファイルと呼ばれます。
拡張子とは
拡張子とは、ファイルの末尾につけられる、「.png」「.jpeg」といったものです。
どのファイルをPNG形式で保存するべきか、JPEG形式で保存すればいいのか、次に詳しく説明していきますね。
覚えるべき必須の画像ファイルは４つ
基本のファイル形式「PNG(ピング）」。背景透明化に便利
・拡張子は.png
・Web画像用に開発された画像
・透明化したり、アニメーションができる
・保存を繰り返しても画質が劣化しない（その代わりファイル容量重め）
・Portable Network Graphicsの略
Web画像でよく使われる、最も基本的な画像ファイルです。悩んだ時困った時はとりあえずPNGで保存すればOK。
pngファイルの使い勝手がいいのは、背景を透明化できるところ。
また、「可逆圧縮」という圧縮方法をつかっているため、保存を繰り返しても画質が劣化しないという特徴があります。
pngには2種類あって、色数が256色限定の8bit（PNG-8）と、フルカラー1,600万色の24bit（PNG-24）があります。当然PNG-8の方がファイルサイズが小さくなりますが、とりあえずPNG-24で保存する場合が多いです。
アニメーションをつけるならAPNG
APNGはPNG画像にアニメーションがついたファイル形式です。LINEの動くスタンプなんかは、APNG形式で作られています。昔は対応ブラウザが少なかったのであまり使われずでしたが、2023年現在は基本どの最新バージョンのブラウザでもサポートされています。
pngファイルの歴史
pngファイルは1995年に生まれました。それ以前はPNGと同じく透明化ができる、GIFファイルという画像形式が主流でした。ただPNGファイルの方が画質が綺麗に保存ができるので、ネットが進化してファイル容量を気にせずに作れるようになると共に、WebサイトはPNGファイル中心になってきました。
写真画像の保存形式といえば「JPEG(じぇいぺぐ）」
・拡張子は.jpeg
・写真データを保存するならJPEGが定番だった
・「非可逆圧縮」方式なので、保存を繰り返すと徐々に画質が劣化
・背景透過はできない
・Joint Photographic Experts Group の略
PNGに負けず劣らず、Web画像の主流を担っているのがJPEGファイルです。1,677万色のフルカラーに対応しているので、繊細な写真データの保存といえばJPEGで行うのが定番とされてきました。
デジカメの保存データ形式にもJPEGは使われています。
JPEGは「非可逆圧縮」という圧縮形式をとっています。PNGが「可逆圧縮」形式で保存を繰り返しても劣化しないのに比べ、JPEGは徐々に画質が劣化していきます。そして一度劣化した画質は元には戻せないので、注意が必要です。
また、JPEGは背景を透過することもできません。
それならJPEGじゃなくてPNGでいいじゃ無いかと思われるかもしれません。ただ、長らくJPEGが主流だったのは、写真をフルカラーでPNGで保存するとファイル容量が大きくなってしまい、サイト全体が遅く重くなってしまうのを防ぐためです。WebデザイナーはJPEGで程よく画質を落とす調整をして、サイトを作っていました。
今は、ネットのデータ転送が格段に早くなったので、写真でもPNGファイルを使ったり、この後紹介する最新画像形式の「Webp」でアップするケースが増えてきました。
Google推奨の新しい画像ファイル形式 「WebP（ウェッピー）」
・Googleが開発した次世代画像ファイル形式
・圧縮率が高く、とにかく容量が軽い
・Google推奨の画像ファイル形式なので、Googleからの評価があがる
・全ての画像ファイルをWebPに統一できる
・圧縮方式が「非可逆圧縮」「可逆圧縮」どちらにも対応している
Googleは早く見やすい表示の軽いサイトを高評価します。
そのため、SEOで検索上位にいく、Googleに企業のサイトとして評価されるためには、Google推奨のWebpを積極的に使ってWebサイト全体を軽くしていく必要があります。
Googleが提供している「PageSpeed Insights」でもWebpは重要度が高く、Webpを使っているサイトほど高評価になります。
WordPressでもWebPに対応しており、すでに上がっている画像ファイルをWebpに変換するプラグイン等が開発されています。（Converter for Mediaというプラグインです）
Googleの評価を気にしてWebPにするというよりは、単純にユーザービリティの観点からもアクセスしてから表示が遅いサイトっていやですよね。たとえローディングが回っていても回れ右をする人が多いと思います。
WebPのすごいところは、背景透過やアニメーション作成もできて、圧縮もどのファイルより綺麗に軽くすることができます。PNG,JPEG,GIFの長所を全て持っている。
透過したいからPNGにしようとか、画像が繊細だからJPEGにして画像サイズを落とそうとか、画像の保存形式を分けることなく、画像ファイルはWebpで基本OK。画像によって使い分けをする必要がなくなるんですよね。
今まではPNGやJPEGで保存していた画像ファイルは、今後はWebP中心になっていくことでしょう。
絶対に劣化させたくない画像に、「SVG（エスブイジー）」
SVGは奥が深く、他の画像ファイル形式とはちょっと毛色が違います。画像データを数式化してコードのように扱うことができるデータです。
SVGは、いわゆるパス画像と呼ばれる画像を保存するのに適した画像ファイル形式です。写真のような画像には使えません。
SVGの特徴として、どんなに拡大しても輪郭がぼやけたり潰れたりすることはありません。
よく使われるのは、ロゴ。絶対に崩れないし、どこの企業でもパスデータがあるものだからです
また線で描かれたイラスト画像もSVGで保存したりします。
SVGは使い所が限定されますが、ファイル容量は格段に軽いし、何より画像を綺麗なまま保存することができます。
また、SVGで保存された画像は、HTMLファイル上で文字の色を変えたり、アニメーションさせたり、JavaScriptと組み合わせることでかなり幅のある使い方ができます。
昔はみんな使っていた「GIF（ジフ・ギフ）」
今主流のPNGの前身とも呼べる画像形式がGIFファイルです。GIFはネット黎明期にはなくてはならない画像形式でした。
透明化ができ、軽くて、アニメーションもできる。デザイナーならずとも、アニメGIFはいろいろなところで話題になりました。
GIFが衰退したのは、単純に容量が重く、Webのスマホ移行の波に乗れなかったこと。
さらに特許問題が起きて、今まで無料で使えていたGIFファイルに料金が発生するということで大きな問題となりました。今はまたGIFの見直し活動が起きているみたいですね。
画像ファイルの変換方法
画像ファイルは、変換することができます。例えばJPEG→PNGに、PNG→WebPにといった具合です。
特に、今までJPEG、PNG、GIFで表示していた画像は、全て軽いWebPにしようという動きがあります。
ファイルの拡張子のみを変更しても、ファイルの中身が変わるわけではなく、ちゃんとソフト等で変換する必要があります。
画像ファイルの変換のやり方は何種類かあり、以下のやり方がおすすめです。
・Photoshop等のデザインソフトで保存し直す
・フリーソフトやブラウザの無料変換サービスを使う
・WordPressのプラグインを使う
Photoshop等のデザインソフトで保存し直す
Photoshopで一度画像を開いて、また別のファイル形式で保存し直すやり方です。地道だけど数が少なければこれで十分です。「WebP」はファイル保存で選ぶことができます。メニューの「書き出し」の中には入っていないので気をつけてください。
フリーソフトやブラウザの無料変換サービスを使う
数が多い場合は、無料の変換サービスを使うと便利です。おすすめは以下です。
フリーソフト「Crushee」JPEG、PNG、AVIF、GIF、SVG、WebPの変換に
画像のオリジナルデータのファイル形式・拡張子
今までは、Webサイト上にアップする画像ファイル形式（拡張子）の話をしました。
他にも画像データはあります。
特に覚えてほしいのが、デザインソフトでつくられた画像ファイルのことです。
Photoshopでつくられた画像ファイルは、ファイル名.psd という拡張子がつきます。
そのため、PhotoshopのデータはWeb制作者の間では、たびたびPSDデータ（ピーエスディーデータ）と呼ばれます。
また、Illustratorの拡張子は、.ai なので、AIデータ（エーアイデータ）と呼ばれます。
拡張子で気をつけること
ファイルの拡張子というのは、そのファイルを表す大事なものです。なので、ファイル名を変える時も拡張子をいじってはいけません。ファイルが壊れて開かなくなるだけです。
またPNGだけどJPEGに変えたいなと思った時でも、拡張子だけを変えてもなんの意味もありません。必ず変換ソフトを使って拡張子を変えるようにしましょう。
まとめ
画像のファイル形式の保存方法や使い分けについてまとめました。
おそらく2023年以降、WebPがどんどん主流になってくるのでは無いでしょうか。しかし、PNGやJPEGもそれぞれ特徴があり、全世界のWebサイトを見るとまだまだ使っているところがほぼ大多数ですので、全部まるっと覚えてくださいね。