- 高画質＝重いは過去の話。画質と速度を両立する魔法とは？
- 解決策は「2倍書き出し」と「プラグイン」の合わせ技
- 見えない「ファイル名」も整える。それが未来の自分への優しさ
【はじめに】きれいな画像は「重い」というジレンマ
「せっかく作った画像、できるだけ高画質で見せたい！」 そう思って、張り切って高画質の画像をアップロードしたら、サイトの表示スピードが遅くなってしまった……。そんな経験はありませんか？
管理人さん写真がキレイに表示されるサイトも多いよね～
Web の世界では、「高画質＝重い（表示速度が遅い）＝読者が逃げる（SEO 評価が下がる）」という厳しい現実があります。 でも、諦めないでください。 「画質はキレイなのに、データは軽い」 そんな魔法のようなテクニックが存在しました。
今回は、私がジェミニさんと検証を重ねてたどり着いた、画質と速度を両立する「2倍書き出しの法則」と、未来の自分を助ける「ファイル名のルール」を共有します。
当サイトの情報は個人の体験談であり、投資の助言や医学的な治療効果を保証するものではありません
魔法のレシピ「サイズ 2倍の法則」
Canva などのツールで画像を作り、いざ書き出す（ダウンロードする）時。 私は以下の設定を行っています。
- サイズ：2倍（2400 × 1260px）リスト
- 形式：JPG（ジェイペグ）
- 画質：80％
初心者さん「えっ？ さっき『1200px で作れ』って言ったのに、書き出す時は 2倍にするの？ 重くなるじゃない！」
そう思われるのも無理はありません。でも、これには現代のスマホ事情が深く関わっているんです。
なぜ「2倍」にするのか？（Retina 対策）
今のスマホ（iPhone など）の画面は、本当に目が良い（高精細）です。 元のサイズ（1200px）のまま表示すると、高精細な画面では「無理やり引き伸ばされた」状態になり、文字の輪郭がボヤッとしてしまいます。
そこで、あえて「2倍の大きさ（2400px）」で書き出します。 これをブログ上で「ギュッ」と凝縮して表示させることで、驚くほど「カチッ」とシャープな文字に見えるようになるんです。
なぜ「JPG」で「画質80」なのか？
ここで「PNG」を選んでしまうと、容量が 3MB 〜 10MB と爆発的に重くなり、Web サイトでは使い物になりません。 しかし、「JPG」で「画質80」に設定すれば、容量は 300KB 〜 800KB 程度（許容範囲）に収まります。
- 2倍の JPG ＝ ノイズは凝縮されて見えなくなる ＆ 容量は軽い
- 1倍の PNG ＝ 輪郭がボヤける ＆ 容量はそこそこ
この「密度のマジック」を使うことで、プロのようなクリアな画質を手に入れることができます。
強力な助っ人「EWWW Image Optimizer」
「JPG で作ったけど、もっと軽くしたい……」 そんな私の願いを叶えてくれるのが、WordPress プラグイン「EWWW Image Optimizer」です。
このプラグインの素晴らしいところは、私たちが寝ている間（というのは大袈裟ですが、アップロードした瞬間）に、以下の仕事を勝手にやってくれることです。
- 自動圧縮： 画像の無駄なデータを削ぎ落とす。
- WebP 変換： JPG よりもさらに軽くて高画質な、Google 推奨の次世代フォーマット「WebP（ウェッピー）」に自動で変換してくれる。
実は、高機能な Canva にも弱点があります。 それは、「WebP 形式での直接書き出しができない（標準機能にない）」ということです。
初心者さん「えっ、じゃあ WebP にするには別の変換サイトを使わないといけないの？」
と思われるかもしれませんが、安心してください。 そこで登場するのが、この「EWWW Image Optimizer」というプラグインです。
このプラグインを入れておけば、Canva からいつも通り「JPG」で書き出してアップロードするだけで、WordPress 側で勝手に「WebP」に変換してくれます。
まさに、Canva の足りない部分を補ってくれる「最強の相棒」なんです。難しいことは全部、この助っ人にお任せしてしまいましょう。
【容量の合格ライン】 最終的に、メディアライブラリに入った時点で以下の容量なら合格です！
- アイキャッチ：200KB 以下（理想は 100 〜 150KB）
- アイコン等：80KB 以下（理想は 30 〜 50KB）
未来の自分を救う「ファイル名のルール」
最後に、地味ですが「一番やっておいて良かった！」と心から思う設定をお話しします。 それは、画像の「ファイル名（名前）」です。
【NG 行為】
日本語のままのファイル名
名称未設定.png × スクリーンショット 2026-01-08.jpg × 画像.jpg
これらをそのままアップロードしていませんか？ 日本語のファイル名は、予期せぬエラー（文字化け）の原因になるだけでなく、後で検索する時にとても苦労します。
【正しい管理法】
必ず「半角英数字」と「ハイフン（-）」で名前をつけてからアップロードしましょう。
おすすめの命名ルール
私は、パッと見て中身がわかる名前をつけています。
- 吹き出しアイコン
- 笑顔：
avatar-smile.jpg - 困り顔：
avatar-trouble.jpg
- 笑顔：
- 記事のアイキャッチ
swell-setting-eyecatch.jpg2026-review-camera.jpg
【メリット】数年後の自分が泣いて喜ぶ
こうしておくと、WordPress のメディアライブラリで「smile」と検索するだけで、笑顔のアイコンがズラッと出てきます。 「あの笑顔のアイコン、どこだっけ……？」と数千枚の画像から探し回る地獄を味わわなくて済むルールです。
また、Google 画像検索でも、このファイル名は「何の写真か」を判断する重要なヒント（SEO 評価）になります。見えない部分ですが、ここを整えることが「Web サイトへの愛」だと私は感じました。
【まとめ】見えない部分こそこだわる
- 書き出しは「サイズ 2倍（2400px）の JPG」、画質は「80」。
- 「EWWW Image Optimizer」にお任せして WebP 化する。
- ファイル名は必ず「半角英数字」に直してからアップロードする。
これで、参考にされた皆さんのサイトにも「軽くて」「美しくて」「管理しやすい」最高の画像が揃いました。 でも、画像が増えてくると、今度は「メディアライブラリがぐちゃぐちゃ」という問題が発生します。
そこで次回の【完結編】となる第 3部では、増え続ける画像をスッキリ整理する「フォルダ分け」の技術と、サーバーの容量を守る大切な設定についてお話ししますね。