1

レスポンシブcssデザインの場合、画像のサイズが異なるバージョンがいくつかあり、画面の幅が900ピクセルになると仮定します。

この場合、何をするのが最善ですか？ケースa）950ピクセルの画像をダウンスケールするか、ケースb）850ピクセルの画像をアップスケールします（これらの値はもちろん架空のものであり、特定のケースについては話していません）

私が立っているところから、それぞれに独自の長所と短所があります。

ダウンスケーリングを使用すると、PROとして画像の品質が向上するはずです（少なくとも、別のブラウザーのダウンスケーリングアルゴリズムについてはあまりわかりません）。CONとして、画像のダウンロードには時間がかかります。これは、モバイルもターゲットにしている場合に重要です。

アップスケーリングを使用すると、ダウンロード速度は向上しますが、品質は低下します。

もちろん、選択の余地があると仮定すると、明らかな理由で2000ピクセルの画像をダウンスケールしないのと同じように、500ピクセルの画像を1000ピクセルの幅に拡大することはありません。しかし、同じような値を持っている場合、決定を下すのに役立つ経験則がありますか、それとも実際には違いがなく、開発者次第ですか？

または、少なくとも、より重要になる要因はありますか？たとえば、アップスケーリングを使用すると、ダウンロード時間の短縮から、品質の低下やその逆のメリットよりもはるかに大きなメリットを得ることができます。

4

1 に答える 1

2

いろいろな見方ができると思います。また、あなたは自分自身にいくつかの質問をする必要があります：

  • どのオーディエンスにリーチしようとしていますか（モバイル（最大幅640pxまで）またはデスクトップ（640pxより広いもの）指向）
  • 使用する最大の画像は何ですか（幅と高さ）
  • あなたの画像はあなたのモバイルウェブサイトに必要ですか（すなわち、あなたはそのコンテンツの多くを失うことなくあなたのウェブサイトの単純化されたモバイルバージョンを作ることができますか？）

上記のようにデスクトップ環境に焦点を当てている場合、私はあなたの問題についてあまり気にしません。もちろん、大きな画像の読み込みには時間がかかりますが、ほとんどのモバイルブラウザには2つの非常に優れた機能があることを忘れないでください。1。デバイスによって取得されるデータは、最初にサーバーによって圧縮されます（Blackberry、Operaなど）。 2.ほとんどの場合、ブラウザは画像の品質（低、通常、高）のオプションを許可します。そのため、ユーザーは、ユーザーが決定しなくても、必要な品質を選択できます。

モバイルオーディエンスに焦点を当てるときは、アップスケールするのが最善だと思います。ただし、あなたのWebサイトはモバイル専用ではないと思います。ワイドスクリーンデバイスでもWebサイトの見栄えを良くしたいので、ダウンスケーリングを行います。また、画像を最適化することを忘れないでください（80％のJPG圧縮はサイズを大幅に縮小するはずですが、品質をそれほど損なうことはありません）。

編集：だから私はこれについて考えていました、そしてあなたがすることができる他の何かがあります：2つの異なる画像で作業します。あなたの考えを聞くことができます：しかし、それは論理的に聞こえませんが、ブラウザは、まだロードされていないときに変更が必要な画像をどのように検出できますか（2つの画像をロードするのはばかげています）。さて、ここに行きます。（この質問では、クレジットはjAndyに送られます）

jQueryコード（自分のWebスペースにリンクしていることに注意してください。したがって、このフィドルは永遠に機能し続けることはありません！）

$(document).ready(function() {
    $("#jsDisabledMessage").hide(); // HIDES MESSAGE THAT TELLS USER TO ENABLE JS

    if ($(window).width() < 480) {
            $("img").attr('src', function(index, src) {
       return "http://bramvanroy.be/files/jsfiddle/8mZnk/" + this.getAttribute('data-path') + "-mobile.jpg"; // FOR MOBILE DEVICES
        });
    }
    else {
        $("img").attr('src', function(index, src) {
       return "http://bramvanroy.be/files/jsfiddle/8mZnk/" + this.getAttribute('data-path') + "-not-mobile.jpg"; // FOR DESKTOP
        });
    }

   $("img").show();
});

だから、何が起こるか：

  • ブラウザはHTMLを読み取ります
  • ブラウザは画像を見つけようとはしません（そして画像はとにかくCSSによって隠されています）
  • jQueryは（画面サイズに応じて）適切なURLを見つけ、それに応じてHTMLを調整します
  • jQueryは画像を表示します
  • JSを無効にすると、要求された画像を表示できないことをユーザーに通知するメッセージが表示されます。

これが正しい方向に進んでいることを願っています。

于 2012-06-12T10:10:37.230 に答える