Checkliste Bilder im Internet

Bilder und Grafiken werten Ihre Website optisch auf und ziehen Besucher an. Sie bieten aber auch Stolperfallen. Lesen Sie hier, was Sie beachten sollten:

1. Wählen Sie das richtige Format fürs Internet

  • JPEG/JPG: geeignet für Fotos, stellt bis 16,7 Mio. Farben dar, verlustbehaftet komprimierbar,  kompatibel mit allen bildfähigen Browsern.
    Link: http://de.wikipedia.org/wiki/Jpeg
  • GIF: geeignet für Strichzeichnungen, Signets, Logos, bis 256 Farben dar, verlustfrei komprimierbar, eine Farbe kann transparent dargestellt werden (sog. Indextransparenz), kompatibel mit allen bildfähigen Browsern. GIFs können zu einfachen Animationen zusammengefasst werden.
    Nachteil: geringer Farbumfang, Lizenzfrage ungeklärt, unflexible Transparenz.
    Link: http://de.wikipedia.org/wiki/Gif
  • PNG: geeignet für alles, stellt bis 16,7 Mio. Farben dar, verlustfrei komprimierbar, ein Farbkanal für Transparenz kann zugefügt werden werden (sog. Alphatransparenz), Nachteil: vergleichsweise hohe Dateigröße; Transparenz kann in Internet Explorer 6 und kleiner nicht ohne zusätzliche Hilfsmittel dargestellt werden.
    Link: http://de.wikipedia.org/wiki/Portable_Network_Graphics

2. Beachten Sie die Dateigröße

Für JPEGs gilt:

  • Je besser die Qualität des Bildes, desto größer wird auch die Grafikdatei.
  • Je größer die Grafikdateien sind, desto länger benötigt die Internetseite später zum Laden.

Suchmaschinen bewerten Internetseiten mit langen Ladezeiten schlechter als solche mit kurzer Ladedauer. Und auch Besucher, die auf Ihre Seite gelangen, werden durch eine langsam ladende Ansicht abgeschreckt und könnten die Seite direkt wieder verlassen, was sich wiederum schlecht auf ihre Bewertung durch Suchmaschinen auswirkt. Wägen Sie daher für jedes Bild ab, wie stark Sie das Bild komprimieren wollen.

Hier können Sie die Ladezeit jeder einzelnen Seite, die Größe der eingebundenen Grafiken und andere Dateien ermitteln sowie Optimierungsvorschläge erhalten:

3. Nehmen Sie rechtliche Aspekte ernst

  • Achten Sie darauf, dass Sie die Bilder, die Sie verwenden, auch verwenden dürfen. Dies erstreckt sich sowohl auf den Urheber (Urheberrecht) als auch auf das Motiv (Persönlichkeitsrecht, Markenrecht).
  • Wenn Sie Bilder herunterladen oder bei Fotodatenbanken kaufen, lesen Sie die Lizenzbestimmungen genau: Oft muss der Urheber eines Fotos oder einer Grafik im Impressum oder sogar auf der konkreten Seite, auf der das Bild erscheint, genannt werden.
  • Auch kostenlose Bilder unterliegen Lizenzbestimmungen. Diese unterscheiden sich oft nach privater oder kommerzieller Verwendung. Achten Sie darauf, dass Sie keine Urheber-, Persönlichkeits- oder Markenrechte verletzen.
  • Denken Sie daran: Sie handeln als Betreiber einer Website öffentlich, und auch eine Geschäftstätigkeit wird schneller angenommen, als man denkt, z. B. wenn man seine Seite für Google-Werbeanzeigen zur Verfügung stellt. Dann gelten die Lizenzbedingungen für kommerzielle Verwendung.

Bitte beachten Sie: Wir können Ihnen keine Rechtsberatung liefern. Die vorgenannten Hinweise haben wir nach bestem Wissen und Gewissen erstellt, erheben aber keinen Anspruch auf rechtliche Korrektheit. Sie sollen lediglich Ihr Problembewusstsein schärfen.

