Bist du dir nicht sicher, warum deine Website bei Google nicht gut platziert ist oder warum die Verbraucher nicht auf sie zugreifen? Bildgrößen für Websites, Website-Geschwindigkeit und SEO-Probleme wirken sich häufig auf Absprungraten und Rankings aus.
Für viele Menschen war das Speichern von Bildern für das Web schon immer ein Rätsel. Große Bilder (Originalgrößen mit einer Breite von 5000px, nicht optimierte Bilder) verschlechtern nicht nur das Nutzererlebnis auf deiner Website, sondern wirken sich auch negativ auf deine SEO-Strategie aus (Ladegeschwindigkeit, Absprungrate, Ranking usw.).
Schauen wir uns die Liste der Richtlinien für die Bildgröße von Website-Bildern an.
Warum sind Bildgrößen und Website-Leistung wichtig?
Websites brauchen länger zum Laden, wenn die Grafiken nicht optimiert sind. Langsame Websites führen zu einem schlechten Nutzererlebnis, einer geringeren Wahrscheinlichkeit, in der Google-Suche gerankt zu werden, und infolgedessen zu weniger Anfragen und Kunden.
In den Richtlinien für die Bildgröße von Websites wird darauf hingewiesen, dass das Speichern von Fotos in den richtigen Proportionen und die Optimierung für das Web eine Reihe von Vorteilen mit sich bringen können:
∙ Geschwindigkeit
Laut einer Google-Studie steigt die Wahrscheinlichkeit, dass ein mobiler Besucher die Seite abbricht, um 90 %, wenn eine Website länger als 5 Sekunden zum Laden braucht. Du kannst deine Webseiten beschleunigen, indem du Bilder verkleinerst und abnimmst.
∙ Benutzerfreundlichkeit
Wenn du qualitativ hochwertige und ansprechende Bilder verwendest, wird der Besuch deiner Website für die Besucher angenehmer. Du bietest deinen Besuchern eine nahtlose und reibungslose Erfahrung, indem du dafür sorgst, dass die Fotos optimiert sind und schnell geladen werden, was sie dazu ermutigt, mehr Zeit auf deiner Website zu verbringen und deine Inhalte zu erkunden.
∙ SEO-Ranking
Je schneller deine Website lädt, desto höher kannst du ranken. Sowohl auf dem Desktop als auch auf mobilen Geräten werden Webseiten mit optimierten Grafiken wesentlich schneller geladen.
∙ Umsatz
Schnellere Ladezeiten und eine verbesserte Suchmaschinenoptimierung können dazu beitragen, mehr Besucher auf deine Website zu locken, wodurch sich deine Chancen auf eine Kontaktaufnahme und eine Buchung erhöhen.
Was sind die am besten geeigneten Bildgrößen für Websites?
Strikingly ist so konzipiert, dass es mit einer breiten Palette von Bildgrößen für verschiedene Bildschirmgrößen, Abschnitte, Stile und Designs arbeiten kann. Dennoch ist es gelegentlich nützlich, eine grobe Vorstellung davon zu haben, welche Größen hochgeladen werden sollen.
Hier sind ein paar allgemeine Richtlinien für die Bildgröße von Bildern auf Websites, die du beachten solltest!
Bild von Strikingly genommen
1. Bilder für den Hintergrund
Die Hintergrundbilder von Strikingly sind so gestaltet, dass sie auf eine Vielzahl von Bildschirmgrößen passen, vom Monitor über das Tablet bis zum Handy. Um sicherzustellen, dass dein Hintergrund auf allen Bildschirmen hervorragend aussieht, empfehlen wir eine Größe von 1600 Pixel Breite und 900 Pixel Höhe. Füge Fotos von Personen, Marken und anderen Informationen, die nicht zum Hintergrund gehören, mit Vorsicht ein!
2. Einstellungen für den Hintergrund
Für die Größe/Ausrichtung deines Hintergrunds hast du einige Alternativen.
Standard strecken/abdecken: Bei dieser Option wird dein Bild so gestreckt, dass es den gesamten Bildschirm ausfüllt, sowohl in der Höhe als auch in der Breite. Da das Bild auf jeder Bildschirmgröße als Hintergrund funktioniert, ist dies normalerweise die beste Lösung. Wenn dein Bild jedoch Inhalte an den Seiten hat (insbesondere links und rechts), ist es auf Mobiltelefonen möglicherweise nicht sichtbar.
Einschließen: Mit der Option "Einschließen" wird das gesamte Bild angezeigt, so dass kein Teil des Bildes abgeschnitten wird. Auf manchen Geräten kann dies jedoch zu einem gewissen Leerraum führen
Zentrieren: Das Bild wird in der Mitte des Abschnitts angezeigt und nicht skaliert, wenn du die Mitte wählst. Andererseits wird der Hintergrund an den Rändern des Bildes weiß und zu klein dargestellt. Einige Elemente des Bildes können abgeschnitten werden, wenn es zu groß ist, insbesondere auf kleineren Displays.
Kacheln: Mit der Option "Kacheln" wird ein Bild zentriert und dann wiederholt, was für die Erstellung von Mustern praktisch ist.
Notiere dir zu Beginn der Richtlinien für die Bildgröße auf der Website, wie breit das Bild auf der Seite erscheint.
Bild von Strikingly genommen
∙ Hintergrundbilder
Die ideale Größe der Hintergrundbilder ist 1600x900px
∙ Bilder in voller Breite
Du solltest mindestens 1400 Pixel breit sein, um ein optimales Ergebnis zu erzielen. Gemäß den Richtlinien für die Bildgröße auf der Website
∙ Halbbreite Bilder
Bilder mit halber Breite sollten mindestens 700 Pixel breit sein, um eine optimale Qualität zu gewährleisten.
∙ ⅓ breite Bilder
Für die beste Qualität sollten die Bilder mindestens 480 Pixel breit sein. 1/3 breite Bilder.
∙ ¼ breite Bilder
Für die beste Qualität von 1/4 breiten Bildern sollten diese mindestens 360 Pixel breit sein.
∙ Kleine Icons und Logos
Sie sollten mindestens 100 Pixel breit sein.
∙ Galerie-Bilder
Jede Größe ist für Galeriebilder geeignet! Die Bilder in der Galerie werden in einem Leuchtkasten oben auf deiner Website geöffnet.
Welche Bildgröße ist für deine Website erforderlich?
Bilder sollten so groß sein, dass sie in ihre "Container" passen, um eine maximale Leistung der Website zu erzielen, je nach Layout deiner Seite. Diashow-Fotos zum Beispiel sind oft größer; Blog-Bilder sind mittelgroß (bei einer Breite, die der Seitenbreite abzüglich der Seitenleiste entspricht); Thumbnails sind kleiner und so weiter.
Gemäß den Richtlinien für die Bildgröße von Bildern auf Websites ist es wichtig, zunächst die Abmessungen der Bilder zu ermitteln, um die Breite des Inhaltsbereichs deiner Website zu berechnen. Du kannst ein "Seitenlineal"-Browser-Plugin verwenden, das dich bei der Ermittlung der Maße unterstützt, oder du kannst die in deinen Webbrowser integrierten Entwickler-Tools verwenden, wenn du über Erfahrung verfügst: Klicke mit der rechten Maustaste auf ein beliebiges Seitenelement und wähle im Dropdown-Menü die Option "Prüfen".
Bild von Strikingly genommen
Bewege dann in der Symbolleiste den Mauszeiger mit dem Elementauswahlwerkzeug über das Bild oder den Inhaltsbereich, der dich interessiert:
Bild von Strikingly genommen
In diesem Fall erfordert die obige Spalte ein Bild mit einer Breite von mindestens 525 Pixeln.
Wir sagen "mindestens", weil Bilder in neueren Smartphones mit hochauflösenden "Retina"-Bildschirmen größer sein müssen, um so scharf wie möglich auszusehen.
Betrachte die folgenden Szenarien:
A. Diashow-Webbildgröße über die gesamte Breite
Die Richtlinien für die Bildgröße auf Websites empfehlen eine Breite von 2560 Pixeln für Diashows in voller Breite (die sich automatisch auf die volle Größe des Browsers ausdehnen). Dies ist die übliche Auflösungsbreite für 27′′ und 30′′ Monitore.
Die Bilder können so hoch sein, wie du es wünscht, um das von dir gewählte Seitenverhältnis zu erreichen. Ganzseitige Diashows, wie sie beispielsweise auf Websites für Hochzeitsfotografie üblich sind, behalten das ursprüngliche Seitenverhältnis der Fotos bei. Andere Websites verwenden eine Diashow, die sich über die gesamte Breite der Seite erstreckt, aber weniger hoch ist (was zu einem Seitenverhältnis von etwa 3:1 führt).
Im Folgenden findest du ein Beispiel für "Panorama"-Diashows von Foto-Websites:
Bild von Strikingly Website Nutzer genommen
Die Bilder sollten 2560 (aufgerundet auf 2500px) Pixel breit sein und eine beliebige Höhe haben, die sich über die gesamte Breite des Browsers erstreckt (je nachdem, ob du das ursprüngliche Seitenverhältnis deiner Bilder beibehalten oder einen Panoramaschnitt wählen willst).
Dies ist kein Fall, in dem wir die Bildgröße für Retina-Displays verdoppeln müssen, denn das würde zu riesigen 5000-Pixel-Bildern führen (ganz zu schweigen von der Gefahr des Bilddiebstahls bei großen Dateigrößen).
Pass die erforderliche Bildgröße für kleinere Diashows an, die nicht die gesamte Breite der Seite einnehmen, sondern nur einen Teil davon (vielleicht 2000px, oder 1800px, usw.)
Bild von Strikingly Website Nutzer genommen
B. Bildgrößen in Galerien (und Thumbnails, die in einer Lightbox-Ansicht vergrößert werden)
Thumbnail-Galerien sind einzigartige Situationen, in denen die Größe der Thumbnails ignoriert wird, um sicherzustellen, dass die Fotos groß genug sind, wenn sie vergrößert werden.
Ein Raster von Miniaturbildern, die sich beim Anklicken in einer bildschirmfüllenden Diashow öffnen (in der Regel mit einem halbtransparenten Overlay darunter), wird als "Leuchtkasten-Ansicht" bezeichnet:
Da diese Fotos im Vollbildmodus geöffnet werden, wird in den Richtlinien für die Bildgröße auf der Website empfohlen, sie mindestens 1500 Pixel breit zu machen (an der längsten Kante), damit sie auf Desktops und Tablets gut aussehen.
Sie können sogar bis zu 2000 Pixel groß sein, wenn du einen zusätzlichen "Wow-Faktor" erzielen willst, obwohl das normalerweise nicht der Fall ist.
Bilder werden auf mobilen Geräten ohnehin vom Browser angepasst, und 1500 Pixel sind groß genug, um auf Smartphones mit High-PPI-"Retina"-Bildschirmen gestochen scharf auszusehen.
Vertikale/porträtierte Bilder mit einer maximalen Höhe von 1200 Pixeln (z. B. 800x1200 Pixel für ein vertikales Bild im Verhältnis 2:3 oder 900x1200 Pixel für ein vertikales Bild im Verhältnis 3:4) können sogar noch kleiner sein.
Wenn die Diashow das Blättern zwischen den Fotos mit Hilfe von seitlichen Pfeilen, Aufzählungszeichen, Streichen auf dem Handy oder Tastaturpfeilen auf dem Desktop erlaubt, hält eine solche Begrenzung der Bildabmessungen die Dateigröße angemessen kurz. Dies führt zu einem schnelleren Laden der Bilder:
C. Empfohlene Bildgrößen für Blogbeiträge und andere statische Bilder in Seitenlayouts
Wenn deine Blog-Fotos keine "Click-to-enlarge"-Funktion (oder "Lightbox") erfordern, sollten sie entsprechend der Breite der Spalte oder des Inhaltsbereichs dimensioniert werden.
Nehme das folgende Beispiel für einen einzelnen Blogbeitrag:
Bild von Strikingly Website Nutzer genommen
Du kannst die tatsächliche Breite des Inhaltsbereichs ermitteln, indem du z. B. einen beliebigen Textabsatz mit den oben beschriebenen Methoden misst:
Bild von Strikingly Website Nutzer genommen
Wenn du bereits Bilder hast, kannst du auch sehen, auf welche Größe der Browser sie skaliert.
Um die gleichen Informationen zu erhalten, kannst du ein Browser-Plugin wie View Image Info (Eigenschaften) verwenden.
Mit diesen Informationen (z. B. 825 Pixel) kannst du nun die Größe verdoppeln, um Retina-Displays zu berücksichtigen (also 1650 Pixel in der Breite).
Je nach dem Thema deiner Website und deiner Risikotoleranz gegenüber Bilddiebstahl kannst du diese Größe auf vernünftige 1200 Pixel an der längsten Kante reduzieren (horizontale Bilder sollten also 1200 Pixel breit und vertikale Bilder 1200 Pixel hoch sein, wobei das ursprüngliche Seitenverhältnis erhalten bleibt).
Kleinere Fotos, die als Thumbnails verwendet werden (die nicht vergrößert werden müssen), unterliegen demselben Entscheidungsprozess.
Schlussfolgerung
Diese Richtlinien für die Bildgröße von Bildern auf Websites gelten nicht für Fotoarchivierungsdienste wie PhotoShelter oder SmugMug (die über eingebaute Sicherheitsmaßnahmen verfügen und aus Ihren hochauflösenden Originaldateien je nach Bedarf der Website Miniaturansichten mit niedriger Auflösung erstellen) oder wenn du diese Bilder, wie eingangs erwähnt, als Downloads oder Abzüge verkaufst.
Wenn du eine selbst gehostete Website hast und deine Fotos nur im Internet präsentieren musst, ist die Einhaltung dieser Richtlinien für die Bildgröße ein Muss.
Die Auswahl der richtigen Bilder ist ein wichtiger Aspekt bei der Erstellung einer optisch ansprechenden und schnell ladenden Website. Zweifellos gibt es eine Lernkurve. Aber es gibt auch andere Vorteile, und das gehört alles zum Reiz der Erstellung und Pflege einer Website!
