MDN wants to learn about developers like you: https://www.surveygizmo.com/s3/5171903/MDN-Learn-Section-Survey-Recruiter-Pathway

Diese Übersetzung ist unvollständig. Bitte helfen Sie, diesen Artikel aus dem Englischen zu übersetzen.

Zu Beginn bestand das Web ausschließlich aus Text und es war recht öde. Glücklicherweise dauerte es nicht allzu lange, bis sich die Möglichkeit eröffnete, Bilder (und andere interessante multimediale Inhalte) in Webseiten einzubetten. Es gib neben Bildern auch andere Median, aber es ist sinnvoll, mit dem bescheidenen <img>-Element zu starten, mit dem ein einfaches Bild in eine Webseite gebettet werden kann. In diesem Artikel beschäftigen wir uns tiefgehend mit dessen Benutzung, einschließlich der Basics, Bildunterschriften mit dem <figure>-Element und Details über den Zusammenhang mit CSS-Hintergrundbildern.

Vorwissen: Basic computer literacy, basic software installed, basic knowledge of working with files, familiarity with HTML fundamentals (as covered in Getting started with HTML.)
Ziel: To learn how to embed simple images in HTML, annotate them with captions, and how HTML images relate to CSS background images.

Wie kommt ein Bild auf eine Webseite?

Um ein einfaches Bild auf eine Webseite zu setzen, verwenden wir das <img>-Element. Dabei handelt es sich um ein empty element (also ein Element ohne Textinhalt und schließendes Tag), das mindestens ein ganz bestimmtes Attribut benötigt, um nützlich zu sein — src (manchmal als source, also Ursprung, ausgesprochen, wofür die Abkürzung src steht). Das src-Attribut beinhaltet einen Pfad, der auf das Bild zeigt, das in die Seite eingebunden werden soll. Es kann eine relative oder absolute URL angegeben sein, die ebenso wie das  contains a path pointing to the image you want to embed in the page, which can be a relative or absolute URL, in the same way as <a> element href attribute values.

Anmerkung: Bevor Sie fortfahren, sollten Sie ggf. einen Kurzen Exkurs zu ULRs und Linkspfaden lesen, um Ihre Erinnerungen über relative und absolute URLs aufzufrischen.

Falls also beispielsweise Ihr Bild den Namen dinosaur.jpg trägt und in demselben Verzeichnis liegt wie Ihre HTML-Seite, könnten Sie das Bild auf folgende Art einbinden:

<img src="dinosaur.jpg">

Falls das Bild sich in einem Unterordner namens images befindet, das in demselben Verzeichnis liegt wie die HTML-Seite (dies empfiehlt Google zur SEO- und Indexierung), binden Sie es auf folgende Art ein:

<img src="images/dinosaur.jpg">

Und so weiter.

Anmerkung: Suchmaschinen lesen auch Dateinamen von Bildern und nutzen sie zur SEO. Geben Sie also Ihren Bildern sprechende Dateinamen: dinosaur.jpg ist besser als img835.png.

Sie könnten ein Bild auch mit einer absoluten URL verlinken, beispielsweise so:

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

Aber das ist nutzlos; Es macht dem Browser nur mehr Arbeit, da er die IP-Adresse vom DNS-Server nachschlagen muss etc. Sie werden Bilder für Ihre Webseite fast immer auf demselben Server haben wie Ihre HTML.

Achtung: Die meisten Bilder stehen unter Copyright. Verwenden Sie auf Ihrer Webseite keine Bilder, außer wenn:

1) Ihnen das Bild gehört
2) Sie die explizite, schriftliche Einwilligung des Bildeigentümers erhalten haben oder
3) Sie hinreichende Belege dafür haben, dass das Bild unter Public Domain bzw. gemeinfrei ist.

Urheberrechtsverletzungen sind illegal und unethisch.
Verlinken Sie außerdem mit dem src-Attribut niemals auf ein Bild, das auf jemand anderes Webseite dargestellt wird, wenn Sie dazu nicht die Erlaubnis haben. Dies nennt man "hotlinking". Auch hier, jemand anderes Bandbreite zu stehlen ist illegal. Es verlangsamt außerdem Ihre Seite und nimmt Ihnen die Kontrolle darüber, ob das Bild entfernt wurde oder gar durch etwas beschämendes ersetzt wurde.

Unser oben abgebildeter Code würde uns dieses Ergebnis liefern:

A basic image of a dinosaur, embedded in a browser, with "Images in HTML" written above it

Anmerkung: Elemente wie <img> und <video> werden manchmal as replaced elements bezeichnet. Dies liegt daran, dass Inhalt und Größe des Elementes durch eine externe Resource bestimmt sind (wie etwa eine Bild- oder Videodatei), nicht durch den Inhalt des Elementes selbst.

Anmerkung: Sie können das fertige Beispiel dieses Abschnittes auch auf Github finden (natürlich inklusive des Quellcodes).

