AMPページ画像が表示されない場合、通常ページを閲覧ください。
スクワッシュ(アイキャッチ)

WEB上で画像圧縮できるアプリ「スクワッシュ(squoosh)」を試す

GoogleがGitHub上で最近公開しているWEBアプリで画像圧縮が出来るサービス

を試してみたいと思います。

 

使ってみた感想はGoogle翻訳で機能を使うと文字化けしてしまい使いにくい

所もありますが、画像の変化を比べられるのでバージョンアップや不具合修正が

進めばかなりおすすめのサービスになるのではないかと思いますので

チェックしておきましょう。

 

画像が1個ずつしか扱えないのも欠点ではありますが、時間はかかりますが

個人的には大量に画像を圧縮することはなくその都度画像圧縮しますので

特に問題視していませんが大量に画像を圧縮したい方には現時点ではお勧めできません。

サイトのスピードの高速化には画像の圧縮は不可欠ですから色んなサービスを

厳選してまた併用して活用していきましょう。

 

WEB上で簡単 画像圧縮アプリ「スクワッシュ(squoosh)」

 

スクワッシュ (squoosh)

この記事を書いている時に気付きましたが、こういったサービスを使いスマートフォンから

画像の編集から圧縮を済ませておけば帰宅後にブログやその他に活かせるのではと思いました。

もちろんいままで画像の編集を仕事の昼休みなどに行なっていましたが、圧縮まではしてなかった

のでしておけば良かったと思いました。

色々と画像を圧縮できるサービスもありますし、現在使用中のテーマにも画像圧縮の機能が

備わっていますが、正直、圧縮されているか見た目で簡単に判断出来ないためWEB上で使える

画像圧縮サービスも併用して使っています。

とりあえずスクワッシュ(spuoosh)の使い方を一部紹介します。

 

画像圧縮アプリ「スクワッシュ(squoosh)」の使い方

 

➀まずはサイトにアクセスしてください。

 

Compress and compare images with different codecs, right in …

 

②サイトに圧縮したい画像をドラッグ&ドロップします。

 

スクワッシュ(画像挿入)②

 

すると上記のような画像になりますので、これがメインの画像です。

左がオリジナル画面で右が圧縮や編集された画像が表示されます。

 

下記にある-+で画像の拡大や縮小も出来ますが、マウスでも拡大と縮小に対応しています。

拡大・縮小

バックグランドを切り替えるボタンは画像の背景が変わりますのでお好みの設定で

お使いください。

 

初期画面背景デフォルト
切り替え後バックグランドを切り替え

 

画像の大きさが違いますが背景が白か黒(グレー)かの違いだけです。

 

画像リサイズ

 

リサイズにを入れることで設定項目が増えます。

かなり文字化けが多いですが、機能的には問題ないので今は我慢しましょう。

ブラウザの更新で直りますが、画像は貼り直しになりますので注意してください。

右画像は方法:の選択できるリストです。

  • 低品質
  • 中品質
  • 高品質から選択できます。

 

画像リサイズ
方法:ブラウザの品質

幅と高さのリサイズが出来ますので便利ですね。

アスペクト比を変更したい場合は✔を外しましょう。

 

パレットを減らす

 

翻訳された言葉を使っていますが、正解なのかはわかりません(笑)

 

パレットを減らす
パレットを減らす2色

 

右が色数を2色まで減らしてみた画像です。

なかなかいいな感じのモノトーン画像になりましたので使えるかも知れません。

ディザリングも意味も調べましたが、特に画像の違いはわかりませんでした。

次は変換する画像の種類が下記の画像のように選択出来ますので選択しましょう。

選択できる種類は下記の通りです。

 

  • OptiPNG
  • Mozjpeg
  • WebP
  • ブラウザPNG
  • ブラウザJPEG
  • ブラウザWebP

 

どの規格を選ぶかは使用用途で変わると思いますので好きな規格を選びましょう。

 

パレットを減らす(品質)
画像規格種類

 

下記画像が品質を0にまで落とした画像です。

流石に使えない画像ですのでどこまで落とすかは個人で検討ください。

 

 

品質0

 

詳細設定を表示する

 

詳細設定を表示するにを入れると選択項目がさらに増えます。

 

詳細表示切替

下記画像は選択項目です。

チャンネルチャンネル
量子化量子化

 

✔をすることで設定が反映されると思いますが、何となくでしかわかりませんので

ご自身で確認ください。

 

圧縮画像をダウンロード

 

ダウンロード

左右にあるアイコンから圧縮した画像をダウンロード出来ます。

設定した品質や画像の大きさやなどで、画像の容量が決まりますので

目標の画質と容量になるまで試行錯誤しましょう。

あまり設定をいじりすぎると下記の画面のように文字が複数表示されて見づらくなるので

注意してください。

文字化け

 

 

その他に画像圧縮できるサービスなど

 

TynyPNG

 

 

Make your website faster and save bandwidth. TinyPNG optimiz…

 

 

PNG圧縮

 

 

PNG 圧縮

PNGイメージを透過付きPNG-8フォーマットにするPNG圧縮最適化ツール。…

 

 

その他にも現在使用している無料画像編集ソフトでも品質などを選べますので

GIMPで圧縮→TinyPNGで圧縮という感じで現在は圧縮しています。

さらにテーマで圧縮されているようですが、確認できないのでわかりません。

 

GIMP圧縮
GIMP圧縮(種類)

 

右画像がフォーマットの種類です。

画像を保存時に圧縮のレベルが選べるようになっていますので使えますね。

 

まとめ

 

画像の圧縮はサイトのスピードや各種、画像読み込みに影響しますので

なるべく綺麗な画像で低容量で使いたいところです。

綺麗に見せたい所は良画質で、あまり重要じゃない所は低画質で使ったりと

メリハリが必要でしょうね。

Googleのサービスですが日本語でのサービスではないので、翻訳された文字なので

文字化け(バグ)が多いですが何とかなりますし、左右で画像の確認が出来るのは

非常に便利だと思いますので、バージョンアップや日本語対応に期待しましょう。

 

 

Compress and compare images with different codecs, right in …

 

 

THE THOR(CTA)当サイトで使用中の有料Wordpressテーマ「THE THOR(ザ・トール)」
高機能なテーマになっていてSEOや集客に強いテーマになっています。
標準でAMP・PWAに対応し、カスタム投稿などにも対応していて自由度も高く
標準使いでもプロの作成したようなデザインが出来ます。
テーマのダウンロードはこちらからどうぞ!
詳細を公式ホームページで見る
スクワッシュ(アイキャッチ)
最新情報をチェックしよう!
広告