Bilder für Websites formatieren

Tipps zum Gestalten von Bildern, damit sie auf jeder Bildschirmgröße klar angezeigt werden.

Zuletzt aktualisiert: 1. Januar 2025

Dank Squarespace hat das Herumrätseln bei der Formatierung deiner Bilder für das Internet endlich ein Ende. Wir erstellen sieben Varianten von jedem hochgeladenen Bild, um eine optimale Darstellung auf jeder Bildschirmgröße zu ermöglichen.

In dieser Anleitung erfährst du, wie Bilder im Internet angezeigt werden, welche Anforderungen für Bilder es in Squarespace gibt und welche Formatierungstipps du für deine Bilder anwenden kannst. Wir bieten auch Schritte zur Behebung von Problemen mit der Bildformatierung an.

Tipp

Mit hochwertigen, gut platzierten Bildern sticht deine Website besonders hervor. Um mehr zu erfahren, besuche unseren Leitfaden für beeindruckende Bilder.

Ein Video anschauen

Wie Bilder im Internet angezeigt werden

Mehrere Faktoren beeinflussen die Darstellung deiner Bilder auf Websites:

  • Spezifikationen für Bilddateien – Überprüfe unsere Anforderungen für Bilder, um sicherzustellen, dass du Bilder auf deine Website hochladen kannst.
  • Bildbreite – Bilder mit geringer Breite können auf Mobilgeräten gut aussehen, werden jedoch auf Computern verschwommen dargestellt, da Computerbildschirme breiter sind als Mobilgeräte.
  • Bildform – Auch als Seitenverhältnis bezeichnet, ist dies das Verhältnis zwischen der Höhe und Breite deines Bildes. Deine Bildform beeinflusst, wie Bilder auf deiner Website angezeigt werden. Um mehr zu erfahren, besuche Seitenverhältnisse verstehen. Wir haben auch Beispiele für gängige Seitenverhältnisse.
  • Bild-Container und Zuschneiden – Jedes Bild auf deiner Website befindet sich in einem Container, einem unsichtbaren Feld, das steuert, wie das Bild in Bezug auf andere Inhalte auf der Seite angezeigt wird. Zum Beispiel haben Banner einen rechteckigen Container. Um das Zuschneiden zu minimieren oder zu verhindern, stelle sicher, dass die Form deines Bildes mit der Form des Containers übereinstimmt. Wenn dein Bild abgeschnitten wirkt, besuche Fehlerbehebung beim Zuschneiden.
  • Responsive Design – Jede Squarespace-Website verfügt über ein Responsive Design, das die Größe deiner Bilder je nach Gerät deines Besuchers automatisch ändert.

Bildanforderungen und Best Practices

Stelle vor dem Hochladen von Bildern auf deine Website sicher, dass deine Bilder unseren Bildanforderungen entsprechen. Nach dem Hochladen kannst du die Bilddatei selbst nicht mehr ändern, sondern nur ihr Erscheinungsbild mit unserem integrierten Bild-Editor anpassen.

Bildeigenschaft Beschreibung Hinweis
Dateityp Nur JPG- .gif oder PNG- .pdf-, .psd-, und .doc- Dateien sind nicht kompatibel.
Dateigröße

20 MB-Limit

Verwende Bilder mit 500 KB oder weniger, damit deine Website schnell geladen wird.

Am besten ist es, qualitativ hochwertige Bilder hochzuladen, die mindestens so groß oder größer als die maximale Größe sind, die das Bild auf deiner Website haben soll. Dies führt dazu, dass die skalierten Versionen des Bildes in der besten Qualität angezeigt werden.

Unser Bild-Limit für Acuity beträgt 1,5 MB. 

Dateiname Verwenden Sie nur Buchstaben, Zahlen, Unterstriche und Bindestriche. Buchstaben mit Akzentzeichen, Fragezeichen, Prozentzeichen und Et-Zeichen könnten den Upload verhindern oder unerwartete Probleme verursachen.
Bildbreite Die Breite von 2500 Pixel ist in den meisten Fällen ideal.

