2017-09-03 14 views
0

オリジナルサイズが375×375ピクセルの画像を4種類のサイズ(375×375,200×200,160×160,90×90ピクセル)で使用する必要がありますウェブサイト画像の大きさを変えて画像を最適化する

ウェブサイトのイメージを最適化したい場合は、サイズごとに4つの異なるフォルダを作成し、そのフォルダ内に独自のサイズの画像を置く必要があります。それとも良い方法がありますか?

今、私はまず、375は巨大なサイズではない画像が

$(this).data({'image': thumbImage, 'zoom-image': zoomImage}).find('img').css({'width': '90px', 'height': 'auto'}); 

答えて

1

を最適化するために、これは正しくありません知っている、このコードを使用しています、携帯電話を使用していても、クライアントはおそらく必要なデータを気付くことはありませんそのサイズの画像では

第2に、ブラウザは常に画像をキャッシュします。

  • /images/90/myimage.jpg
    • /images/375/myimage.jpg
    • /images/200/myimage.jpg
    • はその後、3つすべてがダウンロードされます。だから、あなたは、ソースと、ページ上に3枚の画像を持っている場合。あなたのような、同じソースを使用して、3枚の画像を持っている場合は、:

      • <img src="/images/myimage.jpg" width="375">
      • <img src="/images/myimage.jpg" width="200">
      • <img src="/images/myimage.jpg" width="90">

      画像は一度だけダウンロードする必要があり、そして他の2倍になりますブラウザキャッシュによってアクセスされます。

      画像のサイズと同じページに表示される頻度によっては、サイズを変更する価値があります。しかし、単純な(小)ケースでは、おそらく単一の画像を使用するのが最善です。

    +1

    私は同意します。しかし、あなたが本当に必要な/最適化が必要な場合は、自分のイメージ管理を構築せずに実装するのはかなり簡単な、雲、imgixなどのサービスを使用することができます。また、ローカルに物事を維持したい場合は、そこにたくさんの画像サイズ変更クラスがあります。 – VA79

    関連する問題