「WordPress」に限らず、Webページにおける「画像サイズ」は訪問者の体感に大きな影響を与えます。
SEO対策の基本でもあります。
(Webページの読み込み高速化は、SEOに有利です。)
画像の取り扱い方は様々な手法がありますが、ここでは、簡単に対応できる手法をご紹介いたします。
画像取り扱いの基本
画像サイズは適切な大きさで
カメラ写真や、フリーの高画質画像の場合、Webページとしては過剰なほどのサイズであることが多いです。
サイズが大きければ大きいほど、端末への通信負担が増え、表示に時間がかかることとなります。
また、大きいとキレイに見えるというわけでもなく、端末に適したサイズがあれば、見た目では判別つきません。
(にも関わらず、ファイルサイズは桁違いです)
画像サイズの目安
極端な話、「画面に表示するサイズ」があればキレイに見えます。
WebページをPCで見るとしたら、横 1920ピクセルあればキレイすぎるくらいでしょう。
現実的には、以下で十分と考えています。
- PCページの端から端まで表示する画像：横幅 1200ピクセル
- 記事内に埋め込む画像(左右に余白が入る)：横幅 800ピクセル
同じ画像サイズでも、ファイルサイズを落とせる
例えば、同じ 1200 × 800」ピクセルの画像でも、「画質」や「付与データの有無」でファイルサイズが変わります。
Webページで超高画質画像が必要なケースは稀かと思いますので、ファイルサイズを優先することをオススメします。
なんだか難しいですが、ツールを使えば一発です。(後述)
どれくらいファイルサイズが違う？
画像の内容によりますのであくまで一例です。
- 画像サイズ：5177 × 3563 ピクセル
そのまま：7200 KB
ツールでファイルサイズ圧縮：5500 KB
※大きすぎるため、画像表示は割愛 - 画像サイズ：1200 × 826 ピクセル
そのまま：298KB
ツールでファイルサイズ圧縮：116KB
- 画像サイズ：800 × 551 ピクセル
そのまま：156KB
ツールでファイルサイズ圧縮：96KB
何も考えずにアップロードすると 7200KBですが、一手間かけると 96KB になるわけです。(98.7％減)
素材画像はできるだけ大きく
なお、素材となる元画像は、できるだけ大きなサイズで確保しておくことをオススメします。
リサイズして小さくすることは簡単ですが、小さいサイズを大きくすることはできないためです。
(サイズは大きくできますが、拡大するだけですので粗くなります ＝ 意味がありません)
リサイズ方法
WordPressで実施する方法
一番手っ取り早い方法です。
それは、プラグインを導入してしまう方法です。
「EWWW Image Optimizer」といった、無料で活用できるプラグインがあります。
プラグインをインストール＆設定しておくだけで、あとは通常通りWordPressにアップロードするだけで、自動でリサイズ、圧縮されます。
上記以外にも様々なプラグインがありますので、お試しくださいませ。
(もちろん設定によりますが)
注意点としては「大きな画像として使いたい時」など、意図がある時にも一律リサイズされてしまう点でしょうか。
Windowsで実施する方法
リサイズは、標準アプリ「ペイント」でもできます。
該当のファイルを開き、ホーム > サイズ変更 で処理するのみです。
ファイルサイズのさらなる削減についても色々とツールがあります。
「縮小専用。」「Voralent Antelope」といったアプリがオススメです。
Macで実施する方法
Macにおいても、リサイズは標準アプリ「プレビュー」で可能です。
該当のファイルを開き、ツール > サイズを調整 で処理するのみです。
ファイルサイズのさらなる削減についても色々とツールがあります。
「ImageOptim」「JPEGmini」あたりが便利かと思います。
(ご参考)さらなる効率化手法(WebP)
画像形式は「JPEG」が基本となりますが、「WebP」という次世代フォーマットも普及しつつあります。
「WebP」はGoogleが開発した画像フォーマットで、JPEGと同じ画質でファイルサイズを25〜34％小さくできる、と言われています。
※ようするに、画質同じなのにファイルサイズが小さい
あまりデメリットが感じられないWebPですが、対応するブラウザが少ない、という致命的な問題がありました。
(対応していないブラウザだと、画像が表示されない)
しかしここにきて、主要ブラウザはほぼ対応されました。
(Googleが開発元なので･･･)Apple系が壁でしたが、ここにきて対応されております。
※Internet Exploreは未対応
ですので、割り切って「WebP」を使うのもありかもしれません。
WordPress環境を整備すれば、JPEGファイルをアップロードするだけでWebP変換され、表示できるようにすることも可能です。
また、万全を期するのであれば、WebPを表示できるブラウザであればWebPを、そうでなければJPEGを渡す、といった設定をサーバーに仕込むことが可能です。
こちらは少し専門的な対応となります。
弊社グロリアの公式サイトは、そのような設定を仕込んでいます。
SEO対策にこだわる場合は、お気軽にご相談くださいませ。
