Bildgrößen für Websites: Welche Größe für Slider, Banner und Header?

Welche Bildgrößen für Websites sind richtig, und gibt es eine einzige korrekte Pixelgröße?

Bildgrößen für Websites sind Breite und Höhe, die Sie für den Bereich berechnen, den ein Bild auf der Seite ausfüllt. Deshalb gibt es keine einzige korrekte Pixelzahl. Ermitteln Sie Boxbreite und Seitenverhältnis, berechnen Sie die Höhe und exportieren Sie die Datei etwa doppelt so groß. Der Faktor 2 ist gängige Praxis, keine Regel.

Zum Beispiel braucht ein Bild, das einen 600 Pixel breiten Bereich ausfüllt, auf hochauflösenden Displays 1200 Pixel Breite. Diese Rechnung machen Sie einmal und wiederholen sie für jeden Bildplatz. Dann geben Sie Ihrem Designer eine klare Zahl, statt zu fragen: Wie viele Pixel?

Die Rechnung besteht aus fünf Schritten:

1. Zunächst ermitteln Sie, wie viele Pixel breit die Box auf Ihrer Seite ist.
2. Danach wählen Sie das Seitenverhältnis und berechnen die Höhe.
3. Dann multiplizieren Sie Breite und Höhe mit dem Dichtefaktor, meist mit 2.
4. Bei Bedarf exportieren Sie einige kleinere Kopien, damit der Browser die passende auswählt.
5. Schließlich prüfen Sie den Ausschnitt vor dem Hochladen, vor allem auf dem Handy.

Unten gehen wir jeden Schritt und jede Bildart mit einem Rechenbeispiel durch. Außerdem nutzen wir für Favicon (das kleine Seitensymbol im Browsertab), Vorschaubild und Apple Icon ausschließlich offizielle Dokumente.

Was sind CSS Pixel, Gerätepixel und Pixeldichte?

Ein Browser legt eine Seite in CSS Pixeln aus. Ein CSS Pixel ist eine Gestaltungseinheit, daher muss er nicht genau einem physischen Punkt auf dem Bildschirm entsprechen. Hochauflösende Displays zeichnen jeden CSS Pixel mit mehreren physischen Punkten, die wir Gerätepixel nennen. Das Verhältnis zwischen beiden heißt Pixeldichte (Device Pixel Ratio).

Nehmen wir eine Box von 600 CSS Pixeln Breite: Bei Pixeldichte 2 deckt sie 1200 physische Punkte ab. Eine Datei mit 600 Pixeln Breite muss der Browser auf diese Fläche dehnen und die fehlenden Punkte erraten. Das Bild wirkt dann weich oder unscharf.

Auch das Gegenteil verursacht Probleme, denn eine überdimensionierte Datei bringt Gewicht, aber keine Schärfe. Zum Beispiel sieht eine Datei mit 3000 Pixeln in einer 600 Pixel breiten Box nicht besser aus, sie lädt nur länger. Peilen Sie also eine Datei an, die zur Box passt.

Die Pixeldichte unterscheidet sich von Gerät zu Gerät. Dennoch ist der Faktor 2 in diesem Ratgeber gängige Praxis für die meisten Inhaltsbilder und keine offizielle Regel. Sie legen den Faktor für Ihre Seite nach den Bildschirmen Ihrer Besucher und dem akzeptablen Dateigewicht fest. Außerdem sollten Sie Bildgrößen für Websites immer als Kombination aus Box, Seitenverhältnis und Dichte sehen, nicht als eine einzelne Zahl.

Wie finden Sie die Boxbreite eines Bildes auf Ihrer Seite heraus?

Die Boxbreite ist die Breite der Fläche, die ein Bild im breitesten Layout belegt. Sie finden sie auf drei Wegen:

• Zunächst schauen Sie in die Designdatei. Der Designer sollte Breite und Seitenverhältnis jedes Bildplatzes festgelegt haben, andernfalls fragen Sie danach.
• Danach lesen Sie die Dokumentation des Themes oder Page Builders. Viele Systeme nennen, welcher Platz welche Breite nutzt, und die passende Einstellung im Adminbereich zeigt oft dasselbe.
• Schließlich öffnen Sie die Entwicklerwerkzeuge des Browsers, wählen das Bild aus und lesen die Breite ab, die es auf dem Bildschirm belegt. Machen Sie das sowohl in breiter Desktopansicht als auch in Handybreite.

