Anmerkung: Während unsere beliebtesten Anleitungen ins Deutsche übersetzt wurden, sind andere Anleitungen bisher nur auf Englisch verfügbar
Bilder zur Anzeige im Internet formatieren

Dank Squarespace hat das Herumrätseln bei der Formatierung Ihrer 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.

Wir geben Ihnen einige Empfehlungen, wie Sie Ihre Bilder vor dem Hochladen formatieren sollten. Befolgen Sie die unten aufgeführten Vorschläge, um bestmögliche Ergebnisse zu erzielen.

Tipp: In unserer Video-Serie Alles über Bilder erhalten Sie zahlreiche Vorschläge und Schritt-für-Schritt-Anleitungen, wie Sie Bilder am besten auf Ihrer Website hinzufügen.

Ein Video anschauen

Bevor Sie beginnen

So finden Sie heraus, welche Größe und Abmessungen Ihr Originalbild aufweist, bevor Sie es auf Ihre Website hochladen:

  • PC - Rechtsklick auf die Bilddatei, dann Eigenschaften auswählen.
  • Mac - Halten Sie die Optionstaste gedrückt, während Sie auf eine Bilddatei klicken, und wählen Sie dann Informationen abrufen.

Glossar

Hier werden einige der Begriffe erklärt, auf die Sie in dieser Anleitung stoßen.

  • Aspect ratio (Seitenverhältnis) Das Seitenverhältnis eines Bildes gibt Auskunft über das Verhältnis von Höhe zu Breite und wird durch Zahlen ausgedrückt, wie etwa 3:4. Das Seitenverhältnis eines Bildes sollte stets beibehalten werden, um zu verhindern, dass Bilder verzerrt dargestellt werden. Wenn Sie zum Beispiel die Breite eines Bildes um die Hälfte verringern, müssten Sie die Höhe ebenfalls halbieren.
  • Bildbreite - In dieser Anleitung bezieht sich der Begriff „Bildgrößen“ auf die Anzahl der Pixel entsprechend der Breite und Höhe eines Bildes. Je nach Container-Größe kann es sein, dass Ihr Bild auf Ihrer Website kleiner oder größer dargestellt wird. Näheres erfahren Sie hier: Bildgröße anpassen.

Was passiert, nachdem ich ein Bild hochgeladen habe?

Wenn Sie ein Bild hochladen, erstellt Squarespace sieben Versionen dieses Bildes mit jeweils unterschiedlicher Breite. Die Breiten sind:

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

Die Höhe wird relativ zur Breite verändert, um das Seitenverhältnis des Bildes zu bewahren. Das in Squarespace eingebaute anpassungsfähige Design wählt basierend auf dem Bildschirm des Besuchers automatisch die geeignete Bildgröße aus.

Hinweis: Bilder wie etwa Hintergrundbilder, die Sie mithilfe des Style Editor hochladen, werden automatisch in der ursprünglichen Bildbreite dargestellt. Wir empfehlen den Upload von Bildern, die an ihrem längsten Punkt maximal 2500 Pixel aufweisen. Weitere Tipps finden Sie in unseren bewährten Verfahrensweisen zum Umgang mit Bildern weiter unten.

Anforderungen an das Bild

Wenn Sie ein Bild auf Ihre Website hochladen, folgen Sie diesen Richtlinien:

Dateitypen

Speichern Sie Bilder ausschließlich als .jpg, .gif oder .png.

Dateien wie .pdf, .psd, .tff und .doc sind im Web nicht kompatibel.

Hinweis: Sie können Download-Links für Dateien erstellen, die im Web nicht kompatibel sind.

Dateiname

Verwenden Sie ausschließlich Buchstaben, Zahlen, Unterstriche und Bindestriche in den Dateinamen. Andere Zeichen (wie Fragezeigen, Prozent-Zeichen und Und-Zeichen) könnten inkorrekt hochgeladen werden oder unerwartete Fehler im Galerieverhalten verursachen.

Dateigröße

Es besteht eine Größenbegrenzung von 20 MB für alle hochgeladenen Bilder. Dennoch empfehlen wir Bilddateien mit einer Größe unter 500 KB, um optimale Ergebnisse zu erzielen. Wenn es um die Bildgröße geht, ist größer nicht immer besser.

Auflösung

