Sind Sie sich nicht sicher, warum Ihre Website bei Google kein gutes Ranking erzielt oder warum Verbraucher nicht damit interagieren? Bildgrößen für Websites und 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. Schwere Bilder (Originalbildgrößen bei 5000px Breite, nicht optimierte Bilder) beeinträchtigen nicht nur die Benutzererfahrung auf Ihrer Website, sondern wirken sich auch negativ auf Ihre SEO-Strategie aus (Ladegeschwindigkeit, Absprungrate, Ranking usw.).
Lassen Sie uns die Liste der Richtlinien für die Bildgröße der Website aufschlüsseln.
Warum sind Bildgrößen und Website-Performance wichtig?
Das Laden von Websites dauert länger, wenn die Grafiken nicht optimiert sind. Langsame Websites führen zu einer schlechten Benutzererfahrung, einer geringeren Wahrscheinlichkeit, in Google-Suchanfragen eingestuft zu werden, und infolgedessen zu weniger Abfragen und Verbrauchern.
In den Richtlinien für die Website-Bildgröße wird erwähnt, dass das Speichern Ihrer Fotos in den richtigen Proportionen und deren Optimierung für das Web bei einer Vielzahl von Dingen hilfreich sein kann, darunter:
• Geschwindigkeit
Laut Google Research steigt die Wahrscheinlichkeit, dass ein mobiler Besucher die Seite verlässt, um 90%, wenn das Laden einer Webseite länger als 5 Sekunden dauert. Sie können Ihre Website-Seiten beschleunigen, indem Sie die Bildgröße verkleinern und verringern.
* Benutzererfahrung
Besucher werden beim Surfen auf Ihrer Website ein ansprechenderes Erlebnis haben, wenn Sie hochwertige, überzeugende Bilder verwenden. Sie bieten Ihren Besuchern ein nahtloses und reibungsloses Erlebnis, indem Sie diese Fotos optimieren und schnell laden, was sie dazu ermutigt, mehr Zeit auf Ihrer Website zu verbringen und Ihre Inhalte zu erkunden.
* SEO-Ranking
Je früher Ihre Website geladen wird, desto höher können Sie ranken. Sowohl auf Desktop- als auch auf Mobilgeräten werden Webseiten mit optimierten Grafiken wesentlich schneller geladen.
* Verkäufe
Schnellere Ladegeschwindigkeiten und verbesserte SEO können dazu beitragen, mehr Besucher auf Ihre Website zu locken und Ihre Chancen zu erhöhen, kontaktiert und gebucht zu werden.
Was sind die am besten geeigneten Bildgrößen für Websites?
Strikingly wurde entwickelt, um mit einer Vielzahl von Bildgrößen für verschiedene Bildschirmgrößen, Abschnitte, Stile und Designs zu arbeiten. Gelegentlich ist es jedoch nützlich, eine grobe Vorstellung davon zu haben, welche Dimensionen hochgeladen werden sollen.
Hier sind einige allgemeine Richtlinien für die Bildgröße der Website!
Das Bild stammt von Strikingly
1. Bilder für den Hintergrund
Die Hintergrundfotos von Strikingly passen zu einer Vielzahl von Bildschirmgrößen, vom Monitor über das Tablet bis zum Telefon. Um sicherzustellen, dass Ihr Hintergrund auf allen Bildschirmen hervorragend aussieht, empfehlen wir eine Größe von 1600 Pixel Breite und 900 Pixel Höhe. Fügen Sie Nicht-Hintergrund-Fotos von Personen, Marken und andere Informationen mit Vorsicht!
2. Einstellungen für den Hintergrund
Um Ihren Hintergrund zu skalieren / auszurichten, haben Sie einige Alternativen.
Stretch/Cover default: Diese Option dehnt Ihr Bild aus, um den gesamten Bildschirm auszufüllen, sowohl in der Höhe als auch in der Breite. Da das Bild auf jeder Bildschirmgröße als Hintergrund fungiert, ist dies normalerweise die beste Lösung. Wenn Ihr Bild jedoch Inhalte an den Seiten (insbesondere links und rechts) enthält, ist es auf Mobiltelefonen möglicherweise nicht sichtbar.
Contain:Contain zeigt das vollständige Bild an und stellt sicher, dass kein Teil davon abgeschnitten wird. Auf einigen Geräten kann dies jedoch zu Leerzeichen führen.
Mitte: Das Bild wird in der Mitte des Abschnitts angezeigt und nicht skaliert, wenn Sie die Mitte auswählen. Auf der anderen Seite zeigt der Hintergrund, dass der Leerraum an den Rändern des Bildes zu klein ist. Einige Elemente des Bildes können abgeschnitten werden, wenn es zu groß ist, insbesondere auf kleineren Displays.
Kachel: Kachel zentriert und wiederholt dann ein Bild, was zum Erstellen von Mustern praktisch ist.
Notieren Sie sich zu Beginn der Richtlinien für die Bildgröße der Website, wie breit das Bild auf der Seite angezeigt wird.
Das Bild stammt von Strikingly
• Hintergrundbilder
Die ideale Größe der Hintergrundbilder beträgt 1600 x 900 Pixel
• Bilder in voller Breite
Sie sollten mindestens 1400 Pixel breit sein, um die besten Ergebnisse zu erzielen. Gemäß den Richtlinien für die Bildgröße der Website
* Bilder mit halber Breite
Bilder mit halber Breite sollten mindestens 700 pixel breit sein, um die beste Qualität zu erzielen.
* ⅓ Breite Bilder
Bilder sollten mindestens 480px breit sein, um Bilder mit 1/3 Breite in bester Qualität zu erhalten.
* ¼ Breite Bilder
Für die beste Qualität 1/4 Breite Bilder, sollten sie mindestens 360 Pixel breit sein.
* Kleine Icons und Logos
Sie sollten mindestens 100 Pixel breit sein.
* Galeriebilder
Jede Größe ist für Galeriebilder geeignet! Bilder in der Galerie werden in einer Lightbox oben auf Ihrer Website geöffnet.
Welche Bildgröße wird für Ihre Website benötigt?
Bilder sollten so groß wie nötig sein, um ihre „Container“ für maximale Website-Leistung zu passen, abhängig von Ihrem Seitenlayout. Diashow-Fotos zum Beispiel sind oft größer; Blog-Bilder sind mittelgroß (mit einer Breite, die der Seitenbreite abzüglich der Seitenleiste entspricht); Miniaturansichten sind kleiner und so weiter.
Gemäß den Richtlinien für die Bildgröße der Website ist es wichtig, zuerst die Bildabmessungen zu ermitteln, um die Breite des Inhaltsbereichs Ihrer Website zu berechnen. Sie können ein „Seitenlineal“ -Browser-Plugin verwenden, um Sie bei der Durchführung der Maßnahmen zu unterstützen, oder Sie können die in Ihren Webbrowser integrierten Entwicklertools verwenden, wenn Sie Erfahrung haben: Klicken Sie mit der rechten Maustaste auf ein beliebiges Seitenelement und wählen Sie „Inspizieren“ aus dem Dropdown-Menü.
Das Bild stammt von Strikingly
Verwenden Sie dann in der Symbolleiste das Elementauswahlwerkzeug, um den Mauszeiger über das Bild oder den Inhaltsbereich zu bewegen, an dem Sie interessiert sind:
Das Bild stammt von Auffallend
Das Bild stammt von Auffallend
In diesem Fall erfordert die obige Spalte ein Bild mit einer Breite von mindestens 525 Pixel.
Wir sagen „mindestens“, weil Bilder in neueren Smartphones mit „Retina“ -Bildschirmen mit hoher Dichte größer sein müssen, um so scharf wie möglich auszusehen.
Betrachten Sie die folgenden Szenarien:
A. Diashow in voller Breite Webbildgröße
Die Richtlinien für die Bildgröße der Website empfehlen eine Breite von 2560 Pixel für Diashows in voller Breite (die automatisch auf die volle Größe des Browsers erweitert werden). Dies ist die übliche Auflösungsbreite für 27″ und 30″ Monitore.
Bilder können so groß sein, wie Sie möchten, um das von Ihnen gewählte Seitenverhältnis zu erreichen. Ganzseitige Diashows, die beispielsweise auf Hochzeitsfotografie-Websites üblich sind, behalten das ursprüngliche Seitenverhältnis der Fotos bei. Andere Websites verwenden eine Diashow, die sich über die gesamte Seitenbreite erstreckt, aber weniger hoch ist (was zu einem Seitenverhältnis von etwa 3: 1 führt).
Das Folgende ist ein Beispiel für „Panorama“ -Diashows von fotografischen Websites:
Das Bild stammt von der Website von Strikingly usre
Die Bilder sollten 2560 Pixel breit sein (abgerundet auf 2500 Pixel) und eine beliebige Höhe für Bilder haben, die sich über die gesamte Breite des Browsers erstrecken (je nachdem, ob Sie das native Seitenverhältnis Ihrer Bilder beibehalten oder einen Panoramaschnitt wählen möchten).
Dies ist kein Fall, in dem wir die Bildgröße für Retina-Displays verdoppeln müssen, da dies zu massiven 5000px-Bildern führen würde (ganz zu schweigen von den Gefahren des Bilddiebstahls bei großen Dateigrößen).
Passen Sie die erforderliche Bildgröße für kleinere Diashows an, die nicht die gesamte Seitenbreite einnehmen, sondern nur einen Teil davon (möglicherweise 2000px oder 1800px usw.)
Das Bild stammt von der Website von Strikingly usre
B. Bildgrößen in Galerien (und Miniaturansichten, die in einer Lightbox-Ansicht vergrößert werden)
Miniaturansichten sind einzigartige Situationen, in denen die Größe Ihrer Miniaturansichten ignoriert wird, um sicherzustellen, dass Fotos beim Vergrößern groß genug sind.
Ein Raster von Miniaturbildern, die beim Anklicken in einer Vollbild-Diashow geöffnet werden (normalerweise mit einer halbtransparenten Überlagerung darunter), wird als „Lightbox-Ansicht“ bezeichnet:
Da diese Fotos im Vollbildmodus geöffnet werden, empfehlen die Richtlinien für die Bildgröße der Website, sie mindestens 1500 Pixel breit (am längsten Rand) zu machen, damit sie auf Desktops und Tablets gut aussehen.
Sie können sogar bis zu 2000 Pixel hochfahren, wenn Sie einen zusätzlichen „Wow-Faktor“ hinzufügen möchten, obwohl dies normalerweise nicht der Fall ist.
Bilder werden ohnehin vom Browser auf Mobilgeräten angepasst, und 1500 Pixel sind groß genug, um auf Smartphones mit „Retina“ -Bildschirmen mit hohem PPI-Wert gestochen scharf auszusehen.
Vertikal- / Porträtbilder mit einer maximalen Höhe von 1200 Pixel (z. B. 800 x 1200 Pixel für ein vertikales 2:3-Bild oder 900 x 1200 Pixel für ein vertikales 3: 4-Bild) können noch kleiner sein.
Wenn die Diashow das Durchsuchen zwischen Fotos mithilfe von Seitenpfeilen, Aufzählungszeichen, Wischen auf Mobilgeräten oder Tastaturpfeilen auf dem Desktop ermöglicht, wird durch die Begrenzung der Bildabmessungen die Dateigröße angemessen kurz gehalten, was zu schnelleren Bildlasten führt:
C. Empfohlene Bildgrößen für Blogposts und andere statische Bilder in Seitenlayouts
Wenn für Ihre Blogfotos keine Funktion zum Vergrößern (oder „Lightbox“) zum Vergrößern erforderlich ist, sollten sie entsprechend der Spalte oder der Spalte dimensioniert werden breite des Inhaltsbereichs.
Nehmen Sie das folgende Beispiel eines einzelnen Blogbeitrags:
Das Bild stammt von der Website von Strikingly usre
Sie können die tatsächliche Breite des Inhaltsbereichs ermitteln, indem Sie einen beliebigen Textabschnitt mit den oben beschriebenen Methoden messen, zum Beispiel:
Das Bild stammt von der Website von Strikingly usre
Wenn Sie bereits Bilder haben, können Sie alternativ sehen, auf welche Größe der Browser die Größe ändert.
Um die gleichen Informationen zu erhalten, können Sie ein Browser-Plugin wie View Image Info (properties) .
Mit diesen Informationen (z. B. 825 Pixel) können Sie jetzt die Größe verdoppeln, um Retina-Displays zu berücksichtigen (also 1650 Pixel in der Breite).
Abhängig vom Thema Ihrer Website und Ihrer Risikotoleranz für Bilddiebstahl können Sie diese Menge auf vernünftigere 1200 Pixel am längsten Rand reduzieren (horizontale Bilder sollten also 1200 Pixel breit und vertikale Bilder 1200 Pixel hoch sein, während sie ihr ursprüngliches Seitenverhältnis beibehalten).
Kleinere Fotos, die als Miniaturansichten verwendet werden (die nicht erweitert werden müssen), unterliegen demselben Entscheidungsprozess.
Fazit
Diese Richtlinien für die Bildgröße der Website gelten nicht wirklich für Fotoarchivierungsdienste wie PhotoShelter oder SmugMug (die über integrierte Sicherheitsmaßnahmen verfügen und Miniaturansichten mit niedriger Auflösung aus Ihren ursprünglichen hochauflösenden Dateien generieren, wie von der Website benötigt) oder wenn Sie diese Bilder als Downloads oder Drucke verkaufen, wie eingangs erwähnt.
Das Befolgen dieser Richtlinien für die Website-Bildgröße ist ein Muss, wenn Sie eine selbst gehostete Website haben und Ihre Fotos nur im Web präsentieren müssen.
Die Auswahl der richtigen Bilder ist ein wichtiger Aspekt bei der Erstellung einer visuell ansprechenden und schnell ladenden Website. Es gibt, ohne Zweifel, eine Lernkurve. Es gibt jedoch noch andere Vorteile, und das alles ist Teil der Aufregung beim Erstellen und Verwalten einer Website!