web-dev-qa-db-ja.com

webdesign-jpgまたはpng、どちらがウェブに最適か

私はかなり長い間Web開発者であり、Webページを構築するために、すべてのデザインをpngファイル形式に変換することに慣れています。 jpgとは対照的に、pngは画像の透明度を許可するという事実にもかかわらず、それはより良い解決策ですか?

質問は、ページの読み込み時間とウェブデザインのベストプラクティス、ファイルサイズと画像の品質に関するものです。

使用するのに最適なソリューションは何だと思いますか?

64
yoda

それは異なります。

PNGは、色数の少ない鮮明な画像に適していますが、

JPGは低帯域幅の画像に適していますが、鮮明ではないため、GUIにはあまり適していません。

一般的に、JPGは写真や写真用であり、PNG(またはGIF)はレイアウト用です。

このページ は、PNGとGIFの基本について説明しているので、おもしろいかもしれません。

97
Dean Rather

Googleはこれについて非常によく書いています。 正しい画像形式の選択 から、決定を下すフローチャートを見つけることができます:

Selecting the right image format

33
Rinku

平均的なネット接続の速度が絶えず上昇していることを考えると、ページの読み込み時間がもはや心配になるとは思わない傾向があります[ダック!]。あなたが最後に持っているリソースで何を達成しようとしているのかを考えることは、本当にはるかに便利です。たとえば、帯域幅が制限されていますか?そして、より重い圧縮に向かう傾向は簡単です。サイトのグラフィックコンテンツは拡大し、サーバースペースのコストが時間とともに増加することを確認していますか?次に、より重い圧縮に向かうと、そのコストが遅れます。アートポートフォリオサイトですか?それじゃあ-サンプラー作品の圧縮アーチファクトが実際に望ましい場合があります!ゲームをむち打ちしようとしていますか?その場合、スクリーンショットはおそらく非常に鮮明でなければなりません。

一般的に、私は言われたことを繰り返しますが、おそらくわずかに異なる言語ではあります:サイトfurnishingsの場合、コンピューターで生成される傾向があり、ページ間で再利用するためにキャッシュされ、 png;サイトcontentの場合、これは多くの場合ページ固有であり、損失のある圧縮をマスクするのに十分なほど大きくて複雑になる可能性が高いため、jpgに向かう傾向があります。

あなたが適切であると判断したPNGへの切り替えを具体的に参照すると、当然のこととしてPNGCrushをすべて実行します-そうしないと、すべてのブラウザで期待する色で表示されず、デザインの全体的な品質が低下します。

23
Sledge

「平均的なネット接続の絶え間ないスピードを考えると、ページの読み込み時間がもう心配になるとは思わないでしょう」

ウェブサイトのSEOの最適化によると、ページの読み込み時間が2秒を超えると、Googleはウェブサイトのランクを下げるため、特にグラフィックが多い新しいウェブサイトのデザインでは圧縮が必要です。

8
Jelena

jpgは通常、微妙に異なる色を多く含む写真画像に適しています。 pngは、コンピューターで生成されたグラフィックスでうまく機能します。

それが私の経験則です。

6
Carl Smotricz

私はスターターであり、主に私がしていることは、画像が大きすぎる場合、背景画像でない限り小さくすることです。レイアウト用の場合は、写真用にPNGとJPGを選択します。

2
Calvin Tam