うさここんにちは！うさこです。
うさこブログ運営をはじめて、画像サイズや圧縮について分からないことがたくさんで困ったことはありませんか？
WordPress(ワードプレス)などでブログを運営している方は、画像のサイズの変更・画像圧縮についての対策を一度は考えたことがあるのではないでしょうか？
- 初心者の方も最低限やっておいた方が良い画像サイズ・圧縮について紹介していきます。
画像やデザイン関係については全くの無知だった為、webデザインなどの本で勉強しました。
この本は特に面白かったです。
ポチップ
ブログでちょうど良い画像
うさこ画像をリサイズ・圧縮しないと
ページを開くときに重くなってしまいます..。
- 画質が綺麗 = データサイズが大きい
- 画質が荒い = データサイズが小さい
一番良いのは自分のブログの横幅に合わせるのがこと最適だよ。
自分のブログの横幅に合わせるのが一番最適と良くネットでも見かけますが、普段からサイトの横幅を意識していないし、見る端末によって異なりますよね。
初心者のわたしは思いました。
うさこだいたいの目安の画像サイズを知りたい…
結論を言うと、
- 画像を使う用途（風景写真か、装飾画像など）によって使い分ける！
- ブログ画像のサイズ・容量については、100%の正解があるわけではない！
- サイズ：横幅1000px以下
- 容量 ：100～200kb以下
- 種類 ：JPG
うさこ自分はこのように使いわけているよ！
- アイキャッチ画像 ：1200px × 630px
- 文字入り：600px × 350px
- PNGでダウンロード→圧縮
- 参考： Tsuzuki Blog
うさこ画像サイズは大きすぎるとページが重たくなるし、小さすぎるとピンボケしてかっこ悪るので気を付けなきゃね。
500px
600x
1000px
うさこスマホで見ると大きな差はあまりみられないね！（PCで見ると大きさの変化がわかりやすいよ）
画像容量（ファイルサイズ）
うさこ画像容量（ファイルサイズ）について見ていこう！
画像はファイルサイズが大きいほど”高画質な写真”のように綺麗に表示できますが、ページの表示速度に悪影響が出ます。
100～200KB以下
1MB = 1000KB
- スマホ：1MB～10MB
- フリー画像：500KB～15KB
ブログで画像を使用するなら100～200KB以下がおすすめです！
うさこ画像容量の下げすぎにも気をつけようね。
JPG・PNGの違い
JPGとPNGの違いってなんだろう？
「.jpg（.jpeg）」という拡張子の画像ファイル
画像の見た目、キレイさをあまり変えずにファイルサイズを小さくすることができる。
人や景色や食べ物などの自然物の写真に使われることが多い。
「.png」という拡張子の画像ファイル
輪郭のはっきりした画像やイラスト、文字が含まれている図やグラフなどによく使われることが多い。
- JPGは最高画質（最低圧縮）でもPNGよりファイルサイズを小さくできます。
写真・画像サイズの変更
スマホで撮影した写真や、そもそも画像サイズが大きすぎる場合は画像サイズを変更する必要があります。
- Windowsなら「ペイント」
- Macなら「プレビュー」
うさこ画像サイズ変更の流れをみていこう！
サイズが2.8MB、横5865×縦3915と大きめな画像サイズです。
- ペイントを開く→サイズ変更
- 数字を入力してOKをクリックする
（今回は800×534） - ファイルを保存する
ファイル情報からサイズを再確認する。
これで200KB以下におさまりましたね！
2.8MB ⇨ 171KB
5865×3915 ⇨800×534に変更されています。
画像容量を圧縮して軽くする方法
うさこ続いて圧縮方法について！
おすすめの画像圧縮サイトは
「TinyPNG（タイニーピング）」
- ほとんど画質を落とさずに画像を圧縮できる
- 無料で使用できる
- 操作が簡単
- 60～70%ほど圧縮できる
- 一度に複数変更できる
すぐに画像の圧縮がスタート。
ダウンロードをクリックすると画像をダウンロードできます。
圧縮したい画像を、TinyPNGの画面中央の枠のなかにドロップする。
これで「171KB→120KB」まで圧縮できました。
うさこすごく簡単に画像が圧縮できるよ！
ブログ画像のサイズと圧縮のまとめ
うさこブログで画像を使うときは適度なサイズを使用しよう！
- 画質が綺麗 = データサイズが大きい
- 画質が荒い = データサイズが小さい
- サイズ：横幅1000px以下
- 容量 ：100～200kb以下
- 種類 ：JPG
- Windows ⇨ペイント
- Mac ⇨プレビュー
うさこサイズや画像の見やすさに気をつけてこれからも活用していこう！
せっかくブログ記事の中に画像を使用するのであれば、読んでいる方にも負担をかけず、見ずらいことのないようにしたいですよね。
また、ブログのテーマをCocoonからSWELLに変更してから操作がとても楽になりました。
有料テーマに少し抵抗はありましたが装飾の幅が広がるので変更するのもおすすめです。
今回の記事が少しでも参考になれば嬉しいです。
最後までご覧いただきありがとうございました！♡
うさこそれでは、また！
