Bilder nicht per HTML skalieren
So verkleinern Sie Bilder für die Website richtig.
Bilder sind heutzutage zum integralen Bestandteil der meisten Websites geworden. Egal ob Urlaubsfotos, Diagramme oder Schaubilder – Bilder lockern auf und helfen dabei Inhalte zu vermitteln.
Wenn man Bilder per HTML in eine Website integriert, kann man mit dem Height- und Width-Attribut des Img-Tags die Dimension des Bidles anzugeben. Tatsächlich ist es damit aber auch möglich, Bilder die eigentlich viel breiter und höher sind, entsprechend zu skalieren. Leider wird durch diese Skalierung nicht die tatsächliche Dateigröße des Bildes verkleinert, sondern lediglich die Ausgabe.
Wenn Sie verkleinerte Bilder – etwa für die Vorschau – einbinden möchten, so erstellen Sie verkleinerte Ansichten der Original-Bilder und binden Sie diese ein. Nimmt man beispielsweise an, dass ein übliches Fotos einer Digitalkamera zwischen 3 und 5 MB hat, so kann man durch eine entsprechende Vorschaudatei von ca. 50 KB bis zum Hundertfachen an Dateigröße sparen. Das wirkt sich positiv auf die Übertragungs- und Darstellungsgeschwindigkeit der gesamten Website aus.
Erstellen Sie also für unterschiedlich dimensionierte Bilder entsprechende Dateien und binden Sie diese ein. Achten Sie dabei auch darauf das richtige Bildformat für Ihre Website auszuwählen.
Ressourcen
- Don’t scale Images in HTML
- Serve scaled images
- 10 Tips for Optimizing Your Website’s Speed
- 5 Tips to improve Blogs Page Speed
- Top 5 Ways to Optimize Your Blog’s Images and Graphics
Diskussion
Actually I will do, but my English isn’t that good. Check out pagespeedup.com in the near future.
Why don’t you create a site in english???