WEBデザインDTPデザイン個人レッスン

イラストレーターの家庭教師で勉強しよう

DTPデザイナーWEBデザイナーココフラッはデザイン制作や個人レッスンをご提供。自由な時間に東京カフェや会社ご自宅でグラフィックソフト、イラストレーターやフォトショップ、ワードプレスやホームページ制作の勉強、マンツーマンの個人指導でスキルアップ。
初回無料体験レッスン! Skypeレッスンは全国対応

  • Photoshop
  • Illustrator
  • Dreamweaver
  • Wordpress
  • Html+css

人気のコンテンツ

ワードプレステーマをカスタマイズの学校
ウェブ作成の指導は女性出張講師
ウェブ作成教室で勉強するならデザイン教室
初心者入門講座の個人レッスンデザイン教室

EWWW Image OptimizeでWebP画像変換のメリットデメリット

EWWW Image OptimizeでWebP変換導入の解説

 
wordpressでphpテンプレートタグとテーマの個人指導や家庭教師や個人レッスン
 

サイトの表示速度について「ウェブページの読み込み時間を短くしましょう」とGoogleが強く推奨しています。
↓サイトの表示速度チェックはこちらのパラメーターで確認できます。

 >> Google PageSpeed Insights グーグルページスピードインサイツ

 
よくサイトの重量問題での原因で言われるのが、画像が重いことです。
WordPressの記事更新時に、スマホで撮影した画像やフリー画像をそのままアップロードし続けることでサイトが重くなります。
その結果表示速度が遅くなり、Googleの評価が下がって検索順位が落ちる、という内訳です。

今回は画像のリサイズや解像度に無頓着な方でも表示速度を下げないですむ、画像ファイル「webP(ウェッピー)」への自動変換についてお伝えしたいと思います。

更に一歩踏み込んで、プラグインEWWW Image OptimizeでのWebP自動変換機能を使うメリット・デメリットを解説します。
 

 

 
 

1、次世代画像形式「webP(ウェッピー)」とは

 
次世代画像形式「webP(ウェッピー)」とは、JPEG2000 や JPEG XR の画像形式と並ぶ最新の画像形式です。
画質が劣化することなく圧縮され、容量が軽いのが特徴です。
SEO対策としてホームページの表示速度を上げるのに取り入れるのが必須となると予想されます。

ちなみにスマホやiPhoneで写真を撮るとjpeg形式で、特にサイズ変更をしなければ大きなサイズで格納されます。
大きな画像は重いため、そのままサイトにアップロードするとサイトの表示速度は遅くなる、ということになります。
 
 
 
 
フォトショップphotoshop 2022,2023,ps2021,パソコンmacやwindowsでソフトのフォトショでできること、デザインやiPadでイラスト描き方線画教室、画像切り抜きや画像加工色調補正、画像解像度リサイズと画像合成の教室

2、EWWW Image OptimizeでwebP自動変換の導入方法

 
ある程度デジタルやアプリに明るい方の場合は、自分で画像を適正サイズにリサイズし、さらに画像を圧縮したりしてからWPサイトに画像アップロードをするのが、当たり前になっているかもしれません。
しかしそういった手間をかけたくない人や、画像やアプリに疎い方にはこちらがオススメです。

アップロードした画像をWebPに一括変換し、更に今後アップロードする画像がwebPに自動変換されるプラグインの導入です。
 
プラグイン「EWWW Image Optimize」の設定方法をお伝えします!
 
 

 EWWW Image Optimizer のインストール方法

 
 
イラストレーターやフォトショップ、WebデザインWordPressの個人レッスン学校。出張、スカイプで東京~全国対応。無料体験レッスン、入会金無料特典あり。グラフィックデザイン講座のマンツーマンレッスンデザインスクール。ホームページ制作やDTPデザイン受注
WordPress管理画面の身左メニューの「プラグイン」
「新規プラグインを追加」をクリック →
右上の検索窓に「EWWW Image Optimizer」と入力 →
「今すぐインストール」をクリック →
「有効化」をクリック →
最初に出た画面は右下の、「二度と表示しない」をクリックし、次に進みます。
 
 

 詳細設定

 
左メニューの「設定」をクリック →
EWWW Image Optimizer」で設定画面を開く
 
 
朝日新聞がオススメする専門家サイト「マイベストプロ 東京」ただいま掲載中!パソコン教室・スクール・講座/制作・クリエイティブ/ホームページ制作/WEBマーケティング/WEBサイトやDTPデザインの困り事を解決、相談できる専門家で講師コンサルト
ウェブサイト構築の勉強のグループレッスン会社出張レクチャー
メタデータを削除」「WebP変換」この2つにチェックを入れて「変更を保存」をクリック
 
 
 
 
サイト制作やリニューアルのサポートレッスン、集客とデザインを同時に向上するテクニックを個別レッスンでサポート
wordpress講座を東京で教えてくれる人、個別指導で教えます、ホームページ作成教室無料の学習体験
画面の上の「ルディクロスモード」をクリック →
変換」タブを選択し、「変換リンクを非表示」にチェックを入れ、下にある「変更を保存」をクリック
 
 
 
 

 Webp変換の設定方法

 
 
