/ #tech 

Google開発の新画像フォーマットWebPに変換する方法

自分のWebサイトやブログの表示が遅いと感じた事ありませんか? 画像を圧縮するといいって聞いた事あるけど、どうやるの?
webpが最近はいいって聞いたけど、それ何?

今回はこんな疑問にお答えします。
WebPとはGoogleが開発したWebサイト向けの
高圧縮率の最新の画像フォーマットです。

今回はWebPがどんな物のか解説して、
一番ベストな変換ツールを紹介します。

自分のブログに使ってみての感想も紹介します。

目次

  1. Webpってなに?
  2. Webp形式に変換する方法
  3. 使ってみての感想
  4. まとめ

1. Webpってなに?

Web時代のために開発された次世代の画像フォーマットであり、
JPEGよりも画像容量が小さいです。

PNG形式のように背景を透明にしたり、
JPEGのように画像サイズを大きく圧縮することができます。

評価

Googleの示した事例では、ファイルサイズは非可逆圧縮モードで(同一画像、同等画質の)JPEGと比較して25-34%小さくなり、可逆圧縮モードでPNGと比較して28%小さくなるとしている。また22%のファイルサイズ増加でアルファチャネルを追加できるとしている。可逆圧縮は、エンコードはPNGよりも時間がかかるが、デコードはPNGよりも高速であると主張している。 Wikipediaから引用

対応ブラウザ

Chromeが完全に対応しています。

最近はMicrosoft EdgeはWebPフォーマットと互換性を持つようになったようです。
そしてFirefoxなどはWebPフォーマットの対応を真剣に検討しています。

WebPフォーマットが広く認識され、一般的な画像フォーマットとして扱われることへの期待が高まっています。

2. Webp形式に変換する方法

minisq

変換サイト:squooshはGoogle謹製の画像変換サイトです。

さすがGoogleさんが作ったので、サクサク動作して使いやすいです。

ブラウザ上で画像ファイルを選択またはドラッグアンドドロップすることで、元の画像と比較しながら画像フォーマットの変換、圧縮、サイズ変更を行うことができます。

PCだけでなくモバイルでも使用できます。

変換可能な形式としては、JPEG、MozJPEG、PNG、WebPを選択できます。

ファイルはサーバーにアップロードされず、変換処理などはローカルで実行されます。

それはプライバシーのためにも安全であります。

そしてモバイルの場合には、大きなファイルを圧縮するためにパケットを消費しないですみます。

3. 使ってみての感想

このブログに実際に使っていますが、アイキャッチ画像の為にダウンロードしたオリジナルの画像って、無駄にサイズが大きいんですよねー。

なので大きさも小さくして、圧縮するとすごいサイズが小さくなりますので便利です。

元画像 大きさ 5760 × 3840 JPGフォーマット 7.33MB
圧縮後 大きさ 1280 × 853 Webpフォーマット 99.7KB 

単位に注目 KBですよ。すごい小さくなりましたね。

これのおかげでサイトの速度チェックのスコア結果が76->90にアップしてサイトが軽くなりました。

speed

まとめ

WebpはGoogleさんが採用している形式なので、
今後主流になってくる事は容易に予想できます。

なので今から採用しても問題ないと思いますね。

現在のところ、GoogleChromeユーザーはWebPフォーマットのデータ削減と時間短縮の恩恵を受けることができる状態にあります。

主要ブラウザのシェア的にもほぼChrome一強なので、Webpは採用する理由にもなりますね。

最終的にWebPフォーマットはほとんどのブラウザで表示できるようになるでしょう。

そしてWebpは一般的な画像ファイルのようにウェブ上で使われる日が来ると思います。

このブログではフリーランス情報やプログラミング情報の発信を続けていこうと思うのでぜひ応援お願いします。

また、Twitterでも日々の為になる技術情報やフリーランスについての有益な情報をつぶやくので、いいなと思ったかたはTwitter 札幌のフリーランス@クラウドランス望月フォローをお願い致します。

フォローする