Bilder im Internet

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche
Landscape.svg
Der ursprüngliche Artikel GIF oder JPEG aus dem aktuell.de.selfhtml-Bereich befasste sich mit der praktischen Anwendung der beiden Formate GIF und JPEG und zeigte, welches der Formate in welchen Fällen das geeignetere war.

Heute hat sich der Fokus verschoben. Niemand verwendet mehr Bilder in einer zu schlechten Qualität, sondern Bild-Dateien sind oft zu groß, sodass die Ladezeit der Seiten besonders auf mobilen Geräten mit beschränkter Bandbreite zu lange dauert.

In diesem Kurs Bilder im Internet zeigen wir Ihnen, wie Sie Ihre Webseite mit Grafiken richtig aufwerten können.

  1. Vorüberlegungen
    • Verzierung oder Inhalt?
    • Rechtliches: Fotos präsentieren
      • Wie kann ich verhindern, dass meine Bilder geklaut werden?
  2. Formate und Größen
    • Ladezeit und Datei-Größe
    • Das richtige Format
      • JPEG oder gif
      • Grafiken mit Texten
      • Logos und Icons
  3. Einbindung mit img
    • alt-Attribut
    • src und srcset
    • Bilder mit CSS formatieren
      • flexible Breiten
      • Rahmen und Filter
      • Größenanpassung mit object-fit
  4. responsive Bilder mit picture
  5. Bilder präsentieren
    • Bildunterschriften mit figcaption
    • Bildergalerie mit button
    • Bildergalerie mit :target
    • Polaroid-Galerie
    • Bilderzoom mit Grid
  6. Bildwechsler
    • Bilderkarussell
    • Fader




Verzierung oder Inhalt?

Zuerst sollten Sie sich bei jeder Grafik immer fragen, ob diese inhaltliche Relevanz besitzt oder nur Verzierung ist.

Grafiken, die Teil des Inhalts sind, werden mit dem img-Element referenziert. Dabei verweisen Sie mit dem src-Attribut (oder mit srcset) auf die Bildquelle.

Zusätzlich ist die Angabe eines aussagekräftigen Alternativtextes im alt-Attribut erforderlich, für den Fall, dass die Bilder wegen fehlender Bandbreite oder aufgrund der Benutzung eines Screenreaders nicht angezeigt werden.

img-Element in HTML
<img src="norge.jpg" alt="norwegische Flagge vor blauem Himmel">


Ziergrafiken

Grafiken, die Teil des Layouts sind und nur der Verzierung dienen, sollten über die CSS-Eigenschaft background-image eingebunden werden. Um Verzögerungen beim Laden zu vermeiden, sollten die Bild-Dateien so schlank wie möglich sein und in mehreren Größen vorhanden sein. Mittels media queries kann der Browser die Auflösung ermitteln und nur die passende Grafik abrufen.

Viele grafische Effekte können Sie mittlerweile ohne externe Hintergrundgrafiken realisieren:

Empfehlung:
  • Verzichten sie auf überflüssige, externe Bilder!
  • Nutzen Sie die Möglichkeiten von CSS. Gestalten Sie...

So sparen Sie einerseits HTTP-Requests und Ladezeit, andererseits stehen Hintergrundbilder mit festen Abmessungen einem responsivem Layout oft im Weg.

Sollten Sie trotzdem eine Dekorationsgrafik verwenden, geben Sie ihr eine entsprechende Rolle:

Dekorationsgrafik
<img src="norge.jpg" alt="norwegische Flagge vor blauem Himmel" role="none">

Mit dem WAI-ARIA role-Attribut mit dem Wert none wird Screenreadern angezeigt, dass die Grafik kein Teil des Inhalts ist.

Rechtliches: Fotos präsentieren

Die Metapher „Ein Bild sagt mehr als tausend Worte“ beschreibt den Mehrwert von Bildern gegenüber ausschließlichem Text. Trotzdem sollten Sie besondere Sorgfalt auf Bildauswahl und Form legen.

Woher nehmen und nicht stehlen?

Im besten Fall haben Sie Fotos selbst geschossen und können sie passend bearbeiten. Falls Ihnen keine eigenen Bilder zur Verfügung stehen, können Sie auch auf professionelle Bilderdienste zurückgreifen. Allerdings sollten Sie die Rechte erwerben oder auf lizenzfreie Bilder zurückgreifen.

Hauptartikel: Grundlagen/Rechtsfragen#Bilder im Internet

Dabei ist auch darauf zu achten, dass die auszuwählenden Bilder nicht schon von Mitbewerbern verwendet werden. Der Einsatz von Stockphotos kann zu einer Beliebigkeit führen, bei der die Webseite austauschbar und irrelevant wird.

Wie kann ich verhindern, dass meine Bilder geklaut werden?

Dies geht ebenso wenig wie das Schützen von Quelltext. Wenn der Anwender eine Grafik im Web-Browser sieht, braucht er sie gar nicht mehr mit dem Kontextmenü und "Speichern unter" auf seinen Rechner zu kopieren, weil sie längst im Browser-Cache gespeichert ist.

Sie können eigene Bilder mit Wasserzeichen versehen. Dabei wird nach einem bestimmten Schlüssel ein Text in dem binären Bit-Salat einer Grafikdatei versteckt, z. B. ein Text, der Sie als Urheber der Grafik ausweist (das Verfahren wird als Steganographie bezeichnet). In der Grafik selbst sieht man nichts davon, doch im Zweifelsfall können Sie anhand des Wasserzeichens nachweisen, dass Sie der geistige Urheber der Grafik sind. Wasserzeichen können jedoch bei Grafikformaten, die mit Verlust komprimieren, wie etwa das im Web vielfach eingesetzte JPEG-Format, teilweise verloren gehen bzw. unleserlich werden.

Auch Exif-Daten, die Aufnahmedatum, Kameraeinstellungen und teilweise sogar GPS-Koordinaten enthalten, können durch Bildbearbeitungsprogramme entfernt oder geändert werden.

Weblinks


englisch:

Abgerufen von „http://wiki.selfhtml.org/index.php?title=Bilder_im_Internet&oldid=90910“