画像をWebPにしたらめっちゃ軽量化した

2019-12-02   

WebPとは

昭和時代のホームページの画像といえば、写真はJPEG、イラストはGIFという形式でした。

あ、昭和時代にはまだwebは無かったので20年くらい前から10数年くらい前までの話です。

その後、イラスト的なのはGIFに変わってPNG形式やらSVG形式というのが登場し今現在の主流です。

イラスト的な画像はPNG,SVGになったけど写真画像は長いことJPEG形式が使われてます。

そんな中、Googleが発表したのがWebPという画像形式。ウエッピーって読むそうです。

以下Wikiより引用

ウェブサイトのトラフィック量軽減と表示速度短縮を目的としており、インターネットのWebページで広く使われている非可逆圧縮のJPEGや可逆圧縮のGIF、PNGの置き換えを意図する規格である。JPEGとは異なり、非可逆圧縮でもアルファチャンネルを扱える。

Google社は常々「インターネットに流れるデータ量を削減せよ!」って訴えていて、Google社がやっている以下のようなテストサイトでも、遅いサイトは評価が低くなります。

PageSpeed Insights - Google Developers

WebP導入は時期尚早か?

今現在WebPの表示はEdge、Firefox、Chrome、Opera、Android Browser、その他色々が対応済み。

https://caniuse.com/#search=webp

日本の大手だと楽天がWebPを導入済みらしいけど、いまいち浸透していません。何故か?

それはアップル社がWebPを導入してないから。つまりアップルのマックやiPhoneのブラウザ(サファリ)ではWebPが表示できないのです。世界的に見るとiPhoneとアンドロイドのシェアはアンドロイドが圧勝。でも日本だけはiPhoneのシェアが異様に高いんですよね。

世界的にはWebP表示可能な端末は8割、でも日本だと4割しかないとか((((;゚Д゚))))

アップルが採用してくれたら、ほぼ100%のユーザーが使えるけど、今のところ4割のユーザーのためにWebPを導入するのは、まーまー大変なので日本ではまだ浸透してないようです。

WebPを通販サイトに導入してみた

そんなわけで時期尚早な気もするけど、勉強がてら3日ほどかけて会社の通販サイトの画像をWebPにしてみました。

画像をWebPにしたらめっちゃ軽量化した

商品画像のサムネイルをすべてWebP化。細かい手順は省きますが以下ページを参考にしてやってみました。

3ファイルでできるサイト全体の自動的なWebP対応 - Qiita

Google社によればJPEGファイルだと25%~34%ファイルサイズが小さくなるそうなんですが、実際にやってみるともっともっと小さくなりました。概ねファイルサイズが半分以下に。モノによっては見た目ほぼ同じでファイルサイズが1/10に!

このブログに画像をアップするとJPEGになっちゃうので直接貼れないけど、興味ある方は以下のリンクされた2つの画像をChromeで見比べてください(サファリではWebPは見れません)。ほぼ違いはわからないと思いますが、ファイル容量は10倍の差があります。

https://www.bass.co.jp/used_rod_image/J0101G5000754/IMG_7232.JPG

https://www.bass.co.jp/used_rod_image/J0101G5000754/IMG_7232.JPG.webp

JPEGの写真が175KB
webpの写真が13.4KB!

すごくねーっすか?

冒頭で「GIF、PNGの置き換えを意図する規格」って引用したけど、ロゴマークとかのグラフィックだと、ちょっとイマイチの見た目になります。PNGのソリッドな感じが薄れJPEGっぽい汚れが気になることも。なので個人的にはGIF・PNGの置き換えというよりは写真(JPEG)の置き換えに向いてると感じます。

今現在HETEMLサーバーではWebPを使えない

ちなみにパソコンにWebP画像をダウンロードしても、基本的に開けるのはGoogleChromeなどのブラウザだけです。アドビフォトショップでもデフォルトでは開けません(アドインあり)。オンラインで変換するサービスもあるけど、PCで扱うにはまーまー面倒ではあります。でも、こんだけ小さくなると使わない手はないですね。

