Ein praktischer Bilder-Workflow für kleine Unternehmenswebsites

Notieren Sie, was ein Besucher dank jedes Bildes verstehen oder entscheiden soll. Eine Pension zeigt vielleicht den echten Ausblick eines Zimmers, ein Handwerksbetrieb eine saubere Ausführung und eine Beraterin ein glaubwürdiges Porträt neben der Angebotsanfrage. „Die Seite verschönern“ ist als Ziel zu ungenau.

Erstellen Sie eine kleine Liste mit Seite, Motiv, Zweck, Ausrichtung, verantwortlicher Person und Herkunft. Bewahren Sie das unveränderte Original getrennt auf und veröffentlichen Sie nur vorbereitete Kopien. So vermeiden Sie Qualitätsverlust durch wiederholtes Bearbeiten und können bei einem neuen Design anders zuschneiden.

Wählen Sie das Bild für seinen tatsächlichen Platz. Ein breites Titelbild, ein quadratisches Teamporträt und eine detaillierte Produktaufnahme benötigen verschiedene Ausschnitte. Entfernen Sie leere Flächen, aber nicht den Eingang, das Gesicht, das Material oder ein anderes Detail, das Kunden für ihre Entscheidung brauchen.

Prüfen Sie den Ausschnitt auf einem schmalen Smartphone und einem Laptop. Ein breites Restaurantfoto kann mobil zu einem belanglosen Streifen werden. Dann ist eine zweite Fassung mit Gericht und Tisch näher an der Mitte sinnvoll. Das Motiv bleibt authentisch, nur die Komposition passt sich der verfügbaren Fläche an.

Behalten Sie die Quelldatei und exportieren Sie eine Kopie ungefähr in der größten tatsächlich angezeigten Größe. Laden Sie kein volles Kamerabild für eine kleine Kachel hoch. JPEG, WebP und AVIF können für Fotos geeignet sein; PNG hilft bei Transparenz und scharfen Grafikkanten, SVG bei Logos und einfachen Vektorgrafiken. Kein Format ist immer das beste.

Beurteilen Sie die Komprimierung an Gesichtern, Schrift, Produktkanten, Verläufen und dunklen Bereichen. Verkleinern Sie die Datei deutlich, ohne sichtbare Schäden in der vorgesehenen Anzeigegröße. Google unterstützt unter anderem JPEG, PNG, WebP, SVG und AVIF und empfiehlt eine Dateiendung, die dem tatsächlichen Format entspricht.

Eine große Datei wird nicht kleiner, nur weil sie auf dem Smartphone schmal erscheint. Eine responsive Website kann mit srcset und sizes mehrere Breiten anbieten, aus denen der Browser passend zu Bildschirm und Layout wählt. Das picture-Element kann zudem einen anderen Ausschnitt oder ein modernes Format samt Ersatz bereitstellen.

Diese Technik übernimmt gewöhnlich das Website-System oder die Entwicklung. Fragen Sie, ob Uploads automatisch verkleinert werden, welche Breiten entstehen und ob eine Vorlage versehentlich das Original ausliefert. Ein normales src als Ersatz sollte bleiben, weil laut Google manche Browser und Suchprogramme darauf angewiesen sind.

Benennen Sie die Datei vor dem Upload um. doppelzimmer-meerblick-ruegen.webp ist hilfreicher als IMG_4821.webp. Google betrachtet Dateinamen als leichtes Signal; Text in der Nähe, Bildunterschrift und Alternativtext liefern mehr Zusammenhang. Ein klarer Name hält auch die Mediathek übersichtlich und sollte keine Suchwortliste sein.

Der Alternativtext, oft Alt-Text genannt, vermittelt die Funktion des Bildes an Menschen, die es nicht sehen. Das W3C empfiehlt eine kurze Beschreibung der wesentlichen Information, die Handlung bei einem verlinkten Bild und einen leeren Alt-Wert für reine Dekoration. Dasselbe Foto kann deshalb in einer Galerie einen anderen Text brauchen als auf einer Seite zum stufenlosen Eingang.

Geben Sie Breite und Höhe des Bildes an, damit der Browser vor dem Laden Platz reserviert. MDN erklärt, dass dadurch der umgebende Text nicht springt, wenn die Datei eintrifft. Das Bild kann im Layout weiterhin flexibel bleiben, weil die Maße sein Seitenverhältnis festhalten.

Bilder weiter unten dürfen häufig verzögert laden, bis Besucher in ihre Nähe scrollen. Wenden Sie Lazy Loading nicht pauschal auf das große Titelbild an. web.dev warnt, dass eine Verzögerung nahe am Seitenanfang das Bild merklich später erscheinen lassen kann. Ebenso sollte nicht jede Datei hohe Priorität erhalten.

Prüfen Sie in jeder Sprachfassung Dateiname, Alt-Text, Bildunterschrift, umgebenden Text und Linkziel. Google empfiehlt bei lokalisierten Bildern ausdrücklich übersetzte Dateinamen. Deutsch kann doppelzimmer-meerblick.webp verwenden, Englisch sea-view-double-room.webp. Halten Sie Adressen kurz und vermeiden Sie Zeichen, die das Redaktionssystem schlecht verarbeitet.

Setzen Sie wichtige Preise, Öffnungszeiten, Anleitungen oder Handlungsaufforderungen nicht in ein Foto. Bildtext ist schwieriger zu übersetzen, zu vergrößern, zu durchsuchen und zu aktualisieren. Muss eine Grafik Wörter enthalten, braucht jede Sprache eine kontrollierte Fassung und die Kernaussage zusätzlich als echten Seitentext.

Sehen Sie die echte Seite an, nicht nur die Mediathek. Testen Sie Smartphone und Rechner, zoomen Sie, blockieren Sie Bilder kurz und simulieren Sie bei Möglichkeit eine langsame Verbindung. Das wichtige Motiv muss sichtbar bleiben, die Seite ohne Bild verständlich sein und der Inhalt darf beim Laden nicht springen.

Ein kleiner Tourenanbieter kann etwa dasselbe Kajakfoto in sechs Sprachen einsetzen. Das Team bewahrt ein Original auf, erstellt breiten und schmalen Ausschnitt, exportiert passende Größen, formuliert natürliche Alt-Texte je Sprache und prüft die Buchung mobil. Der einmal dokumentierte Ablauf gilt auch für die nächste Tour.