0

Web サイトの背景にさまざまな画像を使用したいと考えています。画面サイズごとに異なる画像を開くコードを作成しました。今のところ、2 種類の画像しかありません。これがコードです。

$(window).load(function() {
var randomImages = ['img1','img2','img3','img4','img5'];
var rndNum = Math.floor(Math.random() * randomImages.length);

 var $win = $(this);
 var isBig = $(window).width() > 1920 ? '_big' : '';
 var $img = $('#background').attr('src', '_img/bg/index_rnd/' + randomImages[rndNum] + isBig + '.jpg').css({'position':'fixed','top':0,'left':0});
    function resize() {
        if (($win.width() / $win.height()) < ($img.width() / $img.height())) {
          $img.css({'height':'100%','width':'auto'});
        } else {
          $img.css({'width':'100%','height':'auto'});
        }
    }
    $win.resize(function() { resize(); }).trigger('resize');
});

さまざまなサイズのオプションを追加しますが、先に進む前に、写真の推奨サイズを知りたい. 画像の品質は重要ですが、背景の速度も重要です。これらは私が今のところ持っているサイズです：

幅1920pxまでの通常の解像度、サイズ130KB-140KBの写真

幅1920px以上の写真、サイズ270KB～280KBの写真

同様のケースをインターネットで調べてみましたが、何も見つかりませんでした。この場合の平均値または推奨値を教えていただけますか?!?!

どうもありがとうございました！

ダニ

編集: 詳細////////////////

私の元の写真は 4752 X 3168、.TIFF、解像度 240px/インチ、重量 46MB です。それらを Photoshop で処理し、解像度、サイズを下げ、Web デバイス用に保存した後、次のように変更します。

解像度 72px/inch サイズ 1426 X 950 JPG 40 品質

最終的に 162.1KB の写真になります。この画像は、読み込まれると画面全体をカバーする必要があるため、ピクセル化しないように画像のサイズを十分に近づける必要があります。これは適切なサイズですか、それとも大きなサイズの画像を小さくしてその品質を維持するための Photoshop でのより良い方法はありますか。

これは、ヨーロッパと南アメリカの Web ユーザー向けです。データの制限はありません。最も一般的な解像度は 1024x768 ですが、画像をピクセレーションなしで他のサイズに適応させたいと考えています。

可能性がなくなったので、ここで助けてほしい...

ありがとう！！

4

1 に答える 1

3

この質問は、以下に大きく依存するため、答えるのが非常に困難です。

  1. どんなサイトですか。
  2. 何らかのデータ制限がある場合。
  3. ユーザー: 通常のインターネット接続の速度、より鮮明な画像を得るために一般的に長く待つことができる場合、最も一般的な解像度はどれくらいですか。

これは、決定を下す前に考慮しなければならない事項の短いリストです。

個人的には、270KB から 280KB の背景画像は、特に非常に珍しい解像度の場合は多すぎると思います。幅 1920px を超える解像度を持つユーザーはそれほど多くありません。

直接的で簡潔な回答ができなくて申し訳ありませんが、少なくとも少しは役立つかもしれません。

于 2012-08-21T14:56:55.747 に答える