ってことで、2019年12月現在の運用方法としてはサーバー側でJPEGからWebPに変換するのがおすすめです。

https://qiita.com/miyanaga/items/94b5bb42501e2292fb67

↑こちらにあるようにGoogleが用意してるcwebpコマンドをサーバーにインストールし、サーバーにアップされてるJPEGファイル群をスクリプトで一気にWebP化するっていう手順をオレも利用しました。

が、しかし、レンタルサーバーでこの作業をするのはroot権限が必要。会社のサーバーは問題ないけど、他のサイトで多用してるHETEMLはssh可能だけどroot権限ないからcwebpのインストールができません(´・ω・`) このブログもHETEMLサーバーなので、cwebp使えるのであれば画像をWebPにしたいけど今現在は無理みたいです。

で、別の手段としてPHPで変換するってのもあるようです。

https://www.php.net/manual/ja/function.imagewebp.php

ただしこれもPHPのコンパイル時にGDのオプションでWebPを指定しないとダメっぽくてHETEMLサーバーでは使えずでした。問い合わせフォームから中の人に訪ねたけどやっぱりダメなようです。

HETEMLサーバーが対応してくれたら、このサイトもWebP化して、読み込み速度アップできるようにしたいです。いつになるのか不明ですが(・ω・)ノ

カテゴリ:PC・スマホ・WEBネタ

UNITORO以外の最近の投稿

twitter

Recent entries

@title@

「ユニコーン『服部』ザ・インサイド・ストーリー ユニコーンと当時のスタッフ、関係者が明かす名盤誕生の裏側」を読んだ

@title@

通勤用の小さいクルマを買いたい!

@title@

Apple からの領収書です。というフィッシング詐欺メールにご注意を

UcJkP4rY3sg1V2OS.jpg

元トッププロと榛名湖なう

@title@

第2のシャローアンカー「ミンコタのタロン」

@title@

クラシック前日に佐々プロに同船したら初日トップだった

Od8XKGFcRoIKqsZy.jpg

今朝の福島健と富士山

HyOJPGkeRb2omcmO.jpg

今夜の福島健とファミマのセルフレジ

Qb_Qm5ZTND8ZMor3.jpg

船津なう

GzNvLuIQ4niV4QVv.jpg

今日の福島健

7JIDA2eS_SbY0daE.jpg

河口湖なう

PlELHLcYo6VLfB4M.jpg

榛名湖なう

@title@

会社のネットが死亡し散々な一日に・・・

AEvQ1MJCT9ZdwrSe.jpg

今日の榛名湖(速報)

897i4ExqWgobDqLn.jpg

榛名湖なう

@title@

藤田京弥 半端ないって!!

@title@

災害時~その後に約立つ?「トヨタ通れた道マップ」

MwSdFifM8yPfMX6j.jpg

桧原湖なう

bEOPpJZjyULWRc_o.jpg

今日の福島健

SLwKgiP1T7382daS.jpg

榛名湖で2度目の奇跡!

dcniW1lYzZ9U4ROW.jpg

榛名湖ナウで奇跡が起きた!

@title@

プジョー3008GT BlueHDiに乗せてもらった

@title@

海外通販で買い物をして、トラッキング番号だけを送られてきたときは17track.netが便利

@title@

iOS13から使えるようになったダークモード

@title@

iPhoneをPCにUSBで繋いだときDCIMフォルダ表示にめっちゃ時間かかるときの対処

8OtLFQ8HN0ezbKZQ.jpg

リチビー12V60Ahはバッカンにちょうどいい

@title@

amazonファイヤーTVでYouTubeアプリが復活!

@title@

ギター兼キーボードで2つ目のバンドに入ってみたが・・・

@title@

釣具メーカーホームページでカラー名が表示されないやつの対処方法

@title@

リチウムイオンバッテリーへの誤解

Category

Popular entries 2018

Popular entries 2017

Popular entries 2016