Rechenbeispiel: Ein Theme hat einen Container von 1200 CSS Pixeln Breite und ein Kartenraster mit drei Spalten. Bei 24 Pixel Abstand zwischen den Spalten ist jede Karte (1200 − 2 × 24) ÷ 3 = 384 Pixel breit. Folglich bereiten Sie für das Kartenbild bei Faktor 2 eine Breite von 768 Pixeln vor.

Diese Bestandsliste vor dem Designstart aufzuschreiben spart am meisten Arbeit. Bei Webdesign für Unternehmen halten wir Breite, Seitenverhältnis und Handyausschnitt jedes Bildplatzes schon in der Designphase in einer Tabelle fest. Somit arbeiten Designer und Entwickler mit demselben Dokument.

Was ist ein Seitenverhältnis, und wie berechnen Sie die Höhe?

Das Seitenverhältnis ist die Breite geteilt durch die Höhe, geschrieben etwa als 16:9. Kennen Sie die Breite, finden Sie die Höhe mit Breite × (zweite Zahl ÷ erste Zahl). Zum Beispiel ist ein Bild bei 1200 Pixeln Breite im Format 16:9 genau 1200 × 9 ÷ 16 = 675 Pixel hoch.

Die folgenden Verhältnisse begegnen uns in der Praxis oft. Sie sind gängige Gewohnheiten und keine Regeln, und jede Höhe stammt aus einem Rechenbeispiel bei 1200 Pixeln Breite.

• 16:9 ist bei breiten Headerbildern und Videocovern üblich, die Höhe beträgt also 675 Pixel.
• 3:2 und 4:3 liegen nahe an den Originalverhältnissen von Kameras und Handys. Sie verringern den Beschnitt, und die Höhen betragen 800 und 900 Pixel.
• 1:1, also quadratisch, passt oft zu Teamfotos und manchen Produktkarten. Dann liegt die Höhe bei 1200 Pixeln.
• 1,91:1 ist das Verhältnis, das die Entwicklerdokumentation von Meta für Vorschaubilder geteilter Links empfiehlt. Anders gesagt ergibt eine Breite von 1200 Pixeln eine Höhe von etwa 630 Pixeln.

Haben Sie ein Verhältnis gewählt, schneiden Sie jedes Bild darauf zu. Zuschneiden und Strecken sind nicht dasselbe: Strecken presst das Bild in die Box und verzerrt Gesichter, Zuschneiden behält das Verhältnis und entfernt nur den Überschuss.

Rechenbeispiel: Wie kommen Sie von der Boxbreite zu den Bildmaßen?

Die Boxbreiten in der Tabelle sind Beispiele, Ihr Theme kann andere nutzen. Die Formel bleibt dagegen auf jeder Seite gleich: Die Dateibreite entspricht Boxbreite × Dichtefaktor. Aus dieser Breite und Ihrem gewählten Verhältnis leiten Sie dann die Dateihöhe ab.

Ein Bild in voller Breite füllt den ganzen Bildschirm. Rechenbeispiel: Bei einem Bildschirm von 1920 CSS Pixeln Breite verlangt Faktor 2 eine Datei mit 3840 Pixeln. Eine so große Datei an jeden Besucher zu senden macht die Seite schwer, daher setzen Sie eine Obergrenze. Diese Obergrenze ist Ihre Entscheidung, keine Regel.

Tabelle der Bildgrößen für Websites: Welche Rechnung passt zu welcher Bildart?

Diese Tabelle fasst die Bilder auf der Seite, etwa Headerbild, Slider (eine wechselnde Bildfolge), Banner und Karten, sowie die Datei der Bildmarke zusammen. Wo es keine offizielle Größe gibt, schreiben wir das offen, denn die Boxbreite hängt von Ihrem Theme und Design ab. Die offiziellen Werte für Favicon, Vorschaubild und Apple Icon folgen in einer eigenen Tabelle.

„Keine offizielle Größe“ ist keine Lücke, sondern Ehrlichkeit. Diese Bilder hängen von Ihrem Layout ab, daher fällt die Antwort auf jeder Seite anders aus. Vertrauen Sie deshalb keiner festen Zahl, die Sie irgendwo im Netz finden.

Wie groß sollten ein Headerbild und ein Slider in voller Breite sein?

