Bilder für Websites formatieren

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

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. Weitere Anforderungen an Bilder in Acuity findest du unter Bilder in Acuity 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 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, E-Mail-Kampagnen und animierte GIFS.
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.

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.

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:

• Stelle sicher, dass du unsere Anforderungen für Bilder befolgst
• Gestalte deine Bilder
• Behebe Fehler bei der Bildformatierung

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:

Dateinamen von Bildern und Text

Dateinamen von Bildern und Alternativtext

Wenn kein anderer Alternativtext bereitgestellt wird, dient der Dateiname eines Bildes als Alternativtext. Der Alternativtext teilt Suchmaschinen auch mit, was das Bild zeigt. Dies erhöht die Wahrscheinlichkeit, dass deine Website bei der Bildsuche angezeigt wird. Bild-Blöcke haben nur eine Quelle für Alternativtext.

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

Tipp: Bei den meisten Bildern kannst du den Dateinamen ändern, indem du das Bild mit dem neuen Namen erneut hochlädst.

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, 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 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:

• Erfahre, wie Banner und Abschnittshintergrundbilder auf Mobilgeräten dargestellt werden
• Erfahre, wie du deine Banner anpassen kannst

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:

• Videoserie: Alles rund um Bilder
• Bilder hinzufügen und ihre Größe ändern
• Ein Website-Logo hinzufügen
• Bilder auf Ihrer Website bearbeiten
• Agenturbilder suchen und hinzufügen
• Best Practices für Agenturbilder
• Importieren von Bild-Metadaten

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

• Lass dich von der Community im Squarespace-Forum beraten.
• Beauftrage einen Squarespace-Experten, um zu helfen.