Webサイト(WordPress)に適した画像形式は？【JPEG/PNG/WebP】

Web上で利用される画像の形式を理解していますでしょうか？

WordPressなどをはじめ、Webサイトを作る時にはほぼ確実に画像を使いますよね。実は画像と一口に言っても、様々な形式のものがあります。

JPEG、PNG、GIF、SVG、WebP…などなど

当記事では、これらの画像形式（フォーマット）について、それぞれの特徴やホームページ上ではどれを使うのが最適なのか？？をメインに解説していきたいと思います。

特にこれからサイトを作るよ～という人は、後から最適な画像に差し替えるのも大変かと思いますので、ぜひ早めに画像形式の特徴を理解して使えるようになってくださいね。

【結論】おすすめの画像形式は？どれを使うのが正解？

まずはおすすめの画像形式をお伝えしておきます。

異論がある方もいるかもしれませんが、とりあえずWebサイトをつくるならこの前提でOKだと思います。

他の画像形式を使っていても間違いというわけではないです。結局ちゃんと表示されていることが一番重要ですので、あくまでおすすめとして捉えてください。例えば、PNGは実際主流ですし使ってても間違いというわけじゃないです。

あくまで最終的にWebサイト上で使う画像の話ですので、元となる高画質なデータはどの形式であっても取っておくと良いでしょう。

それぞれの形式にはそれぞれメリットデメリットがあります。以下で説明します。

Webサイトで使われる画像の形式とそれぞれの特徴

私たちの目から見れば同じ画像であっても、画像のデータであるファイルにはいくつか種類があります。

ここで言う形式というのは画像のデータファイルの種類のことです。この項目ではその画像形式について学びます。

形式が違えば画像データファイルの拡張子が異なりますので一目でわかります。拡張子というのは（.jpeg）や（.png）など、ファイルの識別のためにファイル名の後半に付けられているものです。基本的に形式名と同じなので分かりやすいですよ。

それでは早速、Webサイト上でよく使われている画像形式とそれぞれの特徴について見ていきます。ここで紹介するのはよく使われる５つの形式だけに絞りました。特に覚えておいてほしいのはJPEG、PNG、WebPです。余裕がある方はSVGとGIFも押さえておきましょう。

JPEG（ジェイペグ）

JPEGは王道中の王道な画像形式です。実際Webサイト内でも一番よく見かける気がします。

汎用性が高いのが特徴です。基本的にどんな種類の画像でもOKですが、特に写真などの画像データはJPEGが向いています。

カメラで撮った画像もJPEGとして保存されていることも多いので、撮影した画像のデータをそのまま使うなんてこともよくあります。

まず基本はこのJPEGを利用することを考えれば良いと思います。

ただし、透過が出来なかったり、データ圧縮が不可逆であったりする点がデメリットです。

読み方	ジェイペグ / ジェイピージー
拡張子	.jpg / .jpeg
データサイズ	普通（設定による）
透過	不可
WordPress	利用可
形式	ラスタ形式
データ圧縮	不可逆

※透過・形式・データ圧縮についての詳細は次項「補足：可逆圧縮や、データの特徴について」で解説します。

PNG（ピング）

JPEGと肩を並べるもう一つの王道があるとすれば、このPNGです。

JPEGとの大きな違いは透過画像が使えること、データ圧縮が可逆（元に戻せる）ことです。

そのため、透過画像を使いたい場合はPNGと覚えておくと良いでしょう。

例えば、Webサイト上に背景があって、その上に乗せたいロゴやイラストがある場合などに活用できます。

これだけ聞くと、「JPEGよりPNGの方が上位互換で良いじゃん！」と思うかもしれませんが、データサイズがJPEGより大きいのが難点です。ただし、色数の少ないイラストなどはJPEGよりサイズが小さい場合があります。

以上の理由から、同程度の画質なら基本的には比較的データサイズが小さいJPEGを使い、透過させたいロゴやシンプルなイラストなどにはPNGを使うのがオススメです。

読み方	ピング / ピン / ピーエヌジー
拡張子	.png
データサイズ	大きい
透過	可
WordPress	利用可
形式	ラスタ形式
データ圧縮	可逆