Bildgrößen für Websites haben bei einem Headerbild in voller Breite keine pauschale Antwort, denn die Box ist der ganze Bildschirm. Sie wählen die Größe nach dem breitesten Bildschirm, den Sie unterstützen wollen, und nach dem Dateigewicht, das Sie akzeptieren. Gängige Praxis ist, eine Obergrenze zu setzen und dasselbe Bild in mehreren Breiten vorzubereiten.

Schauen Sie bei der Obergrenze in den Bericht Ihres Analysetools zu Geräten und Bildschirmgrößen. Nutzen die meisten Besucher Laptops und Handys, nützt eine sehr breite Datei nur einem kleinen Publikum. Somit vermeiden Sie unnötiges Gewicht von Anfang an.

Ein Slider bringt weitere Regeln mit:

• Alle Slides brauchen dasselbe Seitenverhältnis. Sonst ändert sich die Boxhöhe von Slide zu Slide, die Seite springt, oder an den Rändern entstehen Lücken.
• Bauen Sie Überschrift und Button nicht ins Bild ein. Echter Text bleibt auf kleinen Bildschirmen lesbar und erreicht Screenreader.
• Halten Sie das wichtigste Motiv mittig, denn schmale Bildschirme können die Ränder abschneiden.
• Prüfen Sie außerdem den Kontrast hinter dem Text, sonst verschwinden die Worte im Foto.

Ob Sie überhaupt einen Slider brauchen, ist eine eigene Frage. In unserem Beitrag dazu, ob ein Slider auf der Website sinnvoll ist, behandeln wir die Wirkung auf Conversions und den richtigen Einsatz. Hier bleiben wir bei den Größen.

Warum sind Banner im Inhalt auf dem Handy oft unlesbar, und wie bauen Sie sie richtig?

Ein Banner ist ein breiter Streifen, der innerhalb einer Seite eine Aktion oder Ankündigung hervorhebt. Rechenbeispiel: Ein Streifen von 1200 Pixeln Breite schrumpft auf einem Handybildschirm von 390 Pixeln auf etwa ein Drittel. Ein ins Bild eingebauter Text schrumpft im gleichen Maß und bleibt dann unlesbar.

Drei Schritte lösen das Problem:

1. Zuerst trennen Sie den Text vom Bild und setzen Überschrift und Button als echten Text.
2. Danach lassen Sie im Bild nur den Hintergrund und halten das Motiv in einer sicheren Zone.
3. Schließlich bereiten Sie für Handys einen höheren Ausschnitt vor und legen mit dem picture Element fest, welcher Ausschnitt erscheint.

Text im Bild schafft zudem ein Problem bei der Barrierefreiheit. Das Erfolgskriterium 1.4.5 der Web Content Accessibility Guidelines (WCAG) 2.2 auf Stufe AA verlangt, statt Bildern von Text echten Text zu verwenden, weil Menschen das Aussehen von Text in einem Bild nicht anpassen können. Logotypen, etwa der Markenname als Schrift, gelten als Ausnahme.

Hinweis: Die Bannergrößen von Werbenetzwerken sind ein eigenes Thema und ändern sich je nach Plattform. Prüfen Sie deshalb die aktuellen Größen in den Hilfeseiten von Systemen wie Google Ads. Dieser Ratgeber behandelt die Banner auf Ihren eigenen Seiten.

Wie groß sollte ein Titelbild für Blogbeiträge sein?

Ein Titelbild taucht an vier Stellen gleichzeitig auf: in der Karte Ihrer Blogliste, oben im Beitrag, beim Teilen in sozialen Netzwerken und in Empfehlungsbereichen wie Google Discover. Jede Stelle schneidet anders zu, deshalb bereiten Sie eine Hauptdatei mit einer sicheren Zone in der Mitte vor.

Die offiziellen Werte stammen aus zwei Quellen. Die Discover Dokumentation von Google Search Central verlangt für große Bilder mindestens 1200 Pixel Breite, aktiviert über die Einstellung max-image-preview:large. Meta empfiehlt für Vorschaubilder mindestens 1200 × 630 Pixel. Eine Datei mit 1200 × 630 erfüllt also beide Bedingungen.

