Heute sprechen wir darüber, wie wichtig optimierte Bilder für unser Webdesign sind.
Das ist ein sehr wichtiger Punkt bei der Definition des Designs einer Website, denn davon hängen so entscheidende Faktoren ab wie die Ladezeit und mögliche Abstrafungen, die wir direkt oder indirekt von unseren Kunden, den Nutzern und sogar von Google erhalten können.
Wenn du also darüber nachdenkst, uns mit der Erstellung deiner Website zu beauftragen, zeigen wir dir ein paar Tricks, mit denen du das Verhältnis zwischen Bild, Qualität und Dateigröße optimal ausbalancierst.
1. Bilder optimieren lernen, ohne Qualitätsverlust im Webdesign
Das ist die Mindestanforderung, die wir beachten sollten. Selbst wenn wir sonst nichts aus dieser Liste umsetzen, ist dieser Punkt unverzichtbar: Es geht darum, eines dieser beiden Programme zu verwenden – ImageOptim für OS X oder FileOptimizer für Windows und Linux –, um die Bildoptimierung zu automatisieren.
Dafür müsst ihr nichts weiter tun, als eure Bilder per Drag-and-drop in die Anwendung zu ziehen, während ihr euch in Ruhe einen guten Cola Cao gönnt.
Der Prozess ist extrem schnell, erfordert keinerlei Aufwand, und das Ergebnis sind optimierte Bilder.
2. Die richtige Größe
Bilder mit falschen Abmessungen zu verwenden, ist ein häufiger Fehler, das Ergebnis kann jedoch fatal sein.
Oft glauben wir, dass alles stimmt, wenn das Bild auf dem Bildschirm in einer passenden Größe angezeigt wird. Tatsächlich kann es aber sein, dass der Browser ein Bild mit deutlich größeren Abmessungen – und entsprechend höherem Gewicht – lädt, es aber kleiner darstellt.
Die Abmessungen des Bildes sollten daher exakt der Größe des Bereichs entsprechen, den es einnehmen soll – nicht mehr und nicht weniger.
3. Für Web speichern
Diese Option kennen die Expertinnen und Experten für Webdesign bereits, und sie spart viel Zeit, wenn sie korrekt in unseren Workflow integriert wird.
Im Grunde geht es einfach darum, die Bilder, die wir für unser Webdesign bearbeiten, im Webformat zu speichern – also optimiert.
Hier seht ihr einen Vergleich: von rechts nach links jeweils „Für Web speichern“ mit 100, 70, 50 und 20 %. Je nach ursprünglicher Bildgröße ist der Unterschied mehr oder weniger deutlich zu erkennen.
Es gibt unzählige Theorien zum optimalen Qualitätsprozentsatz, aber am besten ist es, auf eure Intuition zu vertrauen: testen, speichern, zoomen, vergleichen … was auch immer nötig ist. Das ist eine gute Methode, um den Blick zu schulen und ein perfektes Ergebnis zu erzielen.
4. Brauche ich diese Bilder wirklich in meinem Webdesign?
Das ist eine gute Frage, die zusammen mit weiteren Punkten Teil der Analyse eines Webprojekts ist. Ein gutes Webdesign beginnt mit einer Bedarfsanalyse. Es geht also nicht darum, möglichst viele Bilder zu verwenden, sondern darum, ihren tatsächlichen Nutzen zu bewerten.
5. Das passende Format verwenden
Es gibt verschiedene Bildformate, und jedes hat seine eigenen Besonderheiten, Stärken und Schwächen.
Es lohnt sich, sie zu kennen, um jedes Format richtig einzusetzen.
Wenn du noch Fragen hast, ruf uns einfach in unserem Studio in Barcelona an. Wir helfen dir gern bei allem, was du brauchst.
