ImageOptimで画像をダイエット(画像多め)

表示速度は正義で書いたように表示速度を上げるには

  • リダイレクトを減らす
  • 画像を減らす
  • linkタグでDNSの事前解決を行う
  • WebPを検討してみる

だと現時点では思っている。で画像を減らすを少し考えて画像の容量を減らすということでダイエットをしてみる。
ImageOptimというツールが良いという噂を聞いたので入れてみた。

ImageOptimの設定

非可逆圧縮をONにして80%に固定してみる。

この数値を下げすぎると画質ががくんと低下すると言うことなので80%にしました。
色々見比べればいいんだろうけど、容量が小さくなるのは正義なのでデフォルトの80%でやってみました。

JPG画像

元画像はiPhone 6で撮った写真をメッセージで送った画像ファイルを編集してみる。
元画像の情報は下記の通り

もとファイル大きい(2448×3264で3.2MB)WordPressは1枚2M以上のファイルはアップロードできないはずだし、3.2MBとかはあり得ない

MacのPreview.appで横幅を1024に変更して1024×2365で754KBまで小さくなった。サイズが半分になったので容量はだいたい1/4サイズ。
754KBでもまだかなり大きい。

これをImageOptimでダイエットしてみる。
ドラッグ&ドロップで自動的に圧縮して同一名で保存してくれます。
同一ファイルに保存が嬉しいかは使い方によるな^^;;
オリジナルファイルは上書きでは無くゴミ箱に入れられてます。

画像を見てもわかるように62.1%小さくなります。
できあがったファイルは287Kでした。

実際に見比べてみる

1024にしただけの画像

ImageOptimで圧縮を書けた画像

この違いで容量は38% OFF。
表示速度を上げるというのにフォーカスするなら画質を落として軽くするというのもありだと思います。

PNG画像

スクリーンショットはPNGというわたしの勝手なイメージ
ということでスクリーンショット(PNG)をImageOptimでダイエットさせてみる。

Originalデータが270KB
同じようにImageOptimに入れてみます。
そのアウトプットが61KB

画質的にはあまり変わらないような気がする。それで容量が23%。
200KB以上も削減できる。
200KBあれば別の画像を入れる事もできるしー
圧縮素晴らしい。

元画像

ImageOptimで圧縮した画像

まぁ違いはこんな感じです。

JPG or PNG

JPGとPNGどのファイル形式がいいかと考えていたらこんなツイートを発見

なるほどねぇ〜
Twitterに対してではあるけど。

写真はJPG、スクリーンリーダーはPNGで問題はなさそうな感じ。

ImageOptimのデメリット

CPUパワーが足りないからかPNGの圧縮には時間がかかります。数分という感じではありませんが十数秒かかる気がします。
大量の画像を圧縮する場合には寝る前とかに行った方がいいかも。
本当はサーバ側で自動的に圧縮したほうがいいとはおもうけどそしたらサーバのCPUが死ねるしね^^;;

まとめ

画像圧縮は高速化には効く。
1枚1枚ちまちまとやってられない^^;;
あまり圧縮しすぎるとWordPress側で増やしちゃう問題があるらしい(小さくしても大きくなる !? WordPressのサムネイル生成)

次は瑞慶覧さんのWordPressでwebpを使って画像サイズ削減を参考にWebP対応かなぁ〜
最近はCDNの機能で画像最適化とかあるらしいfastlyとかAkamaiとか利用して遊んでみるのもアリかも知れない。

「CDNは儲からない」みたいな発言も聞いたことあるのでbig playerを利用するのが正しいような気もする。

Mac

Posted by WATARU YONESU