Sehen Sie sich heute jede Webseite online an, und Sie werden feststellen, dass sie bestimmte Gemeinsamkeiten haben. Eines dieser gemeinsamen Merkmale sind Bilder. Die richtigen Bilder fügen der Präsentation einer Website so viel hinzu. Einige dieser Bilder, z. B. das Logo eines Unternehmens, helfen dabei, die Website zu kennzeichnen und diese digitale Einheit mit Ihrem physischen Unternehmen zu verbinden.
Um Ihrer Webseite ein Bild, ein Symbol oder eine Grafik hinzuzufügen, müssen Sie das Tag im HTML-Code einer Seite verwenden. Sie platzieren die IMG Tag in Ihrem HTML-Tag genau an der Stelle, an der die Grafik angezeigt werden soll. Der Webbrowser, der den Code der Seite rendert, ersetzt dieses Tag durch die entsprechende Grafik, sobald die Seite angezeigt wird. Um zum Beispiel unseres Firmenlogos zurückzukehren, können Sie dieses Bild auf Ihrer Website hinzufügen:
Bildattribute
Wenn Sie den HTML-Code oben betrachten, werden Sie feststellen, dass das Element zwei Attribute enthält. Jeder von ihnen wird für das Bild benötigt.
Das erste Attribut ist das "src". Dies ist buchstäblich die Bilddatei, die auf der Seite angezeigt werden soll. In unserem Beispiel verwenden wir eine Datei namens "logo.png". Dies ist die Grafik, die der Webbrowser beim Rendern der Site anzeigen würde.
Sie werden auch bemerken, dass wir vor diesem Dateinamen einige zusätzliche Informationen hinzugefügt haben, "/ images /". Dies ist der Dateipfad. Der anfängliche Schrägstrich weist den Server an, in das Stammverzeichnis des Verzeichnisses zu schauen. Es sucht dann nach einem Ordner mit dem Namen "images" und schließlich nach der Datei "logo.png". Die Verwendung eines Ordners mit dem Namen "images" zum Speichern aller Grafiken einer Site ist eine ziemlich übliche Praxis, der Dateipfad wird jedoch in den für Ihre Site relevanten Bereich geändert.
Das zweite erforderliche Attribut ist der Text "alt". Dies ist der "alternative Text", der angezeigt wird, wenn das Bild aus irgendeinem Grund nicht geladen werden kann. Dieser Text, der in unserem Beispiel "Firmenlogo" lautet, wird angezeigt, wenn das Bild nicht geladen wird. Warum sollte das passieren? Eine Vielzahl von Gründen:
- Falscher Dateipfad
- Falscher Dateiname oder Rechtschreibfehler
- Übertragungsfehler
- Die Datei wurde vom Server gelöscht
Dies sind nur einige Möglichkeiten, warum unser angegebenes Bild möglicherweise fehlt. In diesen Fällen würde stattdessen unser alter Text angezeigt.
Alttext wird auch von Bildschirmleser-Software verwendet, um das Bild für einen visuell beeinträchtigten Besucher zu "lesen". Da sie das Bild nicht wie wir sehen können, wissen sie in diesem Text, was das Bild selbst ist. Aus diesem Grund ist alter Text erforderlich und es sollte klar angegeben werden, was das Bild ist!
Ein häufiges Missverständnis von altem Text ist, dass er für Suchmaschinenzwecke gedacht ist. Das ist nicht wahr. Während Google und andere Suchmaschinen diesen Text lesen, um festzustellen, was das Bild ist (denken Sie daran, sie können Ihr Bild auch nicht "sehen"), sollten Sie keinen alternativen Text schreiben, um nur Suchmaschinen anzusprechen. Autor klarer alter Text, der für Menschen gedacht ist. Wenn Sie dem Stichwort auch einige Schlüsselwörter hinzufügen können, die für Suchmaschinen interessant sind, ist dies in Ordnung, aber stellen Sie immer sicher, dass der Alt-Text seinen Hauptzweck erfüllt, indem Sie angeben, was das Bild für jeden ist, der die Grafikdatei nicht sehen kann.
Andere Attribute
Das IMG Das Tag verfügt außerdem über zwei weitere Attribute, die möglicherweise verwendet werden, wenn Sie eine Grafik in Ihre Webseite einfügen - die Breite und die Höhe. Wenn Sie beispielsweise einen WYSIWYG-Editor wie Dreamweaver verwenden, werden diese Informationen automatisch für Sie hinzugefügt. Hier ist ein Beispiel:
Das BREITE und HÖHE Attribute geben dem Browser die Größe des Bildes an. Der Browser weiß dann genau, wie viel Speicherplatz im Layout zugewiesen werden muss, und er kann zum nächsten Element auf der Seite wechseln, während das Bild heruntergeladen wird. Das Problem bei der Verwendung dieser Informationen in Ihrem HTML-Code besteht darin, dass Sie nicht möchten, dass Ihr Bild in dieser exakten Größe angezeigt wird. Wenn Sie beispielsweise über eine responsive Website verfügen, deren Größe sich je nach Besucherbildschirm und Gerätegröße ändert, möchten Sie auch, dass Ihre Bilder flexibel sind. Wenn Sie in Ihrem HTML-Code die feste Größe angeben, wird es sehr schwer sein, mit responsiven CSS-Medienabfragen zu überschreiben. Aus diesem Grund und um eine Trennung von Stil (CSS) und Struktur (HTML) beizubehalten, wird empfohlen, KEINE Breiten- und Höhenattribute zu Ihrem HTML-Code hinzuzufügen.
Ein Hinweis: Wenn Sie diese Größenanweisungen deaktiviert lassen und keine Größe in CSS angeben, zeigt der Browser das Bild trotzdem in seiner Standardgröße an.
Herausgegeben von Jeremy Girard
