Mac で大量の画像をまとめて一括で圧縮する方法をツイートしたところ、意外と反響が多くあったので本記事で詳しく解説します。
🙋♂️たくさんの画像を一度に容量削減!!
— ひろりん@ITエンジニア×ブロガー (@hiro_blogX) 2021年1月17日
①容量小さくしたい画像を選択
②[右クリック]→[このアプリで開く]→[プレビュー.app]
③左ペイン画像全部選択し[ツール]→[サイズを調整]
④Google推奨の1200px以上
⑤いつものTinyPNGへ放り込む
これで2MBあったスクショも全部100KB前後まで圧縮できるよ😀 pic.twitter.com/fDAXuttTTx
- Mac で画像ファイルを圧縮するにはフリーソフトすら不要
- 手順1:Mac デフォルトで入っているプレビューアプリで画像を開き圧縮する
- 手順2:TinyPNG で圧縮する
- 実際に Mac で圧縮された画像ファイルサイズとその容量
- SEO における画像圧縮の意義
Mac で画像ファイルを圧縮するにはフリーソフトすら不要
Mac で画像ファイルを圧縮するときに使うのは、
- デフォルトで入っているプレビューアプリ
- 無料で使える TinyPNG Webサービス
で十分です。
この 2 つを使うだけで、iPhone で撮影した写真を 2 MB → 100 KB 前後へ一括して圧縮することができました。
手順1:Mac デフォルトで入っているプレビューアプリで画像を開き圧縮する
手順1-1:一括圧縮したいファイルを選択します
Finder で画像フォルダが格納されている場所を開き圧縮したい複数画像ファイルを選択します。
選択後、右クリックをし [このアプリケーションで開く] → [プレビュー.app(デフォルト)] をクリックします。
手順1-2:プレビューアプリでサイズを調整します。
プレビューアプリが開いたら左側に取り込まれた画像一覧が表示されます。
変更したいファイルを選択します。全て選択する場合は [Command + A]で全選択すると良いでしょう。
変更したいサイズ、解像度を指定します。
Google ガイドラインの「魅力的な高画質コンテンツが表示される仕組み」で 1,200 px が推奨されています。
- 魅力的な高画質コンテンツが表示される仕組み 魅力的な高画質の画像、特に Discover からのアクセスが発生する可能性の高いサイズの大きい画像をコンテンツに含める。サイズの大きい画像は、幅を 1,200 ピクセル以上とし、max-image-preview:large の設定または AMP を使用して有効にする必要があります。サイトのロゴを画像として使用しないでください。
引用: Google 検索セントラル | 上級者向けSEO:Discover とウェブサイト
私は以下の設定値でしています。
設定項目 | 設定値 |
---|---|
幅 | 1200 |
高さ | 指定しない(縦横比を固定で自動調整に任せる) |
解像度 | 72(サイズにより36にする) |
あとは OK ボタンをクリックすれば選択したファイルが一括で小さくなります。
手順2:TinyPNG で圧縮する
プレビュー.app でサイズを小さくした画像ファイルを TinyPNG の Webサイト で圧縮します。
JPEG だと 20-70 % 程度はさらに圧縮されます。
実際に 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 における画像圧縮の意義
Web サイトを軽量化することは Google の検索順位決定アルゴリズムに影響します。
速度を考慮して最適化する 画像が原因で全体的なページサイズが大きくなり、ページの読み込みが遅く、通信費が高くなる場合がよくあります。最新の画像最適化やレスポンシブ画像技術を使用して、高品質で高速なユーザー エクスペリエンスを提供するようにしてください。
引用元:Google Search Console 上級者向けスタートガイド:検索に関するおすすめの方法
わかりやすい記事を書こうとすると写真やスクショが多くなりがちです。
一つ一つの画像ファイルを圧縮しサイトスピードを早くするひと手間を書けることでライバルサイトとの優位性を確保するのが大事です。
そのために本記事で紹介している「一括画像圧縮方法」を参考にあなたのサイトの高速化をしてみましょう。
Webサイトの高速化の技術は画像圧縮以外にもあります。
私が普段から参考にしている本を載せておきますね。