Compass media

Webサイトやブログのメディア運営のコツをコツコツと発信

Macで画像を一括圧縮する方法を解説します。フリーソフトすら使わずにできます。

"Macで画像を一括圧縮する方法を解説します。フリーソフトすら使わずにできます。"

Mac で大量の画像をまとめて一括で圧縮する方法をツイートしたところ、意外と反響が多くあったので本記事で詳しく解説します。

Mac で画像ファイルを圧縮するにはフリーソフトすら不要

"Mac で画像ファイルを圧縮するにはフリーソフトすら不要"

Mac で画像ファイルを圧縮するときに使うのは、

  • デフォルトで入っているプレビューアプリ
  • 無料で使える TinyPNG Webサービス

で十分です。

この 2 つを使うだけで、iPhone で撮影した写真を 2 MB → 100 KB 前後へ一括して圧縮することができました。

手順1:Mac デフォルトで入っているプレビューアプリで画像を開き圧縮する

"手順1:Mac デフォルトで入っているプレビューアプリで画像を開き圧縮する"

手順1-1:一括圧縮したいファイルを選択します

Finder で画像フォルダが格納されている場所を開き圧縮したい複数画像ファイルを選択します。

選択後、右クリックをし [このアプリケーションで開く] → [プレビュー.app(デフォルト)] をクリックします。

"右クリックをし このアプリケーションで開く → プレビュー.app(デフォルト) をクリックします。"

手順1-2:プレビューアプリでサイズを調整します。

プレビューアプリが開いたら左側に取り込まれた画像一覧が表示されます。

変更したいファイルを選択します。全て選択する場合は [Command + A]で全選択すると良いでしょう。

"変更したいファイルを選択します。全て選択する場合は Command + Aで全選択すると良いでしょう。"

変更したいサイズ、解像度を指定します。

Google ガイドラインの「魅力的な高画質コンテンツが表示される仕組み」で 1,200 px が推奨されています。

- 魅力的な高画質コンテンツが表示される仕組み
魅力的な高画質の画像、特に Discover からのアクセスが発生する可能性の高いサイズの大きい画像をコンテンツに含める。サイズの大きい画像は、幅を 1,200 ピクセル以上とし、max-image-preview:large の設定または AMP を使用して有効にする必要があります。サイトのロゴを画像として使用しないでください。

引用: Google 検索セントラル | 上級者向けSEO:Discover とウェブサイト

私は以下の設定値でしています。

設定項目 設定値
1200
高さ 指定しない(縦横比を固定で自動調整に任せる)
解像度 72(サイズにより36にする)

あとは OK ボタンをクリックすれば選択したファイルが一括で小さくなります。

手順2:TinyPNG で圧縮する

"手順2:TinyPNG で圧縮する"

プレビュー.app でサイズを小さくした画像ファイルを TinyPNG の Webサイト で圧縮します。

JPEG だと 20-70 % 程度はさらに圧縮されます。

"プレビュー.app でサイズを小さくした画像ファイルを TinyPNG で圧縮します。"

実際に Mac で圧縮された画像ファイルサイズとその容量

"実際に Mac で圧縮された画像ファイルサイズとその容量"

写真やスクショにもよりますが、参考として今回どの程度画像ファイルが削減されたかを載せておきます。

ファイル 圧縮前 圧縮後
IMG_1818.JPG 1.4MB 112KB
IMG_1819.JPG 1.7MB 130KB
IMG_1820.JPG 2.1MB 135KB
IMG_1821.JPG 697KB 87KB
IMG_1822.JPG 842KB 127KB
IMG_1823.JPG 1.2MB 145KB

だいたい 10分の1くらいにはなっています。

SEO における画像圧縮の意義

"SEO における画像圧縮の意義"

Web サイトを軽量化することは Google の検索順位決定アルゴリズムに影響します。

速度を考慮して最適化する

画像が原因で全体的なページサイズが大きくなり、ページの読み込みが遅く、通信費が高くなる場合がよくあります。最新の画像最適化やレスポンシブ画像技術を使用して、高品質で高速なユーザー エクスペリエンスを提供するようにしてください。

引用元:Google Search Console 上級者向けスタートガイド:検索に関するおすすめの方法

わかりやすい記事を書こうとすると写真やスクショが多くなりがちです。

一つ一つの画像ファイルを圧縮しサイトスピードを早くするひと手間を書けることでライバルサイトとの優位性を確保するのが大事です。

そのために本記事で紹介している「一括画像圧縮方法」を参考にあなたのサイトの高速化をしてみましょう。

Webサイトの高速化の技術は画像圧縮以外にもあります。

私が普段から参考にしている本を載せておきますね。