これは凄いぞ! Googleのブラウザ画像圧縮WEBアプリ【Squoosh】

2018年11月24日
4
0
便利なアプリ

以前に、弊ブログで 『 GIFアニメーションや画像を劇的に軽量化する無料サービス 』 として、取り上げた Compressor.io


GIFアニメーションや画像を劇的に軽量化する無料サービス

弊ブログでは記事中にGIFアニメーションや画像をよく載せておりますが、その際には事前に「ファイル容量の軽量化」を実施してから載せております。近年のインターネットやデバイス(PCやスマホやタブレット等)の性能向上と共に、ファイル容量の大きなもの...


この無料サービスで圧縮軽量化したGIFアニメーションが、最近何か妙に画像の劣化?を感じるようになった(筆者の気のせいではないくらい)んですよね、GIFアニメだけでなく、静止画でも同様傾向がある様子。

そんなこともあり「GIFアニメーションをもっと綺麗に圧縮軽量化してくれるアプリや無料サービスはないものか!」と、ググりまくっていたところ 『 Googleが画像圧縮WEBアプリ「Squoosh」公開 ブラウザだけで圧縮やフォーマット変換まで出来てしまう 』 という記事がたくさんヒットしたんです(爆)

「 ほ~ なんか面白そう♪ 」 ってことで、即お試しに利用してみました、こういうことには筆者って、ご飯食べることよりも先だってしまうんですよね、たまたまこの時もお昼ご飯の時間帯でした (≧ω≦。)プププ

「 筆者の Squoosh による画像軽量化イメージはこんな感じ(笑) 」
Squooshによる画像軽量化イメージ

その 【 Squoosh 】 にパソコンから早速アクセスしてみました。(スマホでも同様に利用出来ることは動作確認してあります)


はい、これで画像圧縮操作と、自分のパソコンへのダウンロード終了~! なんともアッと言う間の簡単操作(笑)
ワン・ツー・スリー って感じですよ(爆)

3枚目の画像をよく見てください!画像(.jpg)のファイル容量が 240kb → 35.8kb にまで、85% も軽量化されている ことが分かります(爆)
同WEBアプリでは、デフォルト(初期設定)では、圧縮クオリティは 75% となっておりますが、ここのスライダーを左に操作すると、もっと圧縮率が高くなって更に軽量化出来るんですが、この 75% 設定が一番綺麗に圧縮出来るように思いましたが、劣化しても構わないと言う画像にはとても有効な調整が出来ます。

そうそう、筆者がここで圧縮軽量化テストしてみました画像は 1216px × 684px と言う、16:9 のアスペクト比(画像の横縦サイズ比率)でして、弊ブログ記事ごとのアイキャッチ画像に利用しているサイズなんですよね(笑) もっとも最近はテンプレートに合わせて 500px × 281px も使うようになりましたが。(これはモバイルユーザビリティを考慮する為に)

さて、ここで圧縮軽量化する前の元画像と、軽量化した画像の見映えを比べてみましょう、それがこの記事の一番肝心なことですよね(笑)

[ クリック拡大してみてください ]
圧縮軽量化前の画像
[ クリック拡大してみてください ]
圧縮軽量化後の画像

どうです? 見た目の違いって分かりますか? 下が軽量化後の画像です。
筆者パソコンのモニターは普通の解像度(笑)ですが、もっとクオリティの高い高解像度モニターだと違いが分かるんですかね?
高解像度モニターで弊記事を読んでくださっている閲覧者さんがおられましたら、是非にコメントをお寄せ戴きたいです(笑)

これなら、ブログ記事に貼り付ける画像の圧縮軽量化にはじゅうぶん使えるWEBアプリですよね、って、もう筆者は使い始めております。

