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

絵の問題の概要

前書き: 以前は、私はまだ絵の問題にあまり注意を払っていないようでした。しかし実際には、インターネットの場合、画像のコンテンツがインターネット全体の大部分を占めている可能性があるため、画像についてのある程度の理解は間違いなく必要です。そこで、今日はそれほど忙しくない機会を利用して、これまで習得していなかったものを学習し暗記するプロセスともみなせる絵の問題について簡単にまとめてみようと思います。

一般的な画像形式

画像形式の圧縮方法 アニメーションはブラウザに適応しますJPG非可逆サポートされていませんすべてPNGロスレスサポートされていませんすべて GIFロスレスサポートすべてAPNGロスレスサポートFirefox、safariWebP APNG、 gif に代わる新しい形式として、一般的に使用されている gif よりも優れています。その名前からわかるように、APNG は実際には png を動かすと言えます。png は 24 ビット カラーをサポートしますが、gif は 8 ビット カラーまでしかサポートしないため、APNG の表示効果は gif よりも鮮明です。残念ながら、APNG は png 標準に参加していないため、日常の制作に組み込むのは困難です。

Lo ssy/ロスレス	サポート	クローム、オペラ

WebP は Google によって開始された画像形式であり、Web 上の専用の画像形式であることを目的としています。 jpg と比較して、WebP は透明性と JPG と同等の圧縮率をサポートしています。 PNG と比較すると、WebP はサイズが小さく、読み込みが速くなります。残念ながら、その互換性はあまり友好的ではありません。

上記の 2 つの形式は、あまり使用されないためのみ説明します。以下では、一般的に使用される JPG、PNG、GIF について説明します。

JPG

jpg の圧縮方法は非可逆であり、画像によって消費されるトラフィックがインターネットの半分を占めていると前述したため、jpg は自然に Web 開発の最愛の人になりました。透明効果のない写真や、より色彩豊かな写真の場合は、60% ～ 80% に圧縮した jpg 画像を使用できます。これにより、画像が小さくなり、Web ページの読み込みが高速化されます。ただし、jpg を圧縮すると画像に損失が生じることに注意してください。したがって、線やテキストを含む一部の画像では、jpg 圧縮後に理想的な外観にならないため、この場合、jpg の使用を避ける必要があります

GIF

GIF には 256 色しかなく、透明度のサポートは 256 色に限定されています。したがって、GIF がアニメーションでない画像の場合は、それほど複雑でない色の画像にのみ使用できます。ただし、一般的に言えば、アニメーションのサポートがフレンドリーなため、APNG 互換性が非常に低く、アニメーション画像を導入したいだけの場合は、現時点では gif が適しています。

PNG

フォーマット

フォーマットビット透過をサポートpng8 png8+index透過8完全な透明度のみをサポートします png8+アルファ透明度8サポートされているpng2424サポートされていないpng3232サポートされている

8	サポートされていません
		png 形式は上記のタイプに分類でき、一般的に使用されるのは png8 と png32 (つまり、ps でエクスポートすることが多い png24) です 透明 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 の画像よりもギザギザのエッジがまだあることがわかります。ただし、全体的な影響はそれほど大きくありません。 png8+インデックス透明度 png8 インデックス透明度は、ps を使用して最終的にエクスポートできます。エクスポート方法も非常に簡単です。書き出す際はpsのpng8、もしくはpsでプリセットされているpng-8 128ディザを直接選択してください。この時点で、透明なインデックスを含む png8 をエクスポートできます。下の写真のように 上の写真からわかるように、写真を書き出すと周囲の部分が白くなります（もちろん、開いたときに見えるものが白くない場合もあります）。このとき、画像の右側のエッジを「なし」に変更して、画像の白いエッジを除去します。以下に示すように 左側の png32 画像と右側の png8 画像を比較すると、右側の画像には明らかにギザギザのエッジがあることがわかります。その理由は、インデックスの透明度は透明度を完全にサポートしておらず、完全な透明度と完全な不透明度のみをサポートしており、半透明度はサポートしていないためです。 [マットなし] を選択すると、すべての半透明が不透明に変換され、エッジがギザギザになります。では、これらのギザギザのエッジを解決するにはどうすればよいでしょうか? 周囲の白をマットなしに変更するオプションは、実際には PS のエイリアシングの解決策です。この画像を単色の背景にする必要がある場合は、ぼやけたエッジを Web ページ上の画像の背景の色に変更して、視覚的にエイリアスのない感覚を実現できます。このソリューションは IE6 でも十分に実装できますが、背景色が複雑な場合は効果がありません。 ###画像の選択 それでは、一般的な画像フォーマット選択の適用シナリオについて話しましょう (ただし、一部は上で言及されていますが) jpg について その圧縮可能な特性により、画像の背景色より複雑で透明度のないもの（写真など）には、jpg を使用することをお勧めします。このようにして、画像の違いが肉眼ではほとんど見えないようにしながら、画像をより小さく、より速く圧縮することができます。ただし、jpg は線やテキストを含むコンテンツには推奨されません。 gifについて APNGには互換性がないため、アニメーショングラフィックスが必要な場合は、依然としてGIFが第一の選択肢です。 pngについて png8+alpha を日々の開発に追加できます。デスクトップの場合、IE6を考慮せず、絵の色が比較的シンプルな場所ではアルファ透過png8を使用できます。モバイル端末の場合は、png32 の代わりにアルファ透過 png8 を直接使用することを検討できます。モバイル端末のネットワークは PC 端末のネットワークよりも劣るため、png8+alpha を使用するとトラフィックを節約できます。 png32 はデスクトップのメイン画像形式として引き続き使用できます。デスクトップ側のネットワーク速度はモバイル側よりも優れており、同時にディスプレイの閲覧にはより高い精度の画像が必要となるため、より複雑なボタンやロゴの一部は、引き続き png32 png8+ インデックスの透明度を使用して処理する必要があります。細かい 古いバージョンのブラウザ (ie6) とのデスクトップ互換性の問題に対処するために使用されます。バックグラウンド エッジ方法ではエイリアシングの問題の一部しか解決できませんが、何もしないよりは優れています。 IE6 はすでに初期のブラウザであり、IE6 との互換性によりいくつかのことが犠牲になることは避けられません。したがって、私の個人的な感覚としては、背景が単純であればマット法で直接解決できるのですが、より複雑な背景については、現時点ではマット法を削除することしか考えられません（実際には、ということです）。ギザギザのエッジは無視されます)。 最後に一言 ...さて、写真の概要はまだ終わっていないはずです。ここに書けるのはこれだけです。また、サイズが小さく効果が優れている WebP についても懸念があり、この画像ソリューションとフロントエンド自動化ツールの組み合わせはまだ実用化されていません... まあ、いつか怠惰な癌が治るかもしれません。そして書き続けることができます。