先日、Blogger 画像パラメータの小技の記事へのコメントで、BINUBALLさんに新たな有用な情報を教えていただきました。
→ BINUBALLさんのコメント
JPG 画像限定ですが、例えばパラメータに l80 (l は小文字の L) を追加すると元のファイルサイズの約 80% 程度まで圧縮してくれるというもの。詳細はこの記事にも書かれています。
Fresh Tech TipsThe Ultimate Guide to Customize and Edit Blogger (BlogSpot) ImagesFind out powerful and flexible ways to customize and edit images uploaded on Google’s Blogger platform to make the posts better and visually appealing.https://www.freshtechtips.com/2018/09/edit-customize-blogger-blogspot-images.html
実際試してみると、オリジナルと l80 ぐらいの圧縮率ならば見た目は(少なくとも私の見た感じでは)殆ど変わらず、ファイルサイズだけが大きく削減されています。さすがに l1 まで圧縮するとひどい状態にはなりますが、小さなサムネイルなら l40 でも私は気になりません。
s0 958KB |
s0-l80 648KB |
s0-l40 199KB |
s0-l1 87KB |
有効な使い途
最初この圧縮技を知った時は(JPG限定ということもあり)特に使い途は思いつかなかったのですが、昨日ふと、これってひょっとして WebP 化よりも効果あるのでは?と閃いた。
Blogger 画像パラメータは rw で WebP 化させられるだけでなく他の形式にも変換可能で、rj を付けると PNG や GIF を JPG に変換できるのです。つまりすべての画像に圧縮技を適応できるということ。
例えば PNG 画像で JPG 変換と圧縮パラメータを付けた URL はこんな風になります。
早速トップページの記事一覧のアイキャッチ画像に適用させ、PSI 等で計測してみた結果、WebP よりもファイルサイズが大きく減少して効果てきめんでした!WebP を使っていなくても「次世代フォーマットでの画像の配信」の指摘もされません。(※圧縮率によっては指摘される場合もあり)
実は先日から <picture> タグを使って WebP と それ以外との形式を併用するというやり方をやめて WebP に1本化していたのですが、古いバージョンの Safari が非対応ということがちょっと気になっていました。でも JPG であればもうそんなことなど気にしなくても良くなります。デメリットとしては透過画像が使えなくなるということぐらいですが、個人的には別に問題ないです。(ちなみに透過画像に rj を付けると黒背景になります)
記事一覧や関連記事やサムネ付きページャー等の画像は JavaScript で自動的にパラメータを置き換えられるのでいいのですが、過去記事内の画像に関しては手動で書き換える必要があり…そこの対応に関しては面倒くさいのでとりあえずは保留にしておきます(~_~;)
コメントを投稿
別ページに移動します2 件のコメント (新着順)
ふじやん
>Fumaさん
このパラメータの情報、Fumaさんにも教えてあげようかなと思ってたのですが、記事をご覧いただけたようでよかったです(^^)
いやあ、高速化に関しては先日導入させていただいた Fuma さんの Lazyload スクリプト のお陰でもあるので、こちらこそ感謝です(´▽`)
Fuma
画像の圧縮ができるパラメータまであったんですね。PNGやGIFをJPGに変換できるパラメータの存在も記事を拝見して初めて知りました。Bloggerすごすぎる…
今まで画像はTinyPNG等で圧縮していて面倒に感じていたんですが、パラメータを少し加えるだけで済むのでとても助かります。有益な情報をありがとうございますm(_ _)m
余談ですが、ふじろじっくさんの読み込み速度が以前にも増して爆速化していてびっくりしました(笑)