アフィリ゚むト サむドビゞネス関連

【EWWW Image Optimizer】WordPressで最初に入れたい無料プラグむン

WordPressを䜿っお倚くのコンテンツを投皿するず、自然ず扱う画像の枚数も増えおいきたす。

画像ファむルはサむトの衚瀺速床を䜎䞋させるずいう問題があり、結果ずしお離脱率が倧きくなっおしたうずいう課題が残りたす。

しかし、画像の数を枛らすのは芋やすいサむトずは呌べなくなっおしたいたす。

そこで利甚するのが、画像のサむズを圧瞮しおくれる「EWWW Image Optimizer」ずいう無料プラグむンです。

今回は、「EWWW Image Optimizer」の蚭定方法ず䜿い方を玹介いたしたす。

関連蚘事
【Autoptimize】WordPressで最初に入れたい無料プラグむン

圓サむトではブログ䜜成にAFFINGER5(アフィンガヌ)を掚奚しおいたすが、実際にAFFINGER5(アフィンガヌ)を ...

続きを芋る

EWWW Image Optimizerずは

「EWWW Image Optimizer」は、画像を劣化させるこずなく、画像をアップする際に自動で画像サむズを圧瞮しおくれるプラグむンです。

「EWWW Image Optimizer」は新しい画像をアップロヌドするずきに自動でサむズを圧瞮しおくれるだけでなく、すでにアップしおいる画像も䞀括で圧瞮するこずができるので非垞に䟿利です。

ずはいえ、やはりはじめに蚭定しおおく方が効率的なので、初めに環境構築しおおくこずをオススメしたす。



EWWW Image Optimizerの導入方法

管理画面のメニュヌ「プラグむン」>「新芏远加」から、「EWWW Image Optimizer」で怜玢。「いたすぐむンストヌル」をクリックし、有効化したす。

EWWW Image Optimizerのむンストヌル手順

管理画面の巊メニュヌの「蚭定」の䞭に「 EWWW Image Optimizer 」ずいう項目が远加されおいたす。

これをクリックするず詳现蚭定の画面にアクセスできたす。

EWWW Image Optimizer ã®èš­å®šæ–¹æ³•

ベヌシック

ベヌシックの蚭定

黄色い䞋線を匕いた「メタデヌタを削陀」をチェックするこずで、画像のメタデヌタを削陀しおくれたす。結果、可胜な限り画像のファむルサむズを小さくするこずができたす。
画像のメタデヌタずは、撮圱堎所やカメラ情報などを含む情報が蚘茉されおいるデヌタの事です。

チェックする項目

  • メタデヌタを削陀

倉換

倉換の蚭定

黄色い䞋線を匕いた「コンバヌゞョンリンクを非衚瀺」をチェックしおください。

チェックを入れおおかないず「png→jpg」に倉換したり「jpg→png」に勝手に倉換をしおしたいたす。

画像の拡匵子を倉えるず画像の質が䞋がるこずがあるため、この項目には必ずチェックを入れ、倉曎を保存する様にしおください。

チェックする項目

  • コンバヌゞョンリンクを非衚瀺


EWWW Image Optimizer ã®åŸºæœ¬çš„な䜿い方

䜿い方で抑えおおくべき操䜜は次の2぀です。

ポむント

  • 新芏画像の圧瞮
  • 既存の画像を䞀括で圧瞮

新芏画像の圧瞮

EWWW Image Optimizer は、むンストヌルするだけで画像を新芏投皿したら自動で圧瞮しおくれたす。

どの皋床圧瞮されたのかは、巊メニュヌの「メディア → ラむブラリ」の画像䞀芧画面で確認するこずができたす。

新芏画像の圧瞮

既存の画像を䞀括で圧瞮

EWWW Image Optimizer では、過去にアップした画像をたずめお圧瞮するこずが可胜です。

巊メニュヌから「メディア → 䞀括最適化」をクリックしおください。

䞀括で圧瞮

䞀括最適化の画面に移るので、「最適化されおいない画像をスキャンする」を遞択しおください。

䞀括最適化

応甚線「WebP(りェッピヌ)」を掻甚する

Googleも掚奚しおいる次䞖代の画像フォヌマットである「WebPりェッピヌ」を蚭定する方法をご玹介したす。

次䞖代画像フォヌマットずは

次䞖代画像フォヌマットずは埓来のPNGやJPEGより圧瞮性胜の高い、新しい画像フォヌマットです。

JPEG2000、JPEG XR、WebPりェッピヌなどの皮類がありたす。

それぞれに特城がありたすが、WebPはGoogleが開発しおいる画像フォヌマットであり、察応ブラりザもかなり増えおきおいるこずを考慮するず今埌の䞻流になる事が予想されたす。

WebP察応ブラりザ

Google Chrome / Mozilla Firefox / Microsoft Edge / Opera

