HOME                     LOG-IN & OUT 

Suche

Optimales Bildformat für Webseiten

Mit einem Smartphone fotografiert

  • ist ein Bild z.B. 4032×2268 Pixel groß und verbraucht 2,12MB Speicher.
  • Nach Anpassung auf 1200Pixel und Komprimierung auf 70% braucht es nur noch  54KB.
  • Das Format jpg ist perfekt, weil es komprimierbar ist.
  • Achtung: Bilder die schmaler als 1200Pixel sind, kann man nicht bei Facebook posten.
    Wir sind zwar absolut keine Facebook-Fans, wollen aber künftig auch in diese „Blase“ posten.

Beispiel für den Einsatz des PNG Formats

als PNG ist das gleiche Bild welches als ipg nur 54KB verbraucht 709KB groß. Vorteil ist der transparente Hintergrund den man braucht wenn man Bilder kombinieren will.

Test mit eingebetteten Bildern in unterschiedlichen Formaten

  • webp (36KB) kann man nicht einbetten. Also ist webp nur einsetzbar, wenn man das Bild selbst verwaltet, d.h. runter laden und hoch laden mit allen lizenzrechtliche Konsequenzen.
  • gif (122KB) Einbetten möglich aber nicht optimal – zu groß.
  • png (264KB) Einbetten möglich aber nicht optimal – zu groß.
  • JPG (nur 30KB) bei 80% Komprimierung – bestes Format
  • bmp (1055KB) sollte man nicht machen

Die Yoast-Seo-Optimierung

meckert übrigends,

  • wenn ein Beitrag kein Bild hat und
  • auch wenn bei dem Bild der Alt-Text fehlt und
  • wenn der Alt-Text keinen Bezug zum Beitrag hat.

Programm zur Bild-Bearbeitung

  • also zum verkleinern auf 1200 und
  • zum komprimieren und
  • um den Hintergrund transparent zu machen Wie?So!

empfehlen wir das kostenlose Windows-Programm Paint.net. Andere von uns getestete Programme komprimierten nicht so gut wie Paint.net.

Bilder brauchen einen ALT-Text (ALTernativ-Text)

weil Google & Co. den ALT-Text auslesen. Außerdem ist der Alt-Text wichtig für „barrierefreie“ Websites. Der Alttext wird von Screenreadern vorgelesen. Der Unterschied zu Titel und Title-Tag:  Titel: ist nur zur internen Verwaltung. Er wird beim hochladen aus dem Dateinamen automatisch generiert. Seit WordPress Version 4.7 lässt WordPress den ALT-Text leer, deshalb muss man den jetzt selbst eintragen. Und zwar bevor ein Bild auf einer Seite oder Beitrag oder einem WooCommerce-Produkt verwendet wird. Der Alt-Text kann dann außerdem auf der Seite/Beitrag/Produkt auch noch angepasst werden. Das ist wichtig für die SEO-Optimierung.  Dafür ist nämlich der Text-Bezug zur Seite wichtig.  Der Title-Tag: wird angezeigt, wenn man mit der Maus über das Bild fährt. Google liest ihn zwar auch noch aus, aber mobile Browser zeigen den Titel-Tag nicht an.

Der ALT-Text soll so kurz wie möglich sein

andererseits will man ja, dass bei der Google Bilder Suche das Bild auch in anderem Zusammenhang angezeigt wird.

  • Die Worte klein schreiben
  • durch Minuszeichen – verbinden, nicht durch Unterstrich _.
  • Außerdem ist es vorteilhaft Umlaute äüö zu vermeiden und
  • Sonderzeichen sind tabu.

Beispiel:

  • Dateiname:
    logoware-etiketten-100×150-thermodirekt-haengeversand-paketversand.jpg
  • Alt-Text nach dem hochladen in der Mediathek eingefügt:
    logoware-etiketten-100×150-thermodirekt-haengeversand-paketversand
  • Angepasster Alt-Text in diesem Beitrag:
    optimales-bildformat-fuer-webseiten-logoware-etiketten-100×150-thermodirekt-haengeversand-paketversand
  • Angepasster Alt-Text beim Produkt:  dieses Produkt jetzt anzeigen
    thermo-direkt etiketten-100x150mm-6Rollen-logoware-etiketten-100×150-thermodirekt-haengeversand-paketversand

Links: