Safari、WebPに対応するってよ

はじめまして、クリエイティブチームでマイナチュレのWeb周りを担当しているまっつです。

今回は先日のWWDC 2020の発表にあった「Safari 14」の新しい仕様のひとつ、WebPのサポート追加に伴い、多くの制作現場に影響を与えると思い、今秋に向けてどのような対応ができるか、様々な実装方法があるなかでなるべく簡潔なことを自分なりにまとめました。

■そもそも「WebP」とは？

「WebP（ウェッピー）」とは、2010年9月30日に公表された、Googleが開発しているオープンな静止画像のフォーマットです。
ファイルの拡張子は「.webp」。同一画像、同一画質のJPEG形式比較してファイル容量は25-34%小さく、可逆圧縮モードでPNGと比較して28%小さくなると言われています。GIF同様に256インデックスカラーもアニメーションにも対応し、PNGのような透過も可能です。

WebPは、Chrome、Firefox、Microsoft Edgeなどのブラウザでサポートされていますが、Safariでサポートされていなかっため、PageSpeed Insightsで「WebP」にしたほうがいいですよ、と改善案を提示されても、運用する際はWebP + その他拡張子で更新が必要なためコストがかかったり、現在では日本のiPhoneユーザーは60%以上と言われ、Safariを利用している方には恩恵がないことから、WebPの導入を躊躇している企業も多かったと思います。ここだけの話、弊社ブランドのマイナチュレサイトでは一部WebPを導入しているんですが、正直運用が大変です。。笑

ですが、マイナチュレではIEを非対応にしておりますので、今秋リリース予定の「Safari 14」になればWebPのみでの構築が可能になります！待ち遠しいです。

■WebPに対応するメリットは？

まずひとつ目は、前述の通りページを軽くして読み込みを高速化することで、ユーザー体験を向上させることです。離脱を防ぎ滞在時間の増加に繋がりますし、モバイルユーザーの通信量の節約にも寄与します。

ふたつ目は、画像を軽量化することで別の機能追加にファイル容量などのリソースを割く余地を作れることです。サイトを運営していると、さまざまな機能を追加したくなりますが、無遠慮に足していけば重くなり、パフォーマンスは悪くなります。ページの読み込み速度はGoogleの検索ランキングのシグナルとして利用されているため、遅いページは悪い影響を受けると言われております。Googleが提供するウェブページのパフォーマンスを測定するツール「PageSpeed Insights」のスコアで基準値を定め、機能を追加してもパフォーマンスがその基準値を超えないようにするなどの運用方針を決めると良いと思います。

■WebPの実装方法

新規サイトでWebPを実装する場合は、srcにそのまま「.wepb」の画像を読み込ませれば問題ないのですが、既存サイトだと規模によってはsrcを書き換えるだけでも大変だったりします。そこで既存サイトにWebPを実装するいくつかの方法をこちらにまとめます。
※IE非対応な環境を想定しています

【手順1-1】フリーのサービスを使ってWebP画像を作成
デザインを作る上でAdobe製品を使ってる方も多いかと思いますが、残念ながら現時点でWebPのサポートがされておりません。ですが、Photoshopは無料のプラグインが配布されておりますので、以下のプラグインを導入すればWebPの書き出しも可能になります。

・ WebPShop
https://github.com/webmproject/WebPShop

また、一括で変換してくれるサービスもあるので、いくつか下記にリンクを貼らせていただきます。

・ XnConvert
https://www.xnview.com/en/xnconvert/
Windows/MacOS/Linuxに対応しています。様々な拡張子にも対応し、一括変換なども可能です。

・WebP Converter. （Mac専用）
https://apps.apple.com/jp/app/webp-converter/id1522368690
自分はこちらを使用してます。Mac専用ですが、個人的に使いやすく、XnConvertと同様に、様々な拡張子に対応し、一括変換可能です。

【手順1-2】gulpでJPG、PNG、GIF画像を一括でWebP変換
gulpを採用している環境に依存しますが、プラグインを使えばタスクランナーで一括書き出しも可能です。
まず必要なパッケージをnpmでインストールします。

npm install --save-dev gulp gulp-rename gulp-webp

gulpfile.jsに変換処理のタスクを記載します。
画像の読み込み先、書き出し先は環境にあわせて変更してください。

const gulp = require("gulp");
const rename = require("gilp-rename");
const webp = require("gulp-webp");

gulp.task("convertWebp", function() {
 return gulp
   .src(["assets/img/*.{png,jpg,gif}","assets/img/**/*.{png,jpg,gif}"], {base:"assets/img"} )
   .pipe(rename(function(path) {
     path.basename += path.extname;
   }))
   .pipe(webp())
   .pipe(gulp.dest("assets/dist/img"));
});

【手順2-1】拡張子を「.webp」に変更する

サイトが小規模だったり、LP等のページであれば手動で置換して問題ないかと思います。

<img src="img/mv.webp" alt="メインビジュアル">

もしIE11も対応する場合はフォールバックでpictureタグを設置すると良いかと思います。

<picture>
 <source type="image/webp" srcset="img/mv.webp, img/mv@2x.webp 2x">
 <img src="img/mv.png" alt="メインビジュアル">
</picture>

【手順2-2】htaccessでJPG、PNGファイルをWebPにリダイレクトさせる

以下の条件がマッチする場合、WebPファイルの内容を返す処理を.htaccess
ファイルに記載します。

・Apacheサーバーを使用している
・JPEGやPNGファイルにアクセスがあった時
・同名のWebPファイルがアップロードされている

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{HTTP_ACCEPT} image/webp
RewriteCond %{REQUEST_FILENAME} (.*)\.(jpe?g|png)$
RewriteCond %{REQUEST_FILENAME}\.webp -f
RewriteCond %{QUERY_STRING} !type=original
RewriteRule (.+)\.(jpe?g|png)$ %{REQUEST_FILENAME}.webp [T=image/webp,E=accept:1,L]
</IfModule>
<IfModule mod_headers.c>
Header append Vary Accept env=REDIRECT_accept
</IfModule>
AddType image/webp .webp

※環境によって記述が変更になる場合がございます

最後に

WebPの実装方法はいろいろありますが、中でもかんたんなやり方をピックアップいたしました。
今後WebPが主流になっていくのは間違いないかと思いますが、画像によってはその他拡張子のほうが軽くなったりするそうです。
画質・ファイルサイズ・運用コストを考えた採用方法を決めていくのがよいかもしれませんね。