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 erhältst du zahlreiche Vorschläge und Schritt-für-Schritt-Anleitungen zum Hinzufügen von Bildern überall auf deiner Website.

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 in Zahlen ausgedrückt, z. B. 3:4. Das Seitenverhältnis eines Bildes sollte stets beibehalten werden, um zu verhindern, dass Bilder verzerrt dargestellt werden. Wenn du zum Beispiel die Breite eines Bildes auf die Hälfte reduzierst, müsstest du 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 dein Bild auf deiner Website kleiner oder größer dargestellt wird. Näheres erfährst du unter 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: Du kannst Download-Links für Dateien erstellen, die nicht web-kompatibel sind.

Dateiname

Verwende ausschließlich Buchstaben, Zahlen, Unterstriche und Bindestriche in den Dateinamen. Andere Zeichen (wie Akzentbuchstaben, Fragezeichen, Prozentzeichen und Und-Zeichen) könnten inkorrekt hochgeladen werden oder unerwartete Fehler in Galerien 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 du mehrere Bilder zu einer Seite hinzufügst, denke an die Gesamtgröße deiner Seite.

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 deiner 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 findest du 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. Es teilt Suchmaschinen außerdem mit, was das Bild zeigt. Dies erhöht die Wahrscheinlichkeit, dass deine Website bei Bildsuchen angezeigt wird.

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

Du solltest vor dem Upload sicherstellen, dass jedes von dir verwendete Bild das gleiche Seitenverhältnis (Höhe:Breite) wie vor dem Hochladen aufweist. Bilder werden in der Regel in Abhängigkeit ihrer jeweiligen Höhe und Breite zugeschnitten. Wenn alle deine Bilder dasselbe Seitenverhältnis aufweisen, lässt sich besser absehen, in welcher Form der Zuschnitt erfolgen wird. Näheres erfährst du hier: Seitenverhältnisse im Überblick.

Ausrichtung

Stelle sicher, dass dein Bild richtig ausgerichtet ist, bevor du es hochlädst. Wenn dein Bild kopfüber gespeichert wurde, drehe es vor dem Hochladen mit einerBildbearbeitungssoftware.

Wenn du das Bild bereits zu deiner Website hinzugefügt hast, kannst du es mithilfe des integrierten Bild-Editors drehen.

DPI und PPI

Wenn du dir Sorgen um die Bildauflösung machst, achte vor allem auf die Abmessungen des Bildes und darauf, das alle Dateien kleiner als 500 KB bleiben, anstatt dich 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. Dies gilt insbesondere für .gif-Dateien in einem Bild-Block. Eine 1500 Pixel breite .gif-Datei wird vermutlich sehr groß dargestellt. Dies kann unter Umständen zu Geschwindigkeitseinbußen auf deiner Website führen. Wir empfehlen daher, animierte .gif-Dateien stets in der gewünschten Große zu formatieren, die letztlich auch auf deiner Website abgebildet werden soll.

Weitere Hilfe

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

War dieser Beitrag hilfreich?
650 von 1132 fanden dies hilfreich