Bildbedarf vor der Umsetzung klären

Erstellen Sie zunächst eine Übersicht aller vorgesehenen Bilder. Halten Sie für jedes Motiv fest, wo es erscheint, welche Funktion es erfüllt und wie prominent es dargestellt wird. Ein großflächiges Hauptbild benötigt eine andere Vorbereitung als ein kleines Vorschaubild oder ein dekoratives Hintergrundmotiv. Prüfen Sie außerdem, ob jedes Bild tatsächlich einen inhaltlichen Mehrwert bietet. Nicht benötigte Motive sollten Sie bereits in der Planung streichen.

Passende Abmessungen festlegen

Definieren Sie die voraussichtlich größten Darstellungsmaße für Desktop, Tablet und Smartphone. Bilder sollten nicht erheblich größer ausgeliefert werden, als sie im Layout erscheinen. Empfehlenswert ist, mehrere Größenvarianten einzuplanen, damit Browser abhängig vom verfügbaren Platz eine passende Datei auswählen können. Dokumentieren Sie Breite und Höhe beziehungsweise das gewünschte Seitenverhältnis. Feste Abmessungsangaben helfen dem Browser, den Platz frühzeitig zu reservieren und unerwartete Verschiebungen beim Laden zu reduzieren.

Formate nach Bildtyp auswählen

Wählen Sie das Format anhand des Inhalts und des Einsatzzwecks. Für Fotos kommen komprimierbare Rasterformate infrage; für Logos, Symbole und einfache Grafiken eignet sich häufig ein skalierbares Vektorformat. Transparenz, Detailgrad, Farbverläufe und notwendige Browserunterstützung sollten Teil der Entscheidung sein. Planen Sie bei Bedarf alternative Formate oder Rückfalllösungen ein. Die Qualitätsstufe sollte so gewählt werden, dass Bildfehler nicht störend auffallen, ohne unnötig große Dateien zu erzeugen.

Ladereihenfolge vorbereiten

Kennzeichnen Sie Bilder, die beim ersten Seitenaufruf sofort sichtbar sind. Insbesondere ein zentrales Hauptbild sollte in der technischen Umsetzung priorisiert und nicht versehentlich verzögert geladen werden. Weiter unten platzierte Bilder können dagegen bedarfsgerecht nachgeladen werden. Empfehlenswert ist eine klare Übergabe an Design und Entwicklung: Dateiname, Motiv, Zielposition, Abmessungen, Format, Größenvarianten, Priorität und Alternativtext sollten je Bild festgehalten werden.

Das Wichtigste in Kürze

Redaktioneller Ratgeber: Allgemeine Praxisempfehlungen von 12cloud. Kein Nachrichtenbericht. Dieser KI-unterstützte Entwurf ist vor Veröffentlichung fachlich zu prüfen.