{"id":1512,"date":"2011-04-08T15:50:59","date_gmt":"2011-04-08T13:50:59","guid":{"rendered":"https:\/\/www.omsag.de\/blog\/?p=1039"},"modified":"2018-11-20T16:40:00","modified_gmt":"2018-11-20T15:40:00","slug":"google-page-speed-bildoptimierung-teil-3","status":"publish","type":"post","link":"https:\/\/www.omsag.de\/proxy\/online-marketing-blog\/seo\/google-page-speed-bildoptimierung-teil-3\/","title":{"rendered":"Google Page Speed \u2013 Bildoptimierung (Teil 3)"},"content":{"rendered":"

Teil 3 unserer Serie \u2013 Page Speed Optimierung:<\/em>
\nNachdem wir im ersten Teil unserer Page-Speed Optimierungsreihe auf die wichtigsten Punkte der Optimierung durch CSS und im zweiten Teil auf das Zusammenspiel zwischen CSS und Bildern eingegangen sind, m\u00f6chten wir nun einen der wohl wichtigsten Punkte in der Optimierung der Ladezeit von Websites n\u00e4her betrachten. \u00dcberdies zeigt die Erfahrung, dass auf die Optimierung von Bildern durch die schneller werdende \u00dcbertragungsgeschwindigkeit des Internets immer weniger geachtet wird. Die richtige Verwendung von Bildern stellt zwar den trivialsten Punkt dieser Optimierungsreihe dar, aber gerade hier kann die Ladezeit von Websites zumeist enorm gesteigert werden.<\/p>\n

Google schl\u00e4gt bei der Verwendung von Grafiken in Hinsicht auf die Optimierung der Ladezeit die folgenden Punkte vor:<\/p>\n

\u201eGeben Sie die Bildgr\u00f6\u00dfe an\u201c<\/span><\/p>\n

Bei der Verwendung von Bildern sollte man auf die Angabe der Attribute „width“ und „height“ achten und entsprechend angeben. Hintergrund hierbei ist, dass der Browser erst mit dem Aufbau einer Seite beginnen kann, wenn die Bildma\u00dfe ermittelt worden sind. Macht man daher keine Angaben zu der H\u00f6he und Breite muss das Bild zuerst geladen bzw. ausgewertet werden, bevor der Browser mit dem Aufbau der Seite beginnen kann. Im Umkehrschluss bedeutet dieses, dass unter Verwendung dieser Attribute der Platz f\u00fcr das Bild bereits reserviert wird und Browser direkt mit der Darstellung der Seite fortfahren kann.<\/p>\n

Die Ma\u00dfangaben eines Bildes k\u00f6nnen direkt \u00fcber den Image-Tag angegeben werden, oder \u00fcber eine Klasse bzw. ID in einer externen CSS-Datei definiert werden.<\/p>\n

Definition der Bildma\u00dfe im Image-Tag:<\/span><\/p>\n[html]\n<img src=“ image.png“ alt=“image“ width=“200″ height=“100″ \/>
\n[\/html]\n

Definition der Bildma\u00dfe in einer externen CSS-Datei:<\/span><\/p>\n[html]\n<img class=“img“ src=“image.png“ alt=“image“ \/><\/p>\n

.img {<\/p>\n

width: 200px;
\nheight: 100px;<\/p>\n

}
\n[\/html]\n

\u201eVerwenden Sie skalierte Bilder\u201c<\/span><\/p>\n

Gerade in gro\u00dfen Shopsystemen sollten zumindest die Produktbilder \u00fcber einheitliche Abmessungen verf\u00fcgen, um eine ordentliche Darstellung der Website zu wahren. Daher werden Bilder oftmals automatisch per CSS oder JavaScript auf die passende Gr\u00f6\u00dfe skaliert, um den Websitebetreibern dar\u00fcber hinaus den Umgang mit Bildern zu erleichtern. Diese Begebenheit bringt zwar eine Zeitersparnis mit sich beziehungsweise werden fehlerhafte Darstellungen dadurch vermieden, allerdings m\u00fcssen unn\u00f6tige Bytes geladen werden und die Ladezeit der Website erh\u00f6ht sich daher unn\u00f6tig.<\/p>\n

Auch wenn die M\u00f6glichkeit einer automatischen Skalierung besteht, sollte man daher trotzdem vor der Verwendung die Gr\u00f6\u00dfe der Bilder passend bereitstellen.<\/p>\n

\u201eOptimieren Sie Ihre Bilder\u201c<\/span><\/p>\n

Sch\u00f6ne und qualitativ hochwertige Bilder sind eine Bereicherung f\u00fcr jede Website. Gerade Webshopbetreiber achten sehr auf eine f\u00fcr den Kunden ideale Produktansicht. Hierbei wird f\u00e4lschlicherweise angenommen, dass sich bei einer weiteren Bearbeitung der Produktbilder die Bildqualit\u00e4t verringert. Viele Bildaufnahmeger\u00e4te und die entsprechenden Programme in diesem Bereich speichern aber zus\u00e4tzliche Kommentare in den Bildern und verwenden zu viele Farben, die f\u00fcr den Gebrauch im Web nicht ben\u00f6tigt werden.<\/p>\n

Google empfiehlt f\u00fcr eine verlustfreie Kompression von Bildern die folgenden Programme:<\/strong><\/p>\n