🖼️ PNG画像
可逆圧縮・透過対応。スクリーンショットやロゴ、図表に向く
102,400 bytes
image/png
104,857,600 bytes
image/png
10,240 bytes
image/png
10,485,760 bytes
image/png
1,048,576 bytes
image/png
26,214,400 bytes
image/png
512,000 bytes
image/png
52,428,800 bytes
image/png
5,242,880 bytes
image/png
PNG画像について
PNG (Portable Network Graphics) は可逆圧縮の画像フォーマットです。圧縮しても画質が劣化しないため、スクリーンショット・ロゴ・図表・透過が必要な画像に向いています。MIME タイプは image/png、先頭バイトは 89 50 4E 47 です。
10 KB から 100 MB まで各サイズを用意しています。アップロードのサイズ制限テスト、ImageMagick / GD / Pillow といった画像処理ライブラリの検証、ストレージへのアップロード処理のテストに使えます。
PNG の特徴
- 可逆圧縮 — 何度保存し直しても画質が落ちない (JPEG との最大の違い)
- アルファチャンネルによる透過表現に対応
- 色深度は 8 / 16 / 24 / 32 bit に対応
- メモリ消費は展開後のピクセル数で決まるため、ファイルサイズが小さくても大画面の PNG はメモリを食う
関連するリファレンス・記事
📖 つまずきやすいポイント
1 KB から 100 MB まで、PNG / JPEG / GIF / WebP を各サイズで用意しています。アップロード上限の確認、サムネイル生成、画像ライブラリの検証に使えます。形式ごとの違いは上の解説にありますが、実装で踏むのはたいてい形式に依らない共通の罠です。
| ケース | 何が起きるか | どうする |
|---|---|---|
| 小さい画像なのにメモリを使い切る | 必要なメモリはファイルサイズではなく展開後のピクセル数で決まります。20 KB の PNG でも 10,000 × 10,000 px なら、RGBA で約 400 MB を要求します。 | サイズ上限とは別に寸法の上限を設けます。デコード前にヘッダだけ読んで幅 × 高さを確認できます (PHP は getimagesize()、Python の Pillow は Image.open() の直後、load() を呼ぶ前)。 |
| 縦で撮った写真が横倒しで表示される | カメラは本体を回さず、EXIF の Orientation タグに「どちら向きか」だけを書きます。タグを読まない処理系では、撮ったままの向きで出ます。 | サムネイル生成の前に Orientation を読んで実際に回転させ、タグを消します。回転だけしてタグを残すと、対応ブラウザで二重に回ります。中身の確認は EXIF ビューアで。 |
| 変換したらアニメーションと透過が消えた | ブラウザの Canvas を通す変換は1 フレームしか扱えません。アニメーション GIF は 1 コマ目の静止画になります。JPEG へ変換すれば透過は白か黒に潰れます。 | アニメーションを保ったまま変換するなら、Canvas ではなく ImageMagick や libvips のような複数フレームを扱える処理系が要ります。透過を残すなら出力先は PNG か WebP を選びます。 |
| 画像に見えるファイルが画像ではない | 拡張子も Content-Type も送信側が名乗る値です。末尾に別のデータを連結した画像は、ビューアでは普通に開きます。 |
先頭バイトで判定したうえで、再エンコードして保存します。読み込んで書き出し直せば、余分なデータも埋め込まれたメタデータも落ちます。バイト列は マジックバイト表を参照。 |
ユーザーが投稿した画像をそのまま配信する場合、SVG だけは扱いが違います。SVG は画像ではなくスクリプトを実行できる文書なので、同一オリジンで配信するとクロスサイトスクリプティングの経路になります。別ドメインから配信するか、Content-Security-Policy と Content-Disposition: attachment で止めてください。