Lade dir unser kostenloses Handbuch herunter, das dir bei der Gestaltung deiner Website helfen wird.
Die eingegebene E-Mail-Adresse ist ungültig.
Vielen Dank für deine Anmeldung.
Mit der Angabe deiner E-Mail bestätigst du, dass du unsere Datenschutzerklärung gelesen und verstanden hast und einverstanden bist, Marketing-E-Mails von Squarespace zu erhalten.
Der erste Eindruck, den deine Zielgruppe von deiner Website erhält, ergibt sich auch aus den Bildern, die du zur Repräsentation deiner Marke auswählst. Fotos und sonstige Medien, die den schriftlichen Inhalt deiner Website ergänzen, sind wesentliche Bestandteile beim Aufbau einer Website und unterstützen dich dabei, deine Ziele zu erreichen.
Hier erfährst du, wie du Bilder für deine Website beschaffst, welche Bildformate sich am besten eignen, wie du deiner Webseite Bilder hinzufügst und wie du Fotos für die Suchmaschinen und Barrierefreiheit optimierst.
Wo kannst du Bilder für deine Website beschaffen?
Der erste Schritt bei der Auswahl von Bildern für deine Website besteht darin, zu identifizieren, welche Art Bilder zu deiner Marke passen. Hast du entschieden, welche Ästhetik deiner Marke entspricht, kannst du Fotos und Bilder beschaffen, um deinen ästhetischen Ansatz umzusetzen.
Agenturbilder oder Bildgeneratoren sind ein guter Ausgangspunkt, vor allem wenn du dein Unternehmen gerade startest und vielleicht noch nicht viele eigene Bilder besitzt. Squarespace bietet Integrationen mit Agenturbild-Anbietern, um hochwertige, erschwingliche Bilder zu finden, die du auf deiner Website nutzen kannst.
Alternativ kannst du selbst Bilder für deine Website aufnehmen oder Fotograf:innen engagieren, sofern dies dein Budget zulässt.
Squarespace arbeitet mit soona zusammen, um Services im Bereich Produktfotografie anzubieten. Sende deine Produkte an soona und wähle die Art der Bilder und den gewünschten Stil aus, von GIFs und Videos bis hin zu Fotos von deinen Produkten mit Hand- oder Ganzkörpermodellen. Du kannst deine eigenen Fotos erstellen oder ihr Squarespace Starter Pack oder Squarespace Deluxe Pack verwenden.
Deine eigenen Fotos zu machen oder mit einem Drittanbieter zu arbeiten ist zeitaufwändiger als die Auswahl von Agenturbildern, aber die Vorteile liegen auf der Hand. Fotos, die deine Marke direkt repräsentieren – z. B. Fotos von dir selbst, deinem Studio oder Ladengeschäft, deinen Verkaufsartikeln oder deinem Team in Aktion – stärken deine Glaubwürdigkeit und bauen Vertrauen bei deinem Publikum auf.
Unabhängig davon, ob du Agenturbilder verwendest oder nicht, solltest du daran denken, beim Verkauf deiner Produkte Originalfotos für deinen Onlineshop anzufertigen.
So formatierst du Bilder für deine Website
Wenn du deiner Website Fotos hinzufügst, entscheide dich für Bilder mit hoher Auflösung, deren Form in etwa den Bereichen entspricht, wo du sie deinem Website-Template hinzufügst. Wenn du beispielsweise ein Banner-Bild hochlädst, wähle ein Banner-Bild aus, dessen Breite die Höhe übersteigt.
Darüber hinaus werden mit dem Responsive Design von Squarespace-Websites deine Bilder automatisch an jede Plattform, an denen sie angezeigt werden, angepasst: Mobilgeräte, Desktop-Browser oder unterschiedliche Anzeigebreiten.
Damit Fotos und Bilder schnell und einwandfrei auf deine Website geladen werden, solltest du unbedingt auf Dateiformat, Auflösung und Größe der Bilder achten.
Die besten Bildformate für Websites
Am besten eignen sich die Formate JPEG (für Fotos) und PNG (für andere Bilder). JPEG ist das beste Format für Fotos auf deiner Website und kann das breite Farbspektrum abbilden, das für Fotos charakteristisch ist. Das beste Bildformat für Websites sind PNGs, die gestochen scharfe Grafiken wie Logos oder Infografiken ohne große Farbvariationen unterstützen.
Die beste Größe und Auflösung für Website-Bilder
Unabhängig von deinem gewählten Bildformat ist eine hohe Auflösung deiner Bilder von entscheidender Bedeutung. Wir empfehlen Bildgrößen von 1500 bis 2500 Pixeln.
Es ist wichtig, dass du eine ausgewogene Mischung aus Bildern mit höher Auflösung und kleineren Dateien präsentierst. Lädst du Fotos oder Bilder hoch, die zu groß sind, beeinträchtigt das die Ladezeit deiner Webseite. Experimentiere damit, Bilddateien zu komprimieren, und passe so die Bildauflösung sowie Dateigröße an, oder skaliere das Bild, wenn es sehr groß ist. Fast alle beliebten Bildbearbeitungsprogramme bieten diese Möglichkeiten.
Bewährt hat sich für JPEG- oder PNG-Dateien eine Größe von maximal 500 KB pro Bild. Für optimale Ladezeiten sollte jede einzelne Seite deiner Website nicht größer als 2 MB sein. Die Größe deiner einzelnen Seiten kannst du auf zweierlei Arten ausfindig machen: mit Online-Tools von Drittanbietern oder mit den integrierten Entwicklertools deines Webbrowsers.
So identifizierst du die Größe einzelner Webseiten mit Entwicklertools:
Klicke auf der Webseite mit der rechten Maustaste und wähle „Überprüfen“ oder „Seiten-Inspektor“ aus (das richtet sich danach, welchen Browser du verwendest). Das Dashboard, das sich anschließend öffnet, nennt man deine Entwicklertools.
Wähle oben in diesem Dashboard den Reiter „Netzwerk“.
Lade die Seite neu.
Die Zahl, die vor dem Wort „übertragen“ erscheint, gibt die Größe dieser Webseite an. Wenn dort beispielsweise „200 KB übertragen“ steht, bedeutet das, deine Webseite liegt unter der maximalen Größe von 2 MB.
Deiner Website Bilder hinzufügen
Hast du deine Fotos ausgewählt und komprimiert, kannst du sie deiner Website hinzufügen. Dabei geht es im Wesentlichen um zwei Schritte: die Anpassung deiner Bilder an dein Seiten-Layout und die Harmonisierung von Bildern und Text.
Bilder in deine Website integrieren
Beginne mit einem Website-Template. Das ist die einfachste Möglichkeit, deiner Website Fotos und andere Bilder hinzuzufügen. Mit Squarespace-Templates kannst du Bilder ganz unkompliziert an passenden Stellen platzieren – ganz ohne Design-Vorkenntnisse. Du kannst Fotos direkt in deinem Website-Editor hochladen oder deiner Inhaltsbibliothek hinzufügen, wo du sie an einem Ort organisieren und wiederverwenden kannst.
Mit Tools zur Erstellung von Websites, wie sie Squarespace bietet, kannst du anpassen, wie deine Bilder angezeigt werden. Du kannst beispielsweise einzelne oder mehrere Bilder im Galerie- oder Slideshow-Format hochladen, was vorteilhaft für jemanden ist, der eine Portfolio-Website erstellt.
Wenn dir die Stelle, an der ein größeres Bild zugeschnitten wird, nicht gefällt, passe den Bildausschnitt an. Du kannst ebenso die Größe und Platzierung von Bildern mit den Bild-Blöcken „Karte“, „Überlappung“ und „Collage“ anpassen und deren Layout verfeinern, indem du im Design-Menü „Bildbreite“ auswählst. Um die Bild-Layouts weiter anzupassen, kannst du Bilder mit dem Bild-Editor zuschneiden und Blöcke hinzufügen, um den Abstand auf der Seite zu ändern.
Abstimmung von Bildern und Text
Deine Bilder sollten die schriftlichen Inhalte deiner Website ergänzen und umgekehrt, denn kein Element funktioniert ohne das andere. So kann ein großes Bild mit wenig Text deine Ziele beispielsweise ebenso gut illustrieren wie Bilder, die du zur Auflockerung von längeren Textpassagen verwendest.
Es empfiehlt sich, keinen Text in deine Bilddateien aufzunehmen. Nutze stattdessen beim Hinzufügen von Fotos auf deine Website Overlay, um Textfelder hinzuzufügen. Diese Methode minimiert Probleme bei der Größenanpassung von Browsern und ermöglicht Suchmaschinen außerdem, deinen Text zu crawlen.
Optimierung der Bilder auf deiner Website
Suchmaschinenoptimierung (SEO) funktioniert nicht nur für schriftliche Inhalte deiner Website. Wie du deine Bilddateien benennst, wirkt sich darauf aus, wie Suchmaschinen deine Website indexieren und wie Menschen dich finden. Außerdem ist es wichtig, den Alternativtext der Bilder zu optimieren, also eine detailliertere Beschreibung des Bildes als im Dateinamen.
Gib allen deinen Dateien einen einfachen Namen, den Suchmaschinen potenziell erkennen. Nenne die abgebildeten Dinge beim Namen und verwende mit Ausnahme von Bindestrichen keine Satzzeichen. Wenn du beispielsweise das Foto eines kunstvoll gestalteten Fingernagels für ein Nagelstudio verwendest, könntest du die Datei „florales-fingernagel-design-nagelstudio“ nennen.
Sogar noch wichtiger ist es, dass du für alle Fotos und Bilder, die du deiner Website hinzufügst, einen Alternativtext verfasst. Alternativtext erweist sich nicht nur für SEO als hilfreich, sondern optimiert deine Website auch für barrierefreie Screenreader. Diese Beschreibungen sollten nicht mehr als 250 Zeichen enthalten. Fasse dich also möglichst knapp.
Frage dich, was eine Person mit Sehbehinderung über ein Bild wissen möchte, das sie nicht sehen kann. Ein hilfreicher Alternativtext für das zuvor genannte Nageldesign-Foto könnte beispielsweise lauten: „Foto von Händen mit langen, quadratischen Nägeln mit rotem Blumendesign“. Du kannst auf Artikel im Satz (z. B. ein, eine, die) und Satzzeichen verzichten, sofern Screenreader deine kompletten Sätze kohärent erfassen können.
Dieser Beitrag wurde am 17. November 2023 aktualisiert.