Fotos und Bilder optimieren

Dateien auf Schadcode prüfen

Dateiintegritätsprüfung: Keine Datei darf Schadcode enthalten und muss unversehrt sein, um das Unternehmen und den Websitebesucher vor unerwünschten Ausführungen zu schützen. Deshalb sollte jede Grafik, die in elektronischer Form zur Veröffentlichung bereitgestellt wird, mit folgenden Schritten auf Integrität prüfen:

1. Es ist zu prüfen, ob die Bilder von einer vertrauenswürdigen Quelle kommen.
2. Bei Downloads die Datei anhand der Checksumme zu prüfen.
3. Es ist zu prüfen, ob man das vorliegende Dateiformat verarbeiten kann.
4. Mit einem Sicherheitsprogramm ist die Datei auf Schadcode abzuscannen.
5. Originaldatei archivieren und mit einer unveränderten Kopie weiterarbeiten.

Bilder auf Rechtssicherheit überprüfen

Rechtssicherheit: Jedes Bild muss auf Gesetzeswidrigkeiten und Unstimmigkeiten in der Lizenz- und Nutzungsvereinbarung überprüft werden und den Vorgaben der jeweilig Allgemeinen Geschäftsbedingungen erfüllen.

1. Es ist zu prüfen, ob das Foto gegen Gesetze, Verordnungen oder Allgemeinen Geschäftsbedingungen verstößt.
2. Hat der Urheber des Bildes Erlaubnis zur Weiterverwendung gegeben
3. Bei Verdacht auf Bildklau kann die Bilder-Rückwärtssuche von der Google Bildersuche zur Hilfe genommen werden
4. Es ist zu prüfen, ob alle vertraglichen Dokumente vorliegen, um das Bild ohne Komplikationen veröffentlichen zu dürfen:
   • Wurden die Allgemeinen Geschäftsbedingungen akzeptiert
   • Sind weitere Verträge Dritter erforderlich (zum Beispiel Modelverträge)?
   • Sind weitere Nutzungsrechte einzuholen oder zu aktualisieren?
   • Erlaubnis von Personen eingeholt die im Bild zu erkennen sind?

Bilder komprimieren

Dateikomprimierung: Jedes Foto sollte auf das größtmögliche Maß, ohne Verlust relevanter Informationen, komprimiert werden, um eine anvisierte Ladezeit von maximal drei Sekunden zu erreichen. Denn, Dateien verursachen (lange) Ladezeiten und bescheren dem Besucher, als auch dem Unternehmen, zusätzliche kosten, die durch den Dateitransfer verursacht werden.

• Ladezeiten unter einer Sekunde gelten verständlicherweise als sehr schnelle Ladezeit.
• Ladezeiten von einer und zwei Sekunden sind als generell gute Ladezeiten anzusehen.
• Ladezeiten über drei Sekunden gelten als langsam und die Gefahr des Verlassens ist gegeben, wenn keine relevanten Informationen als Vorschau gerendert werden.
  1. Überprüfe, ob das Foto zur optimalen Darstellung noch bearbeitet werden muss. Zum Beispiel Bildausschnitt, leere Seitenränder entfernen usw.
  2. Das Bild, wenn nicht bereits vorliegend, in ein gültiges webbasierendes geeignetes Dateiformat wie z.B. jpg, gif, svg, png uws. konvertieren. Es können sonst Darstellungsprobleme auftreten, die das gesamte Seitenlayout zu Nichte macht. Zugleich könnte unnötiges scrollen die Folge sein um Informationen weiter betrachten zu können, und der Kunde verlässt die Seite wieder. Datei wird eventuell auch bei falschem Datenformat nicht angezeigt, weil die Browserunterstützung fehlt. Die Information könnte somit dem Kunden vorenthalten bleiben, weil erst ein PlugIn installiert werden muss, um die Botschaft wiedergeben zu können.
  3. Die Datei in die nutzungsnotwendige Auflösungsgröße skalieren.
  4. Datei auf das größtmögliche Maß ohne Verlust relevanter Informationen komprimieren mit gleichzeitiger Wahl der besseren Rendering-Technik. interlaced, proggressiv usw.

Fotos optimieren

Dateioptimierung: Für zielgruppenorientiertes Besucheraufkommen und Kundengenerierung ist es wünschenswert, dass jedes zur Veröffentlichung bereitgestelltes Bild weiter optimiert wird. Haben Illustrationen keinen Inhaltsnamen sowie sinngemäßen Dateinamen, sind Ordnerstrukturen schlecht gesetzt, und werden keine META-Daten hinterlegt, können Suchmaschinen relevante Informationen auf der Seite nicht finden, und der Suchende erhält kein Suchergebnis die zu dir mit den von ihm verlangten Suchergebnis führt.

