ImageOptimの使い方【ブログの読み込みが遅い時に使おう】

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る
       

ブログの読み込み時間が遅くなってきたっていうときはありませんか?

もしかしたら,その原因は画像の読み込みかもしれません.

実は,画像を圧縮することでブログの読み込み速度が,アップするんです!

この記事では主にブログなどを運営されている方向けに,Macで画像の圧縮する際にとても便利な神ツール「ImageOptim」をどこのサイトよりも詳しくご紹介いたします!

ImageOptimの素晴らしいところ

ImageOptimの素晴らしいところを挙げると,

  • UIがとてもシンプルで使いやすい
  • 位置情報,Exif情報などのメタデータが削除できる
  • PNG・JPG・GIF・SVGなどWebで使用する画像形式に一通り対応している

まさにブログにはうってつけのアプリです!

次はImageOptimのダウンロード方法を解説していきますよ!

ImageOptimのダウンロード方法

ImageOptim公式サイト

公式サイトからダウンロードすることができます.

ImageOptim — better Save for Web

サイト中の緑色の「Download for Free」ボタンをクリックしてください.

すると,「ImageOptim.tbz2」という圧縮ファイルがダウンロードできるので,このファイルを適当な解凍ツールで解凍してください.解凍すると,「ImageOptim.app」だけが出てきます.

ImageOptimの使い方

ImageOptimのアプリ画面

ImageOptim.appのアイコンをクリックすると,上のような画面が表示されると思います.

あとは,この画面に圧縮したい画像をドラック&ドロップするだけで自動的に処理が始まります.

めっちゃ簡単ですね!

左の丸いところのアイコンの種類とその意味は次の通りです.

画像の最適化に成功しました

処理はうまくいきましたが,画像をこれ以上最適化できませんでした

処理はうまくいきましたが,画像をこれ以上最適化できませんでした

このファイルの最適化を実行中です

このファイルは,他のファイルの最適化が終わるのを待っています

最適化中にエラーが発生しました. コンソール.app から原因を確認できます

注意点は,圧縮する前の画像はゴミ箱に捨てられてしまう点です.ゴミ箱から復元することもできますが,不安な人はどこかにコピーを保存しておくといいと思います.

ImageOptimおすすめ設定

デフォルトの設定では,可逆圧縮(データを元に戻すときに完全に元に戻す事ができる圧縮方法で,高品質だが圧縮率はあまり期待できない )されてしまって圧縮率があまり良くないので,僕が考えるブログなどに最適な設定をご紹介いたします.

設定といってもそんな難しい設定はありません.

まず,メニューバーから「イメージオプティム」→「環境設定」をクリックするか,ショートカットキー「⌘ + , 」で環境設定を開きます.

ImageOptimおすすめ設定

ちなみにImageOptimのアプリ画面の右下の歯車ボタンからも環境設定に飛ぶことができますよ.

ImageOptimのアプリ画面

次は細かく設定を見ていきますよ!

一般設定

有効

一般設定

ここでは,各画像エンコーダを有効にするか無効にするかを選択できます.ここで有効にされたアプリケーションを実行して,もっとも容量の小さなファイルを自動で選択するようです.

特にこだわりがないのであれば,デフォルトのままで十分です.

メタデータとカラープロファイル

ここでは,Exif情報やカメラモデル,JPG出力に使用したアプリケーション名,GPSなどのメタデータやPNGのカラープロファイルなどを削除するかどうかを設定できます.

特にGPS情報なんかは個人の特定に繋がる恐れもあるので,ブログなどにアップする方はチェックを入れておいた方がいいです.

僕は2つともにチェックを入れてあります.

ファイルのディスク書き込み

古いファイルを削除して新しいファイルを作り直す代わりに,古いファイルの内容を更新するだけの処理をするらしいのですが,自分が試した結果,チェックをつけていてもつけていなくても古いファイルを削除して新しいファイルを作り直していました.

また,「保存が早くなります」という表記がありますが,同じ画像で試してみた結果,ほぼ変わらなかったのでチェックをつけてもつけなくても大丈夫だと思います.

Quality

Quality

ここでは,圧縮する際の画像の品質を設定することができます.

正直なところ,よく見たら違うかもしれませんが,ぱっと見ではどの値にしてもそんなに変わらないので,僕は上の画像のような設定にしています.

そしてここが一番大事なところなのですが,「非可逆圧縮を有効にする」のチェックを入れておきましょう!

ここにチェックを入れることで,画像が非可逆圧縮(データをも完全に元に戻すことができない圧縮方法)されるので,高い圧縮率を期待できます.

最適化の速度

最適化の速度

完璧に思えるImageOptimにも少しだけ欠点があります.それは,画像の圧縮処理に少し時間がかかってしまうことです.

僕は,記事を書いている裏で処理させているのでそんなに気にはならないですが,ここでは,その処理速度を設定することができます.

僕は上の画像のように高いに設定していますが,処理速度を上げたい方は「低いが高速」を選択しましょう.

まとめ

ImageOptimは,画像の圧縮やメタデータの削除を簡単操作で実現することができます.

適切な画像サイズでないと,サイトの表示速度に影響が出てしまうので,SEO的な観点からここらへんは気をつけたいところです.

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る
     

コメント

Comments are closed.