Bilder auf die optimale Größe zu komprimieren, ohne dass ein Qualitätsverlust passiert, ist wichtig, damit sie v.a. auf den mobilen Endgeräten schnell geladen sind. Anbei ein Beitrag von Juliane von unserer Partneragentur clixmedia.eu. Bei der Optimierung der Bilder unbedingt auch gleich die richtige Bildbeschriftung mitdenken.
Gastbeitrag von clixmedia.eu
Dateiformate
- SVG: Icons & Logos
- PNG: Fotos mit Transparenzen
Durch den Alphakanal in der die Transparenz liegt, meistens größer als jpg, also nur für Fotos mit Transparenz verwenden - JPG: Normale Fotos für Header usw (Standard)
Bildgrößen
- Bildgröße Header Vollformat: 2500px
- Bildgröße von großen Fotos: 2000px
- Bildgröße sonstiger kleinerer Fotos: Mindest-Pixelgröße x2 (für Retina Bildschirme usw.) also z.B. bei 600px > 1200px verwenden
Dateiexporte & Workflows
Dateiformat SVG
In Illustrator auf „speichern“ oder „speichern unter“ gehen und SVG wählen. SVGs sind am besten für Logos, da sie teilweise nicht mal 4 KB pro Datei haben.
Dateiformate jpg & png
- Öffnen der Datei in Photoshop
- Im Menü auf Bild > Bildgröße (cmd+alt+i)
- Auflösung: 72dpi
- Lange Bildkante: Pixelanzahl definieren
- Wenn das Bild vergrößert statt verkleinert wird, „Details erhalten 2.0“ wählen
- Profil umwandeln: Menü > Bearbeiten > Umwandeln in RGB Farbprofil
- Export/Speichern unter der Dateien als jpg/png in größtmöglicher Qualität, aber maximal 5 MB
- Upload aller Fotos auf https://tinypng.com oder Upload über das gleichnamige WordPress-Plugin:
Dort werden alle Daten auf ihre minimale Größe ohne sichtbare Qualitätsverluste verkleinert, dann runterladen, Dateibenennung & fertig!
Erweiterter Workflow
Vor dem Schritt „Datei in Photoshop öffnen“
- Sortieren aller Fotos nach den Größen, in denen sie verwendet werden.
Einteilung in:
- „Header“ (2500px)
- „Lightbox“ (in 2000px)
- „Kleine Fotos“ Pixelgröße x 2
- Fotos innerhalb der Ordner nach Hochformat & Querformat sortieren*
- * „Hochformat Header“ gibt es nicht, da nur in speziellen Fällen verwendet
- Aktionen in Photoshop anlegen (Aktionen für 2500px, 2000px und 1200px für den Import anbei.)
- Aktionen in Photoshop importieren
- Menü > Fenster > Aktionen
- Auf Option gehen (drei Striche rechts oben im Fenster) > Aktionen laden
- Stapelfunktion ausführen!
- Achtung: Dafür darf keine Datei geöffnet sein!
- Menü > Datei > Automatisieren > Stapelfunktion
- Dabei ALLE Einstellungen im Dialogfenster beachten:
- Upload aller Fotos auf https://tinypng.com oder über das gleichnamige WordPress-Plugin
In der Web-Version: Nur 20 Fotos auf einmal, danach Seite neu laden und weiter machen.