Bilder im Internet

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche
Landscape.svg

In diesem Kurs Bilder im Internet zeigen wir, wie Du Deine Webseite mit Grafiken richtig aufwerten kannst.

  • Vorüberlegungen
    • Verzierung oder Inhalt?
    • Rechtliches: Fotos präsentieren
      • Wie kann ich verhindern, dass meine Bilder geklaut werden?
     
  • Einbindung mit img
    • src und srcset
    • gute Alternativtexte
    • Bilder mit CSS formatieren
      • flexible Breiten
      • Rahmen und Filter
      • Größenanpassung mit object-fit
    Landscape.svg
     
  • Bilder präsentieren
    • Bildergalerie mit Scroll Snap
    • figure und figcaption
      • Lazy loading
      • Bilderzoom mit Grid Layout
     
  • Formate und Größen
    • Ladezeit und Datei-Größe
    • Das richtige Format
      • Grafiken mit Texten
      • Logos und Icons
     
  • Bildwechsler
    • Lightbox
      • Thumbnail und Großansicht
      • Bildwechsler
     


Siehe auch


  • SVG
    • Einstieg in SVG
    • Warum SVG nutzen?

    Fotos werden als Rastergrafiken ge­speichert - für alles andere wie Logos, Icons, Diagramme, etc gibt es SVG!

     
  • Hintergründe & Verläufe
    Gradients.png
     
  • Hero-Images – Große Bilder als Blickfang
    • Resolution Switching mit srcset
    • <picture> –ein Container
    • Art Direction
    • light and dark mode
    Picture-art-direction.svg
     
  • Responsive Imagemaps

    Klickflächen innerhalb eines Bilds? -


    Das wird jetzt mit SVG gemacht!

     
  • Canvas

    Mit JavaScript Grafiken erzeugen und animieren, die dann auf der Zeichenfläche des canvas-Elements dargestellt werden.

     
  • Favicons
    Favicon.png

    Wie bekomme ich ein kleines Bild in Adresszeile, Reiter und Favoriten?

     
  • Masken und Beschneidungen

    beeindruckende Bildeffekte mit mächtigen CSS-Funktionen

     
  • Data-URL

    Grafiken direkt in HTML und CSS notieren

     
  • Tricks mit
    border-image

    viel mehr als Rahmen!

     
  • Bilder im Internet
    - Woher nehmen und nicht stehlen?
     




Verzierung oder Inhalt?

Zuerst solltest du dich 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 verweist man 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 kann man mittlerweile ohne externe Hintergrundgrafiken realisieren:

Empfehlung:
  • Verzichte auf überflüssige, externe Bilder!
  • Nutze die Möglichkeiten von CSS. Gestalte …

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

Solltest du trotzdem eine Dekorationsgrafik verwenden, gib 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.

Weblinks

englisch:

Grafikbearbeitung

Hands-On
Tipps und Tricks zur Gestaltung web-gerechter Grafiken mit Photoshop.
von Thaddeus Ozone, einem der bekanntesten Web-Designer.
photopea
Das kann im Amateurbereich fast so viel wie Photoshop, läuft komplett online und ist kostenlos.

Grafiksammlungen

  • Perry-Castañeda Library: Map Collection: Ausführliche Landkarten aller Länder der Welt, frei verfügbar zur eigenen Verwendung
  • pixabay.com: alle Bilder und Videos frei von Urheberrechten unter Creative Commons CC0 veröffentlicht, Namensnennung ist nicht erforderlich (verschiedene Kategorien)
  • openclipart: Grafik-Community mit unter Public-Domain stehenden SVG-Grafiken
  • Wikimedia Commons: Mediensammlung der Wikipedia; die Medien sind frei, die einzuhaltenden Lizenzbedingungen variieren allerdings von Bild zu Bild.
Beachte:  das Urheberrecht bei der Nutzung kostenloser oder vermeintlich lizenzfreier Bilder Rechtsfragen#Bilder im Internet

Abgerufen am 14.09.2026
von "http://wiki.selfhtml.org/wiki/Bilder_im_Internet"