Bilder in Webflow austauschen: Größe, Format und Alt-Text

Bilder machen eine Website lebendig. Sie machen sie aber auch langsam, wenn sie zu groß sind. Ein einziges Foto direkt vom Handy kann mehr wiegen als der ganze Rest der Seite. Hier zeige ich Dir, wie Du Bilder in Webflow austauschst und vorher so vorbereitest, dass die Seite schnell bleibt.

Ein Bild austauschen

1. Öffne die Seite im Edit Mode, am schnellsten mit ?update an der Adresse. Wie das geht, steht in meiner Anleitung zum Webflow Edit Mode.
2. Klick das Bild an.
3. Klick auf das Landschafts-Symbol und wähl ein Bild aus Deinen Assets oder lade ein neues hoch.
4. Über das Zahnrad prüfst Du den Alt-Text.

Bilder in Blogbeiträgen, Projekten oder Stellen tauschst Du im CMS-Eintrag aus, im jeweiligen Bildfeld. Unter dem Feld steht, ob das Bild quer oder hoch sein soll.

Vor dem Hochladen: drei Dinge

1. Die richtige Größe. Ein Bild muss nicht größer sein als der Platz, den es auf dem Bildschirm einnimmt, mal zwei für scharfe Displays. Für ein Bild über die ganze Breite reichen etwa 2400 Pixel, für ein Bild in einer Spalte oft 1200. Alles darüber lädt nur länger.

2. Das richtige Format. Für Fotos nimm WebP oder JPG, für Grafiken mit wenigen Farben WebP oder PNG. Ich versuche, Bilder unter 300 KB zu halten. Kostenlose Werkzeuge wie Squoosh helfen beim Verkleinern. Webflow kann Bilder in den Assets zusätzlich in WebP umwandeln.

3. Ein sprechender Dateiname. Der Dateiname taucht in der Bildadresse auf und hilft Google. Aus IMG_4711.jpg wird zum Beispiel treppe-edelstahl-ulm.webp. Kleinbuchstaben, Umlaute ausgeschrieben, Wörter mit Bindestrich.

Alt-Texte: für Menschen, die das Bild nicht sehen

Der Alt-Text beschreibt ein Bild für Menschen mit Screenreader und für Google. Er erscheint auch, wenn ein Bild nicht lädt. Du setzt ihn am besten direkt in den Assets am Bild. Dann gilt er überall, wo das Bild vorkommt.

• Beschreib, was zu sehen ist: „Edelstahltreppe mit Glasgeländer in einem Bürogebäude in Ulm“ statt „Treppe“.
• Kein „Bild von“ davor: Dass es ein Bild ist, weiß der Screenreader schon.
• Kurz bleiben: Ein Satz reicht.
• Schmuckbilder bleiben leer: Eine Hintergrundtextur oder ein reines Dekorationselement braucht keinen Alt-Text.

Mehr dazu, wie Bilder und Alt-Texte bei Google helfen, steht in meinem Beitrag Webflow SEO.

Ordnung in den Assets

Im Assets-Panel liegen alle Bilder Deiner Website. Du kannst dort Ordner anlegen, zum Beispiel für Team, Projekte oder Blog. Das klingt nach Bürokratie, spart Dir aber in einem Jahr viel Sucherei.

Alte Bilder, die Du nicht mehr brauchst, löschst Du nur, wenn Du sicher bist, dass sie nirgends mehr verwendet werden. Im Zweifel lass sie liegen oder frag mich.

Rechte an Bildern

Verwende nur Bilder, für die Du die Rechte hast: eigene Fotos, gekaufte Lizenzen oder Bilder mit klarer freier Lizenz. Bei Fotos von Menschen brauchst Du deren Einverständnis, auch bei Deinem eigenen Team. Ein Bild aus der Google-Suche ist nicht frei, nur weil es dort auftaucht.

Kurz zusammengefasst

Gute Bilder sind der schnellste Weg zu einer Website, die nach Dir aussieht. Wenn Du dafür ein Fotoshooting oder eine Bildsprache brauchst, die zu Deiner Marke passt, schreib mir. Wie schnell Deine Seite gerade ist, kann ich mir im Rahmen von Website Performance ansehen.

Das schönste Foto bringt nichts, wenn die Seite zu langsam lädt, um es zu zeigen.