画像はコンテンツに命を吹き込み、WordPressサイトをより魅力的にします。しかし、適切なファイル形式を選択することはパフォーマンスにとって重要です。また、画像の読み込みに時間がかかったり、ぼやけて見えたりすると、サイトが素晴らしいユーザー体験を提供できなくなります。
そのため、WebPとPNGとJPEGについて疑問に思うかもしれない。
WPBeginnerでは、これら3つのフォーマットを長年にわたってすべて使用してきました。その経験から、PNGは画質とパフォーマンスのバランスが最も優れていると考えています。しかし、WebPとJPEGも素晴らしい選択肢を提供し、特定の条件下で最高の効果を発揮します。
この投稿では、WebPとPNGとJPEGを比較し、WordPressに最適な画像フォーマットを選ぶお手伝いをします。
WebP vs. PNG vs. JPEG – はじめに
まず、3つの画像フォーマットをすべて見て、それぞれがどのように機能するかを見てみよう。
WebPとは？
WebPは、PNGやJPEGに比べて比較的新しい画像フォーマットです。Googleによって作成されたWebPは、インターネット上の画像に優れた可逆圧縮と非可逆圧縮を提供します。これにより、サイトのパフォーマンス向上に役立つ、より小さな画像を作成することができます。
可逆圧縮とは、圧縮を解いた後、画像内のすべてのデータが残ることを意味します。一方、非可逆圧縮は、画像ファイルから情報を永久的に削除することで、ファイルサイズを小さくします。
WebPの際立った特徴のひとつは、PNGやJPEGでは不可能な、動きのある画像をサポートしていることです。このため、WebPはGIFの代替としても最適です。
WordPressは、5.8リリースでWebP画像フォーマットのサポートを導入しました。以前は、WordPressでWebP画像を使用するにはWordPressプラグインをインストールする必要がありました。
Google Chrome、Firefox、Safari、Edgeなど、最新のウェブブラウザはすべてWebP画像フォーマットをサポートしています。多くの画像編集ツールもWebPをサポートしており、このフォーマットで画像を書き出すことができます。
WebPにもPNGと同様の機能があります。PNGと同じレベルの透明度をWebP画像で実現できます。
長所だ：
- PNGやJPEGに比べてファイルサイズが小さい。
- 一般的なウェブブラウザーに対応
- PNGと同レベルの透過性を画像に持たせる。
- 非可逆圧縮と可逆圧縮の両方をサポート
- 動きのある画像を作成可能
短所だ：
- 画像をWebP形式に変換するには、サードパーティのツールやプラグインが必須です。
- 写真編集ソフトのサポートが限定的
PNGとは？
ポータブル・ネットワーク・グラフィックス（PNG）は、インターネットで最も人気のある画像フォーマットのひとつです。何百万色もの色をサポートしているため、写真はより鮮明でリアルになります。
PNGを使用する主な利点は、その可逆圧縮アルゴリズムです。画像が圧縮されても、データや品質が失われることはありません。このため、画像ファイルサイズを小さくし、画像の細部を保持したい場合、PNGはWordPressサイトに最適なフォーマットとなります。
PNGを使うもう一つの利点は、透明な背景をサポートしていることです。そのため、PNG形式のサイトロゴファイルやその他の要素が多く見られます。
例えば、これはPNG形式のWPBeginnerのロゴです。
長所だ：
- 圧縮しても画質が落ちない
- JPEGに比べて画像ファイルサイズが小さい。
- 高品質の画像透過性を提供します。
- 主要なブラウザーと画像編集ツールですべてサポートされています。
- 色数の少ないロゴやグラフィックに最適なフォーマット
- ロスレス圧縮に対応
短所だ：
- 非可逆圧縮に対応していない
- 色深度に制限があり、複雑な色彩を多用する画像には適さない。
JPEGとは？
JPEGはJoint Photographic Experts Groupの略で、1986年に作られた画像フォーマットである。デジタルカメラやスマートフォンなど、多くの端末の標準画像フォーマットです。WordPressサイトビルダーや画像ギャラリープラグインの多くもJEPG画像をサポートしています。
JPEGを使用する利点の1つは、鮮やかな画像を提供し、何百万もの色を含んでいることです。すべてのウェブブラウザがこのフォーマットをサポートしており、画像サイズは比較的小さい。
例えば、これはJPEGフォーマットの蝶の画像です。他の画像フォーマットでは目立たない、多くの色とディテールがあります。
多くの色を使った複雑な画像であれば、JPEGが最適なフォーマットであることが多い。上のJPEG画像では、色が鮮やかで際立っています。
しかし、最適化すると、特に色データが少ない画像の場合、画質が少しドロップすることに気づくかもしれません。その上、JPEG画像は簡単に変換できます。PNGやWebPなど、他のフォーマットにも変更できます。
長所だ：
- 数百万色をサポート
- 複雑で色彩豊かな画像に最適なフォーマット
- 他の画像フォーマットへの高い変換性
- 一般的なウェブブラウザーや画像編集ツールに対応
短所だ：
- 圧縮後に画像の細部が失われる
- レイヤー画像には対応していません。
- 画像の透過はサポートしていません。
WebP vs. PNG vs. JPEG – 画像ファイルサイズ
画像のファイルサイズについて、WebP対PNG対JPEGを比較する場合、画像を最適化する際に選択する圧縮レベルに大きく依存します。
とはいえ、WebPロスレス画像は一般的にPNGより26%小さい。同様に、WebPとJPEGの非可逆画像を比較すると、WebP画像はJPEGよりも25～34％小さくなります。
例えば、Google Developersの比較では、JPEG形式とWebP形式では画像ファイルサイズに大きな差がある。
このことから、WebP画像はPNGやJPEGに比べてファイルサイズが非常に小さいことがわかります。画像のファイルサイズを小さくすることで、WordPressの速度を向上させ、ウェブページの読み込みを速くすることができます。
その結果、WordPressのSEOも改善されます。Googleはページの読み込み速度をランキング要素として考慮します。サイトの読み込みが速ければ、読み込みの遅いサイトよりも優位に立つことができます。
WebP vs. PNG vs. JPEG – イメージクオリティ
画質に基づいてWordPressに最適な画像フォーマットを選択することは、サイトの種類によって異なります。
例えば、WordPressサイトに色の多い写真を投稿する写真家であれば、JPEGが最適な画像フォーマットです。JPEG画像は圧縮率が高く、色データを保持するのに役立ちます。
一方、最小限の色しかないスクリーンショットや個々の画像を投稿する場合は、PNGフォーマットを使用する方がよいでしょう。PNGは高品質の画像を提供し、複雑な画像にもシンプルな画像にもシームレスに対応します。
WebPフォーマットは、サイト上の画像を圧縮して高いパフォーマンスを維持したい場合に有効です。WebPとJPEGを比較した場合、WebPはJPEGよりも平均30％圧縮率が高くなります。ただし、写真やグラフィックデザインのポートフォリオサイトをお持ちの場合は、WebPの使用をお勧めしません。
WordPressに最適な画像フォーマットとは？
WebP対PNG対JPEGを比較した結果、最適な画像フォーマットはあなたのニーズ次第です。
WebPは、まもなくすべてのサイトで使用される未来のフォーマットと言われています。WebPとJPEGを比較すると、WebPは最も小さい画像ファイルサイズを提供し、ストレージスペースを節約し、サイトの読み込み時間を改善します。ただし、Webサイトビルダーや画像編集ツールがWebPフォーマットをサポートしているかどうかを確認する必要があります。
一方、JPEGはプロのカメラマンや、色に忠実な画像を必要とするサイトオーナーには最適な画像フォーマットです。
PNGは、スクリーンショットや色の少ない画像を共有するのに最適なフォーマットです。非常に汎用性の高いフォーマットで、比較的小さいファイルサイズで高品質の画像を提供します。
WordPressで画像を使用するためのボーナスヒント
画像はコンテンツにおいて重要な役割を果たしますが、多くのサイトオーナーはブログ投稿やページに質の高い画像を追加する時間を取っていません。
WordPressに適した画像フォーマットを選択する以外に、素晴らしい画像を作成し、パフォーマンスを最適化するためのヒントをいくつかご紹介します：
- 画像圧縮プラグインを使用する – 大きな画像はサイトの速度を低下させます。画像圧縮プラグインを使用して、WebP、JPEG、PNG画像を最適化し、高速なパフォーマンスを実現する必要があります。
- 画像のAltテキストを追加する – Altテキストまたは代替テキストは、画像を説明するHTML画像タグです。これにより、検索エンジンのボットやスクリーンリーダーを持つユーザーがあなたの写真を理解できるようになります。SEOのためにサイトを最適化する場合、写真にaltテキストを追加すると、画像検索結果に表示されやすくなります。
- サイトに適した画像サイズを選ぶ – 初心者の場合、自分のサイトにどの画像サイズを使うべきか迷うことがよくあります。適切なサイズを選ぶことで、一貫性が生まれ、スムーズなユーザー体験が得られます。
- 電子透かしを使用するか、右クリックを無効化 する – 他人に画像を勝手に使用されたくない場合は、電子透かしを追加したり、画像の右クリックを無効化することができます。さらに詳しく知りたい方は、WordPressで画像の盗用を防ぐ方法をご覧ください。
この投稿が、WordPressに最適な画像フォーマットを見つけるために、WebP vs. PNG vs. JPEGについて知る一助となれば幸いです。また、最適なデザインソフトウェアのリストや画像SEOの初心者ガイドもご覧ください。
If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.
Dennis Muthomi
well…I usually upload my images in PNG format, and then my caching plugin automatically converts them to WebP.
I love this setup because WebP images are so lightweight, which really boosts my website’s speed and performance
And if a browser doesn’t support WebP, the plugin simply displays the PNG version instead as a fallback. I’ve found this setup provides excellent speed without sacrificing compatibility
Jiří Vaněk
Regarding the question of the best format for WordPress. Is it better to upload only WebP to the website due to its size and loading speed, or is it better to upload PNG and then convert to WebP using a plugin? My concern is that I only have WebP on my website. However, I was alerted that this isn’t the best practice for situations when someone visits my website using a very old browser for some reason. Consequently, their browser wouldn’t support this format, meaning they wouldn’t see the images on my website. Therefore, I thought about using PNG with a plugin that would serve WebP to newer browsers and PNG to older ones.
WPBeginner Support
If you have users using older browsers to view your site then it would be good to have a fallback image and the simplest way to do that would be to upload the file type you want your users to load and use a plugin to convert to WebP that sets up the fallback for you.
管理者
A Owadud Bhuiyan
As far as I’m aware, the PNG format is typically used for transparent images.
However, the majority of people tend to use JPEG.
Am I right?
WPBeginner Support
You are correct, that that is how the image formats are currently used
管理者
Ralph
I’ve heard about this webp trend years ago but never cared. I know the faster the website is the better. However is it not fighting ove diminishing returns?
All my jpegs for main blog articles photos are 1920×1280 and without any optmization it is 150-250 kb, mostly around 220 kb. I use bigger resolution, as screens are getting better and better so i don’t have to upgrade it in the future.
I know in webp these same pictures could be lower size. Maybe 150kb? 120 kb?
Taking into consideration we are getting better and faster internet all around the world, and in my country internet was good years ago and infrastructure is really good is it really worth it?
I need to spend a lot of time converting every jpg to webp, but don’t see REAL WORLD (outside of website testing apps) upgrade.
I wish i could do this in like 5 mins, but is that 70kb less really worth it?
WPBeginner Support
One thing to think about is users on mobile data may not have the best connection for larger images. To determine if that change is worth it, the only person who can decide if it is right for your site is you as it is currently a new option available but not a requirement.
管理者
Piotr Z
Your talk about pictures and websites got me thinking because I recently started my own blog. When I made my blog, I didn’t know that the kind of pictures I use can affect how fast the website loads. So, I did some tests and found out that my ‘heavy’ pictures were causing problems. That’s when I learned about differences in formats when it comes to pictures.
JPEG is like magic for making pictures smaller and making websites faster. It can shrink pictures way more than regular pictures (like PNG). I used converter plugins to help me with this, and it worked out pretty well.
Now, when it comes to picking between WebP. Do the popular tools like Canva, or even some mobile phone apps can covert to this format by default? Or I will need to find the WP plugging for it?
Thanks for explaining this important stuff!
WPBeginner Support
Image editing tools should normally have a way to create a WebP image, we have not tested mobile apps for that functionality.
管理者
Ahmed Omar
Thank you for the detailed explanation.
Actually I was facing this issue of WebP images, and I was wondering what is WebP.
Now it is clear, and even I can take the benefit from it.
but here is my question, can I change peg and png to WebP? and how I can do it?
Thank you
WPBeginner Support
There are a few tools available to convert it for you, for a starting point we would recommend taking a look at our article below
https://www.wpbeginner.com/wp-tutorials/how-to-use-webp-images-in-wordpress/
管理者
Akpobor Joseph
Thanks, WPBeginner for this article. I actually just completed a quick research on this topic before I saw this notification. Honestly, I’m getting a lot of help from your team as regards my journey online.
I really appreciate your good work.
WPBeginner Support
You’re welcome, glad our guide was helpful and we hope our team and articles continue to be helpful to you
管理者