Help us understand the problem. What is going on with this article?

-今話題の記事を読んで気になった- 「WebP画像形式」とは??

More than 1 year has passed since last update.

リニューアルした日経電子版が高速すぎてヤバイ件
皆さんお読みになりましたか?
社内ではFastlyすごーい!!!って話が大きく感じましたが
フロントに関係しそうな最後の方に出てくるWebPについてちょっとまとめてみました。


WebPについて

【WebP画像形式とは】

WebP_Logo.png

米Googleが開発している静止画フォーマット。
ウェッピーって読むらしいですよ。可愛いですよね。
ファイルの拡張子は .webp
採用することでWebサイトの表示速度短縮やトラフィック量の節約が期待できます。

PNG/GIF/JPEG画像形式と比べてのメリット

  • JPEGと比較してファイルサイズが25-34%小さくなる(非可逆圧縮モード)
  • PNGと比較してファイルサイズが28%小さくなる(可逆圧縮モード)
  • JPEGとは異なり、非可逆圧縮でもアルファチャンネルを扱える
  • エンコードは PNG よりも時間がかかるけど、デコードは PNG よりも高速

対応ブラウザ (2018/10/18 現在)

  • WebP lossy support
    • Google Chrome (desktop) 17+
    • Google Chrome for Android version 25+
    • Opera 11.10+
    • Native web browser, Android 4.0+ (ICS)
  • WebP lossy, lossless & alpha support
    • Google Chrome (desktop) 23+
    • Google Chrome for Android version 25+
    • Opera 12.10+
    • Native web browser, Android 4.2+ (JB-MR1)
    • Pale Moon 26+
  • WebP Animation support
    • Google Chrome (desktop and Android) 32+
    • Opera 19+

【HTMLに埋め込むには】

img要素にWebPファイルを指定することもできるけど、そうするとChromeでしか画像を表示できません。

対応ブラウザーにはWebP画像を表示させ、未対応ブラウザーにはフォールバック用画像を表示させたい!!!

そんなときは、picture 要素を使います。(初めて知った)

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

picture要素のなかにimg要素を含めます。
alt 属性や width 属性・height 属性はimg 要素にのみ記述します。

そうするとWebP画像対応ブラウザーではsource要素に指定した画像が優先され
img要素内の src 属性が srcset 属性の内容に差し替わるようになります。

picture要素自体のブラウザ対応はIE以外は基本的にOKみたいです。
(2018/10/18 現在)
スクリーンショット 2018-10-18 15.00.12.png

今後EdgeでもWebP画像が対応してきたらもっと利用が広がっていくのかなって思いました。


WebPファイルを作るには

【GulpやGruntのプラグインを使う】

【フォトショのプラグインもあるよ】

【GUIで変換出来るツール】

株式会社ICSさんではGUIの変換ツールを作っていたそうです!!

「せめて手軽にWebPを作れるツールが欲しい」と思い、デスクトップアプリケーション「WebP画像を作る君」(英語名は「WebP Converter」)を開発し公開しました。

WebP画像を作成できるアプリ「WebP画像を作る君」を公開
(本記事はこちらのサイトを参考文献とされていただき書き上げました。)

いつかこういうの作れるようなエンジニアになりたいです...


参考文献

mikimhk
デザインシステム構築・アクセシビリティ向上頑張りたいUXエンジニア 好きなカラーコードは#c69
crowdworks
21世紀の新しいワークスタイルを提供する日本最大級のクラウドソーシング「クラウドワークス」のエンジニアチームです!
https://crowdworks.co.jp/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした