三十路!

おいさんが調べたことメモってるブログ。

1_2_1

WordPress で WEBP(CloudFlare or ShortPixel) に対応する方法。

WordPress で WEBP(CloudFlare or ShortPixel) に対応する方法。

画像を圧縮するプラグインを変更した際に、ついでだから WEBP にも対応したよっと。

WEBPとは?

2010年9月30日に仕様が公表され、各種ツールと共に提供が開始された。
ウェブサイトのトラフィック量軽減と表示速度短縮を目的としており、インターネットのWebページで広く使われている非可逆圧縮のJPEGや可逆圧縮のGIF、PNGの置き換えを意図する規格である。JPEGとは異なり、非可逆圧縮でもアルファチャンネルを扱える。
画像圧縮については動画規格WebMのベースであるVP8ビデオコーデックの技術を利用しており[3]、コンテナ形式としてRIFFを採用している[4]。コンテナの部分を除くと、非可逆のWebPは1フレームのWebMである。
WebPの最大ピクセル数は16383×16383ピクセル。非可逆のサンプリングファクタはYCbCr 4:2:0のみ。
ICCプロファイル、XMPメタデータ、アニメーションには対応したが、CMYKカラーモデルには今のところ対応していない。3D画像には将来対応する予定[5]。

評価
Googleの示した事例では、ファイルサイズは非可逆圧縮モードで(同一画像、同等画質の)JPEGと比較して25-34%小さくなり、可逆圧縮モードでPNGと比較して28%小さくなるとしている。また22%のファイルサイズ増加でアルファチャネルを追加できるとしている。可逆圧縮は、エンコードはPNGよりも時間がかかるが、デコードはPNGよりも高速であると主張している[6]。一方、2013年10月に行われたMozillaの比較調査では、旧来のJPEGと大して変わらないという結果となった。[7]

とのこと。要するに画像を軽くしてロード時間短くするっていうお話。PC 向けサイトにはほぼどうでもいいけど、モバイルだとね? 地味に効いてきそうだね。safari には対応してないからほぼアンドロイド向けになるかもね!

対応方法

CloudFlare

A Very WebP New Year from Cloudflare

Cloudflare has an automatic image optimization feature called Polish, available to customers on paid plans. It recompresses images and removes unnecessary data so that they are delivered to browsers more quickly. Up until now, Polish has not chan…

CloudFlare を利用したらさくっと利用できる。手間もほぼなし。但し Pro 以上 ~ 月額 2000円かかる。

shortpixel

ShortPixel Image Optimizer
ShortPixel Image Optimizer

を利用する。

Create also WebP versions of the images for free.にチェックを入れてから、Bulk Optimization Tool で一括圧縮。おいさんは 1万枚ぐらいあったから、3日かかった。

無料

無料で圧縮できる枚数は、100枚まで。

ShortPixel Referral Sign Up

Sign up for ShortPixel image optimizer and claim your free image credits.

こっから登録すると、200枚まで圧縮できるようになるよっと。

有料

月額払いと、一括払いがある。おいさんは、一括払いのこれをかった。

$9.99 One-time 10K – 15,000 credits

残ったはこんな感じ。足りなくなったらそのつど買い直しでいいかもね。

キャッシュプラグイン

画像を圧縮したら、キャッシュプラグイン利用してる人は設定する。

LiteSpeed Cache
LiteSpeed Cache

W3 Total Cache
W3 Total Cache
Developer: Frederick Townes
Price: Free

( Minify 、Opcode Cache、Database Cache、Object Cache、Browser Cache を利用)

おいさんはこの 2種類を使ってるが、特に設定するところはない。

.htaccess

nginx


利用してる web Server に合わしてどちらかを記入。

まとめ

と、今感じ。設定する場所は少ない。ただ、圧縮するのにくっそ時間かかるので注意。

ShortPixel Image Optimizer
ShortPixel Image Optimizer

は、以前使っていた。

Compress JPEG & PNG images
Compress JPEG & PNG images
Developer: TinyPNG
Price: Free

よりも安定して使えてるからオススメかな。Compress JPEG & PNG images も圧縮率高くていいんだけど、エラー吐きすぎ! エラーだけならまだ許せるけどさ・・・画像ファイル潰れてることが最近でてきたから乗り換えたよっと。

コメント歓迎やで! (匿名可)
私はロボットありませんの左側にあるチェックマークを入れてから SEND 押してな!(スパム対策)

*

Return Top