ブログ画像のサイズはこれで悩まない！【綺麗な圧縮方法も解説】

まめ丸

ブログに使う画像のサイズがわからない

LiDo

当プログのサイズの基準を解説するよ！

こんにちは、リド(@Lido_blog)です。
前職はデザイナーでワードプレスで使用する画像編集をしていました。
現在はブログを運営してます。

本記事は「ブログで使用する画像のサイズ」について解説。
ブログで使用する画像関係の疑問が解消します。

ブログ画像のサイズはこれで迷わない

ブログの画像について困っている方は多いのではないでしょうか？
画像の保存形式について【ブログで使う画像の拡張子って？webで使う保存形式を理解しよう】で解説していますのでご覧ください。

様々なサイズを試して現在は以下の基準で運営しています。

掘り下げて解説します。

ブログ画像の横幅のサイズ

当ブログは、
横幅はGoogleが明記した1200px。
縦幅は650pxで統一しています。

横幅についてGoogle公式で明記しています。

Discover で大きな画像を表示できるようにする。
高画質でサイズの大きい画像（幅が 1,200 ピクセル以上）を使用します。

Google Discover

Google Discoverについての内容ですが基準にして良いでしょう。

LiDo

ここから下は考察を話すよ

横幅1200pxについてあくまでも私の見解ですが、

デスクトップからスマホまで全ての機器で綺麗に見えるためではないでしょうか？webデザインのファーストビューを制作する際に1000px前後を目安に制作します。それはデスクトップはメーカーによって横幅が異なり、主流の平均サイズで制作するからです。

まめ丸

コーディングするときにスマホ版とpc版で画像を切り替える指示をするよ。ワードプレスはコーディングをしないから1200px以上の画像が良いのかもね。

画像の圧縮は注意が必要

当サイトでは容量は100KB以下が目安。
あまり圧縮しすぎると画像が劣化するので注意してください。

LiDo

画像によって前後するよ

例えば、Photoshopでゴリゴリに加工をすると100KB以上になる場合もあります。
その場合は200KB以下が良いでしょう。

少しの加工と文字を置いた編集画像は100KB以下に収まります。

画像の加工がない場合は80KB以下になるでしょう。

LiDo

劣化するほど圧縮はだめだよ

軽ければ軽い方が良いですが、劣化しないように注意が必要です。

圧縮ツールを正しく使おう

私が使用しているのは、完全無料で使えるオンラインサービス「compressjpeg」です。

圧縮前と圧縮後を比較

ここまで違いがあります。
ブログの軽量化をするためには圧縮は必須。

圧縮方法を解説します。

綺麗な圧縮方法を身につける

アップロードをクリックすると画像を選択できます。
複数のファイルを一気に圧縮しましょう。
自動で劣化が気にならない程度に圧縮してくれます。

LiDo

最大20枚圧縮できるよ

自動圧縮でも良いのですが、それでも容量が大きい場合があります。
その時は、個別でさらに微調整しながら圧縮しましょう。

LiDo

画像を選択すると個別にできるよ

ダウンロードは一括でzipファイルでできます。
圧縮したファイル名は最後に「-min」がつくので注意が必要。

LiDo

アップする前に最後の-minは消そうね

圧縮するとどのくらい劣化するのか見比べます。

このように画像が鮮明ではなくなるので、注意が必要です。

まとめ：画像のサイズの目安

これでOKです！
では、今日はこの辺で失礼します。