私たちはウェブサイト上で作業しており、GIF画像（100kb〜200kb）が非常にゆっくりと読み込まれていることに気づいています。静的HTMLサイトの読み込み時間を改善するにはどうすればよいですか？
サイトはCSS/HTMLの静的サイトです。
画像がゆっくりと読み込まれる理由を知る人はいますか？
JPGを使用するとパフォーマンスが向上しますか？ここで
は、その画像のHTMLコードです：
<div><img src="images/mainImg_3.gif">
巨大だから遅いです。 200KBは非常に大きな画像ファイルです。私は、Web画像のために何が推奨されているのか正確にはわかりませんが、50K以下に保つことは非常に良い考えです。
GIF画像は、写真画像に対してあまり効率的ではありません。 JPGやPNGなどの他の形式を試して、ファイルサイズを小さくしても同じ品質を得ることができるかどうかを確認する必要があります。品質を維持しながら、ファイルサイズをかなり小さくすることができます。
別のトリック：サムネイルを使用します。各画像の2つのバージョンを保存します.1つは、もう一方のサイズの25％のサイズ（解像度による）です。あなたのサイト訪問者は、より多くを見たい場合はサムネイルをクリックすることができます。これにより、ローディング時間が短縮され、帯域幅請求書が減ります。
は、あなたのイメージは、適切なサイズはありますか？あなたのウェブページに300x300ピクセルとしてそれらを表示する場合、元の画像が同じサイズであることを確認してください。
これは、ダウンロードするデータが2倍になり、ブラウザのサイズを変更するために余分な処理能力が不要になります。さらに、正確なサイズの画像はきれいに見えます。
GIFとJPGの違い（JPGでサポートされていない透明度を除いて）は、画像に含まれるものに似ています。 GIFはカラーテーブルとそのカラーテーブルへのマップを使用して画像を保存し、JPGは圧縮アルゴリズムを使用します。したがって、イメージに色の変化がほとんどない場合は、GIFからファイルサイズが小さくなります。逆に、色のバリエーションがたくさんある写真をお持ちの場合は、JPGを使用します。
画像の大きさによって異なりますが、壁紙サイズの画像を100kbで表示している場合はそれほど悪くはありません。このサイズのサムネイルを表示している場合は、問題があります。
JPEG画像は可逆ですが、簡単に圧縮できます。選択した圧縮量に応じて、実際にJPEGで画像サイズを小さくすることができます。それはあなたのためにサイトを分析し、あなたの場所を教えてくれます
はあなたのウェブサイトをスピードアップするためにベストプラクティスと題し、次の記事を読みますボトルネックが発生する可能性があります。
はまたYSlow
を見てみましょう：
画像ファイルのキャッシュを有効にします（以下の例でもcssとjsのキャッシュが追加されます）。これにより、ユーザーはファイルを2回ダウンロードしないようになります。あなたがApacheを使用している場合1。3または2：
ExpiresActive On
<FilesMatch "\.(ico|gif|jpe?g|png|js|css)$">
ExpiresDefault "access plus 1 year"
</FilesMatch>
htmlとcssのgzip圧縮を有効にすることは、おそらく合理的な考えです。
SetOutputFilter DEFLATE
とApache 1.3で：apacheの2で
mod_gzip_on Yes
最速のロードされたリソースは、常にすべての時にロードする必要がないリソースです。私。妥当なサイズに画像を縮小することとは別に、HTTPキャッシュについて読むべきです。
ユーザーエージェントがローカルキャッシュバージョンを再利用できるように、Webサーバーに適切なキャッシュ情報を指定して応答を送信するよう指示する必要があります。
マークノッティンガムはtutorial about HTTP cachingと書きました。それは良い出発点です。 とthis is a tutorialは、HTTPチャッチングのApache設定についてです。
imgタグのheight属性とwidth属性を指定する必要があります。これについてはW3C Schoolsの説明を参照してください。さらに詳しい情報については、http://www.codinghorror.com/blog/archives/000807.htmlを参照してください。
ヒント： 高さと幅の両方が画像のため を属性を指定することをお勧めします。これらの属性が に設定されている場合、ページがロードされると、画像に必要な領域が予約されます。 ただし、これらの属性がないと、 ブラウザは イメージのサイズを認識せず、 の領域を予約することはできません。効果 は、読み込み中にページレイアウトが に変わることになります（ イメージの読み込み中）。
ヒント： の高さと幅の属性を使用して画像のサイズを変更しないでください。 高さと幅の属性が の大きな画像をダウンサイジングすると、 ユーザーは大きな画像（ページ上で小さく見える場合でも ）をダウンロードするよう強制します。 正しい方法は、 ページで使用する前に、プログラムで画像 を再スケーリングすることです。
ルックからコピーされます：それは（、Stoyan Stephanovが共同開発したのです（ヤフーの）ニコール・サリバンとYSlowから画像ごとにちらほらが組み込まれてSmush It!
Yahoo!から）、Yahoo Developer Networkの調査結果
あなたの画像を分析し、最適な画像タイプ（たとえばPNG8、PNG24、GIF、JPGなど）をサーバー側ツールのセットから判断し、最適化された画像を作成します。たとえそれをPNG画像にしても、それを圧縮する最も良い方法を見つけ出し、できるだけ小さなファイルサイズに "Smush It"を置きます。できれば
はその後gzip compressionと、far-future expires headersで、好ましくCDNに、出力画像を撮影した後、（）からそれを果たします。
GIF（メモリから、PNGはLZ77 + Huffman、GIFはLZW）と同様の圧縮アルゴリズムを使用しているため、PNGがより小さくなる理由はわかりません。 JPGかもしれませんが、それは損失の多い形式なのでです。 – Powerlord
最近の個人的な経験に基づいてPNGが含まれていました。別のサイトのアバターを作成していましたが、そのファイルは15K未満でなければなりませんでした。なんらかの理由で、JPGは最低の画質では25K未満にならないでしょうが、PNGは同じ画質で8Kでした。 Go figure;） –