Du musst die Größe deiner Bilder nicht ändern, wenn sie breiter als 2500 px sind und unsere anderen Vorgaben erfüllen. Wenn du deine Bilder jedoch speziell zum Hochladen auf Squarespace exportierst, versuche, sie auf eine Breite von 2500 px zu skalieren. Dadurch erhältst du Zugriff auf die gesamte Palette der von uns erstellten skalierten Bilder, während deine Upload-Zeiten minimiert werden.

Du kannst Bilder hochladen, die kleiner als 2500 px sind, um die maximale Auflösung des Bildes, das auf deiner Website angezeigt wird, einzuschränken. Dies kann hilfreich sein, um die Geschwindigkeit zu erhöhen, mit der Besucher deiner Website dieses Bild auf einigen Geräten herunterladen können, oder um die Qualität des Bildes einzuschränken, das die Besucher deiner Website herunterladen können.

Bilder mit einer Breite von weniger als 1500 px könnten verschwommen dargestellt werden.

Wir empfehlen verschiedene Breiten für Website-Logos, Browser-Symbole und E-Mail-Marketing.

Auflösung Grenzwert von 120 MP (Megapixel) Verwende diesen Rechner oder multipliziere die Abmessungen und dividiere das Ergebnis durch 1 Million, um deine Bildauflösung zu ermitteln. Ein Bild mit 1500 px x 1650 px beträgt beispielsweise 2,47 MP.
Farbmodus RGB (Rot, Grün, Blau) Der CMYK-Farbmodus ist nur für Drucksachen geeignet und wird in den meisten Browsern nicht korrekt angezeigt. Auf Macs kann dieses Attribut als Farbprofil oder Farbraum bezeichnet werden.
Farbprofil sRGB Wenn Bilder auf Mobilgeräten nicht korrekt angezeigt werden, verwenden sie möglicherweise kein sRGB-Farbprofil.
DPI und PPI entf. Du musst dir keine Sorgen um DPI und PPI machen, da sie sich nur auf die Druckqualität eines Bildes und nicht auf die Anzeige im Web auswirken.

Denke daran, dass es je nach Größe des Originalbilds möglicherweise nicht möglich ist, deine Originalbilddatei von deiner Website herunterzuladen. Um das Risiko des Verlustes der Originaldateien zu verringern, behalte alle Bilddateien auf deinem Computer, nachdem du sie auf deine Website hochgeladen hast.

Unsere Anforderungen sind das empfohlene Minimum, um sicherzustellen, dass deine Bilder auf deiner Website gut dargestellt werden. Halte deine Seitengröße unter 5 MB, damit deine Website schnell geladen wird. Wenn du feststellst, dass deine Website langsam geladen wird, besuche Seitengröße für schnelleres Laden reduzieren.

Tipp

Optimiere die Bildgrößen, indem du die TinyIMG-Erweiterung verbindest. TinyIMG ersetzt übergroße Bilder durch komprimierte Versionen und sorgt so für ein schnelleres Laden der Seite bei gleichbleibender Bildqualität. Wir arbeiten zwar mit Drittanbieter-Services zusammen, um sicherzustellen, dass Squarespace Extensions ordnungsgemäß funktionieren, jedoch fallen Erweiterungen nicht in den Zuständigkeitsbereich unseres Supports. Wir können dir beim Verbinden oder Trennen deiner Erweiterungen behilflich sein. Bei allen anderen Fragen wende dich bitte direkt an den Anbieter der Erweiterung.

Bilddateien überprüfen

Um festzustellen, ob dein Bild unseren Anforderungen entspricht, musst du die Informationen der Bilddatei überprüfen.

Mac

So überprüfst du die Informationen eines Bildes:

  1. Wähle die Bilddatei auf deinem Computer aus.
  2. Drücke die Befehlstaste + I.
  3. Klicke in dem sich öffnenden Fenster auf Weitere Informationen.

Windows

So überprüfst du die Informationen eines Bildes:

  1. Wähle die Bilddatei auf deinem Computer aus.
  2. Drücke Alt + Enter.
  3. Klicke in dem sich öffnenden Fenster auf Details.

