Andere nette Tricks mit Grafiken mit HTML

Grafik-Tricks und die Attribute

Jetzt, wo Sie etwas über  interne und  externe Grafiken wissen sowie über Grafiken, die als  Verknüpfungen dienen und etwas darüber gelernt haben, wie man Text um Grafiken  herumfließen lässt, wissen Sie darüber Bescheid, was die meisten Leute mit Grafiken auf Webseiten anfangen – und Ihnen ist alles darüber bekannt, was HTML 2.0 mit Grafiken anfangen kann. Es gibt aber einige neuere Tricks, mit denen man spielen kann, und davon handelt dieser Abschnitt.

Größe und Skalierung von Grafiken

Zwei Attribute des <img />-Tags, height und width, legen Höhe und Breite der Grafik in Pixeln fest. Beide Attribute sind Teil der HTML-Spezifikation, aber sie wurden von HTML 4.0 zu Gunsten der Style Sheets verworfen.

Wenn Sie für diese Werte die tatsächliche Höhe und Breite der Grafik angeben (die Sie mit Hilfe der meisten Bildverarbeitungsprogramme ermitteln können), benötigen einige Browser für die Formatierung und die Anzeige von Text und Grafiken auf Ihrer Seite sehr viel weniger Zeit, als wenn Sie die Werte nicht angeben.

Dies bedeutet meistens, dass er einen Teil des Textes lädt und formatiert, dann auf das Laden der Grafik wartet, dann um die Grafik herum formatiert, wenn er die Ausmaße herausgefunden hat, und dann mit dem Rest der Seite fortfährt.

Wenn sich die Werte für width und height von der tatsächlichen Breite und Höhe der Grafik unterscheiden, skaliert der Browser es so, dass es in den vorgegebenen Leerraum passt. Da kleinere Grafiken weniger Speicherplatz belegen als größere und damit in kürzerer Zeit über das Netzwerk übertragen werden können, ist das eine ganz elegante Möglichkeit, große Grafiken auf Ihren Seiten loszuwerden. Sie erzeugen einfach eine kleinere Ausgabe der Grafik und skalieren es dann auf Ihrer Webseite entsprechend.

Beachten Sie jedoch, dass auch die Pixel skaliert werden, sodass die schließlich wieder vergrößerte Version eine gröbere Körnung aufweist. Experimentieren Sie mit den verschiedenen Größen und den Skalierungsfaktoren, um den richtigen Effekt zu erzielen.

Führen Sie keine umgekehrte Skalierung durch – indem Sie eine größere Grafik erzeugen und es dann mit width und height herunterskalieren. Kleinere Dateigrößen sind besser, da sie weniger Zeit zum Laden brauchen. Wenn Sie eh nur eine kleinere Grafik darstellen wollen, machen Sie es von Anfang an kleiner.

Mehr über Grafik-umrandungen

Sie haben das border-Attribut der <img />-Kennung als Teil des Abschnitts über Verknüpfungen kennen gelernt, wo die Festlegung von border auf einen Zahlenwert oder auf Null die Dicke der Grafik-umrandung festlegte (oder diese völlig versteckte).

Normalerweise haben einfache Grafiken keine Umrandungen; nur solche mit Verknüpfungen. Trotzdem können Sie das border-Attribut mit einfachen Grafikenn verwenden, um eine Umrandung um der Grafik zu ziehen, so wie hier:

<p>
	<img src="html-lernen.png" alt="HTML-Lernen" align="left" border="5" width="128" height="128" /> Lobortis porttitor himenaeos tristique ligula molestie ultricies ad feugiat nam aliquam, maecenas auctor magna dolor.
</p>

Abbildung zeigt ein Beispiel eine Grafik mit einer Umrandung.

Andere nette Tricks mit Grafiken mit HTML

Grafik-Vorschau

Eine optionale Netscape-Erweiterung für Grafiken ist die Anwendung des lowsrc-Attributs (von low source, Quelle mit geringerer Auflösung) zu <img />, welches eine Art von Vorschau auf die tatsächliche Grafik auf der Seite ermöglicht. lowsrc wird so wie src, mit einem Pfad-Namen zu einer anderen Grafik-Datei eingesetzt:

<img src="html-lernen.png" lowsrc="html-lernen_small.gif" />

Wenn ein Browser, der lowsrc unterstützt, diese Kennung vorfindet, lädt er die lowsrc-Grafik zuerst im ersten Durchgang für das allgemeine Seitenlayout. Dann, nachdem das Layout und die lowsrc-Grafiken geladen und dargestellt sind, wird die andere Grafik, das durch src festgelegt ist, geladen und eingeblendet, um die lowsrc-Grafik zu ersetzen.

Warum sollten Sie das tun? Die Grafik in lowsrc ist gewöhnlich eine kleine Vorschau mit geringerer Auflösung als die eigentliche Grafik, sodass es sehr schnell geladen werden und dem Leser eine Vorstellung vom allgemeinen Erscheinungsbild der Seite geben kann. (Vergewissern Sie sich, dass die lowsrc-Grafik tatsächlich kleiner ist, da es sonst zwecklos wäre, es einzufügen.) Dann, nachdem das Layout fertig ist, kann der Leser nach unten rollen und den Text lesen, während die "besseren" Grafiken unauffällig im Hintergrund geladen werden.

Die Verwendung von lowsrc ist optional; es wird von älteren Browsern einfach ignoriert.