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
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
- GIMP (Open Source)
- Paint.NET für Windows
- Sketch für Mac
- Pixelmator für Mac
- ...
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
- Lazy Load
- ...
- 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
Weitere Optimierungen
- Caching
- Content Delivery Network (CDN)