Rechenbeispiel: Schneidet ein Theme eine Datei von 1200 × 630 auf ein Quadrat zu, bleiben die mittleren 630 Pixel übrig, das sind 52,5 Prozent der Breite. Ein Ausschnitt 4:3 behält 840 Pixel Breite, ein Ausschnitt 16:9 behält 1120. Halten Sie das Motiv in den mittleren 630 Pixeln, übersteht es jeden Zuschnitt.

Google rät außerdem davon ab, für Discover allgemeine Bilder wie Ihr Seitenlogo im Tag og:image und im schema.org Markup zu nutzen. Geben Sie daher jedem Beitrag ein Bild, das zu diesem Beitrag gehört.

Welche Maße passen zu Karten, Teamfotos und Kundenstimmen?

Bei Bildgrößen für Websites lautet die Hauptregel für Karten: Jedes Bild im Raster hat dasselbe Seitenverhältnis. Unterscheiden sich die Verhältnisse, ändern sich die Kartenhöhen, oder das Theme schneidet die Bilder selbst zu. Dieser automatische Zuschnitt schneidet oft aus der Mitte, sodass ein halbes Produkt oder ein halbes Gesicht fehlen kann.

Die Rechnung ist einfach. Rechenbeispiel: Eine Karte mit 384 Pixeln Breite und dem Verhältnis 4:3 braucht bei Faktor 2 eine Datei von 768 × 576 Pixeln. Schneiden Sie daher jedes Kartenbild vor dem Hochladen auf dieses Maß zu.

Teamfotos und Kundenstimmen funktionieren meist quadratisch oder hochkant. Halten Sie außerdem bei allen Personen denselben Ausschnitt, dasselbe Licht und einen ähnlichen Hintergrund, denn Einheitlichkeit schafft Ordnung und Vertrauen. Rechenbeispiel: Eine Porträtbox von 200 Pixeln braucht eine Datei von 400 × 400 Pixeln.

Eine kleine Datei zu vergrößern macht das Gesicht weich und bringt keine Schärfe zurück. Exportieren Sie stattdessen noch einmal aus dem Originalfoto. Was echte Fotos bringen, haben wir im Vergleich professionelle Fotos oder Stockfotos beschrieben.

Warum sollte Ihre Bildmarke als Vektordatei vorliegen?

Die Datei Ihrer Bildmarke (Logo) ist das kleinste Bild Ihrer Seite, und doch sehen Besucher es auf jeder Unterseite. Eine Vektordatei wie SVG baut das Bild bei jeder Größe neu auf und bleibt daher bei jeder Pixeldichte scharf. Pixeldateien wie PNG und JPG enthalten dagegen eine feste Zahl von Punkten.

In der Praxis bereiten Sie zwei Dateien vor. Auf der Seite nutzen Sie die Vektorversion, und für Orte ohne Vektorunterstützung, etwa E-Mail Signaturen und Profile in sozialen Netzwerken, halten Sie eine PNG Version bereit. Rechenbeispiel: Steht das PNG im Kopfbereich 48 Pixel hoch, exportieren Sie es mit 96 Pixeln Höhe.

Bildmarke und Favicon müssen nicht dieselbe Datei sein. Ein Favicon erscheint winzig im Browsertab und sollte deshalb schlichter sein. Außerdem behandelt WCAG den Schriftzug eines Logotyps als Ausnahme, trotzdem sollten Sie der Bildmarke einen aussagekräftigen Alternativtext geben.

Welche offiziellen Bildgrößen für Websites gelten für Favicon, Vorschaubild und Apple Icon?

Die folgenden Werte stammen aus den jeweiligen offiziellen Dokumenten. Plattformen können ihre Regeln ändern, prüfen Sie daher vor der Veröffentlichung die Quellseite.

Für Bildmarke, Karten und Slider gibt es auf dieser Ebene keine offizielle Größe. Daher berechnen Sie diese aus der Boxbreite.

Was verlangt Google, damit Ihr Favicon in der Suche erscheint?

Die Favicon Dokumentation von Google Search Central setzt wenige, aber klare Regeln. Das Favicon muss quadratisch sein und mindestens 8 × 8 Pixel messen. Außerdem empfiehlt Google eine Datei, die größer als 48 × 48 Pixel ist, damit sie auf verschiedenen Oberflächen gut aussieht.

Diese praktische Checkliste ergibt sich aus der Dokumentation:

