すみません。管理人メガネちゃんの備忘録になります。
webp化でEWWWの設定に困っているというお話です。
使用しているテーマは、WING（アフィンガー系）
例えば、以下のゴーグルの写真（ モデルは私 ）
99.1 KB 900×483
SYNCER様のWEBP変換ツールを利用させていただき、上記jpgをwebpに変換します。
24.8 KB 900×483
そして、プラグインEWWW Image Optimizerで品質を100にしてjpgからwebpへの自動変換（ 問題あり ）
38.8 KB 768×412
EWWW Image Optimizerで品質100で変換したにも関わらず、WEBP変換ツールの方が容量が小さいのに高品質。
EWWW Image Optimizerの方は「輪郭」が「ぼわぼわ」しています。(SWANSの文字が分かりやすいかしら)
で、一番困ったのがEWWW Image Optimizerだとどんなに設定しても自動リサイズしてしまうこと。オリジナルが900pxなのになぜか768pxになっちゃう。
とりあえずプラグインのインストールから。
プラグインの適用から話します。
EWWW Image Optimizerプラグインをインストール。最適化と無料にチェック、続いてそのままクリック。次もそのままクリックでEWWW Image Optimizerが使えるように。
EWWW Image Optimizerの設定で基本タブにて、WebP変換にチェックを入れて、Webpの配信方法に載っている記述を、.htaccessの一番上に張り付けて保存。EWWW Image Optimizerで変更を保存。更新。これでブログ内にwebpが表示されるように。ただアップロードができません。
よって、ファンクションphpにyuki.worldさんの記述を入れます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
// webp許可 function custom_mime_types( $mimes ) { $mimes['webp'] = 'image/webp'; return $mimes; } add_filter( 'upload_mimes', 'custom_mime_types' ); // メディアでWebP画像サムネイル表示 function webp_is_displayable($result, $path) { if ($result === false) { $displayable_image_types = array( IMAGETYPE_WEBP ); $info = @getimagesize( $path ); if (empty($info)) { $result = false; } elseif (!in_array($info[2], $displayable_image_types)) { $result = false; } else { $result = true; } } return $result; } add_filter('file_is_displayable_image', 'webp_is_displayable', 10, 2); |
コピペしたら保存。WP Fastest Cacheの設定からキャッシュをオールクリアしておく。
これで、ローカルからwebp画像をアップロードすることが可能となり、ダッシュボードのメディア内でもwebp画像が表示されます。
EWWW Image Optimizerの設定で、
基本タブ > Enable Ludicrous Mode をクリックしてメニューを全て表示させます。
基本タブにて、画像のリサイズを 0 × 0 にして、Webp品質を100にして変更を保存。
続いてリサイズタブにて、 「既存のメディアライブラリの画像のサイズ変更を許可します」のチェックを外します。そして変更を保存。
この状態で、jpg画像をアップロード。アップロードした画像を記事内に普通に貼り付けましょう。
記事を公開して記事にアクセスして確認してみましょう。画像を試しにローカルに落としてみてください。拡張子がwebpになっているのがわかると思います。
しかし、ここで問題。幅900pxの画像だったのに勝手に768pxにリサイズされてしまっているのです。
基本タブにて、遅延読み込みの自動スケーリングのチェックを外し、画像が表示領域に入った（）時にだけ・・・のチェックを外す。
すると記事にアクセスして画像を落とすとjpgになってしまっている。なんだこりゃ？？？
どうやら遅延読み込みをONにしないとwebpが表示されない仕組らしい。（本当か？）
ついでに当然ですが、「ほかのブラウザでは元の画像を提供し対応するブラウザ用では画像を次世代の形式に変換します」のチェックを外すとブラウザ上でwebpにすらなりません。
ちなみに、
EWWW Image Optimizerは、基本jpegやpngでアップロードして記事に貼り付けて公開すると、見ている人のブラウザがwebpに対応しているならwebpで配信されており、見ている人のブラウザがwebpに対応していないなら元の画像であるjpgなどで表示される仕組み。
ただ、2021年現在対応していないブラウザって既にオワコン的なインターネットエクスプローラー(IE)くらいなもので・・・。
あと、もともとアップしていたjpg等の画像も一括でwebp画像のコピーを作り出すことが可能。しかも作ったあとは自動で上記の仕組みが採用されるのでラクチン。（逆に考えると、既存のjpg等の画像は一生使われなくなるのにサーバー内にずーっと残ってしまうということに・・・そのうち一括削除？）
まぁ、とりあえず勝手にリサイズ問題が解決できないとEWWW Image Optimizerを使ってこのブログの過去の画像の一括変換は危険すぎて使えません。
とりあえず、今後の記事で使う画像についてはローカールでwebpにしてからアップロードということになりそうです。
あ、ケガの功名というか
WINGには専用の遅延読み込みプラグインが別途用意されていてONにしていましたが、
EWWW Image Optimizerにも遅延読み込み機能があり、ONになっていました。
競合です。
さて、どうするか。
→ 構造化データのイメージオブジェクト問題があるので、とりあえずLazyLoad SEOをONにして、EWWW側をOFFにしましたところ、googleのリッチリザルトテストでは問題はなかったのですが、表示をスマホ等で確認すると明らかに画像出現が遅いことが判明。よって、LazyLoad SEOを無効化にして、EWWW側の遅延読み込み機能をONにしました。この場合だと画像出現が遅いことはありません。またリッチリザルトテストでも問題ありません。）
古いフォトショップで横900pxにトリミングして、保存品質を100 / 70 / 40 で保存。
その保存したJPGを、SYNCERさんでwebpに変換。以下は返還後の大きさです。
| jpg品質 | jpg容量 | webp容量 |
|---|---|---|
| 100 | 415 KB | 93 KB |
| 70 | 220 KB | 92 KB |
| 40 | 89 KB | 86 KB |
単純に、品質100の webp ( 93KB ) が最高ということになりますが、実際はそうではありません。
以下、品質40の jpg ( 86KB ) と、品質100の webp ( 93KB ) を並べて比較したところ、パソコンの10年前の液晶パネルで確認した結果では、輪郭がくっきりしているのは品質40の jpg ( 86KB ) でした。
ただし、
実際に画像をこの記事にアップロードしてみると、輪郭を捉えているのは40の方ですが、塗りの部分は100→webpの方が良いです。
全体的には、100→webp変換の方が画像が良いという結果に。
これからは100jpg → webpに変換したものをアップロードすることに決めました。
単純に、ブログにwebp画像しかアップしていないと、webp画像に対応していないブラウザでこのブログを見てもらったとすると画像がリンク切れを起こしたような状態で表示されません。ALTに指定した言葉が表示されるのみ。
それを回避するために、EWWWでは過去にアップロードした画像のwebpコピーを生成し、ブラウザ非対応ではjpgを表示し、ブラウザ対応であればwebpを表示する機能が完備されています。
ただし現在で対応していないのは既に更新が終了したIE(インターネットエクスプローラー)のみですので無視して良いです。
あとはイラレやフォトショでは直接webp画像を編集できないみたいですが、カメラで撮影したデータ形式はそもそもJPG形式であり、jpgで編集保存してからwebpに変換するので特に私は問題としておりません。
上：40jpg
下：100jpg → webp
一番下：100jpg
私のフォトショップ（しかもエレメンツ5）は古いのでwebp保存が無いんですよねぇ。
現在のフォトショップは買い切り版が無くサブスクリプションで月々2,780円。一年で33,360円が毎年発生って・・・。
Affinity Photoかしら。うーむ。
ちなみに、jpg写真を品質100jpgとPNGで保存してそれぞれwebpに変換してみましたが、画質はほぼ変わらず。容量もほぼ変わらず。であれば容量が小さいjpg保存で良いのではと。