Joomla

.webpの準備をしよう

2019/04/05

Webp拡張子ってなに？

使っているツール（Adobe）にこんな拡張子の書き出しなんて見た事も無かったのでつい最近まで知りませんでした。
WebPフォーマットは、WebMビデオフォーマットに関するGoogleの取り組みから生まれ、2010年に発表されました。目的は、既存のJPEGフォーマットと比較して、より小さなファイルでも同等の品質を持つオープンスタンダードなのだそうです。（10年近く前からあったとは。）

【ファイルサイズ】
JPEGと比較して最大25％-34％圧縮
PNGより最大45％のサイズ縮小
そして再圧縮されたPNGより最大28％縮小

【非可逆、可逆、および透明度のオプション】
WebPは、非可逆および可逆の両方の圧縮に使用できる
また透明性のオプションも提供

こんな良い事尽くめなら使うしかないでしょう！

対応ブラウザー

IE11とSafariは未対応！
IE11はedgeに何れ入れ替わる為今後も未対応でしょうし、iPhon等iOSの利用が多い日本での導入はまだ早いのかな？
導入にはpictureタグを使って、下記のように記述をします。

<picture>
  <source type="image/webp" srcset="sample.webp" />
  <img src="sample.png" width="400" height="400" alt="サンプル画像" />
</picture>

しかし、このpictureタグはがIE11とOpera miniに対応していない。

.htaccessファイルで自動適応させる

下記の一括変換サイトでダウンロードすると.htacessファイルも一緒に同封されています。これをサイトに設置するだけで自動振り分けされるはずです。
webp拡張子の物も一緒にサーバに置いておけば、対応のブラウザには優先的にwebp画像が表示され、非対応のブラウザにはその他の拡張子の画像が表示されます。
下記のコードは一例です。サーバの仕様により多少の違いが有る様です。

# .htaccess example to publish alternative WebP files.

<IfModule mod_setenvif.c>
  SetEnvIf Request_URI ".(jpe?g|png|gif)$" _image_request
</IfModule>

<IfModule mod_rewrite.c>
  RewriteCond %{HTTP_ACCEPT} image/webp
  RewriteCond %{SCRIPT_FILENAME}.webp -f
  RewriteRule .(jpe?g|png|gif)$ %{SCRIPT_FILENAME}.webp [T=image/webp]
</IfModule>

<IfModule mod_headers.c>
  Header append Vary Accept env=_image_request
</IfModule>

<IfModule mod_mime.c>
  AddType image/webp .webp
</IfModule>