EWWW Image Optimizerを䜿っお画像をWebPに倉換する方法

「EWWW Image Optimizer」の蚭定画面から「WebP」タブを衚瀺したす。

そしお「JPG、PNGからWebP」にチェックを入れたす。最埌に「倉曎を保存」で蚭定を保存したす。

WebPの蚭定

.htaccesファむルぞの远蚘

蚭定をするず「WebP」タブのペヌゞ䞋郚に.htaccessファむルに远蚘するためのコヌドが自動生成されたす。

たた、右䞋の方に赀の背景色でPNGずいう衚瀺がありたす。

これはサむトを閲芧しおいるブラりザずサむト偎がWebPに察応枈みの堎合は緑色、察応しおいない堎合は赀色のボタンが衚瀺されたす。

泚意

「リラむトルヌルを挿入する」をクリックするず自動で.htaccessの末尟に構文が挿入されたすが、.htaccessの冒頭に挿入する必芁があるためこちらは抌さないように泚意しおください。

.htaccessファむルの線集に぀いおは、WordPressの蚭眮にレンタルサヌバを䜿甚しおいる堎合、Web管理画面で.htaccessファむルの゚ディタが提䟛されおいるこずがほずんどです。

たた、FTPを甚いおファむルをダりンロヌドしおテキスト゚ディタで線集しおからアップロヌドするずいう方法もありたす。

がくぱックスサヌバヌを䜿甚しおいるため、゚ックスサヌバヌを䜿っお説明いたしたす。

゚ックスサヌバヌのサヌバヌパネルにログむンし、「ホヌムペヌゞ」の「.htaccess線集」をクリックしおください。

.htaccessの線集

ドメむンを遞択し、䞊蚘タブから「.htaccess線集」を遞択しおください。

.htaccessファむルに远蚘するコヌド

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{HTTP_ACCEPT} image/webp
RewriteCond %{REQUEST_FILENAME} (.*)\.(jpe?g|png)$
RewriteCond %{REQUEST_FILENAME}\.webp -f
RewriteCond %{QUERY_STRING} !type=original
RewriteRule (.+)\.(jpe?g|png)$ %{REQUEST_FILENAME}.webp [T=image/webp,E=accept:1,L]
</IfModule>
<IfModule mod_headers.c>
Header append Vary Accept env=REDIRECT_accept
</IfModule>
AddType image/webp .webp

※ 必ず「.htaccess」ファむルの冒頭に䞊蚘構文を挿入するようにしおください。

このコヌドの意味ずしおは「ブラりザがWebPに察応しおいるなら画像ファむルをWebPで配信し、非察応なら元のフォヌマットJPEGやPNGで配信する」ずいう内容です。

぀たり、ブラりザが察応しおいる堎合のみにWebPを䜿甚するので、次䞖代フォヌマットの蚭定をしたからずいっおWebP未察応のブラりザ䜿甚者に悪い圱響を䞎えるこずはありたせん。

WebP画像ファむルぞの倉換

党おの䜜業が終わったら䞊蚘の芋出し「既存画像を䞀括で圧瞮」の手順ず同様に「最適化されおいない画像をスキャンする」ボタンをクリックしたす。

WebPぞの倉換が終わったら「WebPタブ」を再び開いお、右䞋のボタンが緑色で「WebP」ず衚瀺されおいるこずを確認したす。



たずめ

「EWWW Image Optimizer」を掻甚するこずで、簡単にサむトの画像を圧瞮するこずができ、サむト衚瀺速床を向䞊させるこずができたす。

SEO察策にもっおこいの無料プラグむンですので、ぜひ䜿っおみおください。

がくはAFFINGER5(アフィンガヌ)で蚘事を䜜成しおいたすが、足りない郚分はこのような無料プラグむンを䜿甚しおいたす。

気になる方は、関連蚘事を参考にしおみおくださいね

関連蚘事
【Autoptimize】WordPressで最初に入れたい無料プラグむン

圓サむトではブログ䜜成にAFFINGER5(アフィンガヌ)を掚奚しおいたすが、実際にAFFINGER5(アフィンガヌ)を ...

続きを芋る

関連蚘事
AFFINGER5ずTHE THORを培底比范圧倒的な差が出た

アフィリ゚むトに特化したAFFINGER5(アフィンガヌ)ずSEOに特化したTHE THOR(ザ・トヌル)。 ブログ䜜成 ...

続きを芋る

関連蚘事
【初心者向け】WordPressでブログ(アフィリ゚むト)を始める方法

目次はじめに初心者こそアフィリ゚むトサむトはWordPressがオススメ自由床高い䌁業ブログは勝手に広告が入る䌁業ブログ ...

続きを芋る

1日1ポチお願いいたしたす
人気ブログランキング

-アフィリ゚むト, サむドビゞネス関連
-, , ,

© 2023 with-Biz