ページの読み込み時間を改善するために、大きな画像のファイルサイズを小さくするにはどうすればよいですか？

Question

私のウェブサイトのホームページには、次の画像/スライドがあります。

ホームページ：https://www.atlasestateagents.co.uk/

画像：私は、彼らはかなりのページの読み込みに追加されている見ることができますいくつかのオンラインSEOツールを使用した

https://www.atlasestateagents.co.uk/img/Liverpool-Slide.png

https://www.atlasestateagents.co.uk/img/Landlord-Slide.png

https://www.atlasestateagents.co.uk/img/Vendor-Slide.png

明らかに負のaffecを持つことができる時間SEOのパフォーマンスについて

サイトはブートストラップフレームワークを使用し、画面のサイズに応じて拡大/縮小するため、画像のサイズは大きくなければなりません。

ファイルサイズや読み込み時間を減らすためにできることはありますか？

Answer 1

ファイルタイプ

画像を最適化すると、ファイルの種類であるときに考慮すべき最初の最も簡単な事。特定の画像ファイルタイプは、特定の画像に適しています。例えば、JPGは写真画像に最も適している。一方、PNGは色数の少ない単純な画像や透明度を使用した画像に最適です。 24ビットPNGは、写真要素とシンプルなグラフィックの両方を含む画像に最適です。 8ビットPNGは、256色未満の画像でファイルサイズをさらに小さくすることができます。

スプライトとプリローダ

ロード時間を短縮するのに役立つ実践は、より大きな画像の一部を表示するCSSコードであるCSSスプライトの使用です。この技術は、ボタンのマウスオーバー状態によく使用されます。たとえば、スプライトでは、画像をボタンとしてサイトに表示し、ユーザーがマウスを置くたびにボタンと同じ画像を表示することができます。

スプライトは、インタラクティブなメニューやボタンで頻繁に使用されますが、単一の画像ファイルから複数のサイト画像を表示するためにも使用できます。これは、例えば、3つまたは4つの代わりに1つの画像のみをダウンロードすることをブラウザに要求する。

スプライトに加えて、JavaScript、jQuery、Ajax、またはCSSを使用して画像をプリロードすることができます。画像がプリロードされると、ブラウザは画像をダウンロードまたは「プリロード」し、ユーザが画像にアクセスすると即座に画像を表示します。プリロードすると、イメージの重いウェブサイト、特にフォトギャラリーがあるサイトでの読み込み時間が大幅に短縮されます。時には、画像のロード時間を短縮するための最良の方法は、すべての画像を使用しないで代わりに画像

のCSSを使用して

。 CSSの改善により、ブラウザは純粋なCSSを使用して特定の「画像」をレンダリングすることが可能になりました。 CSSを使用して、四角形、グラデーション、ドロップシャドウ、透明イメージを生成することが可能になりました。 CSSを使用してイメージを置き換える前に、すべてのブラウザがこれらのテクニックを常にサポートするわけではなく、ブラウザの互換性を注意深く検討する必要があることに注意してください。

イメージを使用する場合、イメージの最適化と読み込み時間の短縮に関する推奨事項をお勧めします。

http://www.getsnappy.com/web-optimization/improving-page-load-times.html

http://www.monitis.com/blog/2011/05/29/30-tips-to-optimize-htmlcssimages-for-smooth-web-experience

http://www.practicalecommerce.com/articles/3354-Optimizing-Images-to-Reduce-Load-Times

Do Images Load Faster in HTML or CSS?