フロントエンド画像選択の問題_html/css_WEB-ITnose

透明

png32

ps でエクスポートしますpng24 の透明オプションを確認すると、ここで言及されている png32 であり、png32 は実際には png24 ビット深度と 8 ビット アルファ透明度チャネルを指します。 png32 色 (2^24 色) が​​豊富で、さまざまな透明度がフレンドリーにサポートされているためです。 png32 は、多くの人が最もよく使用する形式の 1 つです。エクスポート方法も非常に簡単で、Web で使用されている形式にエクスポートするには ps を選択し、png24+transparent を選択するだけです。ただし、ie6 では png32 を透明に表示できません

png24

実際、png24 自体は 8 ビット アルファ チャネルを持たないため、不透明です。この特徴は花火でよくわかります

画像の下は png32、上は png24 です

png8

png8 は 2^8 色しかないので、サイズが小さくなります。また、png8 は透明度を比較的フレンドリーにサポートしているため、多くの人が好んで使用する画像形式でもあります。

png8+アルファ透明度

png8のアルファ透明度はpsを使用してエクスポートできないため、花火を使用してエクスポートする必要があります。今回は、透明度のサポートを比較するために黒の透明な背景を選択しました

写真では、下がpng32、上がpng8+アルファの透明度です

png8が良好な半透明度をサポートしていることがわかります。同時に、サイズが比較的小さいため。最新のブラウザーでは、PNG+アルファ透明度は、それほど複雑ではない色の小さなボタンや、画像に対するそれほど高い要件がないモバイル端末などにも非常に適しています。もちろん、より複雑な色やPC側の要件が厳しいものについては、png32を使用する必要があると思います。ただし、IE6 でのアルファ透明 png8 のパフォーマンスは満足のいくものではなく、IE6 では半透明部分が完全に透明として表示され、エッジが大きくなります。前に述べたように、png8 のアルファ透明度は半透明性のみを適切にサポートしていますが、実際のパフォーマンスは png32 ほど良くありません。テスト中に、png8 でアルファ透明度を使用した場合でも、まだ多少のバリがあることがわかりました。比較すると、上の png8 + アルファ透明度の画像には、下の png32 の画像よりもギザギザのエッジがまだあることがわかります。ただし、全体的な影響はそれほど大きくありません。