HTML-Bilder

Während Text machen den Großteil der Inhalte einer Website, manchmal können Bilder sagen mehr als tausend Worte oder fügen Sie, dass zusätzliche Würze in die Website-Design. Glücklicherweise ist es sehr einfach, Bilder in HTML umzusetzen.

Image-Tag

Um die Bilder zu laden in ein HTML-Dokument können Sie das Bild-Tag verwenden <img src="..." width="" height="" alt="..." /> . Beachten Sie, dass es einen Selbsttest-End-Tag, also vergessen Sie nicht den Platz und Schrägstrich am Ende ist. Ähnlich wie das href-Attribut von HTML-Links das Attribut src (source) hält die absolute oder relative Adresse, um eine Image-Datei.

Die optionalen Attribute width und height die Größe des Bildes in Pixel festgelegt und kann exakt die gleichen Werte wie die Bild-Quelle oder um einen größeren oder kleineren Wert gesetzt werden, um das Bild skalieren. Obwohl diese Attribute sind nicht erforderlich, sollten Sie immer versuchen, sie zu benutzen, da sonst die Web-Browser haben, um das Bild zu berechnen, während das Laden der Seite, die den Inhalt springen um verursachen können.

Das Attribut alt (alternativer Text) beschreibt den Bildinhalt und ist im Falle der angezeigten Bild wird nicht geladen. Beachten Sie, dass alt ist für jeden Bild-Tag benötigt, um sein gültiges XHTML 1.0 strict. Wenn Sie wollen nicht ein alt-Text können Sie einfach genommen worden sind alt="" . Wenn möglich, sollte immer ein Bild, Beschreibung, wie es Menschen mit Behinderungen mit Screenreader oder Suchmaschinen wie Google zu wissen, was Ihr Bild ist zu helfen.

HTML-Bild

Ausgang

Bild Links

Neben Text-Links können Sie auch Bild-Links oder eine Mischung aus beidem.

HTML-Image-Link

Ausgang

Bildformate

Obwohl dies im Detail besser ist, für ein Web-Grafiken Tutorial geeignet, es ist immer gut, die verschiedenen Arten von Bild-Formate können Sie kennen. Die meisten Browser unterstützen die folgenden 3 Image-Typen:

GIF

GIFs kann höchstens 256 Farben enthalten (auch als Farbpalette) aus all den Millionen von Farben Ihrem Computer anzeigen können. Sie sind am besten für die nicht-realistischen Grafiken wie Buttons, Zeichnungen und Logos.

Da nur begrenzte Farben macht diese Image-Dateien relativ klein Dateigröße, die immer eine gute Sache. Es ist auch möglich, transparente Pixel angegeben, was bedeutet, dass statt einer Farbe nichts gezogen werden lassen den Hintergrund durchscheinen werden.

Sie unterstützen auch die Animation durch Speichern mehrerer GIF-Bilder und spielt sie wieder als eine Folge. Es ist nicht so weit mehr benutzt, aber jetzt, dass Flash ist ziemlich viel Mainstream.

JPEG

JPEGs unterstützt 16,7 Millionen Farben und sind somit am besten für realistische Fotos geeignet. Die Bildqualität kann von großen bis sehr schlecht, je nach Kompression Einstellungen. Versuchen Sie, ein Gleichgewicht zwischen Dateigröße und Qualität als große Dateien Streik wird Ihre Website dazu führen, dass sich langsam zu laden.

PNG

PNGs sind eine etwas neuere Format in das Web-Design und Landschaft werden gedacht, um GIFs zu ersetzen (wenn sie gut komprimiert, ein palettized PNG sollte immer kleiner Dateigröße als sein Pendant GIF). Sie unterstützen Farbpaletten wie GIFs sowie 16,7 Millionen Farben wie JPEGs, aber im Gegensatz zu JPEG, PNG-Dateien verwenden eine verlustfreie Komprimierung, die 100% der ursprünglichen Bildqualität bewahrt.

Das vielleicht interessanteste Merkmal ist ihre Unterstützung für die Alpha-Transparenz. Jedes Pixel kann ihre eigene Transparenz reicht von 0 bis 100% (im Gegensatz zu GIFs, wo ein Pixel ist entweder transparent oder opak) ermöglichen interessante Effekte wie Anti-Aliasing (glatt Grenzen gegen jede Hintergrundfarbe haben). Es ist in allen modernen Browsern (Firefox, Opera, Safari, Internet Explorer 7). Leider IE6 nicht nativ erkennen die Alpha-Transparenz, obwohl es einige Workarounds gibt es akzeptabel.