見出し画像

Chromebook化したドンキPCにcwebpをインストール

DigZero

Apple の WWDC 2020で、iOS 14、iPadOS 14、macOS Big Sur Safari 14に搭載される「Safari 14」の仕様が公開されました。

Added WebP image support.

Safari も Webの新しい画像フォーマットである「 WebP （ウエッピー）」に対応することになりました。

ウィキペディア

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

主要ブラウザは、IEを除きChrome、Firefox、Edgeで既に対応されていますので、safariが対応するとWebサイトでの画像フォーマットとして、利用シーンが増えてくることは自明の理です。

翻訳し引用

WebPは、Web上の画像に優れた可逆圧縮と非可逆圧縮を提供する最新の画像形式です。WebPを使用すると、WebマスターとWeb開発者は、Webを高速化する、小さくてリッチな画像を作成できます。
WebPロスレスイメージは、PNGに比べてサイズが26％小さくなります。WebP非可逆画像は、同等のSSIM品質インデックスで、同等のJPEG画像より25〜34％小さくなり ます。
ロスレスWebP は、わずか22％の追加バイトのコストで透過性（アルファチャネルとも呼ばれます）をサポートします。非可逆RGB圧縮が許容できる場合、非可逆WebPは透明度もサポートします。通常、PNGに比べてファイルサイズが3倍小さくなります。

Webpへの変換はImageMagickでもできるようですが

今回は、Webpを開発したGoogleの変換ツール cwebp をインストールしてみます。

Linux環境の初期設定


過去の記事、「Chromebook化したドンキPCでLinux （ベータ版）を利用する」の通り、Linux （ベータ版）のセットアップが終わっていることが前提です。


cwebp の インストール

インストール済みのパッケージの更新

sudo apt update && sudo apt upgrade -y

インストール

sudo apt install webp


Hit:1 https://deb.debian.org/debian buster InRelease
Hit:2 https://deb.debian.org/debian-security buster/updates InRelease
Ign:3 https://storage.googleapis.com/cros-packages/83 buster InRelease
Selecting previously unselected package libgif7:amd64.
Preparing to unpack .../libgif7_5.1.4-3_amd64.deb ...
Unpacking libgif7:amd64 (5.1.4-3) ...
Selecting previously unselected package libwebpdemux2:amd64.
Preparing to unpack .../libwebpdemux2_0.6.1-2_amd64.deb ...
Unpacking libwebpdemux2:amd64 (0.6.1-2) ...
Selecting previously unselected package webp.
Preparing to unpack .../webp_0.6.1-2_amd64.deb ...
Unpacking webp (0.6.1-2) ...
Setting up freeglut3:amd64 (2.8.1-3) ...
Setting up libwebpdemux2:amd64 (0.6.1-2) ...
Setting up libgif7:amd64 (5.1.4-3) ...
Setting up webp (0.6.1-2) ...
Processing triggers for man-db (2.8.5-2) ...
Processing triggers for libc-bin (2.28-10) ...

cwebp の 実行

使い方

cwebp [オプション] input_file -o output_file.webp

-q オプション

RGBチャンネルの圧縮率を0～100の間で指定します。指定しない場合は75です。数値を小さくするとファイルが小さくなり、品質が低下します。100 の値を使用すると、最高の品質が得られます。

今回は、82にしてみました。

cwebp -q 82 IMG_20200627_162938.jpg -o IMG_20200627_162938.webp
IMG_20200627_162938.webp
Saving file 'IMG_20200627_162938.webp'
File: IMG_20200627_162938.jpg
Dimension: 4032 x 2272
Output: 602086 bytes Y-U-V-All-PSNR 43.91 48.13 48.50 44.94 dB
block count: intra4: 19108
intra16: 16676 (-> 46.60%)
skipped block: 335 (0.94%)
bytes used: header: 502 (0.1%)
mode-partition: 84188 (14.0%)
Residuals bytes |segment 1|segment 2|segment 3|segment 4| total
macroblocks: | 7%| 14%| 15%| 62%| 35784
quantizer: | 24 | 24 | 21 | 13 |
filter level: | 8 | 10 | 63 | 35 |

結果

3.22MB の JPEG ファイル が 588KB に圧縮できました。

JPEG

画像1

Webp

画像2

その他の使い方やオプションは

HTMLにおけるコーディング

現状のJPEG Webp 両対応のコーディング 例

<html>
   <head>
       <meta charset="UTF-8">
       <title></title>
   </head>
   <body>
       <picture>
           <source type="image/webp" srcset="IMG_20200627_162938.webp" />
           <img src="IMG_20200627_162938.jpg" />
       </picture>
   </body>
</html>

これからは Webp のみで良くなります。

<html>
   <head>
       <meta charset="UTF-8">
       <title></title>
   </head>
   <body>
       <img src="IMG_20200627_162938.webp" />
   </body>
</html>

はやく Safari 14 がリリースされるといいですね。 

ドンキPC（MUGA ストイックPC２）をChromebook化する方法

※この記事もChromebook化したドンキPCで書いてます。

よろしければサポートお願いいたします。クリエイターとしての活動費とさせていただきます。