PNG

よみ: ぴんぐ / ピーエヌジー

概要と技術的特徴

可逆圧縮（何度保存し直しても画質が劣化しない）の画像フォーマットで、背景の透過（半透明含む）に対応している（Portable Network Graphics）。フルカラーを鮮明に表現できるため、ロゴ・アイコン・スクリーンショット・図表などで重宝される。JPG（非可逆圧縮）よりも画質が綺麗に保たれる反面、ファイルサイズは大きめになる傾向がある。

現場における「使い分け」の実務セオリー

ポイントは、「PNG は透過と鮮明さ（特に文字のくっきり感）が必要な場面に絞って使う」という割り切りである。

適した用途：背景に重ねるロゴ、透過要素のあるアイコン、文字が含まれるバナー画像や図解。
理想的なフォーマット選び：実務上は「写真は JPG」「ロゴやアイコンは SVG（ベクター画像）」にするのが理想であり、PNG は『SVG を用意できない場合の代替（透過が必要な時）』として使うのが賢い運用である。

容量削減の必須プロセス

前述の通りファイルサイズが大きくなりやすいため、Web にアップする前に必ず画像最適化ツール（業界標準の「TinyPNG」など）を通し、画質を保ったまま容量を圧縮するのが基本ルールである。

やってはいけない「現場の落とし穴」と防衛策

全部 PNG 保存による「サイト激重化」：初心者の担当者が最も陥りやすい罠。色数が多い「写真」まで PNG で保存してしまうと、1 枚で数 MB という膨大なファイルサイズになる。これを放置すると PageSpeed Insights 等の表示速度スコアが致命的に悪化し、SEO の順位低下やユーザーの離脱を招く。
【対策】：「写真は必ず JPG（または WebP）、透過要素や図解のみ PNG」と厳密に使い分ける。※なお、最新標準の画像フォーマットである「WebP（ウェッピー）」は透過にも対応しつつ容量を劇的に軽くできるため、現在では PNG の代わりに WebP を採用する現場も増えている。

言葉をよく利用する人

デザイナー
Web 担当者(発注側)
コーダー / フロントエンドエンジニア

会話上での使用例

デザイナーからロゴ素材を受け取る際に形式を確認する場面

デザイナー
ロゴ素材ができあがりました。どの形式でお渡ししましょう。
Web 担当者
PNG の透過と SVG のベクターデータ、両方いただけますか。Web では SVG を優先しつつ、メールや印刷で PNG を使い分けたいんです。

PNG ファイルが重いと SEO 担当者に指摘された場面

SEO 担当者
この PNG、ちょっとファイルが重すぎませんか。
Web 担当者
PNG は TinyPNG みたいな最適化ツールを通せばかなり軽くなります。それでも大きいようなら WebP に置き換えてしまいましょう。