画質保ってデータ量劇的削減！webアプリ『sqoosh』の底力

当呑気ブログのようにイラストや写真が多めだと気を使わなくてはいけないのが、画像ファイルの大きさ。
データ量が多過ぎるとレンタルサーバーの保存スペースを圧迫し、webでの表示速度が遅くなって読んでくださる方にも迷惑がかかります。

そこで完全無料で高機能のGoogle製サービス『sqoosh(スクーシュ)』の出番！

画像サイズ小→画質劣化

「いつか使うかも」「そのうちなんとかする」物がいっぱい詰まったわが家の押し入れを指差し、整理整頓を厳しく説く黒猫こまち。

アラブの石油王が所有する油田の埋蔵量を気にするがごとく、狭い賃貸住宅に住んでいる筆者のような小市民には限りある収納スペースは悩みの種。
それと同じようにブログ記事を書くたびカウントされる累積データ使用量の数字は、心配性の私を「あと無料で使えるのはこれだけか…」と毎回脅かされるものでもあります。

---

当ブログの画像は、基本的に横幅560pxの実寸にて掲載。
私の環境で作製したイラストや写真の元サイズは、1点平均100～200KB超。
多い時には10枚以上画像を使うこともあるので、正直にそのまま載せ続けていたら1Gの無料サーバーはあっという間にいっぱいになってしまいます。

記事数が100を超えたあたりでそれに気づきもっと掲載ファイルのデータ量を節約しようと思いましたが、これ以上画像のサイズを小さくすると画質の劣化が甚だしく読者の方にお見せするようなものではなくなってしまいます。

たとえばこの、ヤマト運輸マスコットと一緒のこまち。

560×420pxで105KBの画像ファイルです。
これを元画像の半分、280×210pxに縮小したとすると…。

下にある元画像のアップと比較すると粒子の荒れが目立ち、ちょっと公開できる品質ではありません。

会員登録ログイン不要
端末内で操作できる

そんな時に知ったのが、今回ご紹介する『sqoosh』。
2018年に始まったwebアプリ、できるだけ見た目はきれいに保ちつつ効率よくデータ量を削減できる新技術。
会員登録・ログインは不要、
完全無料ですぐ使えます。

さらにsqooshの良い点は、webサービスでありながら画像ファイル自体はネット上にアップする必要がないこと。
画像加工のための実行プログラムをブラウザを経由して端末で操作する形式なので、「自分のファイルを他人のサーバーに上げるのは心配」という方も安心してお使いいただけるのでは。

☆『sqooshアプリ』
https://squoosh.app/

にアクセスすると、立ち上がる起動画面。

画面右上にある「Install」ボタンを押すと次回からは完全にオフラインの状態で使えますので、お試しになってsqooshが気にいった方にはインストールをおすすめします。
※インストールはパソコンのみ可能。

すべて英語表記でも特に難しい言葉は使われておらず直感的に操作できますが、ちょっと洒落で日本語に翻訳してみましょう。
起動画面中央のピンクの丸いふわふわ部分、ここから元画像を読み込ませるのですが…。

翻訳すると「Drop OR Paste」が「落とす又は糊」。
webの直訳って、なんとなく笑えるのが多いですよね。

軽い操作性
変換前後も確認可能

さて遊ぶのはこれくらいにして、ここからは実際にsqooshで画像ファイルを加工していきましょう。
※パソコン版で説明しております。スマホ・タブレットではUIが若干変わりますが、操作方法自体は同じです。

先ほどのマスコット＆こまち写真を、sqooshにポイと入れてやります。

すると現れる作業画面画面右下に固定の調整ダイアログでは画像の拡大縮小や色味加工もできますが、今回は下の「Compress(圧縮)」のみに注目。

Compress欄上段のプルダウンメニューから、オリジナルを含めたファイル形式が選べます。

一番圧縮率が高いのが、ブラウザ『Firefox』で有名なMozilla社が開発した「MozJPEG＝モズペグ」。
可愛らしい愛称のこの形式を、筆者はデフォルトに。

---

読み込んだ時にアプリが画質とデータ量のバランスを考えて、いったん自動的に変換してくれています。

画像上に置かれたスライダーの右部分が変換後・左部分が変換前。
※スマホ等でスライダーが横向きに置かれた時は、上が変換前・下が変換後。
スライダーを動かして変換前後の画質変化をリアルタイムで見ながら調整できるのも、sqooshの便利なところ。

読み込み画像はマウスホイール・ピンチで拡大縮小、ドラッグで作業画面内を移動できます。

品質維持しつつ
こんなにファイルが小さく！

sqooshがまずおすすめ設定で変換してくれたファイルは、「Quality(品質)」75・オリジナルから71％削減・データ量29.7KB。

ぱっと見には元画像との差はほとんどない品質で、データ量は1/3になっています。

これでもじゅうぶん過ぎるくらいですが、せっかくなのでQualityのスライダーを動かしながら画質とデータ量の変化を見てみることに。

スライダーをグーッと左へ動かしていくと…。

品質30を切ったあたりで、画像右半分（変換後）こまちの背中あたりがぼやけてきました。

品質10を下回ると、はっきりとしたブロックノイズが現れます。

そのまま品質0にすると、

こまちのQRコードみたいなのができました。

スライダーを右に戻して、品質45。