• Nutzen Sie ein Favicon pro Hostnamen, denn Unterverzeichnisse teilen sich das Favicon der Startseite.
• Ändern Sie die Favicon URL nicht ständig, sie sollte stabil bleiben.
• Der Bildercrawler von Google muss die Datei erreichen, der Hauptcrawler die Startseite. Sperren Sie beide daher nicht in der robots.txt.
• Fügen Sie den Link zum Favicon in den Kopfbereich der Startseite ein.
• Wählen Sie ein schlichtes Zeichen, das die Marke vertritt, und meiden Sie Details, die bei kleiner Größe verschwinden.

Selbst wenn Sie alle Regeln einhalten, erscheint das Favicon in der Suche vielleicht nicht sofort, denn Aktualisierungen brauchen Zeit. Um das Problem Schritt für Schritt zu lösen, lesen Sie unseren Beitrag dazu, warum das Favicon in den Google Suchergebnissen nicht erscheint.

Wie bereiten Sie ein Vorschaubild zum Teilen vor und testen es?

Das Vorschaubild ist das Bild auf der Karte, die erscheint, wenn Sie eine Seitenadresse in einen Messenger oder ein soziales Netzwerk einfügen. Die Entwicklerdokumentation von Meta empfiehlt mindestens 1200 × 630 Pixel. Für eine große Karte liegt das Minimum bei 600 × 315 Pixeln, und die Datei darf 8 MB nicht überschreiten.

Die Dokumentation rät außerdem, nahe am Verhältnis 1,91:1 zu bleiben, damit das ganze Bild im Feed ohne Beschnitt erscheint. Kleinere Bilder erscheinen trotzdem, aber die Karte fällt deutlich kleiner aus. Beachten Sie bei der Vorbereitung drei Dinge:

• Geben Sie jeder Seite ein eigenes Vorschaubild. Sonst erscheint die Karte womöglich ohne Bild oder mit einem ungewollten.
• Halten Sie das Motiv mittig und lassen Sie an den Rändern Luft, weil Plattformen unterschiedlich zuschneiden.
• Setzen Sie Text ins Bild, halten Sie ihn kurz. Wiederholen Sie die Information zudem als Text auf der Seite.

Zum Testen nutzen Sie unser Link Vorschau Tool. Sie fügen die Seitenadresse ein, und das Tool zeigt die Karten für WhatsApp, Facebook, X, LinkedIn und Telegram. Außerdem findet es fehlende Tags und Bildfehler. Ändern Sie das Bild, bedenken Sie, dass Plattformen die alte Vorschau noch eine Weile behalten können.

Welche Datei brauchen Sie für das Apple Touch Icon?

Das Apple Touch Icon ist das Symbol, das erscheint, wenn jemand mit iPhone oder iPad Ihre Seite zum Startbildschirm hinzufügt. Laut Safari Web Content Guide von Apple legen Sie für die ganze Seite im Hauptordner eine PNG Datei namens apple-touch-icon.png ab.

Für einzelne Seiten können Sie ein eigenes Link Element ergänzen, und für mehrere Geräteauflösungen fügen Sie das Attribut sizes hinzu. Der Beispielcode im Guide zeigt Dateien mit 152 × 152, 167 × 167 und 180 × 180 Pixeln. Allerdings verweist der Guide für aktuelle Symbolgrößen auf die Human Interface Guidelines von Apple.

Passt kein Symbol zur empfohlenen Größe eines Geräts, gilt laut Guide das kleinste Symbol, das größer als die empfohlene Größe ist. Gibt es kein größeres, greift das größte vorhandene. Somit ist eine einzige große, quadratische PNG Datei besser als gar keine.

Auch Google akzeptiert diesen Link Typ, wenn es ein Favicon sucht. Folglich erledigt ein gutes Symbol zwei Aufgaben.

Wie verändern sich Bildgrößen für Websites auf dem Handy, und wie vermeiden Sie falsche Ausschnitte?

Auf einem schmalen Bildschirm schrumpft die Box. Bleibt das Verhältnis gleich, sinkt auch die Höhe, und das Motiv wirkt klein. Füllt das Theme die Box zudem mit dem Bild, beschneidet es die Ränder, und je nach Bildschirmbreite kann ein Teil des Gesichts oder der Überschrift fehlen.

Der Leitfaden zu responsiven Bildern bei MDN (der Webdokumentation von Mozilla) trennt zwei Probleme. Das erste ist die Auflösungswahl: Sie wollen schmalen Bildschirmen kleinere Dateien senden. Das zweite ist die Bildregie (Art Direction): Sie wollen in verschiedenen Layouts unterschiedliche Ausschnitte zeigen.

