Unsere maximale Content-Breite ist 1340px. Für Web exportiert man immer in 72 DPI (nicht 300 DPI) und 2x Auflösung (für Retina, 4K Bildschirme, etc..). Ihr müsst die Bilder nicht exakt in diesen Größen liefern.
Hier sind typische Richtwerte als Orientierung, alle Angaben sind bereits 2x Auflösung:
- Große Hero-Bilder (volle Breite): ca. 1600-2000px Breite (WordPress cappt bei 2000px, das ist normal)
- Mittlere Bilder (2er Grid, nebeneinander): ca. 1200-1400px Breite pro Bild
- Kleinere Bilder (3er Grid): ca. 800-900px Breite pro Bild
- Thumbnails und Cards: ca. 600-800px Breite
- Icons und kleine Grafiken: ca. 200-400px Breite
Wichtig ist das richtige Format (PNG/JPG/SVG) zu wählen. Die genauen Größen passen wir Entwickler dann im Code an.
Bildformate & Export
Beim Export seht ihr direkt die Dateigröße im Export-Dialog. Das ist euer bester Indikator:
PNG verwenden wenn:
Ihr Transparenz (z.B. Logos, Icons ohne Hintergrund) braucht oder flache Grafiken habt mit wenigen Farben (Illustrationen, Icons, Diagramme, …). Flat Designs mit klare Flächen sind perfekt für PNG. Wenn die Datei dabei unter 100-150 KB bleibt, seid ihr safe.
JPG verwenden wenn:
Es Fotos sind oder Bilder mit vielen Farben und Farbverläufen. Fotos sind niemals PNG-Dateien, sonst werden die Dateien viel zu groß! Bei JPG die Qualität auf 85-90% einstellen, das reicht völlig (vorallem weil wir später noch komprimieren).
SVG verwenden wenn:
Ihr Icons, Logos und einfache Grafiken exportiert die skalierbar bleiben sollen. SVG ist perfekt für Icons und kleine Grafiken die in verschiedenen Größen verwendet werden. WICHTIG bei SVG-Export: Keine Inline-Styles oder CSS direkt im SVG, das macht sonst Probleme im Code. In Illustrator beim Export darauf achten, dass “Presentation Attributes” statt “Inline Styles” gewählt wird bei “CSS Properties”. Einen ausführlichen Guide findet ihr hier: https://css-tricks.com/snippets/svg/abobe-illustrator-export-options/
Auf die Dateigröße achten
Wenn ihr beim Export seht, dass ein PNG plötzlich 2 MB groß wird, ist es das falsche Format. Probiert JPG. Wenn ein JPG unter 50 KB ist und eine flache Grafik, könnte PNG schärfer sein. Faustregel für Web Export: Je kleiner die Datei, desto besser. Über 500 KB ist zu groß, außer bei riesigen Hero-Bildern.
Nach dem Export komprimieren
Schickt die Bilder nach dem Export noch durch Tinify auf https://tinypng.com. Das reduziert die Dateigröße um 30-50% ohne sichtbaren Qualitätsverlust.
Dateinamen
Bitte verwendet beschreibende Namen ohne Leerzeichen und Umlaute und ohne Zahlen:
- hero-omega3-fullwidth.jpg
- produkt-vegan-oel-card.jpg
- logo-norsan-transparent.png
- icon-sommeraktion.svg
Also: kleinbuchstaben-mit-bindestrichen.format