← Zurück zum Agenturalltag
31.10.2026
Die Gestaltung einer Website lebt von guten Bildern. Wenn ein Motiv unpassend beschnitten ist oder erst spät erscheint, verliert es jedoch an Wirkung. Die Lösung besteht selten darin, jedes Bild einfach stärker zu komprimieren.
Den Einsatzort zuerst ansehen
Eine große Projektabbildung, ein Vorschaubild und ein Porträt erfüllen verschiedene Aufgaben. Eine Broschürenseite sollte lesbar bleiben. Bei einem Logo müssen feine Linien und Buchstaben erhalten werden. Ein Foto kann dagegen oft anders beschnitten werden, solange sein wichtigster Inhalt sichtbar bleibt.
Deshalb beginnt die Vorbereitung mit dem Bildformat auf der Seite: Wie breit wird das Motiv tatsächlich gezeigt? Welche Bildteile dürfen auf dem Smartphone entfallen? Braucht eine Illustration Freiraum statt eines engen Anschnitts?
Mehrere passende Größen statt einer einzigen Riesendatei
WordPress unterstützt responsive Bilder über die Attribute srcset und sizes. Damit kann der Browser zwischen bereitgestellten Bildgrößen wählen. Das hilft allerdings nur, wenn die Bildausgabe und die verwendete Vorlage diese Möglichkeiten auch sinnvoll nutzen.
Wichtig ist deshalb die Kontrolle auf verschiedenen Bildschirmbreiten. Ein breiter Desktop-Ausschnitt kann mobil unbrauchbar sein; ein kleines Vorschaubild kann für die vergrößerte Projektansicht zu wenig Details enthalten.
Die fertige Seite entscheidet
Nach dem Export gehört das Bild auf die echte Seite: mit den tatsächlichen Abständen, dem Hintergrund und den übrigen Inhalten. Erst dort lässt sich beurteilen, ob Kontrast, Schärfe und Ausschnitt zusammenpassen.
Für Logos, Screenshots und Fotos gelten dabei unterschiedliche Anforderungen. Ein pauschaler Qualitätswert für sämtliche Bilder ist bequem, aber selten die beste gestalterische Lösung. Ziel ist eine angemessene Datei für eine überzeugende Darstellung – auch unterwegs.
Weiterführende Quelle: WordPress: Responsive Images. Stand dieses Beitrags: Oktober 2026. Das Beitragsmotiv ist eine KI-generierte Illustration.