Mobilgeräte

Die Schritte zum Anzeigen von Bildinformationen variieren je nach App, Gerät und Betriebssystem. Lies die Dokumentation der Anwendung, die du zum Anzeigen oder Bearbeiten von Fotos auf deinem Mobilgerät verwendest.

Hinweis

iPhones und iPads mit iOS 11 und höher erfassen Bilder in einem High Efficiency Format (HEIF), das .heic-Dateien erzeugt. Diese werden automatisch in .jpg umgewandelt, wenn sie an vielen Orten importiert oder geteilt werden, einschließlich der Squarespace-App. Du kannst jedoch die Einstellungen deines Mobilgeräts anpassen, um Bilder standardmäßig als .jpg aufzunehmen. Mehr dazu erfährst du in der Dokumentation von Apple.

Bildformatierung

Wie und wo du Bilder hinzufügst, beeinflusst ihre Darstellung auf deinen Seiten. Du kannst Bilder mithilfe von Blöcken, Abschnitten und Seiten zu deiner Website hinzufügen.

Denke daran:

  • Stelle sicher, dass sich dein Bild in der richtigen Ausrichtung befindet, bevor du es hochlädst. Wenn dein Bild kopfüber gespeichert wird, drehe das Bild mit einer Bildbearbeitungssoftware, bevor du es auf deine Website hochlädst. Wenn du das Bild bereits zu deiner Website hinzugefügt hast, drehe das Bild mit unserem integrierten Bild-Editor.
  • Bilder, die zu Galerien hinzugefügt wurden, werden am besten angezeigt, wenn alle Bilder eine ähnliche Form haben. Verwende zum Beispiel alle Bilder im Querformat (Breite ist größer als Höhe) oder Bilder im Hochformat (Höhe ist größer als Breite), keine Mischung aus beidem.
  • Verwende die Geräteansicht, um eine Vorschau zu sehen, wie deine Website auf Mobilgeräten aussieht.

Transparente Hintergründe

Um ein Bild ohne Hintergrundfarbe zu erstellen, stelle sicher, dass es sich bei deinem Bild um eine PNG-Datei mit transparentem Hintergrund handelt. Du kannst dafür eine Drittanbieter-Software verwenden. Falls du ein Logo benötigst, kannst du Squarespace Logo verwenden, um automatisch ein Logo mit transparentem Hintergrund zu erstellen.

Wenn du dein Bild mit unserem integrierten Bild-Editor bearbeitest, wird es als JPG-Datei gespeichert und sämtliche Transparenzeffekte werden entfernt. Verwende stattdessen eine Drittanbieter-Software, um das PNG-Format beizubehalten.

Wie wird die Größe meiner Bilder für verschiedene Geräte angepasst?

Wenn du ein Bild hochlädst, erstellt Squarespace bis zu sieben Versionen dieses Bildes mit jeweils einer anderen Breite. Die Höhe ändert sich relativ zur Breite, um die Form des Bildes beizubehalten. Das integrierte Responsive Design von Squarespace wählt basierend auf dem Bildschirm des Besuchers automatisch die entsprechende Bildgröße aus. Die Breiten, die wir erstellen, sind:

  • 100 Pixel
  • 300 Pixel
  • 500 Pixel
  • 750 Pixel
  • 1000 Pixel
  • 1500 Pixel
  • 2500 Pixel

Müssen meine Bilder exakte Abmessungen haben?

Nein. Unser System ändert die Größe deiner Bilder automatisch so, dass sie größer oder kleiner sind, um sie an verschiedene Gerätebreiten anzupassen, weshalb du deine Bilder nicht auf exakte Abmessungen wie 750 Pixel × 500 Pixel formatieren musst. Beispielsweise gibt es keine spezifische Bildhöhe und -breite für Bild-Blöcke und eine andere Anforderung für Bilder in Galerie-Abschnitten. Befolge unsere Tipps zur Bildbreite, um sicherzustellen, dass deine Bilder nicht verschwommen sind.