WebP（ウェッピー）

WebPはGoogleが開発した次世代画像フォーマットで、画像データが軽くて万能なので、Web用の形式としては現状最強と言えます。

画像サイズが小さいと何が良いかというと、サイトの表示速度が速くなる点です。サイトの表示速度が速くなるとユーザーにとっての利便性が向上するため、SEO上良い影響をもたらすとGoogleが公式ガイドラインでも明言してるんですよね。

Googleさんによると

WebP 可逆圧縮画像は、PNG 画像と比べてサイズが 26% 小さくなります。WebP の非可逆画像は、同等の SSIM 品質インデックスで同等の JPEG 画像よりも 25 ～ 34% 小さくなります。

引用元：https://developers.google.com/speed/webp?hl=ja

とのことで、ざっくり30％くらいデータ軽量化に寄与してくれます。

ただし、カメラで撮影した画像データはJPEGなどの形式であることが多いので、WebP形式に変換するというひと手間がかかります。つまり、WebPの利用はこだわりたい方向けとなります。

また、WebP画像には可逆圧縮のものと非可逆圧縮のものがあります。ただし、どちらのデータなのかという判断が難しいです。まぁ、あまり気にする人はいないと思いますが。

さらには、WebPでは透過やアニメーションにも対応しています。つまりオールインワン型でやりたいことがほぼ全て出来るのにデータ容量が軽いという素晴らしい形式です。

WebPのデメリットとしては、変換がめんどくさいという点と、サポートしていないブラウザがある点です。つまり一部のブラウザ環境ではWebP画像は表示されません。

対応していないブラウザは主に

これはユーザーの割合で言うと、2024年現在は全体の１％程度です。99％の一般的な人は見れますし、「そもそもこんな古いブラウザを使っているユーザーに対応する必要があるのか？」と考えると、あまり気にしなくていいと思います。

それでも１％のユーザーに対応したければ、対応していない環境に対してのみJPEG画像に切り替えるといった対処もできます。ただしその分手間がかかって大変ですので、気になるならはじめからJPEGやPNGを使ったほうが楽でおすすめです。

WebPの画像を使いたいなら、変換してからアップロードが基本です。WordPressでは、WebPに画像を変換するプラグインもあります。この辺りは別記事で解説します。

読み方	ウェッピー
拡張子	.webp
データサイズ	小さい
透過	可
WordPress	利用可
形式	ラスタ形式
データ圧縮	可逆 / 不可逆

SVG（エスブイジー）

SVGは「Scalable Vector Graphics（スケーラブル・ベクター・グラフィックス）」の略で「大きさを変えられるベクター画像」という意味です。そのため、拡大縮小しても見た目が劣化しないのが特徴です。

SVGはロゴやアイコンを始め、グラフや図などのデザインデータなどでよく見られます。ただし、高画質な写真など、一般的な画像には向いていません。これはベクタ形式が計算式を元にして表示しているという特徴によります。

現在はPCだけでなくスマホや様々な環境で見られることが多くなったため、拡大縮小に強いSVGが採用されるパターンを多く見かけます。特にロゴに使っているサイトが結構な数あります。

拡大されても大丈夫なようにするためには、解像度の高い画像データでもある程度大丈夫なのですが、その分データサイズが大きくなってしまうことや、キレイに拡大するには限界があるという問題があります。SVGはデータサイズが小さいので、その点は問題なしです。

ただちょっと厄介なのが、WordPressはデフォルト状態では対応していないので、専用のプラグインを導入したり使えるようにコードを書き変える必要があります。透過ならPNGやWebPでも使えるので、WordPressサイトでロゴやアイコンを使うなら無理してSVGにしなくてもOKです。

また、SVGは悪意のある人がサイト上からアップロードできてしまう状態にしていると、セキュリティ上問題になります。セキュリティなんぞよく分からんって人は、無理せずPNGで代用しましょう。

読み方	エスブイジー
拡張子	.svg
データサイズ	小さい
透過	可
WordPress	利用可（プラグイン等が必要）
形式	ベクタ形式
データ圧縮	不可逆

