コミュ障だから明日が僕らをよんだって返事もろくにしなかった

何かを創る人に憧れたからブログをはじめたんだと思うよ

うぇっぴー

うぇぶでぽいんとをためる

おはようございます。僕です。今日もWebを使ってポイントをためていきましょう。本日ご紹介するポイント系の例のアレは……。


という出だしで文章を書いていたのですが件のうぇっぴーって別にポイントサイトでもないです。

WebP(ウェッピー)は、米Googleが開発しているオープンな静止画フォーマット。ファイルの拡張子は「.webp」。

2010年9月30日に仕様が公表され、各種ツールと共に提供が開始された。
ウェブサイトのトラフィック量軽減と表示速度短縮を目的としており、インターネットのWebページで広く使われている非可逆圧縮JPEG可逆圧縮のGIF、PNGの置き換えを意図する規格である。JPEGとは異なり、非可逆圧縮でもアルファチャンネルを扱える。

「jpg」とか「png」とかの画像フォーマットです。最近いろんなところでよく見るようになってきたけどまだ扱いづらいので利用のまとめとか書くことにしました。どうでもいい話ですがこれ「ウェッピー」ってよむんですね僕はWikiみるまでウェブピーとか読んでた。


実際につかってみる

実際に使うとこんなかんじ。IEとか未対応ブラウザだとpngが表示されます。




ブラウザ上では結構対応しているんだけど、Webサービス上で使えるとこがなくてちょっと使いづらい。このファイルも公開するためだけにdropbox使ってるし……。dropboxサクッと公開するのに便利なんだけど無料枠2GBしかないのでもうちょい大きめの容量で簡単に公開できるストレージなりを探してこないといけない。Amazon S3とかが脳裏をよぎるけどあれの無料枠どこまでなのかいまいちよくわからんのでなかなか手を出せない……。

ちなみに表示のためのpictureタグの使い方は以下の通り。別にimgタグでもいいんだけど対応してない場合にはこう使うといいらしい。

<picture>
  <source srcset="ソース.webp" type="image/webp">
  <img src="ソース.png" type="image/png">
</picture>

これを使うのに、pictureタグの存在をはじめて知った。

switch ソース:
 source type属性、media属性
  画像ファイル
 default
  img表記 画像ファイル

こんなノリでユーザエージェントごととかに画像の表示を振り分けられるとのこと。言語不明の謎switch構文で書いているけど使い方はなんとなく察して。詳しくはMDNのドキュメント参照。
<picture>: 画像要素 - HTML: HyperText Markup Language | MDN


実際につくってみる

さて、ブログなんかでの利用の仕方が分かったので実際につくってみることにします。ということでこのように書きだした漫画を一括でwebpに変換するなどをやっていこうと思います。
f:id:andron:20190821114056p:plain
なんで題材が漫画なのかというとwebpファイル、漫画のデータ扱うのに使えないかなって魂胆で選んでます。その辺の画像貼るだけだとあんまり画像サイズ大きくならないし、ブログなんかに差し込むには手間だし、なにより軽量化感を実感できないんですよ……。

んで、変換にはffmpegを使っていきます。

for f in *.png
  do ffmpeg -i $f page_$f.webp # 元の拡張子不要の場合は${f%.*}
done

f:id:andron:20190821120448p:plain
これで変換できました。仮で作ったサンプル、サイズが半分以下になりました。


バッチでつくると多分こんな感じ

@echo off
for %%f in (*.png) do (
    ffmpeg -i %%f page_%%f.webp
) 

関連:ffmpeg
inujini.hatenablog.com



という感じでウェッピーとかいう画像形式があるんだそうです。



おわり