Webpの向き不向き

Webpの向き不向き

WebpにはLosslessとLossyの2つのオプションがある。常識的に考えて、Losslessはファイル容量がデカくなりがちで、ファイル容量を小さくしたければLossyを使えばいいと思うが、意外とそんなことないので、用途を考えて使い分けましょうという話。

ウェブ用の画像形式 | WebP | Google for Developers
ウェブ用により小さい画像を作成するこの画像形式の詳細や、G4 Converter のダウンロードやサポートのためのリンクを確認できます。

最近、ScanSnapのix1300で本をスキャンするようになった。白黒の最高解像度でスキャンをする場合、PDFで画像が出力される。PDFよりも汎用的な画像ファイルのほうが都合がいいので、pdfimagesで画像を抜き出している。

PDFから画像をTiffで抜き出す

PDFが一個だけ

$base = (Get-Item *.pdf).BaseName; pdfimages -tiff *.pdf temp; Get-ChildItem temp-*.tif | ForEach-Object { Rename-Item $_ ($_.Name -replace '^temp-',"$base-") }

複数PDF

Get-ChildItem *.pdf | ForEach-Object { $base = $_.BaseName; pdfimages -tiff $_.Name temp; Get-ChildItem temp-*.tif | ForEach-Object { Rename-Item $_ "$base-$($_.Name -replace 'temp-','')" } }

Lossy Webpに変換

そのまま出力してもあまり使いやすくないので、TIFFに出力し、それをcweb.exeでWebpに変換している。

Get-ChildItem *.tif | ForEach-Object { cwebp -q 82 -m 6 -af -mt "$_" -o "$($_.BaseName).webp"; if($LASTEXITCODE -eq 0) { Remove-Item $_ } }

深く考えずに、Lossy Webpに変換していたのだが、なんとTIFFファイルよりもファイル容量が大きくなったので、びっくり。

Lossless Webpに変換

ダメ元でLossless Webpに変換したら非常に小さなファイル容量になった。

Get-ChildItem *.tif | ForEach-Object { cwebp -lossless -z 9 "$_" -o "$($_.BaseName).webp"; if($LASTEXITCODE -eq 0) { Remove-Item $_ } }

Losslessの方が小さい?なんで?

Lossless WebPは、PNGと同様に画像の冗長性やパターンを利用して圧縮しする。つまり、単純な画像(白黒スキャン、図表、ロゴ、アイコンなど)では圧縮率が非常に高くなる。色の繰り返し、エッジの鮮明さ、パターンが多いほど効率的。

Lossy WebPは、写真のような複雑な画像向けに設計されていて、複雑なグラデーションや自然な質感を効率的に圧縮する。単純な画像だと、そのアルゴリズムが逆に非効率になることも

白黒スキャン画像は色数が少なく繰り返しパターンが多いので、Losslessが大活躍するわけ。

逆に、カラースキャンのように、輪郭に中間色が入ってくるようになると、効率はガクッと下がる。

📄
スキャン文書・図表・ロゴ → Lossless
  • 文字がぼやけない
  • ファイルサイズも小さい
🖼️
写真・複雑なグラフィック → Lossy
  • 圧縮率が高い
  • 視覚的な劣化が少ない

じゃあ何を使えばいいのよ?

基本的にはLossy Webpを使っていればいい。白黒スキャンしたドキュメントなど、TIFFやPNGでも小さい画像はLossless Webpを検討してもいいかなという感じ。

Read more

なぜ静止画に4:2:2は存在しないのか

なぜ静止画に4:2:2は存在しないのか

