Hinweis: Während unsere beliebtesten Anleitungen ins Deutsche übersetzt wurden, sind einige Anleitungen nur auf Englisch verfügbar.

Bilder für Websites formatieren

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. Unsere Anforderungen sind das Minimum, das wir empfehlen, um zu gewährleisten, dass deine Bilder auf deiner Website gut dargestellt werden. Behalte deine Seitengröße unter 5 MB, um sicherzustellen, dass deine Website schnell geladen wird. Sollte deine Website langsam geladen werden, besuche Seitengröße für schnelleres Laden reduzieren.

Bildeigenschaft Beschreibung Hinweis
Dateityp Nur JPG- .gif oder PNG- PDF-, PSD- und DOC-Dateien sind nicht kompatibel. Internet Explorer kann PNGs nicht als Favicons anzeigen.
Dateigröße

20 MB-Limit

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

Unser Bild-Limit für Squarespace Scheduling beträgt 1,5 MB. Weitere Anforderungen für Bilder in Scheduling findest du unter Bilder in Squarespace Scheduling.

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 Spezifikationen erfüllen. Bilder mit einer Breite von weniger als 1500 px können verschwommen dargestellt werden. Wir schlagen verschiedene Breiten für Website-Logos, Browser-Symbole und animierte .gifs vor.

Auflösung Limit von 60 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.

Bildformatierung

Wie und wo du Bilder hinzufügst, beeinflusst ihre Darstellung auf deinen Seiten. Du kannst Bilder zu deiner Website mithilfe von Blöcken, Abschnitten und Seiten 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.

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

Vorschaubilder

  • 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

Vorschaubilder

  • 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

Dateinamen von Bildern und Text

Bildnamen und Alternativtext

Der Name eines Bildes fungiert als Alternativtext, wenn kein anderer Alternativtext vorhanden ist. Es teilt Suchmaschinen außerdem mit, was das Bild zeigt. Dies erhöht die Wahrscheinlichkeit, dass deine Website bei Bildsuchen angezeigt wird.

Wenn du deine Bilder erstellst, beachte bitte unsere Best Practices für Alternativtexte.

Tipp: Bei den meisten Bildern können Sie den Dateinamen ändern, indem Sie das Bild mit dem neuen Namen erneut hochladen. In Bild-Blöcken können Sie das Feld Dateiname im Tab Inhalt ändern.

Bildtext

Um Text über deinem Bild hinzuzufügen, empfehlen wir, ihn als Overlay hinzuzufügen, anstatt ihn in dein Bild einzubetten. Dadurch wird der Text durchsuchbar und bleibt auch dann sichtbar, wenn das Bild auf kleineren Geräten zugeschnitten wird. Sieh dir unsere Tipps zum Hinzufügen von Overlay-Text zu Bild-Blöcken, Bannern, Galerie-Seiten und Galerie-Blöcken an.

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.

Fehlerbehebung bei der Bildformatierung

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

  • Nimm Stil-Änderungen an dem Block, 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 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 60 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:

Bilder in Squarespace Scheduling

Wenn du Bilder auf Squarespace Scheduling hochlädst, kannst du dieselben Bilddateitypen verwenden, die auf dem Rest deiner Website verwendet werden. Du solltest diese Unterschiede jedoch bei der Formatierung deiner Scheduling-Bilder berücksichtigen:

  • Die Dateigrößenbeschränkung liegt unter dem Limit für Website-Bilder.
  • Bei Scheduling wird die Größe von Bildern, die größer als 600 x 120 Pixel groß sind, automatisch angepasst, wenn sie in das Feld „Firmenlogo“ hochgeladen werden.
  • Bei Scheduling wird die Größe von Bildern, die größer als 600 x 600 Pixel groß sind, 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:

War dieser Beitrag hilfreich?
772 von 1330 fanden dies hilfreich