CREAMサポートブログ | はじめてのメディアサイト運用に

ウェブページを軽量化!WebP画像対応

ウェブページを軽量化!WebP画像対応

WebP(ウェッピー)とは、Googleが開発した次世代画像フォーマットです。ウェブ上で使われるPNGやJPGよりも軽量なため、ウェブサイトの表示速度を向上させることができます。CREAMにも導入可能です。


ウェブページを軽量化!WebP画像対応

WebP画像とは?

サイズの大きな画像やたくさんの画像を使うウェブページでは、ページ容量が大きくなり、表示に時間がかかることになります。ページの表示速度が遅いサイトは、みなさんも見たくないですよね。実際に、ページの表示が1秒から3秒になると直帰率が32%増加すると言われています。

WebP(読み方はウェッピー)とは、Googleが開発した次世代画像フォーマットです。ウェブ上で使われるpngやjpg、gifなどの画像ファイル形式を更に軽量化して、ウェブサイトの表示速度を早めることが可能です。

Webp画像の確認方法

閲覧しているページの画像がWebp画像かどうかは、画像の上で右クリック → 名前をつけて画像を保存 することで確認できます。Webp画像の場合は、画像の拡張子が「.webp」になっています。

元のPNG画像では200KBサイズでしたが、Webp画像では13KBまでサイズが圧縮されています。

Webp画像のメリットは?

Webp画像の特徴は、画像ファイルのサイズを軽量化できることと、軽量化しても画質がほとんど変わらないことです。

大きな画像を使用するページや、大量の画像を使用するページでは、Webp画像に対応することでページ表示のスピードが格段に変わります

ウェブページの軽量化にとても効果的ですが、それだけではなくSEO面でも良い影響が見込めます。

Google は、ウェブサイトのパフォーマンス(表示速度や動作速度)を重視しています。検索順位に直接影響するわけではありませんが、パフォーマンスの良さはユーザービリティ(使いやすさ)を評価するのに大切な要素ですので、間接的に影響があるといえます。

Googleでは、ウェブサイトのパフォーマンスの最適化を支援するツールを提供しています。

サーチコンソールではパフォーマンスのスコアを確認することができますが、「PageSpeed Insights」ではスコアの確認のほか、パフォーマンス改善の方法の提案もしてくれます。

この改善方法のなかに「次世代フォーマットでの画像の配信」と表示されるものがあれば、これが、Webp画像の対応です。

Webp画像を使うためには

メリットの多いWebp画像ですが、対応している画像編集ソフトがまだ少ないため、Webp画像を扱うために一手間掛かることがデメリットです。

Webp画像にするには、Photoshopなどの画像編集ソフトでWebpフォーマットで書き出すか、Webp変換サービスを利用する方法があります。

CREAMでは、オプションでWebp画像対応を行っています

これまで通りに、jpgやpngなどのまま、CREAMにアップロードしてください。CREAMにアップロードしたときにWebp画像に自動的に変換されます。

これまでにアップロードした画像も、Webp画像に変換します。

ご興味、ご要望のある方はお気軽にお問い合わせください。

CREAMに関するお問い合わせはこちら

お問い合わせ・資料請求は下記のフォームからお気軽にお申し付けください。

CREAMお問い合わせフォームへ
不用品回収 タスクル

関連するキーワード


機能追加 SEO

関連する投稿


UXの新指標「コアウェブバイタル」対応

UXの新指標「コアウェブバイタル」対応

Google は、2021年6月からUXの新指標「コアウェブバイタル」を検索結果の表示順位に反映させると発表しました。 CREAMは、この「コアウェブバイタル」にもいち早く対応。 ページスピードインサイトで確認すると、高いスコアを出していることが分かります。


記事本文を装飾するには?ビジュアルエディターの使い方②

記事本文を装飾するには?ビジュアルエディターの使い方②

CREAMの記事作成に機能追加された、HTMLを書かなくても簡単に太字や色付けなどの装飾ができるビジュアルエディター機能を説明します。今回は後編です。


記事本文を装飾するには?ビジュアルエディターの使い方①

記事本文を装飾するには?ビジュアルエディターの使い方①

CREAMの記事作成に機能追加された、HTMLを書かなくても簡単に太字や色付けなどの装飾ができるビジュアルエディター機能を説明します。今回は前編です。


【CREAM】12月のアップデート内容詳細

【CREAM】12月のアップデート内容詳細

CREAM標準パッケージを対象とした、2019年12月のアップデート内容の詳細についてお知らせします。


CREAM7〜9月のアップデート機能追加と改善点詳細(その他)

CREAM7〜9月のアップデート機能追加と改善点詳細(その他)

CREAM標準パッケージを対象とした、2019年7〜9月のアップデート内容の詳細についてお知らせします。


最新の投稿


CREAMアップデートのお知らせ

CREAMアップデートのお知らせ

CREAM標準パッケージを対象とした、2023年3月のアップデート内容の詳細についてお知らせします。


ウェブページを軽量化!WebP画像対応

ウェブページを軽量化!WebP画像対応

WebP(ウェッピー)とは、Googleが開発した次世代画像フォーマットです。ウェブ上で使われるPNGやJPGよりも軽量なため、ウェブサイトの表示速度を向上させることができます。CREAMにも導入可能です。


Googleアナリティクス(GA4)をCREAMに設定する

Googleアナリティクス(GA4)をCREAMに設定する

Googleアナリティクスは、メディアの運営上、必須ともいえるアクセス解析ツールです。CREAMの管理画面からGoogleアナリティクスのタグを設置して、アクセス解析を始めましょう。


Googleアナリティクス(GA4)に切り替える

Googleアナリティクス(GA4)に切り替える

Googleアナリティクスは、2023年7月1日に「ユニバ―サルアナリティクス(UA)」から「Googleアナリティクス4(GA4)」に変わります。UAを利用している場合は、GA4への切り替えが必要です。CREAMでUAを利用している方向けに、GA4への切り替え方法をご案内します。


CREAM管理『デザイン設定』について

CREAM管理『デザイン設定』について

『デザイン設定』では主にサイトのHOME画面の見た目を調整します。


不用品回収 タスクル

ページTOPへ