The Master of Swift App Coding

Swiftプログラミングでのアプリ作成方法やWordPressのテクニック解説

【Image Optim】画像を一括変換、ブログに最適なサイズ画質へ【Mac】

投稿日:2018年8月6日 更新日:

サイズだけでなく、画質も一括で落とす方法は?
サイトを軽くして、スマホからでも綺麗に見えるような、最適な画質にしたい
たくさんフリーソフトあるけど、一番はどれ?
こんな疑問に答えていきます。
別ブログで月に2万PVを超える僕が解説していきます。

はじめに

ブログを書いていると、画像の処理、めんどくさいですよね。

特に、画像のファイルサイズが大きいままだと、読み込み時間にも影響します。
そうすると、検索結果の順位(SEO)に深く関係するので、重要な問題ですね。

僕は、以前は、ずっとPhotoshopで1枚1枚サイズ変更、圧縮していました。
アクション機能を使いこなしても、ファイル名の付け直しとか、どうしても時短ができませんでした。

そんな中、たどり着いた結論がこれ
「プレビュー」でサイズを一括変換して、「Image Optim」で画質を一括で落とす。

詳しく手順を説明していきます。
僕が考えた、SEOに最適な画質の設定値も紹介していきますね。

 

作業環境

MacOSX High Sierra 10.13.4

 

1.Macのプレビューで一括変換

Macのプレビュー機能でサイズを一括変換していきます。
メニューから「サイズを調整」ツールを使います。

(1)画像をCtr+Aで全選択

(2)「サイズを調整」を選び、「横幅」にあなたのブログの横幅を入力

自分のブログの横幅の設定値知っていますか?
わからない人は調べるのを強くおすすめします。
「AFFINGER 横幅」「STORK 横幅」とかで検索すれば、---pxって出てくると思います。

ちなみに僕はAFFINGER5を694pxの横幅で使っています。
このブログもそうです。

解像度

解像度は一般的に72です。

高さ、縦横比

縦横比を維持するので、高さはそのままノータッチで大丈夫です。

 

ショートカットを登録しよう

時短を極めたい人は、プレビューのサイズ調整の作業をショートカット登録しておくと便利です。 

Macのシステム環境設定>キーボード>ショートカット
と進み、画像のように、お好きなショートカットキーに「サイズを調整…」を登録します。

「サイズを調整…」と「…」まで正確に手打ちする必要があります。

Ctr+Rは大元は、「時計周りに回転」に割り当てられていたのですが、それでも僕は「R」キーを選びました。
(左手だけで押せるし)
「時計周りに回転」は「Ctr+Alt+shift+R」に変更しておきました。
(だって反時計回りボタン3回押せば、時計回り1回押すのと一緒だし、このショートカットは俺は使わないと判断)

 

2.Image Optimを無料でインストール

https://imageoptim.com/api

 

3.画質などの設定をする(JPEG, PNG, GIF)

(1)品質の設定

品質の設定は、完全に好みです。
あとは、あなたの運営するサイトが、主に「スマホで見られているのか、PCで見られているのか?」にもよると思います。
(Google Analyticsで見れますね)

僕のメインサイトの1つは、スマホから閲覧しているユーザーがほとんどなので、画質は下げることにしました。

(2)処理スピードの設定

処理スピードは一番右にしました。

理由は、
・処理時間がかかってもいい
・なるべく綺麗にしてほしいからです。

ドロップしたら、放置して他の作業をしていればいいので、時間かかっても別にいいですよね。
ここは絶対に「一番右」がオススメです。

(3)その他設定

いじってません、そのままです。
メタデータとかはいらないですよね。
大抵どの圧縮ソフトでもやっている定番の処理です。

 

4.一括でドラック&ドロップすれば完了

ここにドロップ

待ち時間リスト

重いと5分とか、かかります。

(でも他の作業してれば、気にならないです。)

元のファイルは残りません。

同じファイルを変換するので注意です。

 

5.画質も悪くない

フォトショップで画質を落としたファイルと比べて見ました。

うーん…違いがわからない

というかそもそも、ここまで画質落としたら、どっちもどっち
それでも全人類が、スマホから閲覧する人が多い時代なので、画質よりスピードを重視した方がいい、と僕は思います。
(※webサイトの種類にもよります)

 

6.プレビュー、Image Optimのやり方の欠点

プレビュー、Image Optimのやり方の欠点をあげるとすれば、縦幅にこだわれないということですね。

例えば、どうしてもアイキャッチ画像は694x463  (1.5:1.0)の比率にこだわりたい、という場合は難しいですね。
また、元の写真の構図がダサくて、中心をずらしてトリミングしたい、とかいう場合は難しいですね。

そういう場合は、あらかじめ、好きな比率の大きさでトリミングしてから、サイズを変えるといいのかな、って思います。
もしくは、フォトショで、綺麗に好きな部分をトリミングしたほうがいいいのかな、って思います。

 

7.一括トリミングするならXnConvert

一括トリミングするなら、XnConvertというMac向けのアプリが便利です。

こちらの別記事に書きました。

XnConvertで画像を一括トリミングする方法【設定値も紹介】【Mac】

 

まとめ

今回は、【Image Optim】画像を一括変換、ブログに最適なサイズ画質へ【Mac】というテーマで書いてきました。

プレビュー機能でサイズを変換して、
フリーソフトのImage Optimを導入して、設定値をいじって、放り込んで、待つだけですね。

作業が一気に効率化した気がします。
ぜひ使ってみてください。

Ad-336px-stinger8

Ad-336px-stinger8

-WordPress

Copyright© The Master of Swift App Coding , 2018 All Rights Reserved.