こんにちは!Rie+です。
今回は、前回の記事:【WordPress】遅い?重い? テーマを変えて高速化しよう の続きになります。
「WordPressのサイト作ったんだけど、画像の読み込みが遅すぎるかも…」と感じている人、いませんか?
私のブログは、画像の読み込みが眠気を誘うレベルの遅さでした。
あまりに遅すぎて、「もうどうにかしないとブログに訪問してくれた方が秒で立ち去ってしまう!!!」という危機感のもと、すべての画像サイズを限界ぎりぎりまでカットしてきましたので、手順をみなさんに分かりやすくお届けします。(画像の数が多くてめっちゃ大変でした😣→便利なプラグイン使えば一瞬で解決することを今知りました…勉強になりました!笑)
さぁ、気を取り直して、はじめましょう!!
画像サイズの確認
WordPressのダッシュボード上で画像サイズを確認しましょう。画像サイズが大きすぎる場合は、画像の解像度を下げたり、ファイル形式を変更したりする必要があります。
- WordPressダッシュボードの左側のメニューから「メディア」を選択→サイズを確認したい画像をクリックします。
- 画像の詳細ページが表示されます。下図では、画像のファイルサイズは「2MB」つまり「2000KB」になっています。かなり大きいです。1KB(キロバイト)を1000倍したのが1MB(メガバイト)です。分かりにくければ、「MBだったら画像を圧縮した方が良い」と覚えてもらったら良いかと思います。
画像の変換
画像のファイル形式を変更することで、ファイルサイズを小さくすることができます。ファイル形式を確認するには、ファイル名のドットより後の文字で判別できます。例:WebP形式のファイル→「aaa.webp」
WebP形式は、BMPやPNG、JPEGよりも圧縮率が高く、ファイルサイズを小さくすることができます。
ファイル形式変換によるサイズ比較
ファイル形式 | BMP | PNG | JPEG | WebP |
---|---|---|---|---|
ファイルサイズ (KB) | 1500 (1.5M) | 600 | 150 | 50 |
上記表からわかるように、PNGやJPEGからWebPに変換することで、大幅にファイルサイズを削減することができます。
WebPへの画像変換方法
では、WebP形式に画像を変換する方法を3つご紹介します。
- 画像編集ソフトを使う:Adobe PhotoshopやGIMPなどの画像編集ソフトでも、画像をJPEGやWebP形式に変換できます。今使用しているソフトがWebP対応していたら試してみてください。
- オンラインツールを使う:「squoosh」などのオンラインツールを使うと、簡単に画像をJPEGやWebP形式に変換できます。「squoosh」は、Googleが提供する無料の画像圧縮・変換ツールで、かなり手順が簡単です。
https://squoosh.app/
使い方は、まず画面の赤い部分に画像ファイルをドラッグ&ドロップします。コピペでも可。
画面右下のファイル形式を「WebP」に変更して、青いダウンロードマークを押すだけです。
「Effort」と「Quality」を下げれば、粗い画像になりますが、ファイルサイズは減っていきます。許容範囲内で下げられるところまで下げてみてください。
画面の左側が元の画像、右側が変換後の画像になるので、ダウンロード前に確認もできます。 - WordPressプラグインを使う:
WordPressプラグインを使うと、画像をアップロードする際に自動的にJPEGやWebP形式に変換できます。今回は、日本語対応のおすすめプラグイン「Converter for Media」をご紹介します。
Converter for Media
https://wordpress.org/plugins/webp-converter-for-media/
特徴
・日本語対応: 設定画面が日本語化されており、操作がしやすいです。
・一括変換: メディアライブラリにある画像をすべてWebPに変換できます。
・品質設定: WebP変換時の品質を調整できます。
・変換後のファイルの管理: 変換後のWebPファイルは元の画像と同じフォルダに保存されます。
・自動変換: 新しい画像をアップロードした際に自動でWebPに変換できます。
・高速変換: 複数の画像を高速に変換できます。
使い方
1.プラグイン「Converter for Media」をインストール・有効化します。
2.すでにアップロードした画像ファイルを変換するには、ダッシュボードの「設定」→「Converter for Media」→画面下の方にある「一括最適化開始」を押すだけ。
3.新しい画像をアップロードした場合は自動で変換してくれます。変換が終わったかどうかは、「メディア」→「ライブラリ」から画像ファイルの詳細に「Converter for Mediaによって最適化」の文字があることと、ファイルサイズを確認してください。
簡単でしたね!
これらの方法を組み合わせることで、画像サイズを大幅に小さくすることができます。
ここまで終わったら、「Google PageSpeed Insights」で速度チェックしてみてくださいね!
- Google PageSpeed Insights:https://pagespeed.web.dev/
- 使い方は前回の記事へ:【WordPress】遅い?重い? テーマを変えて高速化しよう
当サイトでは、WordPress以外にも様々な情報を発信しています。ぜひ、他の記事もご覧ください!
トップページ:https://rieplus1.com/
最後まで読んでいただき、ありがとうございました。
感謝♡
コメント