JXL を ICO に変換

JPEG XL の用途としてレジストリに記録されているのはアーカイブと写真で、これを採用した人はパイプラインの入り口側でそうしています。1 チャンネルあたり最大 32 ビット、完全なアルファチャンネル、広色域を保持でき、既存の JPEG を可逆に取り込めるため、そこにオリジナルを置いているのです。

その結果、行き先の側に隙間ができます。サイトのファビコン、Windows のショートカット、インストーラーのアイコンなど、下流のあらゆるものは、マスター形式が存在するより何十年も前に規格化された形式を求めており、ICO はその中でも最古で、1985 年に Microsoft が発表しました。この変換はその最後の一歩であり、現代のツールチェーンの他の何もきちんとは扱ってくれない工程です。

ブラウザーの JPEG XL 対応はここでは「万能」ではなく「部分的」と記録されており、これは学術的な細部ではなく、そもそも変換ツールを探す理由になっていることがよくあります。ファイルはタブでプレビューされず、ファイルマネージャーからも開けず、どこで試しても空白かダウンロードのダイアログが出るだけです。

このページで使われているデコーダーは、サイトが自分で取得して実行する WebAssembly モジュールなので、JPEG XL についてブラウザーがどう思っているかは一切関係ありません。ブラウザーで何も表示されないファイルでも、ここでは問題なく変換できます。つまり、送られてきた .jxl に本当に期待どおりの中身が入っているかを確かめる手段としても使えます。

元の寸法がどうであれ、まず長辺が 256 ピクセルになるよう縮小されます。これは方針ではなく形式の上限です。ICO のディレクトリエントリでは各寸法が 1 バイトに格納され、256 はその欄に収まらないためゼロとして記録されます。実際にファイルへ書き込まれるサイズはその画像から作られます。既定の組み合わせでは 48、32、16 で、それぞれ正方形に整えて中央に配置し、独立した PNG として書き込まれます。

マスター画像にとってはかなり大きな縮小で、力を注ぐべき場所を変えます。256 ピクセルを超える部分は結果に何も寄与しないので、6000 ピクセルの元データも 600 ピクセルの元データも出発点としての価値は変わらず、既定の組み合わせでは 48 を超える部分も寄与しません。アイコンの出来を左右するのは、切り抜きとその中の形であり、どちらも縮小される前に正しく決めておく必要があります。

JPEG XL は透明度をあらゆる中間値を持てる本物のチャンネルとして格納し、ICO の中に書き込まれる PNG も同じように格納します。なめらかにアンチエイリアスされた輪郭を持つロゴも、フェードするシャドウも、ぼかしのかかったストロークで描かれたマークも、その輪郭を保ったままアイコンに残ります。

これがこの元データと古い元データとの実務上の違いです。単一の透明色しか持たない形式は、明るいテーマでも暗いテーマでも見た目が変になる、ぎざぎざの硬い輪郭のアイコンを作り、どんな設定でも直せません。本物のアルファを持つマスターから始めれば、アイコンは背景の上に正しく合成され、それがアイコンをプロが作ったように見せる要素の大部分を占めます。

マスターはたいてい構図全体を持っています——マーク全体、あるいは被写体の周りに余白のある写真です。アイコンは 16 や 32 ピクセルの箱の中で見られるものであり、その大きさでは、どれほど良い元データでも構図全体はただのにじみになります。

まず思い切って正方形に切り抜いてください。シンボルやモノグラム、目立つ 1 つの要素だけを取り出し、中央に置いて端に触れない程度の余白を残します。マークがワードマークなら、単語ではなく頭文字を使ってください。正方形でないマスターは拒否されるわけではなく——透明な余白とともに正方形の中央に配置され、伸縮はされません——ですがマークはすでに 16 ピクセル幅しかないアイコンのごく一部にしか描かれなくなります。これは変換ツールには判断できないデザイン上の決定で、アイコンと単なる色の四角形とを分ける違いです。

JPEG XL は 1 チャンネルあたり 32 ビットと広色域を保持できます。ICO の中の画像は 1 チャンネル 8 ビットの PNG で、実務上、それを描画するブラウザーによるカラーマネジメントは行われません。

この縮小は普段は見えず、たまに見えます。sRGB の外にある彩度の高いブランドのオレンジや緑のような広色域で定義されたマークは、アイコンに書き込まれる際にわずかにずれ、OS がタブを描画する方法によってもさらにずれ方が変わります。ブランドカラーが契約上厳密に決まっているなら、そのまま通ったと思い込まず仕様と照らし合わせて確認し、ぴったり一致させるのではなく微調整するつもりでいてください。

ICO は複数の画像を持てるように設計されています——一覧表示用の 16 ピクセル、デスクトップ用の 32 ピクセル、プレビュー用の 256 ピクセル——システムが縮小するのではなく適切なものを選べるようにするためです。「アイコンサイズ」の設定でどれを含めるかを指定します。既定では定番のファビコン用 3 サイズが書き込まれ、「一般的なサイズすべて」を選ぶと 6 サイズになります。これは Windows のアプリケーションリソースが期待する組み合わせで、Web サーバーではなくビルドに組み込む場合はこちらを選んでください。

この設定にできないのは描き直しです。各エントリーはマスターをそのサイズまでフィルター処理で縮小したものなので、16 ピクセル版は同じ絵柄の小さいバージョンであって、ストロークをピクセルグリッドに合わせて簡略化したものではありません。ファビコンとしてはそれで十分です。デスクトップアプリケーションとしてはほとんどそれで足りますが、マークに細かいディテールがあるなら、残りの工程として簡略化した 16 ピクセル版を手描きし、アイコンエディターでファイルに差し替えるとよいでしょう。このページが作るファイルはその作業の健全な出発点になります。

ファビコンとしての用途がもっとも多くの人が出会うものですが、ICO は Web より何年も前から存在し、いまも Windows がショートカットや実行ファイルのリソース、インストーラー、ファイルタイプの関連付けに求める形式です。クロスプラットフォームのアプリケーションビルドは ICO、ICNS、複数の PNG を求めますが、このページはその最初の 1 つをカバーします。

これは要件が場面によって違うため知っておく価値があります。ファビコンには小さいサイズが求められ、アプリケーションアイコンは 256 まで並んだ一式として指定され、しばしば手で調整された小サイズ版も含まれます。どちらもこのページから作れますが設定が異なります。行き先が Web サーバーではなくビルドスクリプトなら、既定の組み合わせで足りると決めつける前に、そちらが何を求めているか確認してください。

この変換の両方の段階はローカルで動きます。JPEG XL のデコーダーはページの中の WebAssembly モジュールで、アイコンの入れ物はその隣で JavaScript が書き出します。ファイルを運ぶリクエストはなく、アカウントも不要で、何も保持されません。

このペアに限っては、これは単なる原則以上の意味を持ちます。マスターファイルはレイヤーは統合されていても、それ以外は何も手放していないバージョンです——フル解像度、手を加えていない色、ときにはメタデータも。4 KB のアイコンと引き換えに無料の変換ツールへ渡すには、いちばん惜しいファイルです。