Anmerkung: Unsere beliebtesten Anleitungen wurden ins Deutsche übersetzt, alle restlichen Anleitungen sind bisher 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.

Note: Images uploaded via Site Styles, such as background images, always display at their original image width. We recommend loading these images with a maximum of 2500 pixels along their longest edge. For more tips, see Image best practices below.

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.

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 größeren Bildern kann die Website-Performance beeinträchtigen.

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

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 most cases, Squarespace will reformat large images to a maximum width of 2500 pixels. However, images added through Site Styles (background images and site-wide banner images) load at their original dimensions. This can cause page loading issues if the image is over 2500 pixels along its longest edge.

You can reduce an image's dimensions in the Adobe Creative Cloud Image Editor, or use third-party software. We don't recommend enlarging a smaller image, as this can make it appear pixelated. Instead, start with an image that is at least 1500 pixels wide. You can also search and add high-quality stock images directly from your site.

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

Browsers load the full image for images cropped by your site, such as those cropped with the cropping handle or Site Styles aspect ratio tweaks. To reduce the file size of large images, it's better to first crop them close to the intended size manually with third party software or the built-in Adobe Creative Cloud Image Editor.

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.

Image names

An image's name acts as alt text if there isn't any other alt text provided. It also tells search engines what the image is about, which makes it more likely that you'll show up in image searches.

When creating your images, use readable names that will make sense to people who use assistive screen readers or who've disabled images in their browser. For example, if your image name is IMG_0178.jpg, change it to something that describes the image, like blue-ceramic-glazed-planter.jpg.

Keep these tips in mind:

  • Be descriptive and helpful. How would you describe this image to someone who couldn't see it?
  • Separate each word with a hyphen or underscore.
  • Keep your image names short, typically eight words or fewer.
  • Incorporate keywords, without "keyword-stuffing."
  • You can omit words like "the" and "a," and terms like "photo" or "picture." For example, instead of a-picture-of-a-green-vase.jpg, use the name green-vase.jpg.
Tip: To change the filename for most images, re-upload the image with the new name. In Image Blocks, you can change the Filename field in the Content tab.

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

When adding a logo, upload it at a similar height to that which you'd like to display. In some templates, you can adjust the display height using the Logo Image Height tweak in Site Styles

Tip: Avoid having to increase the size of your logo in Site Styles. It's better to start with a large image and then decrease its size once it's uploaded to your site.
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.

Stock images

Before adding a stock image to your site, review our best practices.

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

When uploading images of products you sell on your site, ensure that the aspect ratio matches what you select for the product size options in Site Styles.

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?
362 von 673 fanden dies hilfreich