06-6777-3688
BLOG

WebPという次世代画像。SEOに効果は?iPhoneに対応?Macは?

公開日:2020年8月3日/最終更新日:2021年2月16日

今回のテーマはWEB専用の画像ファイルについてです。

WebPという画像をご存知でしょうか?
jpegとかPNGとかGIFなどと同じ画像形式です。


名前のとおりWebに特化した画像でありWebを軽量化するための画像です。
通常のWEB画像はjpegやpng、gif、SVCが主に使われているかと思いますが今後はこの画像をつかわれる時代がくるとされています。
今回はそのWebPについてお話させていただきます。

webpタイトル

WebPとは

開発元はGoogleで実は2010年に使用が発表されたそうで案外前からでていたのですが最近日の目を浴びた様子です。
WebPの最大のメリットは軽量化です。
最近のWEBはJSを駆使したアニメーションなどで重いサイトが多く見受けられます。
サイトにアクセスしてFVでローディング・・・離脱の確立高いですよね。
せめて画像くらいは軽くしようということなんですが、
最大の目的はスマホのWEB軽量化なんだと思います。
WikiによるとGoogleの示した事例では、ファイルサイズはJPEGと比較して25-34%小さくなり、PNGと比較して28%小さくなるとされています。

参照: https://ja.wikipedia.org/wiki/WebP

メリット

WepPのメリットは画像の軽量化です。
軽くなるということはユーザーにとって見やすいサイトになるということなのでユーザビリティの観点からありということになります。
ただ実際検証されているサイト(Qiitaさん)がありました。
https://qiita.com/kieaiaarh/items/764d2a8f9c2756050cbd
結果としては「必ずしも、webpにしたからと言って高速化が図れるわけではない」とのことですが、転送量は抑えられるとのこと。
そういう意味ではスマホの転送量問題に意味があるかもしれません。

デメリット

メリットがあればデメリットがあるのがつきものです。
WebPのデメリットはすべてのブラウザに対応していないということです。
google開発ということもあってかSafari(iPhoneも)やIEには対応していません。
chromeとfirefoxとEdge、Opera、Safari14以降になります。
Safariが古いバージョンの場合非対応ということは、コーディングの際にきちんと対応した書き方をしないといけないということになりコーディングの手間が増えることになります。

対応ブラウザ

2021年2月16日時点

・Google Chrome
・Mozilla Firefox 65以降
・Microsoft Edge
・Opera
・Safari 14以降

※この記事を公開した2020年8月あたりではiOS(iPhone)やMacOSには対応しておりませんでした。
※現時点2021年2/16ではmacOS – Big Sur 以降、iOS – 14 以降に対応しているとの情報より記事を更新いたしました。

スピードチェックをしてみよう

貴サイトの表示スピードをチェックしてみましょう!
https://developers.google.com/speed/pagespeed/insights/?hl=ja
Googleのスピードチェックサイトでサイトの表示速度を計測できます。
50点未満なら注意が必要です。
GoogleのスピードチェックサイトなのであくまでChromeとかAndroid端末での効果になるとおもいますがやらないよりはいいと思います。
スピードチェックで結果がでたら、改善する方法が表示されますので、WEBを修正してみてください。
(ちなみにこのスピードチェックの点数は毎回誤差があります)


弊社のトップページhttp://www.1st-net.jpはスマホは70前後、PCは90点台と評価されるまでなりました。
beforeはスマホ、PCともに30点台だったのでだいぶんよくなりました。

タグの記述方法

pictureタグを以下のように使います。

 

ただしpictureタグはIEには対応していないのでこれまたいろいろごにょごにょしないといけません。
面倒・・・・

SEOとしてのメリットは?

弊社のトップページでWebPを導入してみたあとのSEOとしての効果はあったか?


細かく分析をしたわけではないのですがある検索ワードで順位が上昇しました。
Googleが提唱していることもあり一定の効果はあるのかなとはおもいました。
SEOでなかなか伸び悩んでいるサイトがあればぜひともWebPを導入してみてはいかがでしょうか。

まとめ

webPについてはまだまだ世間では周知されていないですし、全ブラウザにも対応していません。
ですのでいそいで対応しないといけないというものではないとおもいます。
弊社でもコーディングの依頼でクライアント様から指定されたことはいままでありません。(大量にコーディングをしていて一度もです)
ただgoogleが推し進めるものなので知識として知っておいて損はないと思います。
デフォルトのコーディング依頼では対応していませんがご興味があるかたは担当者に「webP」指定で!とお伝えください。

web 作成、1 度はこんなことありませんか?

最後まで記事を読んでくださりありがとうございます!

ここまで読んでくださった方々の中には、Web 制作を行っている方、企業や個人の宣伝として web で宣伝されている方など たくさんいらっしゃるかと思います。

しかし、個人で web 作成をされている方、企業として web 作成をされている方、
お問合せページに使いにくさをかんじてませんか?

たくさんの方々からお問い合わせが来ると、お客様への返信の管理やその他機能に物足りなさを感じませんか?

あるいは、メールフォームに拡張機能を追加しようとするとほしい機能が有料だった…なんてこともありませんか?

そんな方のお悩みを解決するツールが、、
EasyMail という完全無料のメールフォームです!

弊社では EasyMail というオープンソースメールフォーム CMS を展開しております!

今まではかゆいところに届かなかった、もっとカスタマイズ性が高いものが欲しい、などな どお客様の声をふんだんに反映したものになっております!


大事なことなのでもう一度言いますが、完全無料です!

詳しくは弊社の EasyMail 特設ページをご覧ください!

https://www.ezy-mail.jp/

 

ではこのへんで。

お気軽にご相談ください

成果の出るホームページのご提案をさせていただきます。
集客や売り上げに直結するノウハウなどもございます。まずは一度お問い合わせください。

最新の制作実績

弊社サービス