GIF（ジフ）

GIFは色数が少なく軽いので、昔のWebでは主流の形式のひとつでした。

廃れてきた形式ですが、X（旧Twitter）などのミーム画像などや動くスタンプ画像のようなものなら今でもよく目にします。一般的なWebサイト上ではあまり見かけません。

使いどころとしてはズバリ、シンプルな短いアニメーションに向いています。

画質はあまり良くないので、他の使いどころはほぼない…というかあえて使う必要がないと考えて良いでしょう。

透過もできますが、半透明にはできません。

なお、GIFより高画質なアニメーション画像を使いたければ、APNGという形式（WordPressではデフォルトでは対応していない）もありますので使いたい人は調べてみてください。

読み方	ジフ
拡張子	.gif
データサイズ	小さい
透過	可（半透明は不可）
WordPress	利用可
形式	ラスタ形式
データ圧縮	可逆

補足：データの特徴・圧縮・透過について

各画像形式の特徴について、分かりづらい部分もあったかと思いますので補足です。

ラスタ形式とベクタ形式、可逆圧縮と非可逆圧縮、透過についてそれぞれ簡単に解説します。

ラスタ形式とベクタ形式

ラスタの仕組みはテレビなんかと同じで、色のついたドットが集まって画像が表示されます。画像の表示方法として一般的な形式です。

ドット絵なので拡大すれば粗くなります。また、何色の色を使えるかによって、画像の鮮明さやデータサイズが異なります。

ベクタは点の位置や線を演算によって計算して表示する画像なので画像自体のデータサイズは小さく、拡大縮小も劣化しないというカラクリがあります。ドイツ語で言うとベクトル、数学や物理で馴染みのやつですね。

ベクタデータは計算式を使っているので、CSSやJavaScriptを用いることで後から色やサイズを変えられたり、アニメーションや透過と言った処理が追加できます。つまり後からの編集自由度が高いのも特徴です。

以下は比較表です。

形式	ラスタ形式	ベクタ形式
主な用途	一般的なWeb画像、写真	アイコンやロゴなど 比較的シンプルなデザインデータ
メリット	写真など描写が複雑なデータの表示が出来る	拡大縮小に適している
デメリット	拡大に適していない	複雑な画像表現に適さない
作成ソフト	Adobe Photoshopなどの「ペイントソフト」	Adobe Illustratorなどの「ドローソフト」
フォーマット例	JPEG、PNG、WebP、GIF	SVG

可逆圧縮と非可逆圧縮

データを圧縮した時に、元のデータに復元できるのが可逆圧縮。復元できないのが非可逆圧縮です。

可逆というのは逆が可能と書くので、1度覚えてしまえば意味は分かりやすいでしょう。

データ圧縮するのにどうして復元が可能かと言うと、データ内に存在する同じ色情報などをまとめて簡単に置き換えることで圧縮を行っているからです。

一方で非可逆圧縮は、不要な情報は削除しますので圧縮してしまったデータは元のデータに戻すことができません。可逆圧縮と比べて、その分データ容量は小さい傾向にある点がメリットとなります。

不可逆圧縮は編集や保存のたびに画質が劣化していくことになります。ただ実際には劣化するほど何度も編集や保存を行うということは、あまり考えられません。

ですから元データは元データとして保存しておいて、使用するのは不可逆圧縮の画像という方法を取るのが好ましいです。

透過について

透過は例を見てもらった方が早いと思います。透過と透過でない画像の違いは以下の例を見比べてください。

背景に色がある場合分かりやすいですが、透過画像であれば、その後ろ側にある背景が透けて見えます。

例では青系の背景の上に画像を置いてみました。背景が白であればどちらも同じような見た目となりますが、背景色があるとその違いがよく分かりますね。

ちなみにPNGやWebPなんかは半透過の画像も扱えます。背景との合成が可能というわけです。

WordPressでアップロード可能なファイル形式

調べてみたところ、WordPressでデフォルトで使用可能な画像のファイル形式は

JPEG、GIF、PNG、BMP、TIFF、WebP、AVIF、ICO、HEIC

