WordPressお知らせ更新の基本〈3〉写真をそのまま載せてない？適切な画像サイズと無料の最適化ツール

アルファスから突然、「お知らせ更新は、自分たちで更新できるように作っておいたんで、がんばってください！」と言われた時に、『基本中の基本』『最低限、これだけできていたら上出来！』という初級レベル、入門編としての更新方法をご紹介する第3回目です。

では、まいりましょう！
今回は、写真や画像に関するお話です。
「お知らせ」投稿に写真や画像があると、不思議と「丁寧な投稿」に見えるのはなぜでしょう・・・。

写真を準備して、いざ「お知らせ」投稿に使用として・・・スマホやデジカメで撮った写真をそのままアップロードしていませんか？

「綺麗な写真のほうが伝わるはず」と撮影したそのままの高画質データを載せてしまうと、ページの読み込み速度がガクッと落ち、表示に時間がかかったりしてちゃんと読んでもらえない、ということにつながってしまいます。

連載第3回となる今回は、WordPressにアップする画像の「適切な横幅（px）」と「最適化の3大ポイント」、そして誰でもすぐブラウザ上で使える「無料のおすすめWebツール」をご紹介します。

WordPress画像の「適切な横幅」は何px？

結論から言うと、お知らせ記事の本文中に載せる画像は「横幅 1000px 〜 1200px」を目安にリサイズするのが最も扱いやすくおすすめです。

なぜ1000px〜1200pxなのか？

現在の一般的なWordPressテーマでは、記事本文エリアの最大幅はおよそ「700px〜900px前後」で作られています。

そのため、横幅が1000px〜1200pxあれば、スマートフォンなどの高精細ディスプレイ（Retinaディスプレイ）で見てもボケることなくクッキリ綺麗に表示されます。

用途ごとの目安は以下のとおりです。

用途	推奨横幅	縦横比の目安	役割・ポイント
記事本文内の写真	1000px 〜 1200px	自由（4:3 や 16:9）	本文エリアの幅に対して十分な解像度を確保
アイキャッチ画像	1200px	16:9（1200 × 675px）	SNSでシェアされた際（OGP）に綺麗に枠へ収まる
補足・アイコン・小写真	400px 〜 600px	自由	小さく並べて見せたい写真向け

数千ピクセルある巨大な撮影データをそのまま載せるのは、表示スピードを落とす最大の原因になります。まずは「横幅1000〜1200px」を基準に縮小しましょう。

noteをお使いで、同じ画像を使いたいという場合は、W1280px×670pxにしておくと便利かもしれません。

　

画像最適化で押さえておくべき「3つのポイント」

サイズ（横幅）を縮小するだけでなく、以下の3点を意識するだけでサイトの表示速度は劇的に改善します。

① 容量は「1枚あたり 150KB〜300KB以下」を目指す

スマホで撮影した写真は、1枚で5MB〜10MB（5,000KB〜10,000KB）以上あることも珍しくありません。

これをそのまま数枚載せると、ページ全体が非常に重くなります。リサイズと合わせて圧縮を行い、1枚あたり「150KB〜300KB以下」を目安に抑えましょう。

② 画像形式は「WebP（ウェッピー）」を第一候補に

現在Web用画像として主流になっているのが、Googleが開発した「WebP（.webp）」形式です。従来のJPEGやPNGと比べて、画質を保ったまま劇的にファイルサイズを軽量化できます。WordPressも標準対応しているため、積極的に選びたいフォーマットです。
ただし、ここは無理しないことが大切なので、jpegでもpngでもヨシ！とします。

• 写真全般: WebP（またはJPEG）
• 文字入りの図解・透過画像: PNG

　

インストール不要！ブラウザで使える無料リサイズ・WebP変換ツール

「専用のデザインソフトを持っていない」という方でも、ブックマークしておけばブラウザに写真をドラッグ＆ドロップするだけで完了する無料サービスを3つ厳選しました。

① サルワカ道具箱（WebP一括変換＆リサイズ）

複数枚の写真をまとめて処理したいときに一番手軽な国産Webツールです。
（「サルワカ」サイト、基本の「き」をいろいろ教えていただきました）

• 特徴
  写真をまとめて放り込むだけで、指定した横幅への縮小（1200pxなど）とWebPへの変換を同時に行い、ZIPファイルで一括ダウンロードできます。
• おすすめ
  お知らせ用に撮影した5〜10枚ほどの写真をパパッとまとめて処理したいとき。

② iLoveIMG（多機能画像編集サービス）

Web上で画像のさまざまな加工ができる定番ツールです。

• 特徴
  横幅を指定して一括縮小できるほか、必要に応じて画像の圧縮やフォーマット変換もスムーズに行えます。
• おすすめ
  リサイズだけでなく、大まかな切り抜きや回転なども一緒に済ませたいとき。

③ Squoosh（スクオッシュ / Google提供）

Google Chromeチームが開発した完全無料の高機能画像圧縮ツールです。

おすすめ
アイキャッチ画像など、「画質を絶対に落としたくない1枚」をこだわりながら調整したいとき。

特徴
画面中央のスライダーを動かしながら「元画像」と「圧縮後」の画質を自分の目で比較できます。リサイズ（幅指定）やWebP変換の品質調整も直感的に行えます。

4. まとめ：まずは「横幅1200px ＆ 軽量化」を習慣に！

さて、いかがだったでしょうか？
日常のお知らせ更新では、「撮影した写真を集める」→「無料ツールで幅1200px・可能であればWebPに変換する」→「WordPressにアップする」というシンプルなルーティンを作るだけで、サイトの表示速度と訪問者の読みやすさが格段に向上します。

【ワンポイント】無料Webツールを使う際のセキュリティ注意点

企業のWeb担当者として、「無料のオンラインツールに画像をアップロードしてセキュリティ面は大丈夫なの？」と気になる方もいるかもしれません。

判断基準はとてもシンプルです。

　

「WordPressの正しい操作手順を確認したい」「更新作業に追われて本業に集中できない」など、日々の更新業務でのお悩みや疑問がございましたら、いつでもお気軽にご連絡ください。

お電話でのご相談： 077-524-2008（平日 9:00〜18:00）

Webサイトのお問い合わせ・無料相談フォームはこちら