Das neue Titelbild sieht im Generator überzeugend aus. In WordPress dauert der Upload ungewöhnlich lange, auf dem Handy verschwindet das Hauptmotiv am Rand, und die Seite lädt schwerfällig. Solche Probleme lassen sich oft vor der Bilderstellung vermeiden. Dafür müssen Motiv, Platz im Layout und technische Ausgabe zusammenpassen.
Zuerst den Einsatzort festlegen
Ein Bild für eine Beitragskarte braucht einen anderen Aufbau als ein großes Einstiegsbild. Notieren Sie vor dem Prompt: Wo erscheint es? Wie breit wird es ungefähr dargestellt? Wird es auf schmalen Bildschirmen beschnitten? Soll daneben oder darüber Text stehen?
Eine selbständige Redakteurin könnte beispielsweise ein ruhiges Querformat für ihren Fachartikel benötigen. Das zentrale Motiv sollte auch in einer kleinen Vorschau erkennbar bleiben. Für die Startseite mit einer seitlich platzierten Überschrift wäre dagegen freie Fläche auf einer Seite hilfreich. Derselbe Export eignet sich nicht automatisch für beide Stellen.
Ein brauchbares Briefing lautet: „Redaktionelle Illustration einer Beratungssituation, Querformat, Hauptmotiv nahe der Mitte, wenige Details, großzügige freie Fläche links, keine Schrift, keine Logos.“ Die genaue Platzierung müssen Sie anschließend im echten Layout prüfen.
Pixel und Dateigröße getrennt betrachten
Die Abmessungen beschreiben Breite und Höhe in Pixeln. Die Dateigröße beschreibt die übertragenen Bytes. Eine große PNG-Datei kann bei identischen Abmessungen deutlich schwerer sein als ein komprimierter Export. Weniger Pixel allein lösen deshalb nicht jedes Ladeproblem.
Bei einem 800 Pixel breiten Inhaltsbereich können beispielsweise 1600 Pixel Bildbreite ein Ausgangspunkt für eine schärfere Darstellung auf einem Bildschirm mit hoher Pixeldichte sein. Das ist eine Rechenhilfe, kein Mindestmaß. Entscheidend sind tatsächliche Darstellung, Motivdetails und verfügbare Bildvarianten.
Bewahren Sie das Original auf. Erstellen Sie daraus eine Webfassung, statt die Arbeitsdatei immer wieder zu überschreiben. Die WordPress-Dokumentation zu Bildgröße und Qualität erläutert den Zusammenhang zwischen Auflösung, Kompression und Dateigewicht.
Welches Format passt zum Motiv?
| Format | Typischer Einsatz | Worauf achten? |
|---|---|---|
| JPEG | Fotografische Motive ohne Transparenz | Kompression kann feine Details und harte Kanten sichtbar beeinträchtigen. |
| PNG | Grafiken, Transparenz, scharfe Linien | Bei komplexen fotografischen Motiven häufig große Dateien. |
| WebP | Fotos und Illustrationen, auch mit Transparenz | Export visuell vergleichen; Einstellungen beeinflussen Qualität und Dateigewicht. |
| AVIF | Komprimierte fotografische und illustrative Webbilder | Unterstützung im eigenen Upload- und Verarbeitungsweg prüfen. |
Die Formatübersicht von MDN erklärt diese Unterschiede. Ein moderner Dateityp garantiert für sich genommen noch keinen guten Export. Prüfen Sie beispielsweise feine Konturen, Flächenübergänge und kleine Objekte bei der späteren Anzeigegröße.
WordPress unterstützt AVIF seit Version 6.5, sofern die Bildverarbeitung auf dem Server es unterstützt. Das beschreibt der am 23. Februar 2024 veröffentlichte Hinweis des WordPress-Core-Teams. Ein zusätzlicher Uploadweg kann trotzdem andere Formate erlauben. Funktioniert dort nur PNG, JPEG oder WebP, hilft die allgemeine AVIF-Unterstützung nicht weiter.
Den mobilen Ausschnitt schon im Prompt mitdenken
Steht das wichtigste Objekt ganz rechts, kann es beim Hochkant-Ausschnitt verschwinden. Platzieren Sie wesentliche Bildelemente deshalb möglichst innerhalb einer großzügigen mittleren Zone. Bei stark unterschiedlichen Layouts können zwei bewusst gestaltete Ausschnitte sinnvoller sein als ein einziges Motiv.
Ein Handwerksbetrieb könnte im breiten Startseitenbild eine ganze Arbeitssituation zeigen und auf dem Handy einen engeren Ausschnitt des Werkstücks verwenden. Diese unterschiedliche Bildgestaltung beschreibt MDN als Art Direction bei responsiven Bildern. Davon zu unterscheiden sind mehrere Auflösungen desselben Ausschnitts: Sie helfen dem Browser, eine passende Dateivariante zu wählen. Im modernen Webdesign kann man mittels Breakpoints steuern wie das Bild ausgegeben wird, oder ggf. unterschiedliche Formate bereitstellen. Gerade bei Abbildungen von Menschen können so schwerwiegende Fehler (z.B. Köpfe abgeschnitten) vermieden werden.
Vor dem Freigeben fünf Dinge prüfen
- Motiv: Sind Hände, Werkzeuge und dargestellte Abläufe plausibel? Ein dekoratives KI-Bild sollte keinen echten Kundenauftrag vortäuschen.
- Gewicht: Vergleichen Sie mehrere Exporte bei gleicher Anzeigegröße. Nehmen Sie die kleinere Datei, wenn der Qualitätsunterschied für den Einsatz unerheblich ist.
- Upload: Beachten Sie das tatsächliche Dateilimit des verwendeten Wegs. Eine erfolgreiche Übertragung belegt noch keine schnelle Seite.
- Darstellung: Kontrollieren Sie Beitragskarte, Artikelansicht und Smartphone. Prüfen Sie besonders abgeschnittene Motive und unscharfe Vergrößerungen.
- Alternativtext: Beschreiben Sie den Informationszweck kurz. Rein dekorative Bilder benötigen im passenden Kontext einen leeren Alternativtext.
Die Unterscheidung zwischen informativen und dekorativen Bildern erläutert das W3C-Tutorial zu zugänglichen Bildern. Ein Keyword-Katalog ersetzt keine hilfreiche Beschreibung.
Für die laufende Arbeit lohnt sich eine kleine Bildvorlage mit Einsatzort, Seitenverhältnis, Exportformat und Prüfnotizen. Bei einer Website gehören Gestaltung, WordPress-Verarbeitung und Hosting zusammen – genau diese Verbindung bildet auch das Angebot von Webhoster München ab. Wir bieten zudem das gesamte Spektrum der Bild- und Fotobearbeitung ab.