Wenn deine Bilder nicht so angezeigt werden, wie du es möchtest:

Deine Bilder hinzufügen und gestalten

Du kannst Website-Stil, Design-Menüs und Einstellungen für Block- oder Seitenabschnitte verwenden, um Stil-Änderungen vorzunehmen und die Darstellung deiner Bilder anzupassen. Wie du Bilder hinzufügst und gestaltest, hängt von der Version deiner Website ab. Sieh dir die folgende Tabelle an, um zu erfahren, wie du Bilder auf deiner Website hinzufügen und gestalten kannst:

Bild anzeigen mit So gestaltest du deine Bilder

Website-Logo

Favicon oder Browser-Symbol

Bild-Blöcke

Banner oder Abschnittshintergründe

Galerie-Abschnitte

Galerie-Blöcke

Ausgewählte Bilder

  • Verwende den Bildausschnitt, um deine Bilder zu zentrieren
  • Schneide deine Bilder zu oder ändere die Form mit dem integrierten Bild-Editor.

Produkt-Blöcke

Animierte .gif-Dateien

Bild anzeigen mit So gestaltest du deine Bilder

Website-Logo

Favicon oder Browser-Symbol

Bild-Blöcke

Banner

Cover-Seiten

Galerie-Seiten

  • Gestalte die Galerie-Seiten deines Templates

Galerie-Blöcke

Ausgewählte Bilder

  • Verwende den Bildausschnitt, um deine Bilder zu zentrieren
  • Schneide deine Bilder zu oder ändere die Form mit dem integrierten Bild-Editor.

Produkt-Blöcke

Hintergrundbilder für die gesamte Website

Animierte .gif-Dateien

Text auf Bildern

Um Text über deinem Bild hinzuzufügen, empfehlen wir, ihn als Overlay hinzuzufügen, anstatt ihn in dein Bild einzubetten. Auf diese Weise kann der Text durchsucht werden und bleibt auch dann sichtbar, wenn das Bild zur Anzeige auf kleineren Geräten zugeschnitten wird. Hier findest du Tipps zum Hinzufügen von Overlay-Text zu Bild-Blöcken, Bannern, Galerie-Seiten und Galerie-Blöcken.

Wenn dein Bild Text enthält, speichere es als .png-Datei. Text in einer .jpg-Datei wird häufig verschwommen dargestellt, wenn das Bild komprimiert wird. Eine .png-Datei behält die ursprüngliche Schärfe üblicherweise bei, insbesondere bei der Darstellung in Originalgröße.

Alternativtext

Berücksichtige beim Erstellen deiner Bilder unsere Best Practices für Alternativtext. Es ist wichtig, Alternativtext zu deinen Bildern hinzuzufügen, da er dazu beiträgt, deine Inhalte für Besucher, die Screenreader verwenden, barrierefreier zu machen. Alternativtext teilt den Suchmaschinen auch mit, worum es bei dem Bild geht, wodurch die Wahrscheinlichkeit erhöht wird, dass deine Website bei Bildsuchen angezeigt wird.

Wenn du deinen Bildern keinen Alternativtext hinzufügst, wird der Dateiname als Alternativtext verwendet, mit Ausnahme von Bild-Blöcken und Auto-Layouts. Du kannst den Dateinamen für ein Bild ändern, das du bereits in der Inhaltsbibliothek hochgeladen hast.

Fehlerbehebung bei der Bildformatierung

Wenn deine Bilder abgeschnitten oder verzerrt erscheinen, hast du folgende Möglichkeiten:

  • Nimm Stil-Änderungen an dem Block, dem Abschnitt oder der Seite vor, auf der du Bilder hinzugefügt hast.
  • Befolge die Schritte unter Fehlerbehebung beim Zuschneiden.
  • Verwende Bildausschnitte, um Bilder zu zentrieren.
  • Verwende unseren integrierten Bild-Editor, um Änderungen wie Zuschneiden und Ändern des Seitenverhältnisses vorzunehmen.
  • Ändere die Größe, schneide das Originalbild zu oder bearbeite es auf deinem Gerät und lade es dann erneut hoch.

