商品の画像を最適化して、表示速度アップ
スポンサーリンク
画像が大きいと表示速度が遅くなり、結果として検索順位を落としてしまいます。Welcartのオンラインショップでも、多くの方が商品説明に画像を多用していることと思います。
今回は、GoogleのPageSpeed Insightsが提示する「画像を最適化する」方法に取り組みました。
PageSpeed Insightsについては、こちらの記事で詳しく解説しています。
画像の最適化とは？
画像の最適化とは、画質はそのままに無駄な部分を排除して、データ量を縮小させることです。データが軽くなれば、ロード時間が減り、ページの読み込み速度も上がります。
画像の不要な部分をカットすることはもちろん、以下に紹介するツールで画像の質を損なうことなくデータ縮小が可能です。無料ツールで簡単に画像の最適化をしましょう！
便利な画像圧縮サイト・ツール
JPEG編
どちらもドラッグ＆ドロップだけで、画質を悪化させないでデータサイズを縮小させるすることが出来ます。
ちなみに、私が好んで使っているのはJPEG Optimizerのほうです。登録不要で一度に20ファイルまでアップロード出来ます。
JPEGminiでも会員登録（無料）をすれば一度に複数のファイルをアップロード出来るようになりますが、画像が最適化されるのに時間がかかるのがイマイチでした。
どちらも素晴らしいツールであることは間違いありませんので、この辺は好みでしょう。
PNG編
PNGの最適化ツールは、このサイト一択でほぼ決まりでしょう。
多くのユーザーがレビューで絶賛している通り、非常に使いやすいです。しかもダウンロードしても、データ名がそのままなので、データ名の変更なしに、そのままサイトにアップロード出来てしまいます。
PNG画像の最適化にはGIMPの画像圧縮なども試してみましたが、サイズの縮小具合はTinyPNGには全く及びませんでした。
最適化できた画像が揃ったら
これらで画像を最適化出来たら、FTPソフトなどで、現在の写真と入れ替えて完了です。
もちろん、WordPressのダッシュボード経由で、画像を一旦削除→再アップロードしても構いません。私は面倒臭かったので、全てFTPソフトでアップロードし、上書きしてしまいますが・・・。
FTPソフトを使う場合は、画像はWordPressフォルダ内の、/wp-content/uploadsの中に格納されていますので、そこから入れ替えを行います。
事故防止のため、予めバックアップを取っておく事をお忘れなく。
画像を最適化した後のPageSpeed Insightsの評価
17件の画像の最適化アドバイスが出ていた、筆者のWelcartのECサイトのとあるページ。17件の画像を全て最適化しました。
最適化前：モバイル66・パソコン79
最適化後：モバイル70・パソコン85
さすがに17枚もの画像が縮小されたことで、PageSpeed Insightsのスコアはかなりアップしました。
Welcartのオンラインショップでも、商品の画像を最適化（サイズ縮小化）させれば、ページの読み込み速度も上がりお客様の閲覧の快適性を上げることにも繋がります。結果的にSEO対策にもなりますので、取り入れてみては如何でしょうか。
画像ファイルの圧縮を、早速試してみました。
PNGファイルはサイズが大きいので気にしていたのですが、
おかげさまで小さくする事ができました。
ありがとうございました！
わざわざコメントありがとうございます。PNGファイルは、色数が多いとどうもサイズが大きくなってしまうみたいですね～。google推奨のPNG縮小ソフトも気になるところです。