こんにちは、カメライクブログの明です。
今回の記事はどちらかというとブログの運営に関連した内容です。
私は写真ブログを始めて数年になりますが、自分でアップする作例写真がいまいちパッとしないなぁとずっと思っていました。手元で見ているときとWebサイトにアップした時では画質がすごく落ちて見た目が結構変わっている気がするんです。
数年知らんぷりしていましたが、時間ができたのでしっかり調べてみると、意外に軽量に綺麗な画像をアップできることがわかったので、1週間かけて調べた内容をシェアできればと思います。LightRoomを使うと自動でいろいろできますが、今回はあくまで無料の範囲できれいな作品を表示するための工夫です。
そもそもあまり大きな画像をアップすると表示速度が遅くなってしまったり、サーバの容量を圧迫してしまい良いことがないので、「きれいだけどサイズは小さい画像」というのがWebサイトやブログを運営する人の常識になっています。
写真をご自分のメディアにアップする方へ部分的にでも参考になればうれしいです。
早速やっていきましょう！
今回の記事はこんなことを解決します。
- 画像の容量やサイズを小さくしたいけどどうすればいい？
- 写真ブログなど自分でのメディア運営に興味があるけどどうやって画像を軽量にするの？
手順の全体を紹介します
まず手順の全体を紹介します。ブログにアップする写真なのでウォーターマークを入れるところも含めています。
今回の最終ゴールは、
「写真を作品としてきれいに見せながらも、1枚当たり200KB以下までサイズを小さくすること」です。
以下の手順で写真を軽量化していきます。
- DPP4でRAW現像と書き出し
→ 画質10（最高品質）でJPEG書き出し
→ sRGB／長辺1920px／ICCプロファイル埋め込みにチェック - Canvaでウォーターマーク入れ
→ 無料版では画質8でしか書き出せない - TinyPNGで最終圧縮
→ Web向け最適化 - WordPressにアップして自動WebP化
→プラグイン：Converter for Media
こんな手順でやっていきます。
早速Canonユーザが無料で使えるDPP4からスタートしていますが、なんらかのアプリで最高品質で書き出された画像が手元にあれば2の手順からスタートしていただいて構いません。
各手順を追いながら、細かい話をしていきますね。
DPP4でRAW現像と書き出し
まず画像の書き出しからですが、いくつかポイントがあります。
書き出す際に出力解像度は72dpi、画質は最高画質10にします。
出力解像度のdpiは印刷用の解像度なのでWeb用の画像ではほぼ無関係です。サイズも少し小さくなるので350dpiや600dpiという設定を入れている場合は調整できます。
画質はここでは最高画質にします。次のCanvaでウォーターマークを入れるのですが、Canvaは無料版ではJPEGを最高画質でダウンロードすることができないため、ここでは最高画質にしています。
ウォーターマーク入れる必要がない方は、画像の容量次第ですが、ここで画質を落としてしまっても構いません。
画像サイズは長辺を1920pxに
かなり大きな画像にするんだなと思われたと思いますが、これにはちょっとした理由があります。
最近のブラウザやディスプレイはかなり高精細に描画することができるので、ブログ等表示部のサイズが横幅800pxくらいでも高解像度のディスプレイでは1px表示に「物理的には2px」使っていたりします。
なので、実際に使うpx幅の2倍くらいにしておくと画像が滑らかに、美しく描画されます。そしてJPEGで圧縮する際にもその影響が見えにくくなるという効果があります。
やってみたところ、1024pxで書き出しても1920pxで書き出しても最終的には劇的に画像容量が変わることはありませんでした。
作業用色空間はsRGBで、ICCプロファイルにはチェックを入れて
作業用色空間の設定はここにはありませんが、DPP4であれば上部ファイルメニューの「ツール」→「環境設定」→「カラーマネジメント」の中にデフォルト値の設定箇所があります。現在のディスプレイの基準になっているsRGBに設定しておきます。
ICCプロファイルですが、「この画像はどんな色空間で作られたか」を記録するカラーマネジメント情報なので、このチェックを外してしまうと特定のブラウザでは色が薄くなったりします。sRGBとセットで入れておきたいチェックです。
これでとりあえず1枚の写真が手に入りました。
トップのカレーの画像を書き出したら、1枚で約1.5MBです。まだまだ大きいですね。
ここからはこの画像にウォーターマークを入れ、画像を圧縮していきます。
Canvaでウォーターマーク入れ
会員登録すれば無料の範囲でいろんなことができるCanvaですが、最終的にJPEGのダウンロードが無料だと画質8でしかできません。これを味方につけるためにCanvaに取り込む画像は容量が大きめの画像にしています。
Canvaで何をするのかというと、今書きだした画像の上にもう一枚のウォーターマーク画像を配置して、1枚ものにしてダウンロードするというだけです。
まず作成ボタンから、デザインを作成の中にある「カスタムサイズ」を選択し、画像のサイズに当てはめます。今回は1920px*1280pxの画像です。右側の「新しいデザインを作成」を押すと、そのサイズのキャンバスが作成されます。
続いてメニューの「アップロード」から「ファイルをアップロード」を選択し、今回のカレーの画像とウォーターマークの画像をそれぞれアップロードします。
あとはカレーの画像をまずキャンバスにドラッグ＆ドロップし、キャンバスにぴったりサイズを合わせます。その後ウォーターマークを同じようにドラッグ＆ドロップし、サイズを整えて好きなところに配置します。
最後に右上の共有ボタンから「ダウンロード」を選択し、JPGでダウンロードします。右側に王冠のマークがついているのが有料版じゃないとできないところですね。
この時点でカレーの画像は220KBまで圧縮されました。あと一息です。
TinyPNGで最終圧縮
最後にTinyPNGというサイトで圧縮してWebに最適化します。
Canva出力後にさらに5〜15％軽量化できて、視覚的な劣化はほぼゼロです。
やり方もサイトの右上の「Drop your images here!」にドラッグ&ドロップして、しばらく待っていれば下に圧縮された画像が作られるのでそれを右下の「JPEG」と書かれたボタンを押してダウンロードするだけの簡単ステップで助かります。
この画像を見るとわかる通り、この時点で140KBまで圧縮されましたね。
200KB以下というのは無事に達成です。
ただ最後の4番目のステップで、WebPに変換することでもうちょっと圧縮できる可能性があります。
WordPressにアップして自動WebP化
最終的にWordPressのブログサイトにメディアをアップするときに、JPEGやPNGを自動でWebP形式に変換して表示に使ってくれる「Converter for Media」というプラグインがあります。
WordPressの管理画面から「プラグインを追加」で検索し、インストールし、有効化します。
設定画面を開きます。後から設定画面を開きたい場合はインストール済みプラグインメニューからConverter for Mediaの欄の「設定」を押します。
設定画面の下のほうにある「新しい画像の変換」を有効にしておくと写真をライブラリにアップした時に、オリジナルの画像は残したまま、WebP形式の画像を作成してくれます。そして表示に使ってくれます。
最初のタイミングで1回「画像の一括最適化」をしておくと、現在ブログにアップロードしている画像をすべてWebP形式に変えてくれます。
今表示されているこの画像はだいたい60KBくらい、これをクリックして拡大表示される画像で137KBくらいになりました。ノイズが少なくて、低コントラストの画像ではかなり圧縮されやすいので画像によってはかなり容量が小さくなり表示が高速化できるのでやっていて損はないです。
この画像は3の工程までで83KBでしたが、表示されるWebP画像は横幅1920pxでも62KBまで小さくなりました。
なによりこのやり方でやると、拡大表示したときの画像が今までに増してきれいに見えます。
拡大した画像でも1024pxあれば十分とずっと思っていましたが、そうではなかったんですね。勉強になりました。
まとめ
いかがだったでしょうか。
今回は無料でできるWordPressブログ用写真をきれいに軽量化するステップバイステップガイドをまとめてみました。
参考になれば幸いです。
今回使用したカメラとレンズ
今回撮影に使用したカメラは、EOS 6D Mark II
今回撮影に使用したレンズは、SIGMA 24-105mm F4 DG OS HSM ArtとCanon EF50mm F1.8 STMです。
といっても今回は大半が画像圧縮の話でしたね！
今回も見てくださってありがとうございました！
コメント