ただ、ちょっと残念なのが、筆者がことあるごとに「GIFアニメーションは圧縮軽量化してからブログに貼ることが必須!」と唱えてきているんですが、この「Squoosh」ではGIFアニメは未対応なんですよね、でもまぁ、やがては実現するでしょうと祈って於きます (^^ゞポリポリ
それと、png画像で画像周辺(背景)を透過処理してあるものだと、圧縮軽量化後にその透過処理がキャンセル?されてしまう傾向がある様子です。

Squoosh 】 には、もっと様々な機能(ファイル形式変換も)が備わっている様子ですから、興味のある方はググってみてください。


モニターを見て自分のミスを発見して頭を抱えるOL

[ ギャ~~~! どうしよ~~~! ]
[  会社のブログの画像、全部軽量化してなかったわぁ ]

あなたのブログはモバイルフレンドリー?
Google モバイルフレンドリーテスト

ブログ内分析はGTmetrixが強力です!
GTmetrix

検索からの方はトップページへもどうぞ



関連記事
ぼっちん

Comments 4

There are no comments yet.

mochi  

高解像度というわけではありませんが…

こんにちは。ぼっちんさん。

元の画像サイズが1216px×684pxなんで解像度の影響はあまりないと思いますが、ブラウザ表示はもちろんのこと元画像をダウンロードして解像度1920×1080において150%拡大表示でも違いは分かりませんでした。
Squoosh上で300%拡大表示してスライダーを動かしてようやく分かるレベルですね。
きっとオッサンの指だからだと思います。たぶん女の子の指だったら分かったかもしれません。ヾ(・・;)ォィォィ

Squooshは画像を確認しながら細かい調整ができるので画質にコダワリを持っている方には良いサービスですね。
Googleサービスサイトということもあって僕のブログでも一部取り入れている高品質圧縮WebP形式にも変換できるのもポイントですね。
参考になるサイト紹介ありがとうございました。 ( `・∀・´)ノ

2018/11/24 (Sat) 15:33
ぼっちん

ぼっちん  

To mochiさん

mochiさん、こんにちは~ ^^
わざわざ検証してくださって、ありがとうございます ^^

きっとオッサンの指だからだと思います。たぶん女の子の指だったら分かったかもしれません。ヾ(・・;)ォィォィ
(〃^▽^〃)oあはははっ♪
いえね、最初はそういう感じの画像をサンプルにするつもりだったんですけど、画像探ししている時に「おっ この指のしわだらけ部分が、劣化を見るのに丁度都合が良いかもぉ(笑)」って、この画像になったんですよね(笑)
けっこう使えますよねぇ、この Squoosh って うんうん(^-^)

Squooshは画像を確認しながら細かい調整ができるので画質にコダワリを持っている方には良いサービスですね。
Googleサービスサイトということもあって僕のブログでも一部取り入れている高品質圧縮WebP形式にも変換できるのもポイントですね。

そうですそうです、このスライダー調整と他を組み合わせると「わぉ!」って感じの画像に仕上げることが出来ることが、後になって分かって来ました(笑)
そそそ、mochiさんが最近お使いのWebPへも変換出来て、それ以外にも利用範囲はかなり多彩に広がる予感がしてます。

参考になるサイト紹介ありがとうございました。 ( `・∀・´)ノ
いえいえ、ほんのさわりしか記事に出来ませんでしたが、mochiさんでしたらきっと直ぐに達人の域に達してしまうことでしょう ^^
是非、使い倒してみてくださいね~(笑)

2018/11/24 (Sat) 16:12

神谷 幸弥(さや)  

便利ですねぇ!

こんばんは。
覗きにきてたのがバレバレだったので、今度は堂々と書き込みさせて頂きます。

以前は【パンダさんのツール→ドロップ何ちゃら】とか【JPEGmini】を利用してたんですが、使用中のタブレットに不対応になっちゃって他ので代用したら、60%に指定しても、そんなに容量を落とせなかったんですよ。
良いのが見つかって助かりました。
アスペクト比は16:9なんですか。いつの間にか黄金比は1.91:1だと思い込んでました(汗)

2018/12/23 (Sun) 17:44
ぼっちん

ぼっちん  

To 幸弥さん

幸弥さん、おはようございます ^^
うんうん(^-^) 今度はオープンコメントですね~(笑)

以前は【パンダさんのツール→ドロップ何ちゃら】とか【JPEGmini】を利用してたんですが
あっ 私もパンダさん使ってますよ~ .png画像の時には ^^
JPEGminiも以前は使ったことがありましたけど、なんとなく使わなくなっちゃってました(笑)

良いのが見つかって助かりました。
でしょでしょ♪ この「Squoosh」けっこう綺麗に軽量化してくれますよね~ 最近じゃもっぱらこれ使ってます ^^
まだちょっと使いにくいんですけど WebP 形式の画像にも変換出来るから、やがてもっと楽に WebP 画像が扱えるようになって、どんなブラウザでも表示出来るようになって、FC2のアップローダーでもサーバーに上げられるようになったら良いよね~って思っているんですけどね ^^

アスペクト比は16:9なんですか。いつの間にか黄金比は1.91:1だと思い込んでました(汗)
おやぁ? 1.91:1 って、SNSのTwitterとかFacebookなんかの推奨サイズじゃなかったでしたっけ?
一般的に「黄金比」って言い方だと、1:1.618(約5:8)を指すんだと思いますけど (^^ゞポリポリ
でも、そういうアスペクト比って「これでなければならない!」なんて決まり事ではなくて、見た目のバランスが良いって言う感性での表現になる訳ですし、では何処に視点を置くかで違ってくるんですよね(笑)
私のパソコンモニターはワイドモニターでして、アスペクト比は 16:9 ですし、利用しているAkira先生のこのレスポンシブテンプレートも記事欄がとっても広く使えるものですから、大判画像を貼るときに 16:9 だとけっこう見映えが良くて、4:3 画像だとなにか圧迫感を感じてしまって、やっぱり 16:9 の方がスッキリするんです(笑)
そうそう、ツベ動画(YouTube)も 16:9 ですよね(笑)
そんなことから、私は好んでそうすることが多いんですよね(笑)
ただ、もちろん大判でなければ 4:3 画像も貼りますけどね~(笑)

因みに 白銀比 1 : 1.414(約1:√2) なんてのもあるみたいですよ(笑)
昔の建築構造物(木造)でよく用いられている比率で、法隆寺なんかはそれに当たるらしいです。 (^_^)ニコ 

2018/12/24 (Mon) 08:33

Leave a reply