2

Web サイトに写真を掲載していますが、どの構文でより速くロードできるかわかりません。私の写真は通常 4300x3000 または 3000x4300 です (写真あたり 7 ～ 10 MB です)。私は使っている

#image {
    max-height:500px;
    max-width:750px;
}

ローエンド PC で Web サイトを表示すると、読み込みに時間がかかりました。2500x2500 のサイズの写真を使用する可能性があり、混乱を招く可能性があるため、 fixedheightを使用したくありません。widthロード時間を短縮するにはどうすればよいですか? 高さと幅の比率を維持する「自動サイズ変更」のようなものはありますか?

4

4 に答える 4

4

圧縮

外部ソフトウェアを使用して画像を圧縮する必要があります（HTMLとCSS以外の言語を使用していない場合）。PhotoshopまたはGIMPをお勧めします。

これが負荷を改善する唯一の方法です。画像の重みを減らすことです。強制的なサイズ変更は、サーバーから同じ量のデータをロードするだけです。

サイズ変更された画像の品質の向上：

サイズ変更された画像の品質を向上させることに興味がある場合は、次の記事をご覧ください。

http://articles.tutorboy.com/2010/09/13/resize-images-in-same-quality/

自動サイズ変更可能な背景

4.000ピクセルの画像を読み込むことは、完全な背景を持つWebサイトでもあまり一般的ではありません。通常行われるのは、幅が約1800〜2000ピクセルの画像をロードしてから、CSSを使用して画像をより大きなまたはより小さなモニターに適合させることです。

ここにそれについての記事があります：http： //css-tricks.com/perfect-full-page-background-image/

レスポンシブ画像：

選択した事前定義された解像度に応じて、異なる画像をロードすることもできます。ただし、各画像には複数のバージョンが必要です。

それの使用に関する詳細情報。

于 2013-03-19T17:48:38.223 に答える
3

私の写真は通常4300x3000または3000x4300（7-10 mb /写真）です。

max-height対とはほとんどまたはまったく関係がありませんheight。パフォーマンスへの影響は、画像の元のサイズによるもので、ブラウザは次のようになります。

  1. 大きなファイルをダウンロードする
  2. 膨大な数のピクセルに対してスケーリングアルゴリズムを実行する

ロード時間を短縮するにはどうすればよいですか？高さと幅の比率を維持する自動サイズ変更のようなものはありますか？

ファイルをアップロードするときにファイルの小さいバージョンを作成し、小さいバージョンを提供します。オプションで、ユーザーが小さな画像をクリックしたときに元のバージョンを開くことができます。

ファイルの1つ以上のコピーを手動で作成し、それらを異なるファイル名でアップロードできます。

より洗練された解決策は、プログラムでファイルの1つ以上のコピーを作成することです（サーバーテクノロジを指定していませんが、利用可能なオプションは多数あります）。たとえば、Facebookは、アップロードした各画像の6つのコピーを作成して、正しいサイズでさまざまな場所にすばやく提供できるようにします。

自動または手動で行うかどうかに関係なく、目的のアスペクト比を実現するために画像を調整/トリミングすることを選択できます。

于 2013-03-19T17:48:48.193 に答える
1

読み込み時間を解決するには

写真をサーバーにアップロードする前に、写真を圧縮する必要があります。フォトショップでウェブへのエクスポートを使用し、画像サイズが適切であることを確認します（1MBを超えないようにします）。画像最適化ソフトウェアを使用することもできます（MacではJPEGminiをお勧めします）。

必要に応じて、大きな画像をサイト内のフォルダーに保存してリンクすることができます（これを許可すると、画像をダウンロードできるようになります）。

比率の問題を解決するには（正方形と長方形）

プロパティの1つを使用するだけで、cssがもう1つを計算します。たとえば、

#image{
width:750px;
}

これにより、長方形の画像と正方形の画像を混在させると、「混乱する」問題が解決されます。頑張ってください。

于 2013-03-19T17:51:35.020 に答える
1

読み込みを速くしたい場合は、代わりに画像のサイズを変更してサイズ変更した画像を読み込む必要があります。ディスク上に大小の両方を保持し、ユーザーがリンクをクリックしたときにのみ大きな画像をロードできます。

于 2013-03-19T17:48:59.287 に答える