1. Home
  2. Webデザイン
  3. html+CSS+javascript
  4. Googleが提供する画像をブラウザ上で最適化して圧縮できるサイト「Squoosh」!
AmazonAmazon クレジットカードAmazon DashAmazon PrimeAmazon.co.jpAmazon
HTML+CSSだけで実装された走る馬のアニメーションがすごい!

HTML+CSSだけで実装された走る馬のアニメーションがすごい!

今回紹介するのはHTML+CSSだけで走る馬のアニメーションを実装されているClip Clop Clippity Clop [CSS Only]という作品です。CodePenに実物がアップロードされているので...

Bluetooth対応のスマート体重計・体組成計が送料込み1290円の大特価!

Bluetooth対応のスマート体重計・体組成計が送料込み1290円の大特価!

現在AmazonではBluetooth対応のスマート体重計・体組成計がなんとクーポンコードを使用することで衝撃の1290円で販売されています。スマート体重計・体組成計はスマホやタ...

DearMob iPhoneマネージャーでiTunesなしで簡単に写真を転送する方法!

DearMob iPhoneマネージャーでiTunesなしで簡単に写真を転送する方法!

前回はDearMob iPhoneマネージャーでiPhoneやiPadを簡単にバックアップする方法を紹介しましたが、今回の記事ではiTunesを使用せずにDearMob iPhoneマネージャーで簡単に写...

BOOK☆WALKERで電子書籍が50%還元されるキャンペーン!9/11までに配信された全作品対象!

BOOK☆WALKERで電子書籍が50%還元されるキャンペーン!9/11までに配信された全作品対象!

BOOK☆WALKERでは、BOOK☆WALKERとニコニコ書籍のスマホアプリの統合1周年を記念した「祝!結婚1周年!感謝のコイン最大50%還元キャンペーン」を実施しています。このキャン...

Audio Input FX LEを期間限定でプレゼントするキャンペーンを実施中!

Audio Input FX LEを期間限定でプレゼントするキャンペーンを実施中!

ニコニコ動画などの運営しているドワンゴのニコトクというサービスで、Amazonなどで通常販売価格8000円の音声マルチエフェクトソフトウェア「Audio Input FX LE」が期間限...

無料版あり!DVDFab動画ダウンローダーでYouTube動画を簡単ダウンロード!

無料版あり!DVDFab動画ダウンローダーでYouTube動画を簡単ダウンロード!

前回の記事では「DVDFab 11 Blu-rayコピー」についての紹介を行いましたが、今回はDVDFab動画ダウンローダー(DVDFab Downloader)について紹介したいと思います。DVDFab 11 ...

電子書籍が50%OFFでさらにコイン50%還元のニコニコカドカワ祭り2019!初回は100%還元!

電子書籍が50%OFFでさらにコイン50%還元のニコニコカドカワ祭り2019!初回は100%還元!

現在、電子書籍ストアのBOOK☆WALKERでは、2019年9月4日までに配信されたKADOKAWA作品が50%コイン還元、それに加えて15,000点以上が50%OFFで購入できるニコニコカドカワ祭...

激安10インチ中華タブレットの「ALLDOCUBE iPlay10 Pro」を使ってみた!

激安10インチ中華タブレットの「ALLDOCUBE iPlay10 Pro」を使ってみた!

最近10インチで激安タブレットを探していたのですが、10インチタブレットでなんと価格が1万円ちょっとというALLDOCUBE iPlay10 Proをゲットしたのでレビューを書きたいと思...

「iZotope Ozone 8 Elements」が無料でゲットできるキャンペーンが実施中!

「iZotope Ozone 8 Elements」が無料でゲットできるキャンペーンが実施中!

現在SONICWIREでは、省機能/高性能なマスタリングソフトウェアiZotope ( アイゾトープ )の「Ozone 8 Elements」を無償でプレゼントするキャンペーンを実施中です!Windows/...

NetaGear RSS News

Now Loading

Article

Googleが提供する画像をブラウザ上で最適化して圧縮できるサイト「Squoosh」!

Webデザイン > html+CSS+javascript 
Squoosh_000.png

Webサイトで画像を掲載する際に、画像の画質やファイルサイズを最適化して圧縮するのはサイトの表示速度を高速化するためにも必須の項目です。そこで今回紹介するのはGoogleが提供する画像をブラウザ上で最適化して圧縮するサイトである「Squoosh」です。

