Mit einem Smartphone fotografiert

ist ein Bild z.B. 4032x2268Pixel 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. 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.

Hier ein Beispiel für den Einsatz des PNG Formats

als PNG ist das gleiche Bild welches als ipg nur 54KB verbraucht 709KB groß. Vorteil ist allerdings der Transparente Hintergrund.

logoware-optimales-bildformat-transparenter-hintergrund-mit-png

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.

Als Programm zur Bearbeitung

also zum verkleinern auf 1200 und zum komprimieren 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. Er 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 unbedingt 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 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 unbrauchbar.

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

optimales-bildformat-fuer-webseiten-logoware-etiketten-100x150-thermodirekt-haengeversand-paketversand

Links: