投稿済の画像を「適切なサイズの画像」にする方法PageSpeed Insights

適切な画像WordPress

ブログの速度が測れる「PageSpeed Insights」で試した結果「適切なサイズの画像」という項目の出たので改善してみました

今回は、圧縮ソフトを使って投稿済の画像を、さらに縮小してサーバーにアップロードする方法です

使用するソフトは無料の「squoosh

またそれとは別に、投稿前の画像圧縮や形式変換にも便利な「iLoveIMG 」も紹介していきます

スポンサーリンク

適切なサイズの画像にする方法PageSpeed Insights

まずはPageSpeed Insightsでブログの速度を測ってみましょう

検索窓に自分のURLを入れて分析

モバイルとパソコンのタブが出ますが、最近はモバイルファーストが主流なのでモバイルの数字を参考にします

 

測ってみた結果はたぶん、パソコンよりモバイルの方が低かったんじゃないでしょうか

最近は、モバイルでサイトを訪れるユーザーが多いので、モバイルの閲覧速度が遅いとすぐに離脱されてしまうことに

そうならないためにも改善が必要になってきますが、初心者はむやみにコードを書き替えたりしてはダメです

サイトが真っ白になるだけではなく、サイト自体に入れなくなる可能性も出てくるからです

なのでここは画像などを縮小してサイトのスピードを上げるのが得策でしょう

ねこまちはコードをいじってサイトが真っ白になったよ
【初心者用】WordPressのバックアップをサーバーから取る方法

「適切なサイズの画像」を保存する

すでにサイトでアップロード(公開)されている画像を「適切なサイズの画像」にする方法です

「PageSpeed Insights」で指摘された「適切なサイズの画像」を選び、右クリック
「名前を付けてリンク先を保存」します

「squoosh」で画像を圧縮する

続いて、画像をもっと圧縮するために無料ソフトを使っていきます

squoosh」を立ち上げ「select an image」をクリック

 

先ほど保存したファイルを開きます

真ん中の◀▶を左右に移動させると、画質を比べることができます

よくわからない場合は◀▶でめいっぱい左に移動してみてください

すると、右側が荒くなっているのがわかるかと思います

この画像の粗さでは極端すぎてアップロードはできないですが、このように左右で比べながら圧縮できるのが「squoosh」の良いところです

では、とりあえずこのくらいの圧縮率にして「ダウンロード」してみます

サーバーに画像をアップロード

エックスサーバーの「ファイルマネージャー」へログインします

画像が入っている場所の確認方法は

ドメイン→public html→wp-content→upload→2020→10

の順番です

この画像で言うと、

https://necomachi01.com/→public html→wp-content→upload→2020→10/2-6.jpg

 

そこの階層まで行けたら

ファイルのアップロードで「ファイルを選択」をクリック

先ほど圧縮した画像を選び「アップロード」をクリックします

「PageSpeed Insights」で更新する

PageSpeed Insightsに戻り、更新します

「合格した監査」内に「適切なサイズの画像」が入っていることがわかりますね

これで一応の合格となりました

初心者におすすめしたいSFTP対応の無料FTPクライアントソフト
初心者でも簡単にできる無料FTPクライアントソフトFTPS、SFTP、SCPの接続方法を紹介しています。FTPS、SFTP、SCPで接続するメリットは個人情報漏洩やデータをハッキングされるのを防ぐセキュリティ強化にあります。

これからブログにアップロードする画像の場合

先ほどまでは投稿済みの画像のアップロード方法でしたが、これから投稿する画像にも同じようにソフトで圧縮してWordPressのメディアにアップロードすれば大丈夫です

圧縮できる無料ソフトはこの他にもたくさんありますが、個人的に好きなのが、iLove IMGという無料ソフト

iLove IMGの良いところは、PNGなどの大きい容量の画像をJPGに形式変換してくれたり、さらに圧縮もできる一石二鳥なソフトになっています

使い方はとっても簡単だよ

無料画像圧縮ツールでPNG・JPEGの最軽量化を比較【追加あり】
無料画像圧縮ツールでPNG・JPEGの最軽量化を比較してみました。PNGで圧縮・JPEGへ形式変換して再度圧縮した結果など。圧縮率にこだわると画像の解像度が下がるデメリットもありますがブログの表示速度を考えれば軽くしたほうがメリットは大きいでしょう。

まとめ

一旦ブログに投稿してしまった画像でも、再圧縮してサーバーにアップロードすれば軽くなります

「PageSpeed Insights」での検証も、通信速度の環境やキャッシュ、プラグインなどでも結果でも違ってくるので何回か試してみるのがいいかもしれません

ではまた

タイトルとURLをコピーしました