はじめに 動画のコーデックを扱う際、「4:2:2」や「4:2:0」といった表記を目にすることが多い。これらはクロマサブサンプリング(色差サブサンプリング)のパターンを示す記法である。しかし、静止画フォーマットであるJPEGにおいても同様のサブサンプリングが適用されていることは、意外と知られていない。 本稿では、クロマサブサンプリングの数理的基礎から、各画像フォーマットにおける実装まで、技術的に正確な理解を構築することを目的とする。特に、「なぜ写真の世界では4:2:2がほとんど存在しないのか」という問いに対して、技術的・歴史的観点から考察する。 色空間とサブサンプリングの分離 クロマサブサンプリングを理解するには、まず「なぜ色情報を間引いても画質劣化が少ないのか」という根本的な問いに答える必要がある。この答えは、人間の視覚系の生理学的特性に深く根ざしている。 RGB色空間の特性 RGB色空間は、赤(R)・緑(G)・青(B)の3つの加法混色成分によって色を表現する色空間である。これは、ヒトの網膜に存在する3種類の錐体細胞の分光感度特性に対応している。 * L錐体(長波長

By Sakashita Yasunobu
ブログで使うWeb用の画像のフォーマットについて検討する

ブログで使うWeb用の画像のフォーマットについて検討する

背景と目的 普段から写真撮影を行っていると、画像ファイルが占める容量は無視できない規模になる。現在はNASとAmazon Photosに保存しているため、容量的な制約は少ないものの、ファイルサイズが小さくできるのであれば小さくしておく方が合理的だ。特にWeb公開を前提とする場合、ファイルサイズはアップロード・ダウンロード、そしてページ表示時間に直結するため、可能な限り小さい方が望ましい。 これまでは現像ソフトからJPEG品質100で出力し、Web用途など容量削減が望ましいケースではWebPに変換してきた。RAWファイルは別途バックアップしてアーカイブとして保存している。目視で画質劣化が認められないのであれば、全てWebPで保存しても問題ないのではないかと考えたが、より優れたフォーマットが存在する可能性があるため、現在利用可能な画像フォーマットについて調査した。 主要な画像フォーマットの特徴 JPEG 最も広く普及している画像フォーマットで、互換性に関する信頼性は高い。しかし、規格自体が古く、現代的な圧縮技術と比較すると効率は劣る。 JPEGについて知っておくべきすべての

By Sakashita Yasunobu
WebpとAVIFをWindowsでローカルに使ってみる

WebpとAVIFをWindowsでローカルに使ってみる

ブラウザツールはいろいろあるのだが、ローカルでやるのがやはり便利なのでその方法を模索する。 sharpで画像を一括圧縮、WebP・AVIF変換する - Web production note画像変換ライブラリsharpを用いて、画像をまとめて圧縮や変換(Webp・AVIF・JPG・PNG)できる方法をまとめました。Web production note 非公式なコマンドラインツールなどもあるが、開発が最新のバージョンに追随していなかったりするので、おとなしく公式実装を使うのがよさそう。 PNGやJPEG画像をAVIFフォーマットへ変換してくれるコマンドラインツール「cavif」がリリース。PNGやJPEG画像をAVIFフォーマットへ変換してくれるコマンドラインツール「cavif」がリリースされています。詳細は以下から。AAPL Ch.AAPL Ch. Webp WebpはGoogleが作ったナウい画像形式。古臭いJPEGに比べて画質を保ったまま小さくできるのがウリ。 WebpのダウンロードはGoogle公式ページの「Windows版をダウンロード」から。 WebP のダ

By Sakashita Yasunobu
GhostでWebp/AVIFを使う

GhostでWebp/AVIFを使う

はじめに 最近、WebpやAVIF形式といった次世代画像フォーマットを積極的に使うようになった。これらの形式は、従来のJPEGやPNG形式と比較して、同等の画質を保ちながらファイルサイズを大幅に削減できるという特徴がある。ページの読み込み速度が向上し、画質の劣化も気にならないため、本ブログでも積極的に使っていきたいと考えている。 ただし、Ghostで運用する際には、いくつか把握しておくべき仕様がある。 Ghostにおける画像処理の仕様 Ghostでは、アップロードされた画像に対して自動的な処理が行われる。特に注意すべき点は以下の通りだ。 GhostPro supports webp or avif?Sharing tests for any future people searching about this. Okay I like to be exacting and detail oriented, especially when learning a new tool/platform, and just did some

By Sakashita Yasunobu