趣味は多い方がいい

バイク(GSR250S)とカメラと自転車とキャンプと旅行。ほかにもいろいろと。淫要無。

はてなブログの画像リサイズについて考察する

当職はスマホを使わないマンなので料金プランを低いものにしているのだが、ときたまデータオーバーになることがある。

そういう月のデータ使用量を見るとほとんどがブラウザ(Chrome)のもの、さらにブラウザ内の使用量を見るとはてななどのブログ系が大半を占める。
ちなみにサイトごとのデータ量はライトモードから見れる。

ブログで重いものといえば画像しかないので、画像を大量に使う、一枚一枚が重い、などが通信量を圧迫している主要因であると推測される。

当職もブログを書いている以上これは気にするべき問題だ。自分で重い記事を作って自分で確認しパケ死(死語)するという墓穴を掘ってる可能性があるからだ。ブログの画像数についてはコンテンツそのものに関わるので仕方ないと思うが、画像一枚一枚を圧縮することで軽くする事はできるはずなので、はてぶの画像取り扱い事情について調べてみよう。

自動リサイズによる容量変化を検証する

挙動を見たところ、記事編集画面で画像をアップロードした際には自動的に長辺1200pxに変換して保存する仕様っぽい。

まずはこの圧縮処理がソース画像の大きさによって変化するかを調査する。

f:id:kamoeel:20220114212835j:plain:w400

Lightroomの出力機能ではてぶの上限(10MB)ギリギリの画像、長辺2000pxにリサイズした画像、リサイズして圧縮した画像の三種類を作成しそれを記事作成画面にドラッグ&ドロップしてアップロード。完成した記事から画像をダウンロードしてサイズを確認する。

結果がこれ。左から9.3MB,1.9MB,0.8MBだったものの成れ果てだ。
f:id:kamoeel:20220114214631j:plain

0.8MBだった画像、なんでサイズが増えた???

どんなアルゴリズムでやってるかは知らんが、はてぶのリサイズは何か不穏な仕様になっている事が判明した。パケ死の原因はお前だな。

なお今回はPCの画面で見ているが、スマホでも同じ画像が表示されることは確認している。スマホ向けの軽い画像を用意する、みたいなことはされていないようだ。

解決策1:画像を長辺1200pxにリサイズしてからアップロードする

まず思いついた解決策はリサイズされないようにあらかじめ長辺1200px以下の画像にしてしまうことだ。

f:id:kamoeel:20220114215358j:plain

Adobeくんのリサイズによりアップロード前のサイズは963KB。これをアップし、記事からダウンロードすると・・・

f:id:kamoeel:20220114215802j:plain

元の画像のままだ!

はてぶのリサイズ基準を超えない画像なら、アップロードした画像がそのまま表示されるということが判明した。ニコニコの再エンコ回避みたいだな。

解決策2:はてなフォトライフの設定を変更する。

肝心のはてぶリサイズ基準がどこに定義されているかだが、はてなフォトライフ → 設定、の欄にある。

f:id:kamoeel:20220114220308j:plain

ここの「画像サイズ」を超えるとリサイズされるようだ。ちなみにここで長辺800pxに指定されているが上述の通り1200pxでリサイズされる。なんで?

また、「画質」のパーセントを落とすことで容量削減ができる。ここが100%に設定されていたせいで元画像よりサイズが大きくなる珍現象が発生したわけだ。

これら数値を色々検証したところ、以下の条件のいずれかを満たした際にはてぶが画像をリサイズするという所まで調査できた。

  1. アップロードした画像の長辺が「画像サイズ」を超える場合
  2. 「画質」が100%以外に設定されている場合
  3. はてぶの記事編集画面からアップする、かつ「画像サイズ」が800pxに設定された状態で、アップロードした画像の長辺が「1200px」を超える場合

3がマジで意味わからん…とにかくこれらを考慮して目的である「ブログの画像を軽くする」を達成するには、

  • 自分でリサイズや圧縮したい場合は画像サイズをうんと上げ、画質は100%のままにする
  • リサイズをはてぶに任せるなら画像サイズは変更せず、画質を適当に下げておく。スマホかPCかにもよるが60~80%位にしておくと画質とサイズのバランスがいい。

この二択から選ぶのが妥当であろう。

解決実践編

f:id:kamoeel:20220114222423j:plain

当職は自分でリサイズしてからアップロードしているため、画像サイズにゼロを足して8000pxに設定、画質を100%にした。

f:id:kamoeel:20220114223046j:plain

そして先ほどのようにアップロードすると、

f:id:kamoeel:20220115123555j:plain

目論見通りリサイズされずにアップロードされた。
ここでは画像サイズを8000pxとしたが、見ての通りテスト用の画像にうっかり4000万画素機の写真を使ったためリサイズが働き、結果として39.6MBのバケモノを生み出してしまった。設定値によってはこういう事が起こりうるということは留意しておく必要がある(反面教師)

今回検証に使った画像たちはこのページに載せた。ただし先に言った通りギガイーターが潜んでいるのでWifi環境で開くことを推奨。そもそも特に見る意味はないわよ

f:id:kamoeel:20220115125007j:plain

最終的な設定はこんな感じ。これで画像は~400KB程度まで軽くなった。このブログも軽くなることだろう。