画像をたくさん掲載するコンテンツの悩みといえばページ容量だと思います。
特にギャラリー系のサイトですと1ページあたりに数十枚の画像を掲載するケースもあるかと思います。
私が管理・運営させて頂いているサイトでもWEBマガジン系は1ページ辺り大体15~30枚とかなりの枚数の写真を掲載していたりもします。
少し減らしたほうがと助言しますが、今の世の中、雑誌などでも文章よりも写真で伝える形式になっているので、写真を大量に掲載するのは避けては通れない問題になってきました。
私個人で編集しているものはPhotoshopなどを使ってある程度の解像度を保持しつつキレイに見えるように編集しているのですが、クライアントさまに同じ作業を強いるのも難しいかと思います。フォトショップ持ってない場合が殆どですし。
ということで、今回は画像をアップロードすると自動圧縮してくるプラグイン「EWWW Image Optimizer」を紹介したいと思います。
これと言った設定などする必要がありませんので、1ページに写真を多数掲載している方は是非参考にしてみてください！
圧縮する理由
その前に「なぜ圧縮しないといけないのか？」
ページ容量は表示速度に影響してきます。そのためユーザビリティやSEOの観点からも軽くすることが得策です。
実際Googleでも画像圧縮を推奨しておりますし、なにより表示されるのに時間がかかると離脱率にも繋がってしまいますし、Amazonの調査では0.1秒遅くなると1%の売上が減少するという話があるみたいです。
もし自分のサイトがどれくらいの速度で表示されているのか知りたい場合はGoogleが提供していおります「PageSpeed Insights」を使ってみてください！
フォームに自分のURLを入力するだけで、速度が計測されますよ！
EWWW Image Optimizerとは
EWWW Image Optimizerは、WordPressの画像圧縮プラグインのなかでも、もっとも人気があるプラグインかと思います。私も大変お世話になってますｗ
EWWW Image Optimizerの魅力は、インストールすれば記事に投稿した画像を自動で圧縮してくれますし、画像を圧縮して見た目はわからず、容量だけ削減することが可能です。
更に、今までアップロードした画像も後から一括で圧縮することが可能です。
EWWW Image Optimizerのインストール
プラグイン > 新規追加をクリックし「EWWW Image Optimizer」を検索。
EWWW Image Optimizerが表示されるので「今すぐインストール」をクリックし、インストール完了後に「有効可」をクリックすればOKです。
インストール、有効可が終われば、今後アップロードする画像は自動で圧縮されるようになります！
インストール、有効化後の設定
インストール、有効化を完了すると、プラグインの初回設定を行う画面が表示されます。
とりあえず、私が行った設定は下記の図の通りとってます。
もちろん、サイトの運営状況などに合わせて設定を変更していただいて問題ありません。
設定完了後は「完了」をクリック。
これで、今後アップロードする画像は設定した内容で自動圧縮されているはずです！
EWWW Image Optimizerの設定
EWWW Image Optimizerは有効化をすればすぐに使えるようにはなりますが、より軽く、そして高速化するために少しだけ設定してあげましょう。
[基本]メタデータを削除
まずは、設定の基本タブからですが、「メタデータを削除」にチェックが入っているか確認しましょう。
そうすることで、画像に含まれるカメラ機種や位置情報などの撮影条件を削除する設定となります。
[基本]画像のリサイズ
サイトの運営方法に合わせて画像サイズの上限を設定しましょう。
そうするとで、新たにアップロードされた画像はすべて、指定したサイズにリサイズされるようになります。
過去にアップした画像もリサイズしたい場合は、メディアに「一括最適化」という項目が追加されていますので、「最適化されていない画像がスキャン」をクリックすればOKです。
WebP 変換の設定
webp（ウェッピー）とは
webp（ウェッピー）の概要から解説します。webp（ウェッピー）とは、Googleが開発した次世代画像フォーマットのことであり、2010年に公式発表されました。webpは画像の圧縮率が高く、表示速度の高速化に有利に働きます。
EWWW Image Optimizerでは、画像を自動的にWebPに変換した上で、表示するブラウザの対応状況に合わせる機能があります。
WebP 変換
WebPのタブで「WebP変換」にチェックを入れて、「変更を保存」をクリックしてください。
WebP の配信方法に記載されているコードをコピーし、サーバーにある.htaccessの一番上に書き込みます。
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{HTTP_ACCEPT} image/webp
RewriteCond %{REQUEST_FILENAME} (.*)\.(jpe?g|png|gif)$
RewriteCond %{REQUEST_FILENAME}\.webp -f
RewriteCond %{QUERY_STRING} !type=original
RewriteRule (.+)\.(jpe?g|png|gif)$ %{REQUEST_URI}.webp [T=image/webp,L]
</IfModule>
<IfModule mod_headers.c>
<FilesMatch "\.(jpe?g|png|gif)$">
Header append Vary Accept
</FilesMatch>
</IfModule>
AddType image/webp .webphtaccessの編集方法ですが、こちらはお使いのサーバーでも編集が可能な場合がありますのでFTPをご利用ではない方は、サーバーの管理画面から編集を行ってください。
サーバーから出来ない！FTPも分からない！という方はhtaccessを編集することができるプラグインもありますので、そちらをご利用してみるのも良いかもしれません。
正常に.htaccessの設定が完了すると、赤色表示の「PNG」が緑色の「WebP」に変わります。
.htaccessを設定前、もしくは正しく設定できていない場合は赤色で「PNG」で表示されています。
.htaccessが正しく設定されていると、WEBPと緑で表示されます。
これでWebPに対応しているプラウザには自動的にWebP画像が表示され、対応していないブラウザの場合は従来通りのJPEGやPNGなどの画像が表示されるようになります。
Xサーバの場合は「サーバーパネル」にログインし、「.htaccess編集」という項目がありますのでそちらをクリック。
「.htaccess編集」を開き、さきほどのコードを貼り付けて「確認画面へ進む」→「実行する」を押します。
一括最適化
EWWW Image Optimizerの設定は完了しましたが、今までアップロードしていた画像はそのままの状態になってます。
これらの画像を圧縮、WebPに変換するには、「メディア」 > 「一括最適化」をクリックします。
再最適化を強制とWebP のみ にチェックを入れて、あとは「最適化されていない画像をスキャンする」をクリック。
すると読み込み後「最適化できる画像が0000点あります。」と表示されるので、下にある「〇〇〇点の画像を最適化」をクリックすると、最適化行われるので、完了するまで少し待ちましょう！
今までアップロードした全ファイルが最適化されるため、サイトの状況によっては少し時間が掛かる場合があります。
まとめ
今回は、画像を圧縮するプラグイン「EWWW Image Optimizer」をご紹介させて頂きました。
画像の圧縮はサイトの表示速度に大きく影響すると言われております。
また表示速度はが早ければSEO、ユーザービリティに対しても好影響と言われてます。
「自身のサイトが重いかな？」「写真を多く取り入れたサイトを運営したい！」なお考えの方は一度検討してみてはいかがでしょうか？
今回の内容は以上となります。
お疲れさまでした！
また次回。
