記事上 共通・夏サマー

スマホの写真で!免許更新。
自分で撮影した写真で、印象の良い免許証。
かんたん!ヘッドライト磨き
ポリッシャーで簡単ヘッドライト磨き
2024年「もちこみ」オイル交換の工賃。ジェームス・オートバックス
ジェームスとオートバックスのオイル持ち込み交換工賃。
男の化粧水、コーセー雪肌精
男の化粧水、コーセー雪肌精

両方_B_両方_タイトル下_600-300

本文、ここから

本文スタート

パソコン・周辺機器

webp化の問題。勝手にリサイズ設定。EWWW Image Optimizer

2021年6月19日

 

すみません。管理人メガネちゃんの備忘録になります。

webp化でEWWWの設定に困っているというお話です。

 

使用しているテーマは、WING(アフィンガー系)

 

例えば、以下のゴーグルの写真( モデルは私 )

99.1 KB   900×483

webpのテスト001

 

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さんの記述を入れます。

コピペしたら保存。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 ) でした。

jpgとwebpを比較

ただし、

実際に画像をこの記事にアップロードしてみると、輪郭を捉えているのは40の方ですが、塗りの部分は100→webpの方が良いです。

全体的には、100→webp変換の方が画像が良いという結果に。

これからは100jpg → webpに変換したものをアップロードすることに決めました。

 

単純に、ブログにwebp画像しかアップしていないと、webp画像に対応していないブラウザでこのブログを見てもらったとすると画像がリンク切れを起こしたような状態で表示されません。ALTに指定した言葉が表示されるのみ。

それを回避するために、EWWWでは過去にアップロードした画像のwebpコピーを生成し、ブラウザ非対応ではjpgを表示し、ブラウザ対応であればwebpを表示する機能が完備されています。

ただし現在で対応していないのは既に更新が終了したIE(インターネットエクスプローラー)のみですので無視して良いです。

あとはイラレフォトショでは直接webp画像を編集できないみたいですが、カメラで撮影したデータ形式はそもそもJPG形式であり、jpgで編集保存してからwebpに変換するので特に私は問題としておりません。

 

上:40jpg

下:100jpg → webp

一番下:100jpg

jpg画像

webp画像

jpg画像最高画質

 

私のフォトショップ(しかもエレメンツ5)は古いのでwebp保存が無いんですよねぇ。

現在のフォトショップは買い切り版が無くサブスクリプションで月々2,780円。一年で33,360円が毎年発生って・・・。

Affinity Photoかしら。うーむ。

 

ちなみに、jpg写真を品質100jpgとPNGで保存してそれぞれwebpに変換してみましたが、画質はほぼ変わらず。容量もほぼ変わらず。であれば容量が小さいjpg保存で良いのではと。

 

 

アドセンス 8個 mix

-パソコン・周辺機器