⋆⸜ このサイトは「SWELL」を使用しています ⸝⋆

ブログ(WordPress)に最適な画像サイズと圧縮ツールについて

うさこ

こんにちは!うさこです。

うさこ

ブログ運営をはじめて、画像サイズや圧縮について分からないことがたくさんで困ったことはありませんか?

WordPress(ワードプレス)などでブログを運営している方は、画像のサイズの変更・画像圧縮についての対策を一度は考えたことがあるのではないでしょうか?

  • 初心者の方も最低限やっておいた方が良い画像サイズ・圧縮について紹介していきます。

画像やデザイン関係については全くの無知だった為、webデザインなどの本で勉強しました。

この本は特に面白かったです。

楽天ブックス
¥2,486 (2021/10/11 13:27時点 | 楽天市場調べ)
スポンサーリンク
目次

ブログでちょうど良い画像

うさこ

画像をリサイズ・圧縮しないと
ページを開くときに重くなってしまいます..。

  • 画質が綺麗 = データサイズが大きい
  • 画質が荒い = データサイズが小さい

一番良いのは自分のブログの横幅に合わせるのがこと最適だよ。

自分のブログの横幅に合わせるのが一番最適と良くネットでも見かけますが、普段からサイトの横幅を意識していないし、見る端末によって異なりますよね。

初心者のわたしは思いました。

うさこ

だいたいの目安の画像サイズを知りたい…

結論を言うと、

  • 画像を使う用途(風景写真か、装飾画像など)によって使い分ける!
  • ブログ画像のサイズ容量については、100%の正解があるわけではない!
画像の目安
  • サイズ:横幅1000px以下
  • 容量 :100~200kb以下
  • 種類 :JPG
うさこ

自分はこのように使いわけているよ

画像サイズ
  • アイキャッチ画像 :1200px × 630px
  • 文字入り:600px × 350px
  • PNGでダウンロード→圧縮
うさこ

画像サイズは大きすぎるとページが重たくなるし、小さすぎるとピンボケしてかっこ悪るので気を付けなきゃね。

500px

600x

1000px

うさこ

スマホで見ると大きな差はあまりみられないね!(PCで見ると大きさの変化がわかりやすいよ)

画像容量(ファイルサイズ)

うさこ

画像容量(ファイルサイズ)について見ていこう!

画像はファイルサイズが大きいほど”高画質な写真”のように綺麗に表示できますが、ページの表示速度に悪影響が出ます。

画像容量の目安

100~200KB以下

1MB = 1000KB

  • スマホ:1MB~10MB
  • フリー画像:500KB~15KB

ブログで画像を使用するなら100~200KB以下がおすすめです!

うさこ

画像容量の下げすぎに気をつけようね。

JPG・PNGの違い

JPGとPNGの違いってなんだろう?

JPG

.jpg(.jpeg)」という拡張子の画像ファイル

画像の見た目、キレイさをあまり変えずにファイルサイズを小さくすることができる。
人や景色や食べ物などの自然物の写真に使われることが多い。

PNG

「.png」という拡張子の画像ファイル

輪郭のはっきりした画像やイラスト、文字が含まれている図やグラフなどによく使われることが多い。

  • JPGは最高画質(最低圧縮)でもPNGよりファイルサイズを小さくできます。

写真・画像サイズの変更

スマホで撮影した写真や、そもそも画像サイズが大きすぎる場合は画像サイズを変更する必要があります。

  • Windowsなら「ペイント
  • Macなら「プレビュー
うさこ

画像サイズ変更の流れをみていこう

STEP
画像サイズの確認

サイズが2.8MB、横5865×縦3915と大きめな画像サイズです。

STEP
ペイントで画像サイズを変更
  • ペイントを開く→サイズ変更
  • 数字を入力してOKをクリックする
    (今回は800×534)
  • ファイルを保存する
STEP
サイズ変更完了

ファイル情報からサイズを再確認する。
これで200KB以下におさまりましたね!

2.8MB ⇨ 171KB
5865×3915 ⇨800×534に変更されています。

スポンサーリンク

画像容量を圧縮して軽くする方法

うさこ

続いて圧縮方法について!

おすすめの画像圧縮サイトは
TinyPNG(タイニーピング)

  • ほとんど画質を落とさずに画像を圧縮できる
  • 無料で使用できる
  • 操作が簡単
  • 60~70%ほど圧縮できる
  • 一度に複数変更できる
STEP
画像の圧縮

すぐに画像の圧縮がスタート。
ダウンロードをクリックすると画像をダウンロードできます。

STEP
TinyPNGに画像をドロップ

圧縮したい画像を、TinyPNGの画面中央の枠のなかにドロップする。

STEP
圧縮完了

これで「171KB→120KB」まで圧縮できました。

うさこ

すごく簡単に画像が圧縮できるよ!

ブログ画像のサイズと圧縮のまとめ

うさこ

ブログで画像を使うときは適度なサイズを使用しよう!

  • 画質が綺麗 = データサイズが大きい
  • 画質が荒い = データサイズが小さい
画像の目安
  • サイズ:横幅1000px以下
  • 容量 :100~200kb以下
  • 種類 :JPG
画像サイズ変更
  • Windows ⇨ペイント
  • Mac    ⇨プレビュー
うさこ

サイズや画像の見やすさに気をつけてこれからも活用していこう!

せっかくブログ記事の中に画像を使用するのであれば、読んでいる方にも負担をかけず、見ずらいことのないようにしたいですよね。

また、ブログのテーマをCocoonからSWELLに変更してから操作がとても楽になりました。

有料テーマに少し抵抗はありましたが装飾の幅が広がるので変更するのもおすすめです。

今回の記事が少しでも参考になれば嬉しいです。

最後までご覧いただきありがとうございました!♡

うさこ

それでは、また!

スポンサーリンク

〇 楽天ROOM

よかったらシェアしてね!
目次
閉じる