0

要素/タグを使用して画像を Web ドキュメントに配置する場合<img />、画像をスライスしてドキュメントのサイズに合わせて編集するか、そのまま配置する必要がありますが、必要に応じて属性widthとheight属性を変更する必要があります。

たとえば、幅2000px、高さ1500pxの「bldg_pic.png」という画像があり、それを400px X 300pxに配置してフィットさせたい場合<div>、画像を変更せずにそのままにしておく必要があります

<img src="bldg_pic.jpg" width="400" height="300" alt="Building Picture" />

読み込まれる実際の画像は 2000px X 1500px ですが、400px X 300px として表示されます。または、画像を編集して 400px X 300px に小さくし、上記と同じコードを使用するだけですか。

画像を配置するとき、ブラウザーは実際に画像の「プレースホルダー」を挿入するだけでheight、width属性が前に設定されている場合、ブラウザーはそのために予約する必要がある「スペース/メモリ」の量を知っていると思います。

どの方法を使用する必要があるかを調べていますが、パフォーマンスやベスト プラクティスの問題は関連していますか?

4

5 に答える 5

5

常に画像のサイズを変更してください。その場で画像のサイズを変更することも可能です。

https://github.com/lencioni/SLIR

SLIR は素晴らしいライブラリです。Slir フォルダーを取得して、Web サイトのルートに配置します。画像にアクセスすると、次のことができます。

    <img src="/slir/w400/path/to/image.png" width="400" />

/path/to/image.png の幅が 4000px であると仮定すると、SLIR は画像を圧縮するだけでなく、サイズを変更し、このリクエストのキャッシュ バージョンをサーバー上のフォルダーに保存します。再度リクエストすると、サービスが提供されます。キャッシュされたバージョン。

ファイルのアクセス許可についてサポートが必要な場合は、お尋ねください。

幸運を！

于 2012-09-28T10:04:01.900 に答える
2

ベスト プラクティスの観点からは、画像を表示したいサイズにサイズ変更する必要があります。訪問者は大きな画像を読み込めないため、帯域幅を浪費し (スマートフォンを考えてください)、読み込み時間が長くなります。より大きな画像にアクセスできることを知っていても。必要に応じて、サイズ変更された画像をフルサイズ バージョンにリンクすることができます。

私の経験から、ブラウザによっては、画像のサイズを変更すると画像が壊れて見える場合があるため (IE7 の場合など)、画像を表示したいサイズにすることをお勧めします。

于 2012-09-28T09:53:54.270 に答える
2

実際に必要なサイズに画像のサイズを変更する必要があります。2000px 1500px の画像は使用しないでください。

理由は次のとおりです。

  1. HTML（幅と高さ）で拡大縮小すると、ブラウザはまだ完全な画像をダウンロードし、読み込みに時間がかかります
  2. 大きな画像を非常に小さなサイズにリサイズすると、ブラウザで見栄えが悪くなります

2 つの異なる寸法が必要な場合は、寸法の異なる 2 つの画像を作成する必要があります。

また、ツールを使用して、画像の品質を損なうことなくブラウザで高速にロードできるように画像を最適化することもできます。

以下に、役立ついくつかのツールを示します。

スマッシュ: http://www.smushit.com/ysmush.it/

暴動: http://luci.criosweb.ro/riot/

私の答えがお役に立てば幸いです！

于 2012-09-28T10:01:50.800 に答える
1

画像は、使用している正確なサイズにサイズ変更し、Web用に最適化する必要があります。品質を損なうことなく使用できる場合は、.pngではなく小さい形式（.jpgや.gifなど）を使用することをお勧めします。

于 2012-09-28T16:53:42.727 に答える
1

両方を行います (幅/高さの指定は、それらが正しいサイズである場合、実際には必須ではありません)。

widthとの属性を使用しheightて大きな画像を小さくすることはできますが、サイトのパフォーマンスと、正当な理由もなく使用される帯域幅に影響を与えます。

画像のサイズを変更し、(Photoshop で) Web/デバイス用に保存します。

また、画像をまとめて 1 つに表示する場合display:blockは、css で を使用して、画像の下部にスペースが入らないようにしてください。

于 2012-09-28T09:53:18.680 に答える