Pixelbilder für Web / WP optimieren

Stefan Brechbühl @pixelstrolch

  • Wahl des Dateiformats
  • Optimierung für's Web
  • WordPress Plugins
  • Titel, Alt- und Titel-Attribut

Pixelbilder

  • Pixel: Pictures (Pics) Element
  • Bildverarbeitung = Quadratische und kleinste Einheit
  • RGB(A)
  • JPEG, PNG, GIF

Wahl des Dateiformats

  • Dateigrösse so klein wie möglich
  • Bildqualität so gut wie nötig
  • Vorteile einzelner Formate ausnutzen (Komprimierung, Transparenz, Animation)

JPEG

(Joint Photographic Experts Group)

 

Geeignet für farbige Fotografien und Verläufe

  • Verlustbehaftete Komprimierung
  • Keine Farbeinschränkungen
  • Keine Transparenzen möglich

GIF

(Graphics Interchange Format)

 

Geeignet für Logos, Illustrationen, animierte Bilder

  • Verlustfreie Kompression
  • Indizierte Farben (max. 256 Farben)
  • Animationen möglich
  • Transparenz möglich

PNG-24

(Portable Network Graphics)

 

Geeignet für Logos und transparente Bilder

  • Verlustfreie Kompression
  • Keine Farbeinschränkungen
  • Transparenz per Alphakanal

WebP

Zukunft ?

  • Verlustfreie / verlustbehaftete Kompression
  • Bessere Komprimierung als JPEG
  • Keine Farbeinschränkungen
  • Transparenz per Alphakanal
  • Animationen möglich

JPEG-Nachfolger: Einführung in das sparsame Bildformat WebP

SVG

Vektorgrafiken

 

Geeignet für Logos, Grafiken und Illustrationen

  • Unbegrenztes Skalieren möglich
  • Konstante Dateigrösse
  • Unterstützung moderner Browser
  • WordPress Plugin benötigt

«72 dpi»

  • Für das Web mit Pixel-Werten arbeiten
  • ppi = Pixel per inch (2,54 cm)
  • Wert «Auflösung» kann ignoriert werden

Für Web speichern

Photoshop Alternativen

 

Um Bildgrösse und Dateiformat festlegen zu können,
wird kein Photoshop benötigt!

JPEGmini

  • Komprimieren ohne sichtbaren Qualitätsverlust
  • Native Apps für Windows und Mac

TinyPNG

  • Alternative für PNG und JPEG
  • Photoshop Plugin

Optimierung mithilfe von WordPress Plugins

  • Komprimierung
  • Nachladen
  • Bildgrössen verwalten
  • Responsive
  • Komprimierung ohne Qualitätsverlust
  • Automatisiert für sämtliche Bildgrössen
  • Datenschutz (Keine Datenspeicherung / Standord DE)
  • € 29.00 /  € 149.00 pro Jahr
  • Unterstützung des WebP Format

Alternativen

  • Bilder ausserhalb Viewport nachladen
  • Keine Einstellungen nötig
  • Wählt zwischen jQuery und js Skript

Alternativen

  • Generiert die Thumbnails neu
  • Löscht nicht mehr benötigte
  • Theme-Wechsel
  • Maximalgrössen
  • Festlegen der JPEG Qualität
  • srcset Attribut wird automatisch gesetzt
  • Lädt Picturefill Pollyfill von RICG
  • Bekannte Mitwirkende

Titel, Alt- & Titel-Attribut

(seit WP 3.5)

  • Medien-Upload Titel
    • Name innerhalb Mediathek
  • Alt-Attribut (Wichtigste Bild-Information)
    • Wird von Screenreadern benötigt
  • Titel-Attribut (Sekundäre Bild Information)
    • Titel erscheint bei MouseOver

Restore Image Title

Weitere Optimierungen

  • Caching
  • Content Delivery Network (CDN)

Pixelbilder für Web / WP optimieren

By Stefan Brechbühl

Pixelbilder für Web / WP optimieren

Wahl des Dateiformats | Optimierung ausserhalb von WP | WordPress Plugins | Titel, Alt- und Titel-Attribut

  • 4,648