Die Bildauflösung ist auf 60 MP (Megapixel) begrenzt.

Farbmodus

Speichern Sie Bilder im RGB-Farbmodus. Bilder im Druckmodus (CMYK) werden in den meisten Browsern nicht angezeigt.

Farbprofil

Speichern Sie Bilder im sRGB-Farbprofil. Wenn Bilder auf Mobilgeräten nicht korrekt angezeigt werden, liegt dies wahrscheinlich daran, dass sie kein sRGB-Farbprofil verwenden.

Bewährte Verfahrensweisen bei Bildern

Bildbreite

Die tatsächlichen Abmessungen des zum Upload auf Ihre Website vorgesehenen Originalbildes können die Darstellung des Bildes maßgeblich beeinflussen. Wir empfehlen, Bilder mit einer Breite von 1500 bis 2500 Pixeln zu verwenden.

  • Bilder mit einer Größe von weniger als 1500 Pixeln können verschwommen oder pixelig wirken, wenn sie auf die gewünschte Container-Größe gestreckt werden, wie etwa Banner.
  • In den meisten Fällen wird Squarespace besonders große Bilder auf die maximale Breite von 2500 Pixeln umformatieren. Bilder, die Sie mithilfe des Style Editor hinzufügen (wie etwa Hintergrundbilder oder Banner, die die gesamte Breite der Website ausfüllen), werden automatisch mit ihren ursprünglichen Abmessungen geladen. Wenn ein Bild an seinem längsten Punkt über 2500 Pixel aufweist, kann dies zu Problemen beim Laden der Seite führen.

Die Abmessungen eines Bildes können im Adobe Creative Cloud Image Editor oder mithilfe von Drittanbieter-Software reduziert werden. Wir raten grundsätzlich davon ab, kleinere Bilder zu vergrößern, da das jeweilige Bild in diesem Fall pixelig wirken könnte. Starten Sie stattdessen lieber gleich mit einem Bild, das zumindest 1500 Pixel breit ist. Durch unsere Kooperation mit Getty Images können Sie auch nach qualitativ hochwertigen Bildern suchen.

Tipp: Wenn Sie beim Laden von Bildern auf Probleme stoßen (beispielsweise wenn ein Hintergrundbild auf Mobilgeräten nicht angezeigt wird), versuchen Sie den längsten Punkt aller Bilder auf 1500 Pixel zu beschränken. So bieten Sie Ihren Besuchern stets ein ideales Gleichgewicht aus Bildqualität und Ladezeit.

Bilder zuschneiden

Bilder, die auf Ihrer Website etwa mithilfe des Zuschneidewerkzeugs oder über Anpassungen des Seitenverhältnisses im Style Editor zugeschnitten werden, laden Browser dennoch in vollständiger Größe. Um die Dateigröße von besonders großen Bildern zu verringern, sollten diese mit Drittanbieter-Software oder dem integrierten Adobe Creative Cloud Image Editor zunächst manuell auf die gewünschte Größe zugeschnitten werden.

Seitenverhältnis

Sie sollten vor dem Upload sicherstellen, dass jedes von Ihnen verwendete Bild das identische Seitenverhältnis (Höhe:Breite) aufweist, da Bilder in Abhängigkeit ihrer jeweiligen Höhe und Breite zugeschnitten werden. Wenn all Ihre Bilder dasselbe Seitenverhältnis aufweisen, lässt sich besser absehen, in welcher Form der Zuschnitt erfolgen wird. Näheres erfahren Sie hier: Seitenverhältnisse im Überblick.

Ausrichtung

Stellen Sie sicher, dass Ihr Bild richtig ausgerichtet ist, bevor Sie es hochladen. Wenn Ihr Bild kopfüber gespeichert wurde, drehen Sie das Bild mit der Bildbearbeitungssoftware, bevor Sie es auf Ihre Website hochladen. Eine Liste mit Bildbearbeitungsprogrammen finden Sie hier: Bilder für Ihre Website bearbeiten.

Wenn Sie das Bild bereits zu Ihrer Website hinzugefügt haben, können Sie es mithilfe des eingebauten Adobe Creative Cloud Image Editor drehen.

DPI