• Für die Auflösungswahl bereiten Sie denselben Ausschnitt in mehreren Breiten vor, zum Beispiel 480, 800, 1200 und 2400 Pixel. Dann listen Sie sie mit dem Attribut srcset auf und beschreiben mit sizes, wie viel Platz das Bild einnimmt. Der Browser wählt die beste Datei.
• Für die Bildregie nutzen Sie das picture Element. Handys bekommen einen quadratischen oder hochkantigen Ausschnitt, Desktops einen breiten. MDN betont, dass im picture Element ein img Element mit src und alt stehen muss, sonst erscheint kein Bild.
• Viele Content Management Systeme erzeugen aus einem hochgeladenen Bild kleinere Kopien. Prüfen Sie trotzdem in der Dokumentation Ihres Themes und in der passenden Einstellung im Adminbereich, welche Breiten Ihr System erzeugt.

Legen Sie schon bei der Vorbereitung den Fokuspunkt fest: Welcher Bereich muss sichtbar bleiben, das Gesicht, das Produkt oder die Überschrift? Testen Sie dann den Ausschnitt in Handy- und Desktopbreite, bevor Sie exportieren. Prüfen Sie schließlich auf einem echten Handy, denn die Browsersimulation zeigt nicht jeden Unterschied.

Was kommt nach der richtigen Größe: Komprimierung, Layoutverschiebung und Tempo?

Die richtige Größe ist Schritt eins. Schritt zwei sind Komprimierung und Dateiformat, aber dieses Thema verdient einen eigenen Beitrag. In unserem Ratgeber, wie Sie Bilder für Ladezeit und SEO optimieren, behandeln wir Formate, Komprimierung und Laden, daher wiederholen wir es hier nicht.

Schritt drei ist die Angabe von Breite und Höhe. Tragen Sie die Werte für Breite und Höhe des Bildes im Seitencode ein, reserviert der Browser Platz, bevor das Bild eintrifft. Somit springt die Seite beim Laden nicht. Die Kennzahl für dieses Springen heißt CLS (Cumulative Layout Shift). Details lesen Sie in unserem Beitrag dazu, was CLS ist und wie Sie es beheben.

Schritt vier ist das Tempo des Hauptbildes. Das breite Bild oben auf einer Seite ist oft das größte Inhaltselement, daher bestimmt es Ihre LCP Zeit (Largest Contentful Paint). Ein zu großes oder spät ladendes Headerbild lässt die Seite langsam wirken. In unserem Beitrag LCP verbessern finden Sie Ursachen und Lösungen.

Gemischte Verhältnisse in einem Slider verursachen ebenfalls Sprünge. Deshalb schützt dasselbe Verhältnis für alle Slides sowohl das Aussehen als auch Ihren CLS.

Was prüfen Sie zuerst, wenn Bilder unscharf, verzerrt oder abgeschnitten wirken?

Wirken Bildgrößen für Websites falsch, gehen Sie in dieser Reihenfolge vor, denn sie beginnt mit der Ursache, die wir in der Praxis am häufigsten sehen. Prüfen Sie den ersten Punkt zuerst, weil er der häufigste Grund für Unschärfe ist.

1. Vergleichen Sie die Pixelbreite der Datei mit Boxbreite × Dichtefaktor. Ist die Datei kleiner, exportieren Sie erneut aus dem Original, denn Vergrößern bringt keine Schärfe zurück.
2. Vergleichen Sie das Seitenverhältnis des Bildes mit dem der Box. Weichen sie ab, wirkt das Bild gestreckt oder gestaucht, also schneiden Sie zu, statt zu strecken.
3. Suchen Sie danach nach Zuschnittproblemen. Füllt das Theme die Box, rücken Sie das Motiv in die Mitte oder bereiten einen eigenen Handyausschnitt vor.
4. Wirkt die Seite schwer, prüfen Sie, ob die Datei viel größer ist, als die Box braucht. Verkleinern Sie zuerst und komprimieren Sie danach.
5. Springt der Inhalt beim Laden, kontrollieren Sie die Werte für Breite und Höhe sowie die Verhältnisse der Slides.
6. Zeigt schließlich eine geteilte Seite das falsche Bild, prüfen Sie das Tag für das Vorschaubild und den Cache der Plattform.