デジタルデザイン基礎講座とはWEBサイトやアプリやイラストツールを勉強する学校、プログラミングコーディングワードプレスでホームページ作成ウェブデザインの対面出張レッスンとオンライン学習
Webp変換」にチェックを入れた際に、コードが出てきました。
その下にある「リライトルールを挿入する」をクリック →
ルールが正常に検証されました」と表示、ボタンが緑色でWEBPと表示されれば完了
 
 
 
 
生成AIのデザイン制作をイラストレーターフォトショップで使用する講座レクチャーは会社研修や対面出張レッスン受付中品質向上で生産性を上げるデザイン
もし赤いままでしたら、コードをコピペして、レンタルサーバーにアクセスし「.htaccess」に以上を追記します。
</IfModule>の直前に加筆して下さい。ボタンが緑色でWEBPと表示されれば完了です。
 
 
今後アップロードした画像は自動で圧縮とWebPに変換されます。
 
ですが、 EWWW Image Optimizerのインストール前にアップロードした画像は手動で最適化する必要があります。
 
 
 
 

 手動で最適化する設定方法

 
WordPress管理画面の身左メニューの「メディア」の「一括最適化」をクリック →
 
 
 
ウェブサイト構築の勉強のグループレッスン会社出張レクチャー
最適化されていない画像をスキャンする」をクリック →
すると最適化できる画像が抽出されるので「画像を最適化」をクリック
時間がかかることも多いので、しばし待ちます。
 
 
 
 
デジタルデザイン基礎講座とはWEBサイトやアプリやイラストツールを勉強する学校、プログラミングコーディングワードプレスでホームページ作成ウェブデザインの対面出張レッスンとオンライン学習
最適化が終了したらメディアを開き確認します。
Webpになっていない際はEWWW Image Optimizerで最適化をもう一度、行います。
 
 
 
 
ウェブサイトの解析とレクチャー指南、検索順位をあげたいなら女性講師の個別指導
「WebPのみ」にチェックを入れる →
最適化されていない画像をスキャンする」をクリック、これで完了です。
 
 
もしそれでもダメでしたら「メディア」を開き、右側の部分、手動で1枚づつ最適化を行って下さい。
 
 
 

3、WebP自動変換のメリット・デメリット

 
EWWW Image Optimizer  でこれまでアップロード済み画像を一括変換した後に、ワードプレスの画像ファイルが格納されている「uploads」フォルダにアクセスしてみました。

すると、もともとの画像(jpg)はそのまま残っており、加えてWebP画像が生成されていました。
つまり、画像を1枚アップロードすると webP画像 が自動生成され、それがブラウザに読み込まれることで、元々の画像よりも軽いので表示速度が上がる、ということです。

WebP形式に返還というよりは、新たにwebP形式画像の自動生成されて元画像と一緒に格納される、というのが近いです。

「これはもしかして、、」とサイトサイズ(重さ)を確認したら、WebP導入後の方が重くなっていました。

要約すると「表示速度は上がるけれど、画像枚数(重量)は増える」のです。
 

 WWW Image Optimizer の「WebP変換」解除してみると

 
フォトショップスキルがあるので、元々画像はサイトに適した形でアップロードしていました。
画像がサイトを圧迫することもないことから、WebPに自動変換にする必要も今の所あまりありない、
そう判断した上で、元に戻そうと思い、EWWW Image Optimizer の「WebP変換」解除しました(上の2の工程を元に戻しました)。

新たにアップロードする画像はWebP形式に自動返還はされなくなりました。
が、既に生成されてしまった WebP画像 はそのままです。

プラグインを停止しても元に戻ることはなく、自分自身で破棄しない限り生成されたWebPは残ります。
 

 JPG画像を削除してみると

 
試しにFTPで「uploads」フォルダから、WebP画像は残して元々のjpg画像を削除してみました。
すると投稿ページで画像が表示されなくなりました。
つまり、元画像と変換されたWebPの両方が揃っていないと、ブラウザへのアプローチ(表示速度UP)は機能しないことが判明。
 
表示速度上げるには、元画像と変換されたWebPの両方が必要
 

 WebP画像を取り入れるのに

 
最終的には、FTPで「uploads」フォルダから、WebP画像を手動で全て削除しました。
もしくはEWWWの「WebP画像を一括削除」で、できるかもしれません。

今後はアップロードする画像を自分でjpgからwebPにフォトショで書き換え保存して、サイトにアップロードすることにしました。
これが今の所、メリットが大きくデメリットが少ないかなと。

もし、画像の知識がない、またストレスなく画像を投稿で使用していきたい、更に表示速度を上げたいのであれば、プラグインEWWW Image Optimizer で「WebP変換」を取り入れるのが良いでしょう。
 

「EWWW Image Optimizer」は画像圧縮に、WebP変換も自動でおこなってくれる優れたプラグインです。
しかし自動で簡単な裏にはメリットと共にデメリットを見極め、自分で補える部分は手動で行い、苦手なところをカバーする形で取り入れる、ベストな選択をして下さい!

 
 

 
 

 

check!

お問い合わせはこちらからどうぞ
レッスンについてはこちらからどうぞ