PNGからJPEGへ:透明度を失う前に背景を選ぶ

白いページではよかったロゴに、送信後に四角い背景が付くことがあります。故障とは限らず、透明部分が固定色になったのかもしれません。使う場所を先に決めましょう。

背景が画像の一部になる

通常のJPEGにはアルファ透明度がありません。透明PNGは選んだ背景に合成され、背後のページが見えていた場所が固定のピクセルになります。

選択肢が白・黒なら用途に合わせます。複数の背景で透明にしたいロゴはPNGなど適切な形式のままにしてください。

参考資料: MDN — JPEG, PNG and WebP image-format characteristics

写真と細い文字は確認点が違う

JPEGは写真に適しますが、非可逆圧縮で図形や文字の細い輪郭が弱まることがあります。商品名や細線を確認しましょう。

使用先文書で最終サイズを見ます。大きなビューアーで鮮明でも小さくすると読めない場合があり、品質設定を上げるだけでは最初から小さすぎる文字を直せません。

参考資料: MDN — JPEG, PNG and WebP image-format characteristics

透明な元画像を保存する

白背景のJPEGをPNGに戻しても透明度は自動では戻りません。白はすでに画像の内容です。

この経路は静止画用です。1枚のJPEGにアニメーションの動きを残すことはできず、別の要件として扱います。

例:商品カードのロゴ

600 × 400ピクセルのPNG中央に400 × 200の不透明ロゴがあります。各辺の余白は100ピクセルです。白に合成すると余白は固定の白となり、黒いカードに置いても変わりません。

白だけに使うなら白背景で輪郭を確認しJPEGを保存します。2色の背景が必要なら透明度を保つか、それぞれに適したコピーを作ります。背景の不一致は寸法計算の誤りではありません。

参考資料