【ブログ運営】7-5 リライト設計｜記事群を整理して強くする“統合と役割分担”の型（コード不要）
toshi
ToshiLab
【ブログ運営】9-3 表示速度の最低限（画像圧縮だけ）｜初心者はこれだけでOK（コード不要）
toshi
記事内に商品プロモーションを含む場合があります
表示速度って、いろいろ言われますが、
初心者のうちは「画像」を整えるのが一番効率がいいです。
・画像が重い → それだけで遅い
・画像を軽くする → それだけで速い
今日は、難しい設定はしません。
アップロード前に画像を軽くする“運用ルール”だけ作ります。
- 「画像は“サイズ＋形式＋圧縮”だけ」
-
画像でやることは3つだけです。
1）サイズを適正にする（大きすぎを避ける）
2）形式を選ぶ（写真＝JPG/WebP、透過＝PNG/WebP）
3）圧縮してからアップする（アップ前が安全）
これだけで、表示速度はかなり変わります。
Q
まず目安
画像の幅（px）を決める
| 使う場所 | おすすめ幅（目安） | ざっくり理由 |
|---|---|---|
| 記事内（通常） | 1200px前後 | だいたい十分 |
| アイキャッチ | 1200〜1600px | サムネでも崩れにくい |
| 画像が主役（大きく見せたい） | 1600px前後 | 必要な時だけ |
| ロゴ/アイコン | 必要最小限 | 小さくてOK |
（JPG/PNG/WebPの使い分け）
形式の選び方
| 形式 | 向いてるもの | メモ |
|---|---|---|
| JPG | 写真 （風景・人物・物撮り） | 軽くしやすい |
| PNG | 透過が必要な画像 （ロゴ/アイコン） | 写真だと重くなりがち |
| WebP | だいたい何でも （対応環境なら） | 軽くなりやすい |
初心者はこれだけ守る
圧縮の“運用ルール”
目標は「見た目を崩さず軽くする」です。
画質を追い込みすぎないのがコツ。
- アップ前にリサイズ（幅を決める）
- 圧縮してからアップ（1回でOK）
- 文字が入った画像は、潰れてないか確認
- 迷ったら“少し高画質寄り”に戻す（やりすぎない）
アイキャッチと記事内で
“ルールを分ける”
アイキャッチ
記事内
- 少しきれいめ優先（ただし大きすぎない）
- 幅：1200〜1600px
- 形式：写真＝JPG/WebP、イラスト＝PNG/WebP
- 軽さ優先でOK
- 幅：1200px前後
- 連続で画像が多い記事ほど、圧縮の恩恵が大きい
遅くなる原因
やりがちなミス
原寸アップ
PNG乱用
画像を貼りすぎ
→ スマホ写真（4000px等）をそのまま。
→ 使う幅にリサイズしてからアップ。
→ 写真をPNGで保存。
→ 写真はJPG/WebPへ。
→ 画像の枚数が多い記事は、より圧縮が重要。
→ “同じような画像”は減らすのも手。
9-3版：これだけでOK
公開前チェック
- 画像幅は目安どおり（記事内1200px前後）
- 写真はJPG/WebP、透過はPNG/WebP
- アップ前に圧縮した
- 文字入り画像は潰れてない
- 同じような画像を貼りすぎてない
できた判定
今日のゴール
ここまでできたらOKです。
- 画像の幅（目安）が決まった
- 形式（JPG/PNG/WebP）の使い分けができる
- アップ前に圧縮する運用になった
- やりすぎない品質基準が持てた
次に読む
ブログ運営9-4.へ
次は「バックアップ/復元・更新事故対策」です。
“守り”を固めると、更新が安心して続けられます。
レンタルサーバー
３つのお勧めレンタルサーバー
当サイトテーマで利用中
WordPress テーマ JIN:R
WordPress Theme 「JIN:R」
JIN:Rは直感的にwebサイトを構築できるデザインテーマです。WordPressブロックエディターの『特有の取っ付きにくさ』を解消して「最高に使いやすいデザインツール」へと昇華させました。
ABOUT ME
C型肝炎や感染症の闘病を経て現在通院中
フリーランスとして今日を生きる、それがすべて。
静かな光の中で、歩みを止めずに生きていく。
実験大好きなので色々とやっていきます。
フリーランスとして今日を生きる、それがすべて。
静かな光の中で、歩みを止めずに生きていく。
実験大好きなので色々とやっていきます。