Im Zusammenhang mit der Bildauflösung brauchen Sie sich über DPI (dots per inch) oder PPI (pixels per inch) keine Sorgen machen, da keiner der beiden Werte die Bildqualität im Internet beeinflusst. Konzentrieren Sie sich stattdessen darauf, die optimalen Bildabmessungen für Ihre Website zu wählen, und halten Sie die Dateigröße unter 500 KB.

Seitengröße

Selbst wenn all Ihre Bilder kleiner als 500 KB sind, kann eine hohe Anzahl von Einzelbildern auf einer Seite zu Problemen wie etwa langen Ladezeiten führen. Prüfen Sie daher den Inhalt Ihrer Seite genau, um sicherzugehen, dass Ihre Einzelseiten nicht größer als 5 MB sind.

Logos

Wenn Sie ein Logo auf Ihrer Website hinzufügen, laden Sie es in einer ähnlichen Bildhöhe hoch, mit der es angezeigt werden soll. Bei einigen Templates können Sie die angezeigte Höhe im Style Editor mithilfe der Anpassung Logo Image Height (Logo-Höhe) anpassen.

Hinweis: Vermeiden Sie es, Ihre Logos im Style Editor zu vergrößern. Es ist besser, mit einem größeren Bild zu beginnen und es zu verkleinern, nachdem es auf Ihre Website hochgeladen wurde.
Hinweis: Jedes Template geht unterschiedlich mit Logos um. Näheres über die Darstellung von Logos in Ihrem Template erfahren Sie in unseren Template-Anleitungen.

Favicons

Wenn Sie ein Favicon auf Ihrer Website hinzufügen, stellen Sie sicher, dass das gewählte Bild als .ico oder .png gespeichert wurde.

Die empfohlenen Dateiabmessungen für ein Favicon sind 100 px × 100 px bis 300 px × 300 px. Favicons werden in Browsern mit 16 px × 16 px dargestellt.

Hinweis: Der Internet Explorer kann keine .png-Dateien als Favicons anzeigen.

Animierte .gif-Dateien

Animierte .gif-Dateien bilden eine Ausnahme zu unserer Regel von 1500 - 2500 Pixeln, insbesondere .gif-Dateien in einem Bild-Block. Eine 1500 Pixel breite .gif-Datei wird vermutlich sehr groß dargestellt, was unter Umständen zu Geschwindigkeitseinbußen auf Ihrer Website führen kann. Wir empfehlen daher,  animierte .gif-Dateien stets in der gewünschten Große zu formatieren, die letztlich auch auf Ihrer Website abgebildet werden soll.

Hilfreiche Links

Bilder erstellen und bearbeiten

Links zu empfohlenen Bildbearbeitungsprogrammen finden Sie hier: Bilder für Ihre Website bearbeiten.

Der integrierte Adobe Creative Cloud Image Editor

Hilfestellungen zur Bearbeitung von Bildern auf Ihrer Squarespace-Website erhalten Sie hier: Bilder mit dem Adobe Creative Cloud Image Editor bearbeiten.

High-Density- und Retina-Displays

Informationen zur Darstellung von Bildern auf High-Density- oder Retina-Displays erhalten Sie hier: Wie wird meine Website auf einem Retina-Display dargestellt?

Produkt-Bilder

Wenn Sie Bilder von Produkten hochladen, die Sie auf Ihrer Website verkaufen, stellen Sie sicher, dass das Seitenverhältnis den ausgewählten Produktgröße-Optionen im Style Editor entspricht.

Näheres erfahren Sie hier: Die Produkt-Seite gestalten.

Bild-Blöcke

Nähere Informationen zur Verwendung von Bildern in Bild-Blöcken erhalten Sie hier: Den Bild-Block verwenden.

Galerie-Blöcke

Nähere Informationen zur Darstellung von Bildern mit Galerie-Blöcken finden Sie hier: Den Galerie-Block verwenden.

Galerie-Seiten

Nähere Informationen zur Darstellung von Bildern mit Galerie-Seiten erhalten Sie hier: Die Galerie-Seite verwenden.

Hinweis: Hilfestellungen zur Formatierung von Bildern für Ihre Website finden Sie in unserem Kunden- und Entwicklerforum Squarespace Answers. Alternativ könnten Sie auch einen Squarespace-Spezialisten um Rat fragen.
War dieser Beitrag hilfreich?
193 von 358 fanden dies hilfreich
Bilder zur Anzeige im Internet formatieren