

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

当プログのサイズの基準を解説するよ!
本記事の内容
- 画像の横幅のサイズ
- 圧縮方法について
こんにちは、リド(@Lido_blog)です。
前職はデザイナーでワードプレスで使用する画像編集をしていました。
現在はブログを運営してます。
本記事は「ブログで使用する画像のサイズ」について解説。
ブログで使用する画像関係の疑問が解消します。
ブログ画像のサイズはこれで迷わない

ブログの画像について困っている方は多いのではないでしょうか?
画像の保存形式について【ブログで使う画像の拡張子って?webで使う保存形式を理解しよう】で解説していますのでご覧ください。
様々なサイズを試して現在は以下の基準で運営しています。
画像の重さは100KB以下
サイズは横幅1200px
掘り下げて解説します。
ブログ画像の横幅のサイズ
当ブログは、
横幅はGoogleが明記した1200px。
縦幅は650pxで統一しています。
横幅についてGoogle公式で明記しています。
Discover で大きな画像を表示できるようにする。
高画質でサイズの大きい画像(幅が 1,200 ピクセル以上)を使用します。
Google Discover
Google Discoverについての内容ですが基準にして良いでしょう。

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

コーディングするときにスマホ版とpc版で画像を切り替える指示をするよ。ワードプレスはコーディングをしないから1200px以上の画像が良いのかもね。
画像の圧縮は注意が必要
当サイトでは容量は100KB以下が目安。
あまり圧縮しすぎると画像が劣化するので注意してください。

画像によって前後するよ
例えば、Photoshopでゴリゴリに加工をすると100KB以上になる場合もあります。
その場合は200KB以下が良いでしょう。
少しの加工と文字を置いた編集画像は100KB以下に収まります。
画像の加工がない場合は80KB以下になるでしょう。

劣化するほど圧縮はだめだよ
軽ければ軽い方が良いですが、劣化しないように注意が必要です。
圧縮ツールを正しく使おう

私が使用しているのは、完全無料で使えるオンラインサービス「compressjpeg」です。
メリット
- JPG、PNG、PDF、SVGの圧縮ができる
- 複数枚一気に圧縮できる
デメリット
- インターネット環境が必要
圧縮前と圧縮後を比較

ここまで違いがあります。
ブログの軽量化をするためには圧縮は必須。
圧縮方法を解説します。
綺麗な圧縮方法を身につける
アップロードをクリックすると画像を選択できます。
複数のファイルを一気に圧縮しましょう。
自動で劣化が気にならない程度に圧縮してくれます。


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


画像を選択すると個別にできるよ
ダウンロードは一括でzipファイルでできます。
圧縮したファイル名は最後に「-min」がつくので注意が必要。

アップする前に最後の-minは消そうね
圧縮するとどのくらい劣化するのか見比べます。

このように画像が鮮明ではなくなるので、注意が必要です。
まとめ:画像のサイズの目安

画像の重さは100KB以下
サイズは横幅1200px
これでOKです!
では、今日はこの辺で失礼します。
コメント