Alternativtext

Das nächste Attribut, das wir betrachten, ist alt. Dessen Wert soll eine Textbeschreibung eines Bildes liefern, die immer dann zu Tragen kommt, wenn das Bild nicht angezeigt oder gesehen werden kann. Unser obiger Code könnte beispielsweise folgendermaßen modifiziert werden:

<img src="images/dinosaur.jpg"
     alt="The head and torso of a dinosaur skeleton;
          it has a large head with long sharp teeth">

Der einfachste Weg, Ihre alt-Texte zu testen, ist, absichtlich Ihren Dateinamen falsch zu schreiben. Wenn zum Beispiel unser Bildname als dinosooooor.jpg angegeben wäre, würde der Browser das Bild nicht anzeigen und stattdessen den Alternativtext angeben:

The Images in HTML title, but this time the dinosaur image is not displayed, and alt text is in its place.

Wozu braucht es einen solchen Alternativtext? Er kann aus vielerlei Gründen praktisch sein:

  • Der Nutzer/die Nutzerin ist sehbehindert und nutzt einen Screen Reader, der Ihnen die Webseiteninhalte vorliest. Genau genommen ist ein Alternativtext aber für die meisten Nutzer*innengruppen nützlich.
  • Wie bereits beschrieben, könnte der Dateiname oder Pfad falsch angegeben sein
  • Der Browser unterstützt das Bildformat nicht. Einige Menschen benutzen nach wie vor text-only-Browser, wie Lynx, die den Alternativtext von Bildern darstellen
  • Sie können Suchmaschinen Text zur Verfügung stellen; beispielsweise können Suchmaschinen Alternativtexte bei Suchanfragen verwenden
  • Einige User haben die Anzeige von Bildern deaktiviert, um Datenvolumen zu sparen oder Ablenkungen zu vermeiden. Dies ist besonders auf Smartphones verbreitet und in Ländern, in denen Bandbreite limitiert oder teuer ist.

Was genau sollte man also in ein alt-Attribut hineinschrieben? Das kommt darauf an, warum das Bild überhaupt erst eingefügt wurde. Mit anderen Worten, was verloren ginge, falls das Bild nicht angezeigt wird:

  • Dekoration. You should use CSS background images for decorative images, but if you must use HTML, add a blank alt="". If the image isn't part of the content, a screen reader shouldn't waste time reading it.
  • Inhalt. If your image provides significant information, provide the same information in a brief alt text – or even better, in the main text which everybody can see. Don't write redundant alt text. How annoying would it be for a sighted user if all paragraphs were written twice in the main content? If the image is described adequately by the main text body, you can just use alt="".
  • Link. If you put an image inside <a> tags, to turn an image into a link, you still must provide accessible link text. In such cases you may, either, write it inside the same <a> element, or inside the image's alt attribute – whichever works best in your case.
  • Text. You should not put your text into images. If your main heading needs a drop shadow, for example, use CSS for that rather than putting the text into an image. However, If you really can't avoid doing this, you should supply the text inside the alt attribute.

Essentially, the key is to deliver a usable experience, even when the images can't be seen. This ensures all users are not missing any of the content. Try turning off images in your browser and see how things look. You'll soon realize how helpful alt text is if the image cannot be seen.

Anmerkung: Für weiterführende Informationen, sehen Sie doch in unseren Guide zu Text Alternatives.

Breite und Höhe

You can use the width and height attributes to specify the width and height of your image. You can find your image's width and height in a number of ways. For example on the Mac you can use Cmd + I to get the info display up for the image file. Returning to our example, we could do this:

<img src="images/dinosaur.jpg"
     alt="The head and torso of a dinosaur skeleton;
          it has a large head with long sharp teeth"
     width="400"
     height="341">

This doesn't result in much difference to the display, under normal circumstances. But if the image isn't being displayed, for example, the user has just navigated to the page, and the image hasn't yet loaded, you'll notice the browser is leaving a space for the image to appear in:

The Images in HTML title, with dinosaur alt text, displayed inside a large box that results from width and height settings

This is a good thing to do, resulting in the page loading quicker and more smoothly.

However, you shouldn't alter the size of your images using HTML attributes. If you set the image size too big, you'll end up with images that look grainy, fuzzy, or too small, and wasting bandwidth downloading an image that is not fitting the user's needs. The image may also end up looking distorted, if you don't maintain the correct aspect ratio. You should use an image editor to put your image at the correct size before putting it on your webpage.

Note: If you do need to alter an image's size, you should use CSS instead.

Bildtitel

As with links, you can also add title attributes to images, to provide further supporting information if needed. In our example, we could do this:

<img src="images/dinosaur.jpg"
     alt="The head and torso of a dinosaur skeleton;
          it has a large head with long sharp teeth"
     width="400"
     height="341"
     title="A T-Rex on display in the Manchester University Museum">

