 Falsche Größenangaben
Ganz 'sauber' ist der Tipp ganz unten auf dieser Seite nicht unbedingt. Aber da ich diesen Kiff mehr oder weniger zufällig herausgefunden habe, möchte ich ihn doch weiter geben. Warum sollen sie davon nicht erfahren?
|
|
Fehlende und falsche Größenangaben
'gelogene' Größenangaben
Eigentlich 'unsauberer' HTML-Code sorgt für eine Arbeitserleichterung. Hier wird eine Größenangabe für die Dimension im Image-Tag einer Grafik unterschlagen.
Das originale HTML-Tag für das unten angezeigte Image sieht so aus:
<img src="bild.jpg" width="120" height="90" border="0" alt="">
| 
| Ergebnis:
Bild in Originalgröße 120 mal 90 Pixel |
der Kniff mit der fehlenden Angabe
Sie können die Grafik zerren und ersparen sich die Arbeit mit dem Taschenrechner, wenn Sie lediglich eine Größenangabe machen. Der andere Wert wird vom Browser proportional dazu ermittelt. In der Demo unten fehlt die Angabe für die Höhe!
<img src="bild.jpg" width="240" border="0" alt="">
|
| Ergebnis:
größere Darstellung
in proportionaler Größe
bei Verlust der Schärfe |
Böses Spiel
Ein kleines Bild innerhalb einer HTML-Seite durch falsche Angaben größer darzustellen, ergibt für den Seitenbesucher keine nachteiligen Folgen, wenn die Bildqualität noch vertretbar ist. Umgekehrt angewendet, wäre der Betrug schmerzhafter:
Es ist nicht fair ein riesiges Bild in die Seite einzufügen und aus Bequemlichkeit einfach die Attribute für die Größe zu ändern, damit es ins Layout passt (häufig anzutreffen, bei älteren Frontpage-Produkten).
 Bitte bedenken sie wegen der Ladezeiten, dass eine Halbierung der Größe eine Reduzierung der Fläche auf ein Viertel bewirkt. Schon schrumpft die Dateigröße um ein Vielfaches.
Sie erparen dem Seitenbesucher lange Lade- und Wartezeiten, wenn sie sich die Mühe machen eine Grafik in später benötigter Größe zu erstellen.
Beispiel 1
Umgekehrt erzeugt die größere Darstellung einer kleinen Grafik manchmal gewollt ganz tolle Effekte und passt ganz nebenher das Image universell z.B. an die Größe einer Navigationsleiste an:
<img src="0-fade.gif" width="5" height="8" border="0" alt="">
<img src="0-fade.gif" height="120" border="0" alt="">
Das originale Image: 
Größe 5 x 8 Pixels
Und rechts das von 5 auf 75 Pixel Breite gesteckte Image:
<img src="0-fade.gif" with="75" border="0" alt="">
Die Höhenangabe fehlt hier. Sie könnten natürlich auch rechnen
und für die Höhe 120 eintragen.  Mathematik - Dreisatz
Beispiel 2
Interessante Effekte erzielt man mit falschen Größenangaben, möchte man einen Pixeleffekt anzeigen. Das originale Bildchen hat die Abmessungen 16 x 16 Pixel.
UPDATE 17.02.2010 'pixelige' Grafiken hergestellt.
Neuerdings versuchen moderne Browser aber, die Grafik bei gezerrter Darstellung weich zu zeichnen (Abhängig von den Einstellungen). Daher war ich gezwungen, 'pixelige' Grafiken in den benötigten Maßen herzustellen, damit Sie den Effekt auf jeden Fall sehen.
Möchten sie eine solche gezerrte Grafik in einen Hintergrund legen, haben sie allerdings nicht die Option einer Größenangabe. Da bleibt nur bei der Herstellung / durch Bearbeitung das Bild zu vergrößern. Wählen sie für den Resample-Modus die Einstellung 'nächster Nachbar' oder 'nearest Pixel' und die vergrößerte Grafik wird schön 'klotzig'.
Zum Thema 'Grafiken zerren' lesen sie weitere Informationen auf der Seite 'Pixel-Spiele ... der Zauber mit Punkten'. Zugegeben, ich habe in dieser mehrseitigen Demonstration ein wenig herumgespielt. Zur Veranschaulichung fand ich, ist meine Spielerei dennoch ganz brauchbar und demonstriert ganz nebenher, wie sich unser Auge täuschen lässt. (Die Seite öffnet in einem neuen Browserfenster)
 Pixel-Spiele ... der Zauber mit Punkten
|
Home • Bilder • Grafiken zerren