ソーシャルでの小ネタ
サムネイルは風景写真、タップして全画面(ダークな画面)にすると別の画像に変わります。
Guide
ミラージュタンクは、2枚の画像を1枚の特殊な PNG に合成するツールです。サムネイル(白背景)では表画像が見え、開いて黒背景で見ると裏画像が現れます。仕組みは、各ピクセルがグレー値と不透明度の2つだけを持つこと。表示色 = グレー値 × 不透明度 + 背景 × (1 − 不透明度) という関係を使い、表画像のグレー値を 0.5–1 の明るい領域に、裏画像を 0–0.5 の暗い領域に押し込むと、ピクセルごとにグレー値とアルファの組を解けて、白背景では表画像、黒背景では裏画像が再現されます。処理はブラウザ内で完結します。
更新日 2026-09-093 min read
ミラージュタンクは、2枚の画像を1枚の特殊な PNG に合成するツールです。サムネイル(白背景)では表画像が見え、開いて黒背景で見ると裏画像が現れます。仕組みは、各ピクセルがグレー値と不透明度の2つだけを持つこと。表示色 = グレー値 × 不透明度 + 背景 × (1 − 不透明度) という関係を使い、表画像のグレー値を 0.5–1 の明るい領域に、裏画像を 0–0.5 の暗い領域に押し込むと、ピクセルごとにグレー値とアルファの組を解けて、白背景では表画像、黒背景では裏画像が再現されます。処理はブラウザ内で完結します。
これは「画像ステガノグラフィー」の視覚版です。ステガノグラフィーが文字を肉眼で見えないように隠すのに対し、ミラージュタンクは別の画像を隠し、背景色の切り替えで現れます。
ミラージュタンク.png が得られます。| 入力 | 出力 | 説明 |
|---|---|---|
表画像: 白い猫の写真、裏画像: 夜景の写真、幅 1200 |
1200 × 表画像比の高さ のグレースケール半透明 PNG |
白背景では白い猫、黒背景では夜景に見える |
表画像 16:9、裏画像 1:1 |
裏画像を中央で 16:9 にトリミングしてから合成 |
cover トリミングで、引き伸ばしはしない |
表画像が暗く、裏画像が明るい |
両面とも灰色がかってコントラストが低い |
表画像は明るく、裏画像は暗いほどはっきりする |
サムネイルは風景写真、タップして全画面(ダークな画面)にすると別の画像に変わります。
Web ページのライトモードとダークモードで、異なるグレースケールイラストを表示します。
答えを裏画像に隠し、黒背景に切り替えた人だけが見られるようにします。
授業で白黒2種類のプレビューを使い、アルファ合成を実演します。
プラットフォームが PNG を JPG に圧縮した時点で、透過チャンネルが失われています。「原本」「ファイル」として送信するか、PNG の透過に対応したプラットフォームに変えてください。
できません。このバージョンはグレースケールのみを出力します。カラーのミラージュタンクには別のアルゴリズムが必要です。
表画像は全体に明るく、裏画像は全体に暗く、かつ2枚の構図が大きく異なると効果的です。プレビューで白黒背景を切り替えながら見比べてからダウンロードしてください。
2枚の画像はブラウザ内でピクセル単位に合成され、サーバーへアップロードされることはありません。ページを閉じるとメモリから解放されます。
更新日 2026-09-09
2 枚の画像を 1 枚に合成。白背景では表の画像、黒背景では別の画像が見える PNG
このツールの翻訳は未完了です。一部は原文または代替言語で表示されます。
ファントム画像は、半透明のグレースケールピクセルが背景によって見え方が変わる性質を利用します:表示色 = ピクセル濃度 × 不透明度 + 背景色 × (1 − 不透明度)。表の画像の階調を明部に、裏の画像の階調を暗部に圧縮したうえで、各ピクセルについて濃度と不透明度の組み合わせを解き、白背景では表の画像、黒背景では裏の画像が再現されるようにします。
注意:PNG の原本のまま送信しないと効果が出ません(アルファチャンネルを失ってはいけません)。プラットフォームが JPG に圧縮すると無効になります。生成結果はグレースケール画像で、色情報は保持されません。