Squooshを使うことでブラウザ上で簡単に画像を圧縮してサイズを最適化することができます。画像を出力する際には、JPEG/PNGはもちろん次世代画像フォーマットであるWebP(ウェッピー)形式にも対応しています。ちなみに画像ファイルはサーバーにはアップロードされておらず、ローカルで処理されてるのでセキュリティ的にも安心です。もちろんスマホにも対応しています。

WebPの特徴について


google_webp_000.png

PNGやJPEGより圧縮性能が高い次世代画像フォーマットの「WebP」を使おう!

WebPを導入するメリットについては別の記事で詳細にまとめているのでぜひそちらをご覧ください。WebPのメリット・デメリットやWebPの圧縮性能の高さについての説明や「なぜ今WebPの話題が出ているのか?」という点にも着目してまとめてあります。

正直なところ将来的にはWebPだけあれば他の画像形式は必要ないんじゃないかと私は考えています。画像が多いサイトでは画像ファイルサイズの削減は、サイトの表示高速化においてかなりの割合を占める重要な部分です。重いJPEGやPNGをWebPに置き換えるだけでも読み込み量が約30%程度減らすことが可能になります。画像が重いとモバイルでは特に表示速度に影響があるので、しっかり最適化する必要があります。

Squooshで画像を最適化して圧縮する使い方!


Squoosh_010.png
Squooshにアクセスします。あとはブラウザ上に画像ファイルをドラッグ&ドロップするだけと至って簡単なサイトとなっています。あとは出力する画像形式と画像品質の設定を行って、右下の保存ボタンを押すだけで完了です。

Squoosh
https://squoosh.app/

JPEG比較


Squoosh_001.png
記事のトップ画像で使っているJPEG画像で試してみました。青いバーを境目に左がオリジナル画像で右がMozJPEGです。MozJPEGはFireFoxなども作っているMozillaが開発している高品質JPEGエンコーダーのことです。

CompressをMozJPEGにしてQualityを75にした状態です。
オリジナル:153KB
MozJPEG:62.1KB

見た目ではあまり変わりませんが、オリジナル画像から60%削減されており、ファイルサイズはかなり圧縮されています。

Squoosh_002.png
続いてWebPに変換してみました。

CompressをWebPにしてQualityを75にした状態です。
オリジナル:153KB
WebP:42.5KB

オリジナル画像よりも72%削減されました。WebPの方がMozJPEGよりも圧縮されました。

PNG比較


Squoosh_004.png
続いて記事のトップ画像で使っているPNG画像で試してみました。青いバーを境目に左がオリジナル画像で右がOptiPNGです。

CompressをOptiPNGにしてQualityを75にした状態です。
オリジナル:26KB
WebP:22.2KB

同じPNGを最適化しただけなので、15%と少しだけ圧縮されました。見た目も変化していません。

Squoosh_003.png

CompressをWebPにしてQualityを75にした状態です。
オリジナル:26KB
WebP:5.19KB

なんと驚異的な77%も削減されました。見た目的にはオリジナルと遜色がないレベルですし、WebPはほんとにすごいですね。

出力形式


Squoosh_005.png
出力形式はGoogle Chromeで確認すると以下の出力形式が確認できました。

Orijinal
OptiPNG
MozJPEG
WebP
Browser PNG
Browser JPEG
Browser WebP

ちなみに変換できる画像フォーマットはブラウザによって異なっており、FireforxではBMPへのエンコードをサポートしています。また、SafariではJPEG2000、TIFF、BMP、PDF、GIFへのエンコードも可能となっています。

今回の個人的感想




今回紹介したのはGoogleが提供する画像をブラウザ上で最適化して圧縮するサイトである「Squoosh」でした。画像の品質を維持しつつ、ファイルサイズを小さく最適化したい際にはSquooshはとても便利ですね。特に、青いバーを動かしつつオリジナルとの画質比較しながらクオリティの設定が変えられるのでおすすめです。

ブログ運営をしている方で重い画像をたくさん使うことで、サイトの表示速度が遅くなっていることが結構ありますよね。これなら原因は明らかなので、画像を最適化するだけ簡単に高速化が可能になります。個別記事の画像をすべて最適化するのは大変かもしれませんが、サイト全体で共通に使ってる画像などは比較的簡単に変えることができると思うので、そういった部分から少しずつでも変えていくと表示速度が改善していきますね。

ぜひ気軽に画像を最適化したい場合はSquooshを利用してみてはいかがでしょうか?

Related article

COMMENT TO THIS ENTRY

Most Popular

Now loading...

Social Links

Sponsored Link

Popular Article

Access Ranking

Now Loading...

当ブログにリンクしていているサイトの中でアクセス数の多いサイト上位15位が表示されます。今ならリンクするだけで簡単に上位に表示されます。