このあたりが、落としどころのようです。

納得できる変換結果になったら調整ダイアログ右下の青いダウンロードボタンから、名前を付けて保存。

オリジナルから83％減、データ量17.3KBの画像。

こちらは元画像。

見比べてみて、いかがでしょう。
並べると多少画質の違いはわかりますが、最初から圧縮画像の方を掲載するのなら呑気ブログにはこれでじゅうぶんなクオリティなのでは。

こうして100KB超の写真をsqooshのおかげで、元の1/5サイズでブログにアップすることができました。
現在残り保管容量280MBのサーバースペース、まだまだ余裕余裕。
安心してこまちたちの写真やイラストを、皆様にお目にかけられます。

さてブログデータ保管庫の整理が済んだついでに、みっちり物が詰まっているわが家の押し入れも少し片付けるか。
使わないのにしまいこんであった敷物などを思いきって処分したら、押し入れがぐっと広くなって。

こまちも、幸せそう。

今日の教訓。

web画像には、sqoosh。
押し入れには、断捨離。

ご精読ありがとうございます。
またのご訪問、お待ち申し上げております。
入船亭扇治拝

タグ：webアプリ　猫

火事と同じくらい恐れられた、江戸時代の強風

仕事帰り、楽しみに寄席へ行ってみたら…。

表の立札に今日の興行は「強風のため十八時まで」とあって、驚く黒猫こまち。

”風が吹けば桶屋が儲かる”というのは聞いたことがありますが、「風が吹いて寄席休み」とはいったいどういうことなのでしょうか？

火事慣れしていた
人口密集地の江戸っ子たち

「火事と喧嘩は江戸の華」。
こう謳われるほどとにかく火事が多かった江戸の町。

ヨーロッパに先駆けての100万都市・江戸は、大変な人口密集地。
なかでも庶民たちが暮らす下町の人口密度は、現在の3～5倍だったそうです。
そこに木と紙でできた棟割長屋などが軒を接してひしめいているので、いったん火の手があがるとあっという間に燃え広がってしまう。

当時は炊事や照明に炭やろうそくなどで直火を使っていましたから、ちょっとした不注意や弾みで火事が起きることは日常茶飯事。
生涯で一度も火事に遇わないで暮らしたという江戸っ子は、ほとんどいなかったのではないかというくらい。

それだけに江戸庶民たちは火事にも慣れており、火の手が迫ってもういけないという時は必要最低限の家財道具を持ってすぐに避難。
長屋の住人だったらあくる日からすぐ別の住まいを探す。
持ち家に住んでいる人も早ければ二・三日知り合いの家に身を寄せているうちに、火事で焼けたり破壊消火でつぶされてしまった家を前と同じ場所に再建できたといいます。

水路を使って豊富な木材が集められており腕のいい職人も大勢いた江戸だからこその、素早い復興。
今日の稼ぎはその日のうちに使い切る「宵越しの銭は持たない」江戸っ子の気風は、火事早い城下町に住んでいるから培われたとされています。

冬から春にかけて
乾燥と強風が襲う

日本全国でも発生件数が断トツに多かった江戸の火事、気候条件もその大きな一因でした。

冬場には平均して雨が少なく、隅田川が凍ったという記録があるほど現代より寒かった江戸。
そして11月～5月にかけては強い季節風が、八百八町に吹き荒れる。
ことに寒い時期の赤城や筑波からのおろし風は、身に応えたそうです。

そういった強風が、江戸の町全体をカラカラに乾かしてしまう。

乾燥はなるほどお肌の大敵でもありますが、小火で済んだかもしれない火の手の勢いを増す「火事の援軍」にもなりえますから恐れられたのですね。

興行は暮れ六つ限り
強風時の寄席

火事そのものと同じくらい強風を警戒した幕府は、あまりにも空気が乾燥して風の強い時は

・庶民の外出自粛要請
・表で火を扱う屋台のそば屋うどん屋などの営業禁止

といった対策を講じていました。

その一つが、

「風強き時には、寄席は暮れ六つをもって興行を仕舞うべし」

というお触れ。

舞台効果を最大限に発揮するため明るい日中（午前6時～午後4時）だった芝居興行と違い、芸人の顔がぼんやり見えているくらいでいい寄席は夜でも営業していました。
そのための灯りは、高座脇と客席に立てられたろうそく。

このろうそくがもし倒れたらそこからどんな大きな火事が出るかもしれないという危惧から、強風時には日が暮れたら寄席は閉めなさいよということになったわけです。

---

ここでご存知の方も多いかと思いますが、寄席とろうそくについてのトリビアを一つ。

江戸時代の寄席では興行一番おしまいに登場する芸人が一席申し上げたあと、「本日はこれぎりでございます」ご挨拶しながら高座脇にあるろうそくの芯を鋏で切って消していました。

「切る」では縁起が良くないので「打つ」と言い換え、トリでろうそくを消せる立場まで出世した噺家が「芯打ち」＝「真打ち」と呼ばれるようになったそうです。

私も小さなろうそくの明かりを、聴いてくださった方の胸にささやかながら灯せるよう精進重ねてまいります！

ご精読ありがとうございます。
ぜひまた、お立ち寄りくださいませ。
入船亭扇治拝

タグ：江戸豆知識　落語