it-swarm-ja.com

網膜-美容画像の最適な画像サイズ

ウェブサイトでの高解像度ディスプレイをサポートしています。また、各ページに大きなヘッダー/美容画像があるので、幅を1400px-350KB未満-JPGにしました。品質とサイズのバランスがいいと思います。私たちのプログラマーは、私にそれらをさらに縮小するように求めています。網膜のヘッダー画像に最適なサイズはどれですか?

1
janeh

右についてのようです

プログラマが高密度の網膜ディスプレイを処理する方法を知っている限り、このサイズ(または少し大きくても)は問題になりません。もちろん、細かいディテールのある写真のようなJPGファイルについて話している限りは。それ以外の場合、画像がベクターベースの場合、SVGファイルを使用できます(使用する必要があります)。

プログラマーが不足しているように見えるのは、さまざまな画面密度に基づいて画像を提供する必要があるということです。そして網膜スクリーンの要点は鮮明な品質の高品質画像を持つことであり、帯域幅を節約することではありません。

たとえば、Appleは以下の画像を提供します:

enter image description here

サイズは81,47 KB(390.626バイト)

TheRenovatorHQにはRetinaの区別がないため、これをすべての人に提供します(網膜品質の画像)。

enter image description here

サイズは97,45 KB(406.988バイト)

そして、私は数時間行くことができました、ほんの2つの簡単な例。これらは、RETINA VERSIONS(2xサイズ)でもないことに注意してください。ただし、2番目のサイトは、すべきでないことの例です。必要に応じて画像を表示するのではなく、全員に高密度画像を提供します。

結論としては、網膜をサポートしている場合、品質と帯域幅があなたの懸念のより少ないはずですです。網膜で超圧縮された画像を表示しています...まあ、自分でテストして何が起こるか見てください。そして、はい、私は、高品質の画像やデザイン、使いやすさなどの必要性さえ把握できないプログラマーに対処することの意味を完全に理解しているので、組織にその文化を浸透させる必要があります。今回も何度も何度も

追加の読書

参考までに、以下のリンクを調べて、プログラマーに示してください。

2
Devin

1つの画像に対して350KBは多すぎるので、バランスがよくありません。経験則として、あなたは画像ごとに100Kbを超えてはなりません(インターネットが非常に遅い人々について考えてください)。 Webの画像の推奨密度は72 DPIです。

ユーザーの大多数が ラップトップの解像度 を持っています(1366x768など)。最も使用されているデスクトップ解像度は1920x1080です。つまり、1080ピクセルを超える幅の画像は、ユーザーの2〜3%を超えて機能しません。

たぶん、次のことを実行できます。デフォルトとして100Kbの画像を使用しますが、1080ピクセルより広い解像度のユーザーを検出する場合は、大きい画像を使用するよりも適しています。

もう1つの方法は、はるかに軽量なSVG画像(最大で1〜2 KB)を使用することです。また、ベクターベースであるため、どの解像度でも完全に明確になりますが、最終的にはかなりかっこよく見えます。唯一の欠点は、誰かがそれらを描画する必要があることです。

要約すると:

100Kbを超えない、1080pxより広くない、72DPI以下の画像を使用してください。別の方法として、網膜ディスプレイにはjpgよりもはるかに優れたSVG画像を使用します。

0