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

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

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

LiDo
LiDo

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

本記事の内容

  • 画像の横幅のサイズ
  • 圧縮方法について

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

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

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

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

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

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

画像の重さは100KB以下
サイズは横幅1200px

掘り下げて解説します。

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

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

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

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


Google Discover

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

LiDo
LiDo

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

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

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

まめ丸
まめ丸

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

画像の圧縮は注意が必要

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

LiDo
LiDo

画像によって前後するよ

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

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

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

LiDo
LiDo

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

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

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

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

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

メリット

  • JPG、PNG、PDF、SVGの圧縮ができる
  • 複数枚一気に圧縮できる

デメリット

  • インターネット環境が必要

圧縮前と圧縮後を比較

圧縮前と圧縮後を比較

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

圧縮方法を解説します。

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

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

複数枚を自動圧縮
LiDo
LiDo

最大20枚圧縮できるよ

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

個別でさらに微調整しながら圧縮
LiDo
LiDo

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

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

LiDo
LiDo

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

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

劣化を見比べる

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

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

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

画像の重さは100KB以下
サイズは横幅1200px

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

コメント

タイトルとURLをコピーしました