始めに
「これからはWebP(ウェッピー)」みたいな記事を数年前に読んだ記憶があります。
WebPはGoogleが開発した画像フォーマットです。
へーそうなんだぁ…くらいで特に意識せずにいると、Webサイトの解析をPageSpeed Insightsなんかで計測した際に画像に関しては「次世代フォーマットのWebPを使ってね」といった指摘があげられることがあると思います。
サイトの表示スピードは画像関係だけにあらずレンタルサーバーのスペックやスクリプト等いろいろ原因がありますが、画像サイズについての改善点が上げられている場合、WebPを使えばWebサイトのパフォーマンスが改善される＝高速なサイトになる＝SEOとしても有利になる。
といったことで、積極的にWebPを使っていこう。というのが今回の記事です。
そこで、デザインツールとして覇権を取っているといっても過言ではないFigmaを使ったWebP形式での画像出力についてご紹介していきます。
Figmaから直接WebP形式で画像を出力する方法
Figmaでは現状WebPでの出力は標準対応していません。
そこでOlive Pressというプラグインを使います。
Figmaのダッシュボードのプラグインのメニューから検索し、Runをクリック
このようなメニューが立ち上がるので、WebPで出力したいオブジェクトを選択した状態で、「＋」アイコンをクリック。
「＋」アイコンの横のセレクトボックスをWEBPに合わせて、「Compress」を押すことでWebP形式での出力が可能になります。
さらに、設定メニューから圧縮率等も選択できるようになっています。
単純にjpg等の画像をWebPに変換するならFigmaからそのまま利用することができるOlive Pressがオススメです。
ではpng形式のような透過情報を持つファイルをWebPで維持したままFigmaから出力したい場合はどうでしょうか？
次の項目でご紹介します。
Figmaを使ってpngのように透過情報を維持したままWebP形式で出力する方法
結論から書くと、現時点では見つかりませんんでした。
WebP自体はpngと同様透過にも対応しています。
しかしOlive Pressの設定にtransparentといった感じの項目は見つかりません…。
今後対応されるかもしれませんが、Figmaから直接透過情報を維持してWebPへの変換は諦めました。
そこでお世話になったのが本家Googleが提供しているSquooshとなります。
使い方は簡単。pngファイルをドロップ(今回は透過情報を維持したWebPの作成が目的なので)します。
CompressをWebPにし、Preserve transparent dataにチェックを入れて、Downloadボタンをクリック。
これだけでpngの持つ透過情報を維持した状態でのWebP形式への変換が可能となります。
さいごに
Figmaから直接ではなくてもこんなに少ないステップでできるのであれば妥協範囲内だなというのが私の意見です。
同じくFigmaからWebPへの出力に対して透過情報を引き継ぐためにはどうすれば？という方の参考になると幸いです。