Warum sind meine Bilder unscharf?

Wenn Bilder unscharf oder pixelig erscheinen, liegt dies wahrscheinlich daran, dass sie zu schmal sind, um im Web gut angezeigt zu werden. In den meisten Bereichen von Squarespace empfehlen wir die Verwendung von Bildern, die breiter als 1500 px sind. Für einige Inhaltsbereiche gelten jedoch andere Anforderungen:

Warum erscheint eine Fehlermeldung, wenn ich mein Bild hochlade?

Überprüfe zunächst unsere Anforderungen für Bilder. Wenn du den richtigen Dateityp verwendest und dein Bild eine Dateigröße von 20 MB oder weniger hat, liegt das Problem möglicherweise in der Auflösung deines Bildes. Die Bildauflösung wird in Megapixel gemessen und unser Limit liegt bei 120 MP.

Warum sind meine Bilder farblich verzerrt?

Der Farbmodus oder das Farbprofil deines Bildes ist möglicherweise nicht korrekt formatiert. Überprüfe unsere Anforderungen für Bilder, um zu bestätigen, dass du die richtigen Einstellungen verwendest.

Warum werden meine Banner-Bilder auf Mobilgeräten zugeschnitten?

Banner-Bilder werden fast immer auf Mobilgeräten zugeschnitten, da ein Banner breit ist und Mobilgeräte eine geringe Breite haben. Mehrere Faktoren führen dazu, dass Banner-Bilder auf Mobilgeräten zugeschnitten werden. Wenn du das Zuschneiden auf Mobilgeräten bemerkst:

Warum ändert sich die Auflösung meines Bildes, wenn es in verschiedenen Größen angezeigt wird?

Wenn du die Größe von Bildern auf deiner Website änderst, führt unser Bildprozessor eine Neuauflösung der Bilder durch, anstatt die Größe des Bildes zu ändern, das die gleichen Pixelmaße beibehält. Das bedeutet, dass bei einer Größenanpassung des Bild-Containers Pixel vermischt werden können, was dazu führen kann, dass Bilder etwas unscharf werden. Wenn du Bilder hochlädst, die unseren Anforderungen und Best Practices entsprechen, kann sichergestellt werden, dass deine Bilder in jeder Größe mit angemessener Schärfe dargestellt werden – kleinere Abweichungen sind jedoch zu erwarten.

Bilder in Acuity Scheduling

Wenn du Bilder auf Acuity hochlädst, kannst du die gleichen Bilddateitypen verwenden, die beim Rest deiner Website verwendet werden. Du solltest jedoch folgende Unterschiede bei der Formatierung deiner Acuity-Bilder berücksichtigen:

  • Die Dateigrößenbeschränkung liegt unter dem Limit für Website-Bilder.
  • Bei Acuity wird die Größe von Bildern, die 600 x 120 Pixel überschreiten, automatisch angepasst, wenn sie in das Feld „Firmenlogo“ hochgeladen werden.
  • Bei Acuity wird die Größe von Bildern, die 600 x 600 Pixel überschreiten, automatisch angepasst, wenn sie als Bild für einen Kalender oder eine Terminart hochgeladen werden.
  • Für eine optimale visuelle Darstellung empfehlen wir die Verwendung von Bildern mit einer quadratischen Form oder einem Seitenverhältnis von 1:1.

Weitere Hilfe

Um mehr über das Hinzufügen von Bildern auf Squarespace zu erfahren, besuche diese Anleitungen:

Zusätzlich zu den oben genannten Anleitungen bieten wir weitere Ressourcen, die dir beim Formatieren von Bildern helfen:

Footer Image
  • Hol dir Hilfe von der Community

  • Hol dir Hilfe von unserer Community zu erweiterten individuellen Anpassungen.

  • Beauftrage einen Squarespace-Experten

  • Hebe dich online von der Masse ab, indem du dir von einem erfahrenen Webdesigner oder Entwickler helfen lässt.