01:08更新Reefmaster釣り・Web・iPhone・ネコのネタ画像をWebPにしたらめっちゃ軽量化した2019-12-02WebPとは昭和時代のホームページの画像といえば、写真はJPEG、イラストはGIFという形式でした。あ、昭和時代にはまだwebは無かったので20年くらい前から10数年くらい前までの話です。その後、イラスト的なのはGIFに変わってPNG形式やらSVG形式というのが登場し今現在の主流です。イラスト的な画像はPNG,SVGになったけど写真画像は長いことJPEG形式が使われてます。そんな中、Googleが発表したのがWebPという画像形式。ウエッピーって読むそうです。以下Wikiより引用ウェブサイトのトラフィック量軽減と表示速度短縮を目的としており、インターネットのWebページで広く使われている非可逆圧縮のJPEGや可逆圧縮のGIF、PNGの置き換えを意図する規格である。JPEGとは異なり、非可逆圧縮でもアルファチャンネルを扱える。Google社は常々「インターネットに流れるデータ量を削減せよ!」って訴えていて、Google社がやっている以下のようなテストサイトでも、遅いサイトは評価が低くなります。Browser、その他色々が対応済み。https://caniuse.com/#search=webp日本の大手だと楽天がWebPを導入済みらしいけど、いまいち浸透していません。?それはアップル社がWebPを導入してないから。アップルのマックやiPhoneのブラウザ(サファリ)ではWebPが表示できないのです。世界的に見るとiPhoneとアンドロイドのシェアはアンドロイドが圧勝。日本だけはiPhoneのシェアが異様に高いんですよね。世界的にはWebP表示可能な端末は8割、でも日本だと4割しかないとか((((;゚Д゚))))アップルが採用してくれたら、ほぼ100%のユーザーが使えるけど、今のところ4割のユーザーのためにWebPを導入するのは、まーまー大変なので日本ではまだ浸透してないようです。WebPを通販サイトに導入してみたそんなわけで時期尚早な気もするけど、勉強がてら3日ほどかけて会社の通販サイトの画像をWebPにしてみました。商品画像のサムネイルをすべてWebP化。細かい手順は省きますが以下ページを参考にしてやってみました。QiitaGoogle社によればJPEGファイルだと25%~34%ファイルサイズが小さくなるそうなんですが、実際にやってみるともっともっと小さくなりました。概ねファイルサイズが半分以下に。モノによっては見た目ほぼ同じでファイルサイズが1/10に!このブログに画像をアップするとJPEGになっちゃうので直接貼れないけど、興味ある方は以下のリンクされた2つの画像をChromeで見比べてください(サファリではWebPは見れません)。違いはわからないと思いますが、ファイル容量は10倍の差があります。https://www.bass.co.jp/used_rod_image/J0101G5000754/IMG_7232.JPGhttps://www.bass.co.jp/used_rod_image/J0101G5000754/IMG_7232.JPG.webpJPEGの写真が175KBwebpの写真が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サーバーなので、cwebp使えるのであれば画像をWebPにしたいけど今現在は無理みたいです。別の手段としてPHPで変換するってのもあるようです。https://www.php.net/manual/ja/function.imagewebp.phpただしこれもPHPのコンパイル時にGDのオプションでWebPを指定しないとダメっぽくてHETEMLサーバーでは使えずでした。問い合わせフォームから中の人に訪ねたけどやっぱりダメなようです。HETEMLサーバーが対応してくれたら、このサイトもWebP化して、読み込み速度アップできるようにしたいです。2018マツダCX-3に乗ってみた結果・・高速道路で凄すぎた。2017マツダCX-3に乗ってみた結果・・高速道路で凄すぎた。2016マツダCX-3に乗ってみた結果・・高速道路で凄すぎた。