Ausmaße der Bilder im HTML-Quellcode festlegen
Wie Sie durch die Angabe von Höhe und Breite die Darstellungsgeschwindigkeit der Website verbessern können.
Ist Ihnen auch schonmal aufgefallen, dass beim Laden einiger Websites das Layout ständig verrutscht? Das kann daran liegen, dass die Macher nicht die Höhe und Breite der Bilder angegeben haben. Dadurch weiß der Web-Browser zwar, dass ein Bild an einer bestimmten Stelle angezeit werden soll, aber beim Ladevorgang, noch nicht wie groß es ist. Erst wenn es vollständig heruntergeladen wurde, kann er die Bilddimensionen berechnen und es entsprechend im Layout einfügen.
Damit dieses Problem nicht auftritt und Ihre Layout von der ersten Sekunde an gut aussehen, können sie einfach die Ausmaße der Bilder festlegen. Das geht am einfachsten mit dem Height- und Width-Attribute des Img-Tags:
<img height="150" width="200" />
Optional kann die Bildgröße auch per CSS definiert werden. Die entsprechenden Stylesheet-Attribute heissen ebenfalls width und height:
img { width: 200px; height: 150px }
Wenn Sie in Zukunft also das Layout-Verrustschen vermeiden wollen, setzen Sie einfach die entsprechenden Attribute bzw. Eigenschaften. Der Browser kann dadurch direkt die richtige Darstellung berechnen und Ihre Nutzer bekommen saubere Layouts ab der ersten Sekunde präsentiert.
Ressourcen
Mitdiskutieren