WebPがWordpressで扱えるようになった

バージョンアップにより、WebPが対応。世の中もきっとWeb画像の標準になり始める気がする。

そして同時にIEが非対応になり、Web業界はだいぶ嬉しい声が多いよう。Windowsも2022年に終了するので、ようやくIEによるさまざまな問題が回避できることになる。日本におけるWeb業界は一つの区切りになるのではないでしょうか。

ただ、開発者が知っていても、IEユーザーが知らないというのが厄介だけど、Windowsがお知らせしてるから、流石にもう移行してくれるでしょう。。。

ということで、そろそろWebP対応に切り替えようと、アップロード用の画像を軽量化だけでなく、WebPに切り替えるため方法を探る。

• WebP変換ツールを使う
• Photoshopにプラグインを入れる

どちらかになる。毎度Photoshopで書き出しているので、今回は後者でやってみた。→2022年2月プラグインが不要になった。

PhotoshopでWebP書き出し｜静止画像の変換のみ

Photoshopで扱えるようになってよかったものの、ちょっと手間がかかることに気づく。基本的に画像のフォーマット変換であって、Photoshopデータから直接書き出しはできなかった。

プラグインの導入（ver.23.2から不要）

プラグインのインストールは、参考サイトをちゃんと読めば問題なく簡単に行える。ちなみに、2021年11月現在、Photoshop2021（ver.22）までしか対応していないので、Photoshop2022（ver.23）では使用できない。。

画像変換

jpeg、png、HEICは別名保存でOK。

色々確認してみると、作成したpngとgifの変換できない。よく確認すると、カラーモードがインデックスになっていたので、RGBに変換すればWebPに変換が出来る。

また、Photoshopデータからの別名保存・書き出しもできない。

ということで、作成・加工したデータはjpegに書き出して変換しなければいけないので、現段階ではちょっと不便な点もある。ドロップレットを作っておけば、ドラック＆ドロップで変換できるので、基本的には便利なのですが。。

Web用に保存で選択できるととても助かるのになぁ。数年後には改善されているような気がする。期待してます。

見た目には問題ない上に、とても軽量。（jpegとWebPをスクショして、それをWebPにしているので、画質比較にはなっていない気がする。。）

gifアニメの変換が出来ない（要別ソフト）

WebPはアニメーションも対応しているとのことで変換しようと思ったら、アニメーションの変換が出来ない。

本家の変換ツールでも静止画になってしまう。

他のサイトでは、出来たけれど、かえって大きいサイズになってしまった。

本家からインストールなどもあったけれど、ターミナルでインストール・変換出来るということを知り、brewというプログラミング領域まで進む。

必要なものをセットでインストールしてくれるらしく、今後のためにインストールしてみた。色々ダウンロードしまくったけれど、こちらにしておけばよかった。

ビールアイコンで教えてくれる。

そうしてようやく、ターミナルでの変換が出来る状態になったものの、肝心のgif変換が出来ない。

gif2webpのコマンドが通らず、「command not found」となってしまう。どうしてなんだい。

他にもいらっしゃるけれど、結局分からない。

ファイル形式を見直す機会なのか？とりあえず、gifアニメはそのままで使用することに。

やり方はあるので、いずれ挑戦予定。

WordPressでのWebP注意点｜ライトボックスプラグインの対応

画像はライトボックスを使用しているが、WebP画像だけページ表示になってしまうことに気づく。

確認すると、間違いなくWebPのみページ表示なり非常に困る。

今まで使っていたのは、Responsive Lightbox & Galleryというもの。

多分WebP対応がされていないと思われ、別のものを検討。WebP対応しているものを探してみたところ、Easy FancyBoxがよかった。ちゃんとWebP対応と書かれているし、表示も今現在表示される通り。

デフォルトで使っていたら、gifアニメがページ表示！と思ったら、追加の設定が必要と知る。助かりました。

Simple Lightboxというのも試しに使ったが、こちらもライトボックス仕様にならなかった。カスタマイズできるプラグインゆえに、WebP対応は難しいのかなという印象。

WebPを扱えるようになって、ファイルサイズを修正したりする必要もなくなり、結構楽になった。かつ、画質も綺麗で軽量化が出来るので、ウェブページ表示もスムーズ。Photoshopがあれば、Wordpressのプラグインも不要でなお良い。Photoshopがなくても、本家のブラウザアプリで変換できるので簡単。

今後は5Gがまだでも、綺麗な画像がウェブで増えていくので、表現の仕方がまた増えそう。