【メモ】ブログに載せる画像の軽量化

Retinaの影響もあって解像度が高くファイルサイズが膨らんでしまうのでサイズ縮小した上PNGの圧縮を施してる。

と、その前に。
スクショ撮影はウィンドウの影が写るようにしてる(特に理由はない)。

メニュー項目を撮るのは…

  • Shift+⌘+4のあとスペースキー叩く
  • Skitchのメニュースナップショット

動画でキャプチャするには…

  • QuickTime Playerの新規画面収録
  • Snapz Pro X

モザイクまたはボカシ加工には…

テキストの書き込みは一時期上記Monosnapを使ってたけどテキスト編集しにくいのでSkitchに戻した。

画像のデータ圧縮について。

スクショ撮った時点での画像ファイルはけっこうサイズがでかい。

  1. 必要なら最初にモザイクORぼかしをかけておく。
  2. 縦横半分サイズにする。もっと小さくてもいいとは思う。
  3. pngquantで冗長性を省く(たぶん)。
  4. まれにpngquantをかけた後、画像ソフトによってはグリッチがかかってしまう場合があるのでおまじないとしてImageOptimをくぐらせておく。

というのを、Automatorで組んでFinderで画像ファイルを選択したときに「サービス」として呼び出せるようにしてある。
だけどImageOptimはスルーされてしまうので最後にもう1回人力でImageOptimに突っ込んで終わりにしてる。

WordPressでは画像アップロード時にバリエーションとして縦横サイズ縮小ファイルを自動的に生成するようになってるので、フルサイズを閲覧者に開かせるのでない限り気にしなくてもいいのではという考え方もあるのだけど、上の手順でサイズ縮小したファイルから生成されるバリエーションファイルも、それをしなかった場合よりサイズが小さいので無駄ではなさそう。
より神経質にやるなら、アップロード先からもう一度ローカルに持ってきて再処理して上書きアップロードしたほうがいいのかもしれない。
レンサバなのでWordPressにプラグインを突っ込んで処理させるというのはやらない。

JPEG画像に関しては上記pngquantの処理を飛ばす。