Website-Hintergrundbilder sind wie das Atmen. Sie sind Teil unseres täglichen Lebens, aber wir bemerken sie nur selten, es sei denn, etwas stimmt nicht. Wie jeder Atemzug, den du nimmst, ist auch das Hintergrundbild für eine Website entscheidend für den Erfolg und die Langlebigkeit deiner Website; sie verbessern die Leistung jeder anderen Komponente.
Website-Hintergrundbilder sind mehr als nur hübsches Bilder. Sie haben einen erheblichen Einfluss auf das gesamte Nutzererlebnis. Sie haben das Potenzial, ein großartiges Erzählwerkzeug zu werden, das dein Publikum dazu bringt, bei dir zu bleiben. Deshalb ist die Auswahl eines Website-Hintergrundbildes für eine Website so wichtig, egal ob es sich um eine einfache Blockfarbe, ein tatsächliches Bild oder sogar ein Video handelt. Im Folgenden findest du einen Leitfaden mit den besten Praktiken für die Auswahl von Website-Hintergrundbildern, um dir bei der Entscheidungsfindung zu helfen.
Vorschläge für die Auswahl eines Website-Hintergrundbildes
Die Wahl eines guten Website-Hintergrundbildes ist eine schwierige Aufgabe. Sie ist ein wichtiger Aspekt des Gesamtdesigns deiner Website, und es kann schwierig sein, deine Marke mit einem bestimmten Bild oder Design zu verbinden. Die folgenden Richtlinien sollten dir jedoch bei der Auswahl eines geeigneten Website-Hintergrundbildes für deine Website helfen.
1. Hohe Auflösung ist ein Muss
Der absolut schlimmste Fehler, den du machen kannst, ist die Wahl eines Hintergrunds mit niedriger Auflösung. In diesem Fall ist der Hintergrund entweder grobkörnig und niedrig aufgelöst oder du musst dich mit einem Kachelstil begnügen, der wie ein Win95-Wallpaper aussieht.
Hochauflösende Bilder lassen deine Website attraktiver und professioneller auf deine Besucher wirken. Zwar ist es eine gute Idee, für individuelle Fotografie und Design zu bezahlen, wenn du es dir leisten kannst, aber die gute Nachricht ist, dass es im Internet viele hochauflösende Fotos gibt. Viele sind kostenlos, andere kosten nur ein paar Euro.
2. Ergänze das Image deiner Marke
Bild von Strikingly Website Nutzer genommen
Ein Problem, das viele Unternehmen haben, ist, dass sie den Hintergrund oder das Layout einer Website mögen und dann versuchen, es ihrer Marke aufzuzwingen. Das ist nicht immer eine gute Idee. Es ist nie eine gute Idee, ein Website-Hintergrundbild zu wählen und dann deine Marke um dieses herum zu entwickeln.
Stattdessen solltest du die Identität deiner Marke genau kennen, um einen Hintergrund zu wählen, der deinen Anforderungen entspricht.
3. Achte auf Kontraste
Dein Website-Hintergrundbild ist genau das - ein Hintergrund. Es sollte nicht deine Website oder deinen Text dominieren. Achte auf den visuellen Kontrast zwischen Vorder- und Hintergrund. Wenn deine Überschriften und Texte ineinander übergehen, muss etwas geändert werden.
Die Texte auf deiner Website sollten sich von der Seite abheben. Deshalb solltest du bei der Wahl des Website-Hintergrundbildes immer auch die Typografie und das Farbschema berücksichtigen. Wenn du es nicht hinbekommst, versuche eine andere Option.
4. Barrierefreiheit hat Vorrang
Bei der Auswahl eines Website-Hintergrundbildes für eine Website ist in erster Linie zu berücksichtigen, wie es sich auf das Lesen des Artikels auswirken wird. Du solltest sicherstellen, dass der Text lesbar ist und dass das Kontrastverhältnis zwischen Text und Hintergrund angemessen ist.
Wenn du dir nicht sicher bist, ob die oben genannten Aspekte der Barrierefreiheit erfüllt sind, aber dennoch ein Bild verwenden möchtest, kannst du einige Dinge tun, damit es funktioniert. Um die Lesbarkeit der Informationen zu verbessern, kannst du Bildbearbeitungswerkzeuge oder sogar CSS verwenden, um Dinge wie Deckkraft und Kontrast zu ändern oder Ebenenmasken anzuwenden. Es ist auch wichtig, die richtige Schriftart und Schriftgröße für das Material zu wählen.
5. Subtile und nahtlose Texturen sollten verwendet werden
Bild von Strikingly Website Nutzer genommen
Texturen können dem Gesamtbild deiner Website einen Hauch von Klasse verleihen. Achte auf Texturen, die nahtlos sind, d. h. sie können ein Muster auf dem Bildschirm wiederholen, um den Eindruck eines einzigen großen Bildes zu vermitteln, unabhängig davon, ob sie als Seitenhintergrund oder für einen bestimmten Inhaltsbereich verwendet werden. Während ein texturiertes Website-Hintergrundbild in voller Größe manchmal verwendet werden kann, lassen sich detailliertere Bilder nicht immer gut über mehrere Bildschirmgrößen hinweg verwenden. Außerdem können Fotos mit großen Dateigrößen die Ladezeiten einer Seite verlangsamen.
Wenn du nicht gerade ein brutalistisches Erscheinungsbild anstrebst, ist Subtilität ebenfalls ein wünschenswertes Merkmal für eine Textur. Ziel ist es, die Verbraucher nicht mit großen Mustern zu überfordern. Suche nach Bildern mit weicheren Linien und Farben, die sich von dem Material abheben.
6. Erwäge die Verwendung einer Vielzahl von Bildschirmen und Geräten
Je nach Bildschirmgröße kann sich der sichtbare Bereich des Website-Hintergrundbildes erheblich verändern. Dies kann auf Fotos sehr auffällig sein. Was auf einem Breitbildmonitor großartig aussieht, kann auf einem Smartphone schrecklich wirken. Wichtige Elemente eines Bildes können herausgeschnitten werden, wodurch der Kontext verloren geht.
Das Problem liegt zum Teil in der Fotoauswahl und zum Teil in der Kodierung. Suche zunächst nach Fotos, die dem vorgegebenen Seitenverhältnis des übergeordneten Containers entsprechen (Querformat, Hochformat, Quadrat). Sie passen eher auf kleinere Bildschirme.
7. Echte Personen sollten abgebildet werden
Bild von Strikingly Website Nutzer genommen
Die Wahl eines Website-Hintergrundbildes mit Menschen darin ist eine hervorragende Methode, um die Konversionsrate deiner Website zu erhöhen. Vermeide nach Möglichkeit die Verwendung von Stockfotos und verwende stattdessen echte Menschen. Du möchtest nicht, dass dein Bild auf Hunderten von anderen Websites auftaucht, was passieren könnte, wenn du ein Archivfoto verwendest.
8. Optimiere die Bilder
Es lohnt sich, jedes einzelne Bild, das du hochlädst, zu optimieren, ganz gleich, ob du einen Blog, ein Online-Unternehmen oder nur eine normale Website hast, die du mit hochwertigen Fotos aufwerten möchtest.
Vergewissere dich zunächst, dass die Fotos in einem guten Zustand sind, wie wir bereits beschrieben haben. Wenn du dann darauf achtest, dass die Bilddatei richtig benannt ist, kannst du sicherstellen, dass sie von Suchmaschinen leicht indiziert werden kann.
Hast du schon einmal ein Bild mit den Namen "Photo1.jpg" oder "Screen Shot 2019-03-18 at 4.13.42 pm" gespeichert? Wenn es um das Hintergrundbild deiner Website geht, ist das ein absolutes Tabu.
Bleibe bei deinem Namen konsequent und vermeide Satzzeichen oder Leerzeichen. Es ist auch besser, Bindestriche statt eines Unterstrichs im Namen zu verwenden.
9. Wähle das geeignete Bilddateiformat
Bist du dir nicht sicher, welche Art von Bilddatei du verwenden solltest? Hier erfährst du mehr darüber.
- JPGs: Diese Dateien sind ideal für Bilder, da sie eine breite Palette von Farben verarbeiten können und gleichzeitig eine geringe Dateigröße aufweisen. Wenn du dieses Bild verwendest, brauchst du dir keine Sorgen um eine große Datei zu machen, was die Ladezeit beschleunigt.
- PNGs: Dieser Dateityp eignet sich am besten für Grafiken, insbesondere wenn es sich um große oder flache Farbflächen handelt. Die meisten Designs, Infografiken, textlastigen Bilder und Logos fallen in diese Kategorie. PNGs können auch einen transparenten Hintergrund haben (was ideal für Logos ist). Speicher deine PNG-Dateien nach Möglichkeit in einem 24-Bit-Format, um eine bessere Qualität und eine vielfältigere Farbdarstellung zu erzielen.
10. Lass das Bild für sich selbst sprechen
Ein fesselndes Website-Hintergrundbild weckt das Interesse der Besucher deiner Website. Verwende anstelle vieler Worte auf deiner Website ein Bild, das die Botschaft vermittelt. Selbst wenn der Text angenehm zu lesen ist, werden nicht alle deine Kunden die Zeit oder die Sorgfalt aufbringen, dies zu tun.
Füge Hintergrundbilder zu deiner Strikingly-Website hinzu
Du kannst ein Bild aus der Strikingly-Bibliothek oder ein Archivbild aus der Strikingly-Bibliothek als Website-Hintergrundbild wählen. Du kannst Bilder, Filme oder Blöcke auf eine von drei Arten zu deinem Hintergrundbild hinzufügen.
Führe die folgenden Schritte aus, um zu erfahren, wie du deiner Strikingly-Website Hintergrundbilder hinzufügen kannst.
1. Gehe zum Editor deiner Website und öffne ihn.
2. Wähle die Option Hintergrund. Du kannst entweder ein Video oder ein Bild als Hintergrund verwenden.
Bild von Strikingly Editor genommen
1. Klicke auf "Mehr", um unser Bildarchiv zu sehen.
2. Klicke auf "Bild hochladen", um dein eigenes Hintergrundbild hinzuzufügen. Bitte beachte, dass wir nur die folgenden Dateitypen akzeptieren: gif, jpeg, png, BMP, und ico.
\Bild von Strikingly Editor genommen
Richtlinien für die Auswahl der Hintergrundbilder
Strikinglys Website-Hintergrundbild ist für eine Vielzahl von Bildschirmgrößen geeignet, vom Monitor über das Tablet bis zum Telefon. Wir empfehlen eine Größe von 1600 Pixel Breite und 900 Pixel Höhe, damit dein Hintergrundbild auf allen Bildschirmen gut aussieht. Füge mit Bedacht Fotos von Personen, Marken und anderen Informationen ein, die nicht im Hintergrund stehen! Um zu sehen, wie es aussehen wird, verwende unsere "Vorschau"-Funktion.
Du hast mehrere Möglichkeiten, die Größe und Ausrichtung deines Website-Hintergrundbildes zu bestimmen.
Dehnen/Decken dehnt dein Bild so aus, dass es den gesamten Bildschirm ausfüllt, sowohl in der Höhe als auch in der Breite. Dies ist in der Regel die beste Option, da das Bild auf jeder Bildschirmgröße als Hintergrund funktioniert. Wenn dein Bild jedoch Inhalte an den Seiten (insbesondere links und rechts) aufweist, kann es auf Mobiltelefonen möglicherweise nicht angezeigt werden.
Contain zeigt das gesamte Bild an und stellt sicher, dass kein Teil des Bildes ausgelassen wird. Dies kann jedoch auf manchen Bildschirmen zu einem gewissen Leerraum führen.
Zentrieren: Das Bild wird in der Mitte des Abschnitts angezeigt und wird nicht skaliert, wenn Sie die Mitte wählen. Der Hintergrund hingegen zeigt an den Rändern des Bildes einen weißen Bereich, der zu klein ist. Einige Teile des Bildes können abgeschnitten werden, wenn es zu groß ist, insbesondere auf kleineren Bildschirmen.
Mit der Funktion Kacheln wird ein Bild zentriert und dann wiederholt, was für die Erstellung von Mustern nützlich ist.
Fazit
Bei so vielen interessanten Technologien, die sich auf die Gestaltung von Websites auswirken, ist es logisch, dass wir dem Website-Hintergrundbildes nicht so viel Aufmerksamkeit schenken. Sie spielen jedoch eine wichtige Rolle beim Geschichtenerzählen und helfen uns bei der Gestaltung einer ansprechenden Benutzeroberfläche. Ganzseitige Hintergründe tragen dazu bei, den Ton einer Website zu bestimmen, während Abschnittshintergründe unserem Inhalt etwas Raum zum Atmen geben.
Natürlich funktioniert das alles am besten, wenn wir Fotos auswählen, die für unsere Zwecke geeignet sind. Bilder, die die Fähigkeit der Nutzer, Inhalte zu konsumieren, eher verbessern als behindern. Allerdings müssen wir auch Merkmale wie Größe, Seitenverhältnis und Kompatibilität mit mobilen Geräten berücksichtigen. Es ist wichtig, daran zu denken, dass es auch im Hintergrund auf Details ankommt.
Wie wir dir oben beschrieben haben, kannst du in wenigen Schritten eine Website mit Strikingly kreieren und dies mit deinen individuellen Website-Hintergrundbild gestalten. Melde dich noch heute kostenlos bei Strikingly an und entwerfe mit dem besten Website-Builder deine eigene Website!