1. Es bietet sich an, einen kurzen aussagekräftigen, aber inhaltsgemäßen Dateinamen zu wählen.
2. META-Daten hinzufügen. Aber Vorsicht, hier könnten auch zu viele oder unerwünschte informationen Bereits enthalten sein. Denn Handys speichern "versteckte" Informationen wie Standort-Daten in Fotos mit ab. Dadurch hatten unerwünschte Personen mit auslesen von META-Daten bei ihren kriminellen Aktivitäten leichtes Spiel. Dies wird heute noch sehr unterschätzt. Zum Optimieren der Meta-Angaben benutze ich gerne das Programm Adobe Bridge. Wenn man zum Beispiel Photoshop im Abo hat, ist es inklusive. Folgende Daten sollten jedoch als META gesetzt werden. Weitere je nach Bedarf.
   • Titel
   • Beschreibung
   • Keywords
   • Autor
   • Copyright
   • Lizenz
3. Aussagekräftiger Dateiname für das Bild

Bilder einbinden

Einbinden: Nun sind alle Schritte der eigentlichen Bildoptimierung getätigt und kann endlich eingebunden werden. Folgende Maßnahmen gehören zwar nicht mehr direkt zur Bildoptimierung und ist eher der HTML-Optimierung zuzuordnen, dennoch möchte ich hier auf das Thema eingehen, um es zu vervollständigen.

1. Prüfe, ob die Grafik nicht sogar mit CSS oder SVG realisierbar wären. Mein Logo oben links zum Beispiel ist keine Grafikdatei. Das Logo wird mit reinem CSS ohne Javascript dargestellt.
2. Überlege dir, mehrere Bilder in Sprites zu packen. Bedeutet, dass sich mehrere Bilder nebeneinander oder auch untereinander in einer Bilddatei befinden. Mit CSS kann man dann später das Bild positionieren.
3. Stelle eine flache, aber aussagekräftige und sinngemäße Ordnerstruktur in dem das Bild liegt her.
4. Im HEAD-Bereich des HTML Codes sollten folgende Angaben für die Suchmaschinenoptimierung enthalten sein:
   • Title
   • Description
   • Open Graph einbinden
   • Twitter Card einbinden. Teilweise liest auch Twitter die og:type aus.
   • Sonstige Angaben, wie zum Beispiel Keywords, sind nicht mehr zeitgemäß und werden von gängigen Suchmaschinen nicht mehr beachtet.
   • Wenn man nicht schon Microdata oder wie ich RDFa einsetzt, Dann sollte man überlegen, wie es mit JSON nach schema.org aussieht.
5. Im Bodybereich an der jeweiligen Stelle der einzubindenden Dateidürfen darf folgendes nicht fehlen:
   • ALT-Text
   • TITLE
   • Linktext ahref
   • Wenn nicht mit JSON realisiert, dann hier Microdata oder RDFa Vocabular einbinden.
6. Ordnerstruktur der HTML Datei
7. Dateiname der HTML Datei
8. Rechtschreibfehler wurden vermieden
9. Fotos, Videos, Musikdateien und Dokumente in die Sitemap integrieren.
10. Alles ist Responsive Design
11. Prüfen ob der Code Fehlerfrei ist um Darstellungsfehler zu vermeiden.
    • W3C Validator - HTML auf Fehler überprüfen
    • Google Markup Validator - Testtool für strukturierte Daten
    • Facebok Sharing Debugger - Validierungstool von Facebook

Die Vorgeschichte Zum Thema Bildoptimierung

Wie kam ich eigentlich auf das Thema des optimieren von Fotos? Im Rahmen einer Arbeit zur Ausbildung zum Fachmann für Qualitätsmanagement habe ich festgestellt, dass viele Verantwortliche die eine Website betreiben, die eingefügten Fotos nicht optimiert haben. Teilweise sind Bilder sogar unerlaubt verwendet worden.

Ich spreche hier nicht nur von Personen, die mit dem Thema nicht vertraut sind, sondern auch von Firmen und Agenturen. Selbst bei Webdesignagenturen habe ich Defizite in der Bildoptimierung festgestellt. Für die Analyse habe ich einige Webdesign- und Werbeagenturen, die in meinem lokalen Umfeld tätig sind, herangezogen. Aus ihrer Referenzliste habe ich zufällig aus jeweils drei Websiten Fotos und Bilder, die im jpg-Format eingebunden waren, heruntergeladen und ausgewertet.

Bei allen von mir untersuchten Fotos waren keine META-Daten eingesetzt worden. Diese Daten werten die gängigsten Suchmaschinen jedoch aus. Durch Einsatz von Content-Management-Systemen war die Ordnerstruktur, in der die Bilder hinterlegt waren, nicht sinngemäß und dadurch auch teilweise der Dateiname nicht richtig benannt worden. Positiv zu bewerten ist, dass Bilder bei fast allen Prüfungen skaliert worden sind und die Websites meistens Responsive Design waren.