EDIT

【Blogger】JPG圧縮パラメータでさらに高速軽量化しました

｜2023/10/11 ｜2
アイキャッチ

先日、Blogger 画像パラメータの小技の記事へのコメントで、BINUBALLさんに新たな有用な情報を教えていただきました。
→ BINUBALLさんのコメント

JPG 画像限定ですが、例えばパラメータに l80 (l は小文字の L) を追加すると元のファイルサイズの約 80% 程度まで圧縮してくれるというもの。詳細はこの記事にも書かれています。

ファビコンFresh Tech Tips
サムネイル
The Ultimate Guide to Customize and Edit Blogger (BlogSpot) Images
Find 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
圧縮画像1
s0-l80
648KB
圧縮画像2
s0-l40
199KB
圧縮画像3
s0-l1
87KB

有効な使い途

最初この圧縮技を知った時は(JPG限定ということもあり)特に使い途は思いつかなかったのですが、昨日ふと、これってひょっとして WebP 化よりも効果あるのでは？と閃いた。

Blogger 画像パラメータは rw で WebP 化させられるだけでなく他の形式にも変換可能で、rj を付けると PNG や GIF を JPG に変換できるのです。つまりすべての画像に圧縮技を適応できるということ。

例えば PNG 画像で JPG 変換と圧縮パラメータを付けた URL はこんな風になります。

旧 URL: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPMGE_4T1EJrhHBhydqsqQ0EJuuXHkYrVZB78jiom1My_c8kBnUuauuJOTrSWwLIASduHtBPuN_KtJBcfATTN_9zi8gSixFHNFQzdKQOwD1_Jd_RBue6NVuRbetq2UmDg2DRsNraJrrPQ/s480-rj-l50/new-image-URL.png

新 URL (旧仕様): https://blogger.googleusercontent.com/img/a/AVvXsEhovSVhmlV9i-eebgOple2oBW_5dbIOoKBeEXK1twbhwuggPi5nn7i4c0M_cAG_-RXs6C2HLehiYQ9XVQ1HxFhtJ-qY1Lzry-7nXa_X8s3bC7e34dYdi1jRxCzz2UDUy-R34seEZ_Xfv0ntIXzYodol7zymHzj3QY6rnwhBjy-o7YoFPBCKbDppIqhT=s480-rj-l50

新 URL (新仕様): https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsvn5HgmKZsmj5iPYLiARWd-k0KiM65yrV7kEJLp6f6jKohXuXEPGr02uu1Uz4WKCazaL3zoofAMKBS4G5IisfFAZNRIX7Sq0Q0C6x81AI2GEAyYzwjxWY4fAY2o7JHQi1GVO3yW-ATdkN0B6LCwkQiL6mr6TMF3khi1Ppbwhypk9KuWHZya2RmSDp/s480-rj-l50/new-image-URL.png

早速トップページの記事一覧のアイキャッチ画像に適用させ、PSI 等で計測してみた結果、WebP よりもファイルサイズが大きく減少して効果てきめんでした！WebP を使っていなくても「次世代フォーマットでの画像の配信」の指摘もされません。(※圧縮率によっては指摘される場合もあり)

実は先日から <picture> タグを使って WebP と それ以外との形式を併用するというやり方をやめて WebP に1本化していたのですが、古いバージョンの Safari が非対応ということがちょっと気になっていました。でも JPG であればもうそんなことなど気にしなくても良くなります。デメリットとしては透過画像が使えなくなるということぐらいですが、個人的には別に問題ないです。(ちなみに透過画像に rj を付けると黒背景になります)

記事一覧や関連記事やサムネ付きページャー等の画像は JavaScript で自動的にパラメータを置き換えられるのでいいのですが、過去記事内の画像に関しては手動で書き換える必要があり…そこの対応に関しては面倒くさいのでとりあえずは保留にしておきます(~_~;)