Beispielszenario: Ein Betrieb lädt ein Handyfoto mit 4000 Pixeln Breite direkt in einen Kartenplatz hoch. Die Karte zeigt es 384 Pixel breit, daher ist die Datei viel größer als nötig. Außerdem schneidet das Theme es quadratisch zu, sodass das Motiv halbiert wirkt. Die Lösung hat zwei Schritte: Schneiden Sie das Foto zuerst auf 4:3 zu und verkleinern Sie es dann auf 768 Pixel Breite.

Was gehört in ein Briefing für Designer oder Agentur, wenn es um Bildgrößen für Websites geht?

Ein Briefing ist ein kurzes Dokument, das die Aufgabe beschreibt. Ein gutes Briefing beantwortet die Frage „Wie viele Pixel?“ schon vor dem Start. Die folgende Liste zeigt das Minimum, das Sie einem Designer oder einer Agentur mitgeben können.

• Eine Liste aller Bildplätze: Headerbild, Slider, Banner, Titelbild, Karten, Teamfotos, Bildmarke, Favicon, Vorschaubild und Apple Icon.
• Für jeden Platz die Boxbreite und das Seitenverhältnis auf Desktop und Handy, denn daraus ergeben sich die Maße.
• Der Dichtefaktor sowie eine Obergrenze für Bilder in voller Breite.
• Die sichere Zone, der Fokuspunkt und die Frage, ob Sie einen eigenen Handyausschnitt brauchen.
• Eine Textregel: Text als echten Text setzen statt ins Bild einzubauen, außer bei Logotypen.
• Das Lieferformat: Quelldateien, exportierte Kopien sowie Vektor und PNG für die Bildmarke.
• Dateibenennung, Zuständigkeit für den Alternativtext und die Nutzungsrechte der Fotos.
• Die Abnahme, also eine Kontrolle auf Handy und Desktop plus ein Test der Link Vorschau.

Ziehen Sie Ihre bestehende Seite von einer anderen Plattform um, ergänzen Sie den Umzugsplan um eine Bildinventur. Unser Ratgeber, wie Sie von Wix umziehen und die Domain übertragen, beschreibt den allgemeinen Ablauf. Den Plan für die Bildgrößen sollten Sie allerdings gemeinsam mit dem Design der neuen Seite neu erstellen.

Welche kostenlosen Tools von uns beschleunigen die Arbeit mit den Maßen?

Drei kostenlose Tools erleichtern diese Berechnungen und Kontrollen. Die ersten beiden laufen in Ihrem Browser, ohne Ihre Dateien hochzuladen.

• Bild verkleinern: Sie tippen die Breite ein, und das feste Seitenverhältnis berechnet die Höhe für Sie. Danach laden Sie JPG, WebP oder PNG herunter.
• Bildformat umwandeln: Das Tool wandelt JPG, PNG und WebP im Stapel um. Qualität und Hintergrundfarbe stellen Sie selbst ein.
• Link Vorschau: Sie fügen die Seitenadresse ein, und das Tool misst das Vorschaubild. So sehen Sie vor der Veröffentlichung, wie die Karten aussehen.

Ermitteln Sie zuerst die Boxbreite und tragen Sie im Tool zum Bild verkleinern das Doppelte davon ein. Prüfen Sie schließlich nach dem Livegang die Vorschaukarte mit der Link Vorschau.

Wie arbeiten wir mit Ihnen, wenn Sie das gemeinsam mit uns umsetzen möchten?

Bildgrößen für Websites schon zu Beginn von Design und Aufbau festzulegen spart Zeit und verringert spätere Korrekturen. Wir gestalten, bauen, migrieren und betreuen Ihre Website. Außerdem halten wir Ihre Bildinventur und den Größenplan gleich zu Beginn schriftlich fest.

Schauen Sie sich für Ihr Projekt unser professionelles Webdesign an und fordern Sie ein Angebot an. Wir besprechen den Umfang Ihres Projekts und erstellen ein Angebot nach Ihrem Bedarf.

Kurz gesagt: Ermitteln Sie die Boxbreite, wählen Sie das Verhältnis, multiplizieren Sie mit der Dichte und prüfen Sie den Ausschnitt auf dem Handy. Verifizieren Sie danach die offiziellen Werte in den Quelldokumenten.