4. Bilder sind Bilder

Das liest sich banal, bedeutet aber: Verwenden Sie Bilder und Grafiken nicht für Texte. Ihre Hausschrift kann problemlos durch eine Stilvorlage (Stylesheet) auf der Website eingebunden werden. Dagegen wird Text in einer Grafik

  • nicht von Suchmaschinen erfasst
  • nicht von Lesehilfen für User mit Sehschwäche ausgewertet

5. Haben Sie ein Content Management System?

Viele Content Management Systeme unterstützen Sie oder Ihren Mitarbeiter schon bei der Anpassung der Bilddaten für die Website. Schon in der Basiskonfiguration erlauben sie, Bilder einfach hochzuladen und automatisiert über eine Konfiguration oder manuell durch Einstellungen weiter zu bearbeiten, damit sie so aussehen, wie Sie sie an der Stelle brauchen können.

TYPO3:

TYPO3 unterstützt Sie bei der Konvertierung und Formatierung Ihrer Bilder. Sie laden ein Bild z.B. als TIF auf den Server. Sobald Sie es in den Inhalt einbinden, erzeugt das CMS ein internetfähiges JPG daraus. Diese Bildmanipulationen beherrscht TYPO3:

  • Komprimieren
  • Skalieren
  • Zuschneiden
  • Drehen
  • Farbsättigung anpassen
  • Schärfen
  • Graustufen

Drupal:

Drupal bietet ab Werk viele Möglichkeiten, Bilder automatisch an Ihren Bedarf anzupassen. Sie erstellen eigene Bildstile (z.B. Thumbnail für die Artikelliste, Vollbild für die Einzelansicht Ihres Artikels), die Sie einem oder mehreren Inhaltstypen (Artikel, Seite o.Ä.) zuweisen. Beim Schreiben Ihrer Inhalte laden Sie die Bilddatei nur noch hoch, das CMS erledigt die Anpassung.

Diese Bildmanipulationen beherrscht Drupal:

  • JPGs beim Upload komprimieren (Qualität wählbar)
  • Skalieren
  • Zuschneiden
  • Drehen
  • Farbsättigung anpassen

Wordpress

Wordpress hat weniger Fähigkeiten, Sie bei der Vorbereitung Ihrer Bilder zu unterstützen. Es gibt von Haus aus vier Formate (Miniaturbild, mittlere Größe, maximale Größe und Originalgröße), in denen Bilder dargestellt werden können. Um diese Größe zu erreichen, werden die Bilder skaliert und ggf. zugeschnitten (Miniaturbild).

Darüber hinaus lassen sich die Content Management Systeme über Plugins um zahlreiche Bildfunktionen erweitern (z.B. Lightbox, Bildergalerie, Karussell). Fragen Sie Ihre Agentur/ Ihren Webentwickler.

6. Tipps zur Verwendung von Bildern

  • Nutzen Sie Bilder, um Ihren Texten mehr Wirkung zu geben. Studien zeigen, dass Bilder z.B. auf Facebook einen höheren Viralitätsgrad als Texte haben.
  • Nutzen Sie den alt-Text, um den Inhalt des Bildes so zu beschreiben, dass er dessen Sinn wiedergibt
  • Nutzen Sie für weitere Informationen zum Bild, z.B. Copyright, den title-Text
  • Beide Texte eignen sich auch zur Suchmaschinenoptimierung Ihrer Seite 
  • Viele Inhaltsformate mit Bild in Content Management Systemen erlauben auch, eine Bildunterschrift hinzuzufügen. Nutzen Sie diese Möglichkeit, um dem Bild mehr Wirkung zu geben oder die Bildquelle deutlich sichtbar anzugeben.
  • Geben Sie der Bilddatei einen sprechenden Namen, um das Bild für die Bildersuche zu optimieren (z.B. hotel-tagungsraum.jpg).

7. Bildquellen

Hier finden Sie kostenlose oder preisgünstige Bilder: