【超簡単】Macで画像を一括圧縮・リサイズする方法

Macで画像を一括で圧縮・リサイズしたい猫

『ニャー(WordPressでブログを始めてみたはいいけど、画像の容量が大きいと問題ありって本当?どういう手順で素材に使う画像を加工すれば問題なくウェブサイトで使えるようになるのかよく分からないので教えて欲しい。できれば手間いらずな方法でよろ。ちなみにぼくはMacユーザーです。)』

↑こういったわがままなネコの要望に応えます。

この記事では、未経験からフリーランスエンジニアになった僕がMacで画像を一括軽量化する意味とその方法を解説していきます。

サイトの動作が速いことは、ユーザーの利便性が向上することに加えSEOとも関係があります(解説します)。この記事を読んで、画像の最適化についてはバッチリ!という状態になってもらえたら幸いです。

それではさっそく参りましょう。

画像を圧縮・軽量化すべき理由

そもそもどうして画像処理をするのか。ここら辺を理解していない方やあいまいな方は、下記の目的を頭の片隅に置いておいて下さい。

画像処理の目的
  • SEO対策
  • サーバー負荷軽減

順に説明します。

「SEO対策」に画像の軽量化処理が有効

SEO対策、つまり検索順位を上げるために画像処理をしてやる必要があるということはSEOを牛耳っているGoogleが公言しています。

以下はGoogle公式サイトからの引用した文言です。

ページの読み込み時間を最適化します。表示の速いサイトはユーザーの満足度を高め、ウェブ全体の質を向上させます(特にインターネット接続速度が遅い場合)。PageSpeed Insights などのツールを使用してページの読み込み速度をテストすることをおすすめします。

Google公式ページより

ちなみにPageSpeed InsightsというGoogle謹製のツールを利用すれば、どこをどう直せば読み込み時間が短縮できるかということがよく分かります。

例えばこのサイトの画像処理をしていないページの結果が以下なのですが、色々アドバイスを書いてくれています。

怒られまくりです。

余談ですが、SEO対策は色々すべきことが多いですが全部Google先生の公式に書いてあります。SEOの記事をぐぐって大枠をつかんでからは公式のガイドラインを読み込みましょう。

「サーバー負荷軽減」にも画像の軽量化処理は有効

サーバーとはざっくり言ってしまうと常時稼働し続けるパソコンのことです。SafariやChromeなどのブラウザからサイトを訪問した際に、それに対応するページを送り返したりする役割があります。

結局パソコンみたいなものなので、その内部に置いておく画像の容量は小さい方がいいということは何となく理解できると思います。

画像の一括圧縮処理 〜アウトライン〜

画像を最適化する際のメリットが分かったので、その手順を具体的に説明していきます。まず全体の流れを提示してみると、以下のようになります。

画像処理の大まかな流れ
  1. 素材画像をどっかで取ってくる(シャッターストックなど)
  2. 画像を圧縮する
  3. 使用する用途に合わせてサイズ調整

画像のサイズ調整でも、画像のファイルサイズは小さくなります。ただその前に圧縮しておくとより小さなサイズに変換できるという訳です。

圧縮すると画像の解像度は下がりますが、サイトで使う分には問題ないです。

Macで一括画像圧縮 〜実践編〜

画像の一括処理に使われる、代表的なMac用アプリは以下の2つです。

残念ながらこれらのアプリは有料です。どちらもインストールしてみましたが、仕様感は似たり寄ったりです。

ただ使うべきは、JPEGminiです。というかImageOptimはサブスクリプションタイプだったので、、、。ツールごときに月額課金したくないですよね?

JPEGminiは僕が見た時は¥3,500の買い切りでした。無料版だと枚数制限があるので、それで凌ぐのもアリです。画像のリサイズも同時にできるので(ImageOptimはできないハズ)使い勝手が良かったです。

Macで一括画像圧縮 〜裏技編〜

ツールを紹介しといてなんですが、僕はエンジニアなので上記のものは使いません。Macで言うところのターミナルを使って一括圧縮・リサイズを行います。理由は下記の通り。

  • 無料かつ高速
  • パーソナルなカスタマイズ可能

実際に使用しているコードを載せておきます。

詳細な解説はしませんが、このコードを画像と同じフォルダに置き実行してやればフォルダ内の全ての画像が圧縮してリサイズされます。

functions.php
#!/bin/sh
IMG_FILES=`ls -1 | grep -e jpg -e jpeg -e png`
while read line
do
  if [[ $line =~ _1000 ]]; then
    continue
  fi

  ORIGINAL_FILE_NAME=${line%.jpg}
  cjpeg $line > ${ORIGINAL_FILE_NAME}_c.jpg
  convert ${ORIGINAL_FILE_NAME}_c.jpg -resize 1000x ${ORIGINAL_FILE_NAME}_1000.jpg
done <<END
$IMG_FILES
END

このようにエンジニアになるとできることの幅が広がるので、かじる位でもいいのでやってみるのはオススメです(暴論)。

まとめ

結論:エンジニア最強説(知らんけど)

このサイトでは未経験からフリーランスエンジニアになった僕が、有益な情報を発信していくので、他の記事もチェックしていってください!

コメントを残す

メールアドレスが公開されることはありません。