This gives us a tooltip on mouse hover, just like link titles:

The dinosaur image, with a tooltip title on top of it that reads A T-Rex on display at the Manchester University Museum

However, this does not come recommended — title has a number of accessibility problems, mainly based around the fact that screen reader support is very unpredictable and most browsers won't show it unless you are hovering with a mouse (so e.g. no access to keyboard users). If you are interested in more information about this, read The Trials and Tribulations of the Title Attribute by Scott O'Hara.

It is better to include such supporting information in the main article text, rather than attached to the image.

Aktiv Lernen: ein Bild einbinden

It is now your turn to play! This active learning section will have you up and running with a simple embedding exercise. You are provided with a basic <img> tag; we'd like you to embed the image located at the following URL:

https://raw.githubusercontent.com/mdn/learning-area/master/html/multimedia-and-embedding/images-in-html/dinosaur_small.jpg

Earlier we said to never hotlink to images on other servers, but this is just for learning purposes, so we'll let you off this one time.

We would also like you to:

  • Add some alt text, and check that it works by misspelling the image URL.
  • Set the image's correct width and height (hint; it is 200px wide and 171px high), then experiment with other values to see what the effect is.
  • Set a title on the image.

If you make a mistake, you can always reset it using the Reset button. If you get really stuck, press the Show solution button to see an answer:

Bildbeschriftung mit Figures und Figure Captions

Speaking of captions, there are a number of ways that you could add a caption to go with your image. For example, there would be nothing to stop you doing this:

<div class="figure">
  <img src="images/dinosaur.jpg"
       alt="The head and torso of a dinosaur skeleton;
            it has a large head with long sharp teeth"
       width="400"
       height="341">

  <p>A T-Rex on display in the Manchester University Museum.</p>
</div>

This is ok. It contains the content you need, and is nicely stylable using CSS. But there is a problem here: there is nothing that semantically links the image to its caption, which can cause problems for screen readers. For example, when you have 50 images and captions, which caption goes with which image?

A better solution, is to use the HTML5 <figure> and <figcaption> elements. These are created for exactly this purpose: to provide a semantic container for figures, and clearly link the figure to the caption. Our above example could be rewritten like this:

<figure>
  <img src="images/dinosaur.jpg"
       alt="The head and torso of a dinosaur skeleton;
            it has a large head with long sharp teeth"
       width="400"
       height="341">

  <figcaption>A T-Rex on display in the Manchester University Museum.</figcaption>
</figure>

The <figcaption> element tells browsers, and assistive technology that the caption describes the other content of the <figure> element.

Anmerkung: From an accessibility viewpoint, captions and alt text have distinct roles. Captions benefit even people who can see the image, whereas alt text provides the same functionality as an absent image. Therefore, captions and alt text shouldn't just say the same thing, because they both appear when the image is gone. Try turning images off in your browser and see how it looks.

A figure doesn't have to be an image. It is an independent unit of content that:

  • Expresses your meaning in a compact, easy-to-grasp way.
  • Could go in several places in the page's linear flow.
  • Provides essential information supporting the main text.

A figure could be several images, a code snippet, audio, video, equations, a table, or something else.

Aktiv Lernen: Eine Figure erstellen

In this active learning section, we'd like you to take the finished code from the previous active learning section, and turn it into a figure:

  • Wrap it in a <figure> element.
  • Copy the text out of the title attribute, remove the title attribute, and put the text inside a <figcaption> element below the image.

If you make a mistake, you can always reset it using the Reset button. If you get really stuck, press the Show solution button to see an answer:

CSS-Hintergrundbilder

You can also use CSS to embed images into webpages (and JavaScript, but that's another story entirely). The CSS background-image property, and the other background-* properties, are used to control background image placement. For example, to place a background image on every paragraph on a page, you could do this:

p {
  background-image: url("images/dinosaur.jpg");
}

The resulting embedded image, is arguably easier to position and control than HTML images. So why bother with HTML images? As hinted to above, CSS background images are for decoration only. If you just want to add something pretty to your page to enhance the visuals, this is fine. Though, such images have no semantic meaning at all. They can't have any text equivalents, are invisible to screen readers, etc. This is HTML images' time to shine!

Summing up: if an image has meaning, in terms of your content, you should use an HTML image. If an image is purely decoration, you should use CSS background images.

Anmerkung: Sie werden mehr über CSS-Hintergrundbilder in unserem CSS-Kapitel lernen.

Das soll es für den Moment gewesen sein. Wir haben Bilder und Bildunterschriften detailliert behandelt. Im nächsten Artikel werden wir einen Gang hochschalten und uns ansehen, wie man mit HTML Videos und Audioinhalte in Webseiten einbinden kann!

In diesem Modul

Schlagwörter des Dokuments und Mitwirkende

Mitwirkende an dieser Seite: DiscW0rld
Zuletzt aktualisiert von: DiscW0rld,