tomo 
ブログ投稿時に必須となる画像リサイズ、画像圧縮、文字入れ編集の方法を調べていたところ、最適な方法を見つけたので紹介したいと思います。
しばらくはこの方法で画像処理をしていこうかと思います。
画像加工の手順
早速、具体的な画像加工手順について紹介します。
ちなみに多くのサイトを調べたのですが、こちらのサイトが非常に分かりやすかったため、参考にさせていただきました。
手順まとめ
Adobe Lightroom（月額980 円（税別））を持っている場合
Adobe Lightroomを持っていない場合
- 画像のリサイズ → BULK Resize Photos
- 画像の圧縮 → TinyPNG または Squoosh
- 画像に文字を入れる → Canva
リサイズ時のおすすめ画像サイズ
ブログ内で通常使用する場合 ： 横幅850px
OGP画像として使用する場合（縦×横） ： 630px×1200px（最低 315px×600px）
わざわざOGP画像を別で準備するのが面倒くさい、という場合は全て横幅850pxで統一してしまって問題ないでしょう。（OGP側で自動的にリサイズされるので。）
おすすめデータ形式
写真であればJPEG、イラストであればPNG、と覚えておきましょう。
理由は、JPEGは最も軽量、かつフルカラーでの表現ができるため写真との相性は良いのですが、イラストの場合は圧縮のたびに画質が劣化する可能性があるためです。
ですが、Squooshであれば圧縮前後の画質を比較しながら圧縮できるので、見た目上問題なければあまり気にしなくても良いでしょう。
画像処理後のファイルサイズ
40～70KB程度を目安にしましょう。
横幅が850px程度であれば、ファイルサイズ40～70KBである程度の画質を保つことができます。
ただし、ここも素材画像によっても異なってくるため、Squooshで圧縮前後の画質を比較しながら納得いく画質とサイズにしましょう。
プラグインと注意点
WordPressの場合、プラグインを使って画像圧縮をする方も多いと思いますが、下記のようなデメリットもあるので注意しましょう。
- 劇的な軽量化は期待できない。
- 中身を理解した上で、ちゃんとした設定が必要。
- プラグインを入れたことによりサイトが重くなったり、セキュリティ懸念が増える。
これらをよく理解した上で導入しましょう。
一応、よく使われているプラグインを紹介しておきます。
- EWWW Image Optimizer
- Compress JPEG & PNG images
- Imagify
- Smush
- ShortPixel
【おまけ】「次世代フォーマットでの画像」について
GoogleのWebパフォーマンス改善ツール「PageSpeed Insights」を使用すると改善項目として「次世代フォーマットでの画像の配信」と出てくるのでこちらについても調べてみました。
結論から言うと、これらのデータ形式は対応しているブラウザが少ないため、実際に導入するのは難しいです。
一応、それぞれのデータ形式を紹介します。
WebP
Googleが開発しているデータ形式。
ファイル拡張子は「.webp」。
IE、Safariが未対応。
JPEG 2000
JPEGの進化版のような位置づけで2000年ごろに公開されたデータ形式。
JPEGよりも高性能で、表現力も高い。
ファイル拡張子は「.jp2」「.j2c」「.j2k」「.jpf」「.jpx」「.jpm」「.mj2」「.jph」。
Safariのみが対応。
JPEG XR
JPEGに替わる規格として Mircorosftが開発したデータ形式。
JPEGと比べてノイズが少なくキレイな画像表現が特徴で、圧縮率が高い。
ファイル拡張子は「.hdp」「.wdp」「.jxr」。
IE、Edgeのみが対応。