絶対オススメ!webpのメリットと変換方法
こんにちは、税理士法人YFPクレア WEB担当の越尾です。
今日は、私が絶賛オススメするwebpの紹介をします。
webpとは?
webpとは、2010年にグーグルが開発した次世代画像フォーマットのことです。
webpと書いて【ウェッピー】と呼びます。
2010年時点では、グーグルのライバル…Appleがwebpを表示してくれなかったので、正直使い勝手が悪かったのですが、2018年位?にSafariでも表示してくれる様になったので、実用化が一気に進みました。
webpの特徴とメリット・デメリット?
表示スピードの速さ、SEOへの良影響(メリット)
現在は大モバイル時代!なにか気になればすぐにスマホでググるのが当たり前の時代です。
皆さんも経験あるかと思いますが、スマホの大敵は「通信スピード」
1秒以内に最初の表示をさせたいところ!
3秒待たせたら3人に1人が戻るボタンを押し
6秒待たせたら全員戻るボタンを押す。
というほど、表示スピードが遅い=見てもらえない!SEOにも悪影響!
というダブルの損失を被ることになります。
その通信スピードを下げる要因で一番大きいのが画像のサイズです。
画像サイズとして、100kbを超えたら大きすぎ!
とはいえ、PCではきれいに見える画像も、スマホで見るとぼやけて見える・・・
という現象を起こします。
最近はスマホのほうが解像度が良すぎて、PCで見れるけど、スマホでは見れたものじゃない!という現象も起こります。
画像変換の手間がかかる(デメリット)
これから、毎回私が行っている作業をお伝えしますが、ハッキリ言って手間です。
が、例えるなら…美味しい野菜を育てるなら、雑草抜いたり、不要な枝を切り落としたり、手入れがいるように、
良いサイトを作るためには一つずつは面倒な手間がかかってきます。
そういう面倒なところ、手間がかかるところこそ、SEOの分かれ目!!
丁寧にやっていくことが吉です!
古いブラウザをずっと使っている人には表示されない
webp対応のブラウザにはwebpを。webpには非対応のブラウザにはpngやjpegを表示する…
という機能のプラグインもあるのですが
これだと、2枚もサーバー上に画像を保管しないといけないし、ブラウザごとにwebpが使えるか判定していたら表示スピードが逆に落ちてしまうからです。
なので、弊社では、webp非対応のブラウザにはもう無視することにしています。
webpが見れない条件は・・・
Safari14未満のバージョン(2020年9月からアップデートしていない)
Chromeも2011年2月からアップデートしていない場合。かなり少ないと思われます。
Chromeの場合は10年以上も更新していない人、Safariもこれだけアップデートを拒否し続けていたら、webp以外にも不具合生じそうと感じてしまいます。
人口カバー率で言えば90%を超えてくると思うので、残り10%の方へはごめんなさい!!
Webpへの変換の仕方(無料ツール)
Squoosh(スクーシュ)【サイズ変更を同時にしたい場合】
Squooshはグーグルが作った画像変換ツールです。
スクーシュのいいところはブラウザで画面を見ながらサイズ変更、webp化などを行う事ができます。
この画像は実際にスクーシュでサイズ変更をしたところです。
幅650pxだった画像を200まで縮めたところです。
左側は元の画像。右側が加工したらこうなりますよ?という画像です。
見ていただいた通り、サイズ変更をしただけでは、画像があれています。
ですが、画面の隅っこに小さく掲載するだけで、実際にはこんなに拡大をしない場合もあると思います。(画像は左側の178%で表示中。実際にはアイコン並みに小さくして使いたい画像の場合は、スクーシュで倍率を下げて、限界まで軽い画像を作るのもありです。
スマホで撮影した写真をそのまま、ワードプレスに入れてサイトに掲載してしまうと2MBとか巨大な容量を使うことになります。
ぜひ、サイズも一緒に変更しましょう。
もちろんこの画面でWebpにすることも可能です。
ぜひスクーシュ使って最適な大きさ、Webpにして下さい。
サルワカ道具箱【同時に大量にwebp化したい場合】
サルでもわかる~をテーマにコンテンツ制作をされているサイトです。
同時に大量にwebpにしたい場合はサルワカがオススメ。
同時に50枚までwebp化できます。
squooshのように1枚1枚丁寧にはできませんが、大量に処理したい場合はこっちのほうがオススメ。
【非推奨】jpegを入れたらwebpにしてくれるプラグインについて
プラグインで画像をjpegを入れたら勝手にwebpに変換してくれるプラグインもありますが、
弊社では今のところ非推奨。
なぜなら、プラグインを使ってSight Speed Insights(サイトスピードインサイト:グーグルが運営しているサイトの表示スピードをチェックするツール。もちろん無料)で計測したところ、上記のsquooshやサルワカで作ったwebpのページの方が評価が良かったからです。
面倒である…というのはもちろん百も承知。
何なら毎日この作業をやってる私はマジでめんどいと思ってますが、この微差でSEO1位か2位の大差を生むと思っているので歯を食いしばって頑張っております
(そこまでではない気がするがw)
webpのまとめ
このページを作ったのは一人でも多くのお客様にwebpを知っていただいて、webpでサイトを運営して欲しいと思っているからです。
もちろん管理更新サポートで変更も可能ですが、やっぱりお客様にやって頂けるならそれだけ評価されるスピードも早くなるのでいいですよね。
ぜひ、webp、使ってみて下さい!
投稿者プロフィール
-
入社半年から自社サイトの運営を担当。
最初は300PV、社内の支援も特になかったのですが、コツコツ続けてると手伝ってくれるスタッフも増え、今では月間20,000PVをキープ。
2年目からは求人も自社サイト+indeedで行う。
1求人当たり20,000円以下で採用ができている。
税理士法人YFPクレアのお客様とお会いして、
中小企業の3大悩みは「お金」「集客」「採用」と気づき、
自社サイトを通じて得られたノウハウを使って、顧問先のお客様やこれから創業されるお客様に貢献したいと思い、ホームページ制作サービスを開始。
最新の投稿
- SEOやサイト運営の雑談2023年11月8日Notionで旅行計画!こんな項目を作ってみた!(ハワイ編)
- コンテンツSEO2023年11月7日【実例あり】寄り添う姿勢の新PASONAと旧PASONAの徹底比較
- SEOやサイト運営の雑談2023年10月5日旅行準備にはnotionを活用しまくろう!!
- SEOやサイト運営の雑談2023年9月21日【ワードプレス】はじめてのブログを書いてみよう!【ブロックエディター編】
お問い合わせ
CONTACT
住まいに関するお悩みや相談など、なんでもお気軽にご相談ください。
相談やお見積もりは無料です。
お電話のお問い合わせ
0120-700-663
営業時間:10:00~18:00
メールのお問い合わせ
チャットワーク