これからのWEB制作・SEO対策の必須項目！webp形式とは

現在、多くの会社がホームページを活用していると思います。最近ではホームページやSNSをいかに活用するのかが、集客のポイントと言っても過言では有りません。そして、ホームページにおいて重要なのが、いかに上位表示をさせるのかという「SEO」になります。今回は、これからのSEOに重要になってくるであろう「webp」というものについてお話していきたいと思います。

webpとは

では、webpとは具体的にどのようなものなのでしょうか。

WEBにおける次世代画像フォーマット

webpとは、Googleが開発を進めている画像形式の一つです。 2010年からリリースされているこの新しい画像形式は、通常の画像ファイルに比べると、PNG画像の26％ほどファイルサイズが小さくなることが公式サイトに記載されています。公式サイト https://developers.google.com/speed/webp また、このwebpは、公式サイトに「lossless」とあるため、画像を軽量化する際に起きる画質の粗さなども、無いもしくは非常に小さいと考えられます。

なぜwebpが必要になってくるのか

では、なぜこのwebpが必要になってくるのか。 Google AnalyticsやGoogleコンソールなどを使ったことがある人ならわかると思いますが、Google検索で上位表示をさせようと思うと、いくつかの要件を満たしておく必要があります。 Googleで上位表示されるためには、いくつかの項目においてスコアリングされた情報から、成績が優秀なものから上位表示されるイメージになりますが、この評価項目の一つに「サイトの表示速度」というものがあります。 Googleにおいて、ユーザーにいかに有益な情報をもたらすかに加え、いかにユーザーが便利に使えるかも重要になります。あなたも、サイトが中々開かなくてイライラした経験があるのではないでしょうか。そういったサイトは、Googleからの評価が低くなるわけです。最近は、画像や動画を多用したサイトも増えてきており、それは同時に「サイトの表示速度を遅くする原因」にもなります。つまり、webpを活用して画像サイズを少しでも削減することで、より高速表示されるサイトが作れ、SEO対策の効果があるのです。

現状はsafari・IEなどで非対応

このwebp形式は、Googleが提供するウェブブラウザ「グーグルクローム」では当然対応しているわけですが、現状safariやIEには対応していません。そのため、実装方法のところで記載しますが、対応していないブラウザ用の表記も必要になってきます。少し不便に感じるかもしれませんが、やっているサイトとやっていないサイトでは、今後大きく変わってくるでしょうから、今のうちから少しずつ慣れておくのが良いでしょう。

実装方法

では、実際にどの様にコードを書いていけば良いのでしょうか。一般的な画像のは、下記の様に書きます。 <!– wp:code –> <pre class=”wp-block-code”><code> <img src=”画像のURL”> </code></pre> <!– /wp:code –> これを、webp形式にすると下記のようになります。 <!– wp:code –> <pre class=”wp-block-code”><code> <picture> <source srcset=”webp形式の画像URL” type=”image/webp”> <source srcset=”png/jpgなどの画像URL” type=”image/png”> <img src=”png/jpgなどの画像URL”> </picture> </code></pre> <!– /wp:code –> ただの画像を表示するだけで、たくさんのコードを書く必要性が出てきます。流れとしては、 <!– wp:code –> <pre class=”wp-block-code”><code> <source srcset=”webp形式の画像URL” type=”image/webp”> </code></pre> <!– /wp:code –> が、webpに対応しているブラウザでの表記になります。 webpに対応していないブラウザ用に <!– wp:code –> <pre class=”wp-block-code”><code> <source srcset=”png/jpgなどの画像URL” type=”image/png”> </code></pre> <!– /wp:code –> という形で、webp以外の形式の画像を表示させます。更に、IEでは、pictureのタグ自体が対応していませんので、通常のimgタグも利用する・・・という流れになっています。少し面倒ですが、サイトが上位表示されることを考えれば、画像が多ければ多いほどやる価値があるでしょう。

webp画像の作り方

では、このwebp形式はどのようにして作るのでしょうか。フォトショップを利用している場合には、専用のプラグインをインストールすれば、webp形式で書き出すことが可能になります。それ以外の場合は、OSに無い機能になりますので、インストールが必要になります。 MACの場合は、brew経由でインストールするのが最も簡単です。 <!– wp:code –> <pre class=”wp-block-code”><code> brew install webp </code></pre> <!– /wp:code –> Windows の場合には、 https://developers.google.com/speed/webp/download 公式ページよりダウンロードし、Cドライブ内に置きます。その後、windows10であれば、画面左下のCortanaに「環境変数」と入力して「環境変数を編集」を選択。下のPathを編集し、新しく先程のwebp用のフォルダを追加します。これで設定は完了です。後は、WindowsPowershellを使って <!– wp:code –> <pre class=”wp-block-code”><code> cwebp test.jpg -o test.webp </code></pre> <!– /wp:code –> のようにすれば、webp画像が作成できます。

ITで解決できる相談はAMELAに

時代は常に変化しており、webpも含めて、どんどんと新しいものが作られています。ホームページ1つとっても、・サイト制作言語のバージョンアップ・新しい技術やライブラリの登場・新しいスマホ機種の登場などの変化によって、サイトをリニューアルする必要性があります。しかし、自社だけで様々なIT業界の変化の情報収集や、実際に導入するというのは非常に困難です。だからこそ、ITの相談をAMELAにしてみて下さい。業界最先端の情報を持ち、様々な業界での実績があるので、必ず御社のためになる情報があるはずです。