HTML-Bilder - W3docs

Trang chủ » Html Befehl Grafik Einfügen » HTML-Bilder - W3docs

Có thể bạn quan tâm

Um ein Bild auf eine Webseite hinzuzufügen, verwenden wir das Tag <img>. Das ist ein Leertag, das bedeutet, dass es kein Endtag hat und nur Attribute enthält.

Das Tag <img> unterstützt eine Reihe von erforderlichen und optionalen Attributen, die zusätzliche Information darüber liefern.

Erforderliche Bildattribute

Das Attribut src (source) gibt den Namen oder die Position des anzuzeigenden Bildes an. Der Wert des Attributs src muss den Namen der Bilddatei oder deren URL enthalten.

<img src="example.jpg" /> oder <img src="https://www.example.com/images/example.jpg" />

Das Attribut alt ist für das Image-Tag auch notwendig. Es wird verwendet, um Browsern einen alternativen Text zur Verfügung zu stellen, wenn das Bild nicht angezeigt werden kann (bei langsamer Verbindung, wenn ein Bildschirmleser verwendet wird usw.). Die Browser zeigen oft den alternativen Text des Bildes als Popup an, wenn Sie mit der Maus drauf führen.

Syntax des Image-Tags mit den erforderlichen Attributen src und alt sieht so aus:

<img src="https://www.w3docs.com/learn-html/" alt="HTML tutorial" />

Um Suchmaschinen eine schlüsselwortreiche Beschreibung zur Verfügung zu stellen und das Ranking Ihrer Webseiten zu verbessern, verwenden Sie das Attribut alt für alle Ihre Bilder.

Empfohlene Bildattribute

Es wird empfohlen, die Attribute width und height mit dem Tag <img> zu verwenden. Wenn diese Attribute verwendet werden, reserviert der Browser Platz für das Bild beim Laden des Inhalts, was das Rendering der Seite beschleunigt.

<img src="https://www.w3docs.com/learn-html" alt="HTML tutorial" width=”200” height=”120” />

Beispiel

<!DOCTYPE html> <html> <head> <title>Der Titel des Dokuments</title> </head> <body> <h1>Der Platz für die Kopfzeile </h1> <p>Das ist Aleqs Foto</p> <img src="/uploads/media/default/0001/01/25acddb3da54207bc6beb5838f65f022feaa81d7.jpeg" alt="Aleq" width="200" height="185"/> </body> </html> Versuch es selber!

Ergebnis

html example Anstatt die Abmessungen für Breite und Höhe zu verwenden, können Sie die Größe auch mit CSS Eigenschaften max-width oder max-height einstellen, um zusätzliche Flexibilität zu erhalten. Das kann verhindern, dass große Bilder Ihr Layout auf einem Gerät mit kleinem Bildschirm ruinieren.

Bild Floating

Im vorigen Beispiel steht der Text über dem Bild. Die Position von Bild und Text kann jedoch leicht geändert werden. Mit der CSS Eigenschaft float können Sie festlegen, wie das Bild floaten soll, oder wie der Text umgebrochen werden soll.

Wenn Sie das Bild auf der linken Seite und den Text auf der rechten Seite anzeigen möchten, fügen Sie einfach style="float:left" zum Tag <img> hinzu.

Beispiel

<!DOCTYPE html> <html> <head> <title>Der Titel des Dokuments</title> </head> <body> <h1>Ihre Kopfzeile</h1> <img src="/uploads/media/default/0001/01/25acddb3da54207bc6beb5838f65f022feaa81d7.jpeg" alt="Aleq" width="200" height="185" style="float:left"/> <p>Aleqs Foto</p> </body> </html> Versuch es selber!

Ergebnis

html example

Wenn Sie das Attribut style="float:right" zum Tag <img> hinzufügen, ändert sich die Position des Textes nach links und des Bildes nach rechts.

Beispiel

<!DOCTYPE html> <html> <head> <title>Der Titel des Dokuments</title> </head> <body> <h1>Der Platz für die Kopfzeile</h1> <img src="/uploads/media/default/0001/01/25acddb3da54207bc6beb5838f65f022feaa81d7.jpeg" alt="Aleq" width="200" height="185" style="float:right"/> <p>Aleqs Foto</p> </body> </html> Versuch es selber!

Ergebnis

html example

Da das Tag <a> für das Einfügen von Hyperlinks verwendet wird, müssen Sie das Bild nur ins Tag <a> einfügen, um Ihr Bild anklickbar zu machen.

Beispiel

<!DOCTYPE html> <html> <head> <title>Der Titel des Dokuments</title> </head> <body> <a href="https://de.w3docs.com" aria-label="w3docs homepage"> <img src="/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.png" width="190" height="45" alt="logo"/> </a> </body> </html> Versuch es selber!

Ergebnis

Um das Ergebnis zu sehen, klicken Sie auf das Bild unten (es leitet Sie auf unsere Homepage weiter).

logo

Welches Bildformat muss man für das Web wählen?

Es gibt drei Haupttypen von Bildformaten, die von Browsern unterstützt werden:

  • GIF (Graphics Interchange Format)
  • JPG / JPEG (Joint Photographic Experts Group)
  • PNG (Portable Network Graphics)

GIF hat nur 256 einzigartige Farben, und sie machen einfache, schnelle Ladegrafiken. Sie können GIF für kleine Zeichnungen, Diagramme, Charts, Buttons und andere einfache Grafiken verwenden, die das schnelle Laden Ihrer Seite nicht verhindern.

JPEG hat ein 16-Bit-Format, es kann rotes, blaues und grünes Licht mischen, um Millionen von Farben anzuzeigen, daher wird es hauptsächlich für Fotos verwendet. Mit diesem Format können Sie flexibel wählen, wie stark Ihr Bild komprimiert werden soll: von 0% (starke Kompression) bis 100% (keine Kompression). Sie können dieses Format wählen, wenn es Ihnen nichts ausmacht, für eine Verkleinerung auf Qualität zu verzichten. Vermeiden Sie die Verwendung von JPEG für Bilder mit Text, Formen oder großen Farbblöcken, da bei der Kompression der Datei die Linien verschwimmen und die Farben sich verschieben.

PNG vereint alle Vorteile der beiden Formate JPEG und GIF, es hat Millionen von Farben und erlaubt, die Datei ohne Qualitätsverlust zu kompressieren. Sie können PNG für Webgrafiken, die Transparenz für komplexe, farbintensive Grafiken oder Fotos erfordern, verwenden.

Moderne Bildformate

Heute gibt es moderne Bildformate, die für das Web verwendet werden, um kleinere, reichhaltigere und schnellere Bilder zu laden.

WebP designed by Google bietet verlustfreie und verlustbehaftete Kompression für Bilder im Web. Sein Hauptziel ist, das primäre Format für Fotos im Internet zu werden und JPEG zu ersetzen.

Ein weiteres Format, das das JPEG-Format ersetzen soll, ist BPG (Better Portable Graphics), das ebenfalls eine hohe Kompressionsrate aufweist (Dateien sind kleiner als JPEG bei gleicher Qualität)

HEIC ist ein neues Bildformat, das Apple anstelle von JPEG in iOS 11 verwendet. Dieses Format verwendet moderne Kompressionsmethoden, die eine höhere Bildqualität in kleineren Dateien ermöglichen.

Từ khóa » Html Befehl Grafik Einfügen