Hochauflösende Bilder aus Figma für Webflow exportieren

So optimierst du Bilder bestmöglich für deine Webflow-Projekte: ein praktischer Leitfaden

Als begeisterter Webdesigner und Webflow-Nutzer weißt du sicherlich, wie wichtig es ist, Bilder für das Web zu optimieren. In diesem Beitrag zeige ich dir, wie du Bilder als WebP-Dateien für deine Webflow-Projekte aus Figma exportieren kannst.

Schritt 1: Einsatz des "Tiny Image Compressor" Plugins für Figma

Ich verwende das kostenlose Figma Plugin Tiny Image Compressor, um Bilder als WebP aus Figma zu exportieren. Nachdem du dieses Plugin in Figma installiert hast, kannst du direkt mit der Optimierung deiner Bilder beginnen. In meinem Beispiel verwende ich ein paar Interrior-Bilder, die jedoch in ihrer Originalgröße recht groß sind.

Schritt 2: Vorbereitung der Bilder in Figma

Um die Bilder vorzubereiten, füge sie einfach in einen Frame ein. Dadurch kannst du das Bild in der gewünschten Größe und im passenden Ausschnitt bearbeiten. Skaliere und schneide dein Bild passend für deine Webseite zu.

Warum WebP JPG und PNG überlegen ist.
WebP ist ein von Google entwickeltes Bildformat, das eine effizientere Kompression als JPG und PNG bietet. Dadurch werden kleinere Dateigrößen bei vergleichbarer oder besserer Bildqualität erzielt. Dies führt zu schnelleren Ladezeiten von Webseiten, was sowohl die Benutzererfahrung als auch die SEO verbessert. WebP unterstützt verlustbehaftete und verlustfreie Kompression und bietet Transparenz wie PNG, jedoch mit effizienterer Dateigröße. Diese Eigenschaften machen WebP zur idealen Wahl für modernes Webdesign.

Schritt 3: Wähle die richtigen Exporteinstellungen

Nachdem du deine Bilder bearbeitet hast, wähle alle Frames aus und öffne das Tiny Image Compressor Plugin. Hier kannst du das Format (WebP, PNG, JPEG) und die Skalierung auswählen. Für Webflow-Projekte ist eine Skalierung von 2x ideal, um eine hohe Qualität auf Retina-Displays zu gewährleisten. Eine gute Balance zwischen Dateigröße und Bildqualität erreichst du mit einer Qualitätseinstellung von 75%.

Ein kleiner Tipp: Bei Fotos genügt definitiv eine Skalierung von 2x. Bei Grafiken, die Text enthalten verwende ich jedoch oft 3x, damit der Text schärfer aussieht.

Schritt 4: Bilder in Webflow hochladen

Nachdem du die optimierten Bilder gespeichert hast, lade sie in dein Webflow-Projekt hoch und wähle dabei die Option 'High DPI' in den Einstellungen des Bildes. So erkennt deine Website, ob deine Besucher ein Retina-Display verwenden und spielt ihnen automatisch ein Kopie des Bildes in höherer Bildqualität aus.

Was tun mit Bilder, die schon hochgeladen wurden?

Webflow hat übrigens auch eine eigene Komprimierungsfunktion, um bereits hochgeladenen Bilder zu WebP umzuwandeln. Doch leider deckt diese Funktion keine Bilder ab, die du direkt ins CMS hochgeladen hast.

Da ich die Bilder in der Regel eh alle zuschneiden muss und der Zwischenschritt mit dem Tiny Image Compressor Plugin nur wenige Sekunden dauert mache ich es immer direkt so. Zudem habe ich so bessere Kontrolle über die Maße der Bilder.

Fazit: Die Optimierung von Bildern ist ein wichtiger Schritt in der Webentwicklung.

Die Optimierung von Bildern ist ein wichtiger Schritt. Besonders wenn es um die Performance und visuelle Qualität deiner Webflow-Website geht. So stellst du sicher, dass deine Bilder in Webflow schnell laden und optimal aussehen.