WebM を PNG に変換

このページの読者は JPG のページより狭い層です。何かを説明しているのではなく、証拠を作っています。バグ報告にはエラー文言そのものが見える必要があります。サポートチケットには隅のフィールド値とタイムスタンプが必要です。手順書には、クリックすべきメニュー項目が必要です。この 3 つすべてで、中の文字が鮮明でなければ画像は役に立ちません。

これが JPG より PNG を選ぶ理由のすべてです。どちらも同じ解像度で復号された同じコマから始まりますが、JPG はその上にさらに自前の圧縮を重ね、それはまさに文字と背景が接する場所でいちばん強く効きます。PNG はデコーダーが作ったものをそのまま保存して止まります。ファイルは大きくなりますが文字は読め、この読者にとってそれはそもそも取引ではありません。

可逆というのは、これ以上何も捨てられないという意味です。コマが汚れのないものだという意味ではなく、それはあえてはっきり言っておく価値があります。この絵は、すでにほとんどの労力を動きのために使い切った動画コーデックを通って届いています。そこで生じた柔らかさは、この変換が画素に触れる前にすでに焼き込まれています。

ですから PNG は動画に対する改善ではなく、劣化を追加しないというだけのことです。何も動いていない瞬間の静的なインターフェースでは、それはその時に撮っていたはずのスクリーンショットとほぼ同じものになります。スクロール中やウィンドウのアニメーション中のコマでは、にじんだコマの正確な複製が手に入るだけです。それはタイムスタンプを動かす理由であって、形式を変える理由ではありません。

開始からの秒数を入力してください。既定の 0 は画面録画ではほぼ間違いなく正解ではありません。録画は動作より前に始まるからです。デスクトップや読み込み中のページ、マウスへ手を伸ばす様子が写ります。

証拠にとってはもう一つ考慮すべき点があります。有用なコマは、たいてい出来事の最中ではなく直後です。エラーダイアログが現れる瞬間はアニメーションと圧縮ノイズの瞬間で、その半秒後にはそれは静止しており、コーデックはそれを正しく描く時間を得ています。最初の試みが柔らかければ、鮮鋭化フィルターに手を伸ばす前に、0.5 秒足してもう一度変換してください。

画面録画にはまったく違う二種類の瞬間があります。何も動いていないとき、動画コーデックはほぼすべてのビットを 1 コマに使ってあとは休めるので、静的なインターフェースは非常によく描かれます。ビットレートから期待するより良く出ることも多いです。ページがスクロールすると、すべての画素が同時に変わり、同じビットレートで画面全体をまかなわなければならず、ディテールは崩れます。

これが、スクロール中に取ったコマがコピーのコピーのように見え、その 2 秒後に取ったコマが完璧に見える理由です。良いコマがまったくない録画に見えるなら、たいてい解像度に対してビットレートが低すぎる設定で撮影されています。修正は撮り直しで、より高い設定で録画することです。後段の何をしても、最初から符号化されなかったものは戻せません。

ブラウザーで録画した動画はほぼ例外なく 4:2:0 です。明るさのディテールはフルですが、色は各方向で半分の解像度でサンプリングされます。写真ではこれは見えず、それがデジタル動画の初期からずっと標準であり続けている理由です。

画面上では話が違い、この読者が気づく唯一のアーティファクトです。コントラストのある背景の色付き文字——赤いエラー文言、構文強調されたキーワード、色付きバッジ——は色チャンネルに柔らかい縁を持って届き、PNG はそれを忠実に保存します。忠実に保存することは正しい振る舞いです。それが録画に実際に含まれている内容だからです。それはまた、画面キャプチャの静止画がその時に撮ったスクリーンショットとぴったり一致することは決してない理由でもあり、良いコマを探して 20 分費やす前に知っておく価値があります。

PNG は何も捨てないので、フル解像度のコマは相応の大きさになります。インターフェースの内容はよく圧縮されます。単色の広い平坦な領域は PNG が設計された場面そのものだからです。1080p の画面キャプチャの 1 コマは典型的に数百キロバイト前半に収まります。写真やカメラ映像を含むコマは数メガバイトに達することがあります。

符号化のあと、画像は 1 画素も変えずに、より効率よく書き直す最適化パスを通ります。960 かける 640 の写真で測定したところ 1,366 KB から 468 KB になり、追加でかかった時間は約 0.5 秒でした。このページから出てくる PNG が、PNG にしては通常より大きくならない理由がこれで、可逆な再圧縮なので忠実度は一切犠牲になりません。

手順書の作業は、1 本の録画から複数のコマを取り出すことを意味します。メニュー、ダイアログ、確認画面など。それぞれ別の変換になり、タイムスタンプを設定して変換、ダウンロード、数字を変える、という手順を数秒ずつ踏みます。その間に端末から何も出ていかないためです。

デモを意図的に撮ることで、この作業はずっと楽になります。取りたい状態それぞれで一拍止めてください。その一拍がコーデックにとって落ち着く時間になり、6 枚のきれいな静止画と、きれいな 1 枚を探し続ける 6 回の試行との違いを生みます。

自分の画面の録画は、その性質上、その時画面にあったすべての録画です。別タブの受信箱、隅に映った顧客名、Slack の通知、実演していた社内ツールなど。動画全体を変換サービスに送って 1 コマだけを受け取るのは、欲しくなかったコマまで全部渡すことになります。

ここでは WebM がブラウザーがすでに持つコーデックでこのタブの中で復号され、1 コマだけが符号化され、動画を運ぶものは何も送信されません。確認は 10 秒で済みます。開発者ツールを開き、ネットワークタブを見ながら変換してみてください。この組み合わせでは一度確かめておく価値があります。