こんにちは、ゆーすけ(@yusuke_plmrstn)です。
ブログの見た目を左右する画像や写真。
文章のイメージを補助的に表現したり写真そのものを楽しむために使われます。
そろそろ見た目にもキレイなサイト作りをしていこうと考えているこのムクッといこうブログ、出来る限り高画質で出来る限り容量の小さい画像を実現するために試行錯誤し、ついに理想的な方法を発見しました！
この記事の目次一覧
画像の圧縮はどうして必要？
ブログで使う写真の容量が小さければ小さいほど表示にかかる時間が短縮されますが画質は落ちます。
容量が大きいほどページの表示がモッサリしてしまいますが、その分画質の低下が少なく、キレイな写真が掲載されます。
カメラで撮影してそのまま画像を載せてしまうと写真が大きすぎてブログの表示が遅くなり、読者さんが離れていってしまう原因になりまね。
スマホやPCでページにアクセスした時、表示に3秒以上かかるサイトは離脱率が50％を越えるという調査結果もあるほどです。
ブログのスリム化はより多くの人に見てもらうために必須ともいえる課題です。
オススメする画像圧縮ツール
ネット上でオススメされる画像圧縮ツールはたくさんありますが、個人的に一番いいなと思うのはMac標準のプレビュー機能です。
Macのプレビューは画像閲覧だけじゃなく文字の入力、切り取り、PDF編集など様々な機能が使える実はかなり優秀なツールというのは意外と知られていません。
今回紹介するのは正確にいうと圧縮ではなくリサイズです。
しかしそれでも画像の容量を抑えるためには十分使える機能です。
使い方は簡単。
編集したい画像をプレビューで開き、[ツール]→[サイズを調整]を選択します。
あとは変更したい大きさに揃えればOK。
僕の場合は横幅を600ピクセルで調整しています。
[speech_bubble type=”ln” subtype=”L1″ icon=”yusuke1.jpg” name=”ゆーすけさん”] 変更を加えたら自動保存されちゃうので、編集前はコピーを取って作業すると失敗するリスクがなくなるよ [/speech_bubble]
画像圧縮の合わせ技
Macのプレビューでリサイズした画像を更に小さくする方法として “ImageOptim” という無料ツールを使う方法があります。
このツールの優れたところは写真に付属している Exif情報を削除して無劣化で画像をスリム化してくれる点にあります。
わずかな圧縮かもしれませんが、画像が多くなるとその恩恵は計り知れません。
※Exif※
撮影日、撮影場所、使った機材など自動的に写真に記録される情報のこと。人によってはプライバシーを覗かれる気分になるので消しておくほうがいいかも。
実例
では実際にリサイズしてみましょう。
まず今回リサイズしたい写真はこちら。
ミラーレス一眼で撮影した写真で容量は3.5MB。
これをこのまま載せてしまうと大変なことになるのでさっそくプレビューでリサイズしてみます。
その結果がこちら。
なんとたったの92KB！
リサイズで3.41MBも削減できました。
これにさらに ImageOptimを使いExifを削除すると・・・
80.77KB = 81KB！
さらなるスリム化に成功しました。
有名なツールで比較
画像圧縮ツールで有名な2つを使い比較してみました。
JEPGmini
有名なJPEGminiです。
これでさっきの写真を圧縮してみると・・・
2.3MB
たしかに小さくなりましたがプレビューに比べると全然だめ。
JPEGminiは無料で使うこともできますが使用できる枚数に制限があったりネット環境につながっている必要があります。
有料で購入することもできますが2000円を越えるちょっと手を出しにくいアプリです。
TinyPNG
パンダのキャラクターがかわいい有名ツールです。
名前は png ですが JPEGでも利用可能。
さっそく画像を圧縮してみると・・・
1.1MB
こちらもやはりプレビューには敵わず。
無料で使えますがネット環境が必須です。
まとめ
今まで圧縮（リサイズ）には “Tx-MakerX” というツールを使っていましたが、仕上がりの画質を「高」に設定してもかなり荒く仕上がるのが気になっていました。
ところが今回のプレビューによるリサイズを試してみたところ、十分に容量を減らしつつ画像劣化も見られず、まさにこれは夢のツールではないかと思っています。
今回のテクニックはデジカメやiPhoneで撮影した容量の大きい画像には特に効果的です。
写真をたくさん載せたい人はぜひお試しください。