[[📒Articles]] > [[📒2021 Articles]] ![[2021-10-09.jpg|cover-picture]] [[Minerva]]で管理する画像を圧縮する方法(ルール)について模索してみました。 ## はじめに [[Minerva]]では画像を扱っています。画像は文書に比べてサイズが大きいため、サイトのロード時間が遅くなってしまい、以下の弊害が出ます。 - 通信環境が悪いと閲覧者のストレスが溜まる - Googleページランクが下がる - [[Minerva]]のアップロード時間が増える せいぜい数百kBに過ぎませんが、数が多くなるとその効果は馬鹿にできません。そこで、画像ファイルの圧縮を検討してみました。 ## 圧縮方法の候補 以下4つのツール・サービスを検討してみました。 - [[TinyPNG]] - [[Squoosh]] - [[Screenpresso]] - [[ffmpeg]] ### [[TinyPNG]] [[TinyPNG]]は老舗の画像圧縮サービスです。[[PNG]]という名前ですが[[JPEG]]や[[WebP]]など他のformatにも対応しています。 <div class="link-card-v2"> <div class="link-card-v2-site"> <img class="link-card-v2-site-icon" src="https://tinypng.com/images/favicon.ico" /> <span class="link-card-v2-site-name">tinypng.com</span> </div> <div class="link-card-v2-title"> TinyPNG – Compress AVIF, WebP, PNG and JPEG images </div> <div class="link-card-v2-content"> Free online image optimizer for faster websites! Reduce the file size of your AVIF, WEBP, JPEG and PNG images wh ... </div> <img class="link-card-v2-image" src="https://tinypng.com/images/social/website.jpg" /> <a href="https://tinypng.com/"></a> </div> [[Minerva]]の管理に利用している[[Obsidian]]の公式ヘルプも[[TinyPNG]]を使っているようです。 ### [[Squoosh]] [[Squoosh]]は[[Google]]が提供する画像圧縮サービスです。 <div class="link-card-v2"> <div class="link-card-v2-site"> <img class="link-card-v2-site-icon" src="https://squoosh.app/c/favicon-c9cf50ef.ico" /> <span class="link-card-v2-site-name">squoosh.app</span> </div> <div class="link-card-v2-title"> Squoosh </div> <div class="link-card-v2-content"> Squoosh is the ultimate image optimizer that allows you to compress and compare images with different codecs in ... </div> <img class="link-card-v2-image" src="https://squoosh.app/c/icon-large-maskable-c2078ced.png" /> <a href="https://squoosh.app/"></a> </div> [[CLI]]も標準で提供されているの心強いですね。ユーザー登録なしで使えます。 ### [[Screenpresso]] [[Screenpresso]]は[[Windows]]用のスクリーンキャプチャソフトです。 <div class="link-card-v2"> <div class="link-card-v2-site"> <img class="link-card-v2-site-icon" src="https://www.screenpresso.com/favicon.ico" /> <span class="link-card-v2-site-name">www.screenpresso.com</span> </div> <div class="link-card-v2-title"> Screenpresso：Windows用の究極のスクリーンキャプチャツール </div> <div class="link-card-v2-content"> コンピューターの画面に表示されているものの画像またはビデオを取得し（画面キャプチャー）、注釈を付けて、誰とでも共有します。 ... </div> <img class="link-card-v2-image" src="https://www.screenpresso.com/screenpresso-logo.png" /> <a href="https://www.screenpresso.com/ja/"></a> </div> 画像圧縮ツールではありませんが、有料版の機能に画像圧縮機能があります。私が普段使っているツールであるため比較対象に加えてみました。 ### [[ffmpeg]] 画像や音楽、動画をあらゆるプラットフォームで変換するツールです。圧縮機能もふくまれており、それを使用します。 <div class="link-card-v2"> <div class="link-card-v2-site"> <img class="link-card-v2-site-icon" src="https://ffmpeg.org/favicon.ico" /> <span class="link-card-v2-site-name">ffmpeg.org</span> </div> <div class="link-card-v2-title"> FFmpeg </div> <a href="https://ffmpeg.org/"></a> </div> [[GUI]]ではなく[[CLI]]ツールなのが他と一番違うところです。 ## 比較結果 比較結果を紹介します。[[Squoosh]]はWeb版を使いました。画像は圧縮後のものになります。 また、[[PNG]]の色情報は256色(8bit)に統一しています。それ以外はツールの推奨設定を利用しています。詳しくは脚注をご覧下さい。 *圧縮率だけを見ると、それらのツールがどのアルゴリズムを使っているか(使うよう設定しているか)になってしまいます。ただ、ここでは各ツールの使い勝手にも言及しているため、複雑な手順を踏まなければならない機能は比較対象外としています。* ### [[JPEG]]その1 サイズは`1280x845`です。 ![[angel-gdb8da3961_1280 (1).jpg]] | ツール・サービス | 圧縮後サイズ | 削減率 | | ---------------- | ------------ | ------ | | オリジナル | 368kB | 0% | | [[TinyPNG]] | 297kB | ⤵️21% | | [[Squoosh]][^sq] | 143kB | ⤵️62% | | [[Screenpresso]] | 182kB | ⤵️50% | | [[ffmpeg]][^ff] | 120kB | **⤵️67%** | ### [[JPEG]]その2 サイズは`1280x711`です。 ![[kittens-gff305ed83_1280-ffmpeg.jpg]] | ツール・サービス | 圧縮後サイズ | 削減率 | | ---------------- | ------------ | ------ | | オリジナル | 471kB | 0% | | [[TinyPNG]] | 259kB | ⤵️46% | | [[Squoosh]][^sq] | 210kB | ⤵️57% | | [[Screenpresso]] | 253kB | ⤵️46% | | [[ffmpeg]][^ff] | 168kB | **⤵️65%** | ### [[JPEG]]その3 サイズは`1280x853`です。 ![[italy-g364de1983_1280-ffmpeg.jpg]] | ツール・サービス | 圧縮後サイズ | 削減率 | | ---------------- | ------------ | --------- | | オリジナル | 574kB | 0% | | [[TinyPNG]] | 389kB | ⤵️34% | | [[Squoosh]][^sq] | 274kB | ⤵️53% | | [[Screenpresso]] | 327kB | ⤵43% | | [[ffmpeg]][^ff] | 210kB | **⤵️64%** | ### [[PNG]]その1 サイズは`1920x1045`です。 ![[スクリーンショット 2021-10-09 150039.png]] | ツール・サービス | 圧縮後サイズ | 削減率 | | ----------------- | ------------ | --------- | | オリジナル | 215kB | 0% | | [[TinyPNG]] | 71kB | **⤵️68%** | | [[Squoosh]][^sqp] | 73kB | ⤵️67% | | [[Screenpresso]] | 81kB | ⤵️62% | | [[ffmpeg]][^ffp] | 82kB | ⤵️62% | ### [[PNG]]その2 サイズは`676x784`です。 ![[スクリーンショット 2021-10-09 150943.png|smaller]] | ツール・サービス | 圧縮後サイズ | 削減率 | | ----------------- | ------------ | -------- | | オリジナル | 133kB | 0% | | [[TinyPNG]] | 49kB | ⤵️64% | | [[Squoosh]][^sqp] | 52kB | ⤵️61% | | [[Screenpresso]] | 42kB | **⤵68%** | | [[ffmpeg]][^ffp] | 55kB | ⤵️59% | ### 測定結果まとめ 比較結果の削減率をまとめました。 | 試行 | [[TinyPNG]] | [[Squoosh]] | [[Screenpresso]] | [[ffmpeg]] | | ------------- | ----------- | ----------- | ---------------- | ---------- | | [[JPEG]]その1 | ⤵21️% | ⤵️62% | ⤵️50% | **⤵️67%** | | [[JPEG]]その2 | ️⤵️46% | ⤵️57% | ⤵️46% | **⤵️65%** | | [[JPEG]]その3 | ⤵34️% | ⤵️53% | ⤵️43% | **⤵️64%** | | [[PNG]]その1 | **⤵️68%** | ⤵️67% | ⤵️62% | ⤵️62% | | [[PNG]]その2 | ⤵️64% | ⤵️61% | **⤵️68%** | ⤵️59% | 限られたサンプルの中で、以下の傾向が見られました。 - [[JPEG]]は[[ffmpeg]]の削減量が一回り大きい - [[PNG]]の削減量に大きな違いはない ## どの圧縮形式を使うべきか 画像形式ごとに検討します。削減率だけでなく、削減にかかる操作コストも考慮します。 ### [[JPEG]]の場合 **削減率が一回り大きい**[[ffmpeg]]を使うのがいいと思います。 他画像より粗く見えるのではないか..という不安はありましたが、実用上は問題ない人がほとんどだと思います。比較しても違いにほぼ気付かず、微かな違いも、劣化というよりは違いに過ぎないと感じました。 [[CLI]]操作に抵抗があり、圧縮前後の画像を比較したい場合は[[Squoosh]]の方が適しています。圧縮率も[[ffmpeg]]の次に高いのでデータ量にも大きな違いは生じません。 ### [[PNG]]の場合 [[Screenpresso]]を使うのがベストだと感じました。 特に画面キャプチャを作成する場合、[[Screenpressoにてデフォルトで画像を圧縮]]できるよう設定しておけば、**キャプチャ撮影と圧縮が1アクションで実施できます**。これは他のツールにはない大きなメリットです。削減率も大差ないですし。 ただ、[[Screenpresso]]の圧縮機能は(たしか)有料であるため、お金を払いたくない場合は他の選択肢を選べばいいと思います。[[JPEG]]の場合とツールをあわせると、[[コンテキストスイッチ]]の切り替えコスト節約にもなります。 ## まとめ [[Minerva]]で管理する画像サイズを削減するため、圧縮方法の調査結果と、どの形式を使うべきかをまとめました。 [[📒Articles]]の表紙画像はすべて[[JPEG]]ですが、2021-10-09 現在では圧縮していません。まずはそれらを圧縮してみようと思います。 なお、[[WebP]]を選択肢に入れていない理由について興味のある方は [[💿PRO-0001 メディアファイルにWebPを使う]] をご覧いただければと思います。 [^sq]: [[MozJPEG]]でQualityは75の場合 [^sqp]: [[OxiPNG]]でEffortは2、Reduce paletteでColorsを256にした場合 [^ff]: オプションは`-vf scale=横幅":-1"` [^ffp]: オプションは`-filter_complex "[0:v] split [a][b];[a] palettegen [p];[b][p] paletteuse"`