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 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 über Website-Stil hochladen, werden automatisch in der ursprünglichen Bildbreite dargestellt. Wir raten dazu, Bilder hochzuladen, deren längste Seite maximal 2500 Pixel umfasst. Weitere Tipps finden Sie in unseren Best Practices für Bilder 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.

Tipp: 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.

Auflösung

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

Tipp: Um die MP für ein Bild zu finden, multiplizieren Sie die Dimensionen und dividieren Sie das Ergebnis durch 1 Million. Ein Bild mit den Dimensionen 1500 px x 1650 px ergibt 2.475 MP.

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

Dateigröße

Für bestmögliche Ergebnisse empfehlen wir Bilddateien mit einer Dateigröße von weniger als 500 KB, auch wenn das individuelle Upload-Limit 20 MB pro Bild beträgt. Wenn es um die Bildgröße geht, ist größer nicht immer besser. Der Upload von mehreren großen Bildern kann die Website-Performance beeinträchtigen. Wenn Sie mehrere Bilder zu einer Seite hinzufügen, denken Sie an Ihre Gesamt-Seitengröße.

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 über Website-Stil hinzugefügt werden (wie etwa Hintergrundbilder oder Banner, die für die gesamte Website gelten), werden automatisch mit ihren ursprünglichen Abmessungen geladen. Wenn das Bild an seiner längsten Seite über 2500 Pixel misst, 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. Fangen Sie stattdessen lieber gleich mit einem Bild an, das mindestens 1500 Pixel breit ist. Sie können auch direkt von Ihrer Website aus qualitativ hochwertige Agenturbilder suchen und hinzufügen.

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

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

Bildtext

Wir empfehlen, nach Möglichkeit Text als Overlay hinzuzufügen, anstatt den Text in das Bild zu integrieren. 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 finden Sie Tipps zum Hinzufügen von Overlay-Text zu Bild-BlöckenBannernGalerie-Seiten und Galerie-Blöcken.

Wenn Ihr Bild Text enthält, speichern Sie das Bild am besten 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.

Bildnamen

Der Name eines Bildes fungiert als Alternativtext, wenn kein anderer Alternativtext vorhanden ist. Er teilt Suchmaschinen außerdem mit, was das Bild zeigt, wodurch sich die Wahrscheinlichkeit erhöht, dass Sie in Bildsuchen erscheinen. 

Wenn Sie Ihre Bilder erstellen, beachten Sie 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.

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. 

Wenn Sie das Bild bereits zu Ihrer Website hinzugefügt haben, können Sie es mithilfe des integrierten Bild-Editors drehen.

DPI und PPI

Wenn Sie sich Sorgen um die Bildauflösung machen, achten Sie vor allem auf die Abmessungen des Bildes und darauf, die Dateigrößen unter 500 KB zu halten, anstatt sich auf DPI (dots per inch) oder PPI (pixels per inch) zu konzentrieren. DPI und PPI beeinflussen die Druckqualität eines Bildes, nicht aber dessen Anzeige im Web. 

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, wie es angezeigt werden soll.

In einigen Templates können Sie die Höhe ändern. Wenn Sie dies tun, ist es 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

Hilfestellungen zur Formatierung von Bildern für Ihre Website finden Sie in unserem Kunden- und Entwicklerforum, dem Squarespace-Forum. Alternativ könnten Sie auch einen Squarespace Expert um Rat fragen.

War dieser Beitrag hilfreich?
493 von 881 fanden dies hilfreich