[PC] もうWebPでいいよね、 画像軽量化でSEO対策にも

WebP(.webp)は JPEG や PNG ,GIFの様な画像ファイルのフォーマットです、従来のフォーマットより軽いのでSEO対策だったりクラウドへの UP/DOWN LOAD が捗ります、サイト運営者でWebPをまだ使っていない人は検討してみては？、ともかくファイルが軽い。

このBlog Adatara☆G3 もWebPを導入してみました、もうこれWebPでいいよね？

時代はWebP？

個人的にこのBlogで表示する画像ファイルサイズには"一応"気を使っているつもりです一応ね、画像を多用するサイトなんかは画像のファイルサイズで悩んだ事が一度はあるはず、Webサイトの軽量化は画像を軽くするのが手っ取り早い。

ひとまずWebPに関する情報リンクを貼っておきます。

• GoogleDevelopers：A new image format for the Web

GoogleのWebPに関する色々小難しい内容、取扱説明書、関連ツールとか、一通り目を通しておくと吉。

• Spuoosh

ブラウザ上で簡単に画像をWebpに変換出来るツール、オフラインやスマホでも使用可能、WebPがどんな物なのか試してみたらSquooshが簡単で分かりやすい、Googl発のアプリらしい、実際に試してみた結果はのちほど。

WebPのブラウザ対応状況 (2020/2/23時点)

WebPの拡張子は ".webp" 気になるのはブラウザなどの対応状況。

ブラウザの対応状況は "約80%" IE, Safari系が非対応と言う状況、使用率も見れるので気になる人は下記リンクからどうぞ。

• caniuse.com：Can I use webp?

使用率からみると "Chrome for Android＞Chrome＞iOS Safari" となっているのでiPhoneユーザーをどう捉えるかがWebPの分かれ道、とは言えiOS用のChromeもあるのでそこまで気にしなくても良いと個人的に思っています。(が？…)

試しに JPEG を WebP に変換してみた

前述したWebP変換ツール"Spuoosh"を使って実際に従来の画像 ".jpg" を ".webp" にしてみました。

使い方は簡単サイトを開いて画像をドラックするだけ、ページ下部のアイコンからサンプル画像を試せるので面倒な人は下部アイコンを。

試しにスマホで撮った写真 ".jpg" を ".webp" にしてみました。

左下メニューに元画像のファイルサイズは 3.24MB
右下のプルダウンメニューから "WebP" を選択し変換が終わると "387kB 89%減" とファイルサイズがかなり小さくなりました。

右のメニューからクオリティなど様々な設定が出来ます、これで良いなと思ったらダウンロードでWebP画像の完成、特に設定は変えずに試してみましたが画像が劣化したかどうか見比べてみても私ではわからないレベルでした。

WebP凄い…。

という事でこのBlogも画像ファイルをWebPへ移行する事に、これまで各種画像形式を".png"に変換し、さらに圧縮した上で画像としてBlogで利用してきましたが、現在は元画像ファイルをWebPにするだけなので一手間減るというメリットもありました。

SafariがWebP非対応と言う懸念事項はあるものの、そこは断捨離 時間が解決してくれる事を祈りつつ。


面倒くさいから画像は全部WebPにしてくれ！、そんな感じwp。_(:3 」∠ )_