となっているようです。

参考：https://developer.wordpress.org/reference/functions/wp_get_mime_types/

解説した形式の中ではSVG以外はデフォルトで使えることが分かりますね。

世界のWebサイトでの各画像形式の利用率

ちなみに、実際の世界のWebサイトでの各形式の利用率は以下の通りです。（2024年7月現在）

参考：https://w3techs.com/technologies/overview/image_format

この割合を見れば、この記事で紹介した形式の５つを押さえておけば良いというのがご理解いただけたかと思います。

ファイル形式を変換する方法

「おすすめの画像形式は分かったけれど、どうやって作成すればいいの！？」と思う方もいると思うので、最後に画像形式を変換する方法をいくつか簡単に紹介します。

PCのローカル環境下で変換する

お使いのパソコンの設定などにもよりますが、画像を保存する際などに形式を変更できる場合があります。

例えば、上の例では.jpegの形式の画像を.pngに変更できるのが分かりますね。

画像変換のサイトを使う

手っ取り早く画像を変換したいなら、画像変換してくれるサイトが便利です。

例えば、JPEGからWebPに変換したいなら「JPEG WebP 変換」などと検索をかければ、サイトがいくつか出てくるはずのでそういったサイトを活用するというのが一つの方法。

有名なサイトだと、「Convertio」や「iLoveIMG」なんかがあります。また、画像作成や加工で人気の「Canva」でも変換が可能です。

Photoshopなどの画像編集ツールを使う

画像編集ツールを使って形式を変換して保存すると言う方法があります。Adobe(アドビ)のPhotoshop(フォトショップ)なんかは有名なので聞いたことある方も多いでしょう。

こういった画像編集ツールがあれば、書き出しの際に形式が選べるものが多いです。画像編集ツールで、形式変換が可能なものを探してみましょう。

例えば、変換だけでなく画像や動画を編集する機会がある方で、本格的に「Web制作をしたい」「プロのように写真や動画の編集などをしたい」などと考えている方は、AdobeCCを契約するのもアリです。AdobeCCはPhotoshopなどクリエイターにとって有用な20以上のツールを使うことが出来るサブスクリプション型のサービスです。Adobeのツールはクリエイターにとっては王道中の王道で、Web制作者なら誰でも知っているソフトになります。

とはいえ、いきなりAdobeCCを契約しても使い方が分からないと思います。アドバンスクールのようなAdobeの使い方を学べる講座を契約するとお得にAdobeCCを使うことができ、ソフトの使い方も学ぶことが出来るので一石二鳥でオススメです。興味がある方はチェックしてみてください。

WordPressの画像変換プラグインを使う

一度WordPressにアップロードしたものは、いちいち変換するのが大変！そんな時には画像変換の専用プラグインの使用を検討してみるといいかもしれません。

「Converter for Media」というプラグインの利用がオススメです。

WordPressに既にアップロードしてしまった画像ファイルであっても変換できますよ。

既にアップロードした画像だけでなく、新たにアップロードする画像を自動で変換するように設定することもできます。

面倒くさがりな方にオススメの方法ですね。

元のデータはできれば残しておこう

画像はそのまま使うだけでなく、形式を変換したり、加工したりすることも多いですが、出来れば元々のデータは別で残しておくことをおすすめします。

必要があれば、後から柔軟に編集や手直しがしやすいためです。

まとめ

Webサイトで使う画像形式を5つ紹介しました。

改めて結論を言うと、手間をかけられるならWebPがおすすめ、ということでした。

WebPがめんどくさいという人は、基本的にJPEGを使って、透過画像などはPNGを使うという組み合わせもアリです。

どちらにせよ、ユーザーから見てキレイに見えて、しかもサイト読み込みが早い、という点が重要です。この点をしっかり踏まえた上で自分に合った形式を選んでみてください。

なお、画像については形式も重要ですが、画像自体の大きさでもある画素数や解像度、データサイズの圧縮も大切になります。

当記事では解説しませんでしたが、画像のサイズ(ピクセル数)やデータサイズの圧縮については別記事でまとめようと思います。