五藤隆介(goryugo) 
画像をRetina対応しつつ容量を抑える方法を覚えて、どうにかこの方法を自分のブログでもラクに使えるようにする方法はないものかと色々と試行錯誤していました。
で、とりあえずなんとかまぁそれなりに楽チンで、それなりにキレイな画像を、それなりに小さい容量でアップロードする仕組みを作れたので、ちょいとその方法をご紹介しようと思います。
解像度2倍の低画質画像をMarsEditでアップロード
手順は大きく2つ。
- 解像度2倍で低画質の画像を作成
- 2倍解像度画像を「普通」の横幅設定のHTMLタグでMarsEditからアップロード
ポイントは、たとえ本来のピクセル数以上に画像を引き延ばすことになっても、それでも引き伸ばした画像の方がキレイに見えるということです。
具体的な手順としては
- PhotoShopで横幅1000px 画質30でWeb用に保存、というアクションから書き出し
- デジカメ写真の場合は、Lightroomで1000px画質30の書き出しテンプレートで書き出す
- MarsEditの画像タグ挿入テンプレートで、無理矢理横幅500pxのタグを作る
という方法を使います。
ちなみに、このブログの画像は横幅500pxでやってるんで、その辺の数字は適宜読み替えていただければと思います。
まずはPhotoshopのアクション作成
最初にやることはPhotoShopのアクション作成。
フォトショップのアクション作成画面から「記録開始」ボタンを押してアクションを記録
やることは2つ。イメージ ＞ 画像解像度 から横幅を1000pxに変更した後に ファイル ＞ Web用に保存 で画質を「30」にして書き出す。
これを記録しておけば、以降はPhotoShopで画像を開いて、アクションの再生ボタンを押してやれば、自動でサクッと目的の画像を作り出すことが可能になります。
アクション作成に関しての詳しい解説はコチラ
→ アクションの作成および再生方法 （Photoshop CC）
MarsEditのRetina用イメージタグを自作
これで画像の「素材」の方はできるので、残りはMarsEditoを使って2倍解像度の画像を貼り付け、imgタグの方には「半分」の幅を指定してやります。
メニューバーの Blog ＞Edit Setting ＞ Editing ＞ Media Deraults を、Defaults To Fit Constraint にして、Witdh Heightを1000pxにする。
で、その後はimgタグの修正。実際にやることは、イメージ挿入時に選択できる「Style」の所を、力業で自分好みのピクセル数にしてやること
たとえばこんな感じ
↓コピペ用
img src="#fileurl#" alt="#alttext#" title="#displayname#" border="0" width="500px"
これ、要するに無理矢理1000px画像の横幅を無理矢理500pxに指定してるだけで、正確なことを言えば「横長」にしか対応出来ないし、本来は「Height」もきちんと指定するべきではあるんだけど、まぁその辺はブログという媒体においてどこまで手間と正確性を求めるのか、によるかと思います。
結構力づくな方法ではあるんですが、まぁなんとかこれで最低限の目的は達成出来たのかな、と思ってます。
参考
画像をRetina対応しつつ容量を抑える方法 | ごりゅご.com
