この記事は 12/31 に書いたのですが、後から「からあげ帝国 Advent Calendar 2024」で空きがあった 23日に後から登録してみました。
内容はタイトル通りで、シンプルには画像のサイズ削減の話で終わるものですが、ついでに画像処理まわりの話を付け加えた内容の記事を書いてみました。
ちなみに、からあげ帝国に登録した記事としては 3つ目で、1つ目と 2つ目は以下を登録していました。
- 続・AIは「からあげ」と「とり天」を見分けられるのか：2024年12月リリースの正式版の o1 で再検証【からあげ帝国】 - Qiita
- 第3弾（Gemini 2.0 Flash編）：AIは「からあげ」と「とり天」を見分けられるのか【からあげ帝国-2】 - Qiita
はじめに
今年のアドベントカレンダー用の記事を書いている中で、以下に起因する画像アップロードでのエラー（？）が出たのがあり、その対応メモ ＋α です。
●画像のアップロード・削除方法 | Qiita ヘルプ
https://help.qiita.com/ja/articles/qiita-image-upload#:~:text=%E6%9C%88%E3%81%AB%E5%90%88%E8%A8%88100MB%20%E3%81%BE%E3%81%A7,%E5%88%86%E3%81%8C%E5%BE%A9%E6%B4%BB%E3%81%97%E3%81%BE%E3%81%99%E3%80%82
まず原因については、上のページに記載されている中の「月に合計100MBまで」の上限に達したという感じのようでした。
画像アップロードで月の上限に達した話の主な内容
たくさんの画像をアップロードした背景について
この月の上限に達した理由について、1つはアドベントカレンダー関連で記事をたくさん書いたことです。今月アドベントカレンダー用に 40〜50記事くらいの間の数の記事を書いていて、そこで行った画像貼り付けの蓄積の総量が一要因でした。
しかし、それ以外にも影響の大きそうな内容があります。
それは、自分が所有する複数の PC で記事を書いていた中で、以下に該当する PC でサイズの大きな画像が Qiita に複数貼り付けられていたというものでした。
- 4Kモニタにつないでいる PC で、ノートPC と同じ感覚で画面キャプチャすると解像度の高い画像になる（※ ある程度は、解像度を下げる対応はしていましたが不十分なものが）
- 複数の PC用にライセンスを買って使っている画面キャプチャ用ソフトで、キャプチャしたものをクリップボード経由で貼り付けると PNG形式になり、写真などの場合はサイズが大きくなる（本来は JPEG が適していて、JPEG にするだけでサイズ大幅削減なんていうことも）
アップロードした画像の一覧を見て消す方法
月の上限に達した時は、画像を貼り付けた後の表示で「設定 ＞ アップロードしたファイル」に移動して画像を削除するように、というメッセージが出ます。
公式の説明ページでいうと、以下の部分です。
URL 的には、記事執筆時点では以下となります。
https://qiita.com/settings/uploaded_images
そして、そこで表示されるリストの中で例えば 10ページ目は、以下のパラメータ付の URL になります。
https://qiita.com/settings/uploaded_images?page=10
ここでサイズの大きな画像を見つけて「画像サイズを削減した画像を準備 ⇒ サイズの大きいアップロード済み画像を削除 ⇒ 記事でサイズ削減した画像に置きかえ」という対応をしました。
上の背景の部分で書いたものを対応すれば単純な対応は可能な状況でしたので、サイズの大きな画像について「解像度を下げる・PNG になっているもので JPEG のほうが適しているものは JPEG にする」ということをやれば、とりあえずは大丈夫でした。
余談：JPEG が適している画像について等
少し余談になるかもしれない話を少し書いてみます。
上で「PNG より JPEG が適している画像」という話を書きましたが、一般的には例えば、以下に書かれているように写真などのサイズ削減に向いています。
●JPEGとは？JPGやPDF,PNG,GIFとの違いやメリットを徹底解説｜グラフィックデザイン・グラフィックデザイナー専攻｜デジタルハリウッドの専門スクール（学校）
https://school.dhw.co.jp/course/graphic/contents/w_jpeg.html
そのような違いが出る技術的な理由については、「サイズ削減の過程でピクセルに対する周波数変換をかけて、それに関して非可逆な処理によるサイズ削減をしているところ」や「色情報の処理関連」のところなどで「人の視覚特性を考慮した処理をしている」部分が関係しています。
もう少し踏み込んで書くと、例えば以下のような処理が行われています。
- 輝度・色差の色情報を処理していて、その中で「人の色差の変化に対する認知能力が、輝度に対するものより低い」ということを利用して色差情報を間引く
- 輝度・色差の変化について、微細な変化があるところでは階調数を減らしても画質低下をそれほど感じないので、周波数変換をした後に高周波成分（変化が細かな部分に該当）のデータを間引く
なお、上記の周波数変換に関しては「離散コサイン変換（よく DCT と略されて呼ばれたりもする discrete cosine transform）」が使われています。
他にデータ圧縮をするための処理という点での話では、ビット列に関する処理周りで「ランレングス符号化・ハフマン符号化」といったものも活用されています。
ついでに画像処理関連の話：画像のリサイズ・圧縮をするもの
これだけだとつまらないので（？）、画像処理周りの話もちょっと調べたりなどしてみました。
画像のリサイズ・圧縮をするとなると、ツール・サービスなどがいろいろありますが、そのまわりの話について自分が以前気になったものを 1つ書いてみます。
Node.js での画像処理： sharp
Node.js での画像処理まわりの話題を見ていた時に、以前見かけたことがあった気になるもので「sharp」があります。
●High performance Node.js image processing
https://sharp.pixelplumbing.com/
●sharp - npm
https://www.npmjs.com/package/sharp
Qiita でもタグ付きの記事がいくつも出ているようです。
●Sharpとは？開発に役立つ使い方、トレンド記事やtips - Qiita
https://qiita.com/tags/sharp
処理の部分では以下が活用されているようです。
●libvips/libvips: A fast image processing library with low memory needs.
https://github.com/libvips/libvips
対応しているフォーマット
対応しているフォーマットは以下となるようです。
- 対応フォーマット
- 入力： JPEG, PNG, WebP, GIF, AVIF, TIFF, SVG
- 出力： JPEG, PNG, WebP, GIF, AVIF, TIFF, 非圧縮形式
対応環境
対応している Node.js のバージョンやプラットフォームは以下となっているようです。
おわりに
とりあえず、この記事を書くことになった発端である「Qiita の画像アップロードで月の上限」については無事に対応できて、この記事でもいくつかの画像を添付した形で記事を書けました。
あと sharp はずいぶん前に見かけたものの、あまり触れてないので活用していければと思います。