Jedes Mal, wenn Sie ein Bild hochladen, werden bis zu 5 verkleinerte Kopien des Bildes erstellt. Website Builder fügt dann automatisch das Bild in der richtigen Größe in den Desktop, das Tablet und die mobilen Websites ein und stellt so sicher, dass Ihre Website-Besucher das Bild stets in der richtigen Größe für ihr Gerät sehen.
- Es können bis zu 15.000 Dateien (einschließlich Bilder, Videos, Audioclips und Dateien) pro Website hochgeladen werden, wobei jede Datei nicht größer als 200 MB sein sollte.
Systemanforderungen für Webp
Die folgenden Versionen werden für Webp-Bilder unterstützt:
- iPhone: v14 und später
- Mac/Safari: neueste Version
- Chrome: alle Versionen
- Android: alle Versionen
Die folgenden Bilddateiformate werden unterstützt:
png, jpg, jpeg, gif, svg, svg+xml, ico, x-icon, webp
Optimierte Bildgrößen je Gerät
Die Größe des hochgeladenen Bildes wird nicht erhöht. Nur Bilder, die kleiner als das Original sind, werden erstellt. Wenn beispielsweise ein Bild mit einer Breite von 2000 Pixeln hochgeladen wird, werden 5 neue optimierte Kopien erstellt. Wenn ein Bild mit einer Breite von 100 Pixeln hochgeladen wird, werden keine neuen Bilder erstellt.
Bildtyp |
Bildbreite |
|---|---|
Hintergrund |
2880 px |
Desktop |
1920 px |
Tablet |
1280 px |
Mobil |
640 px |
|
Thumbnail Blog-Miniaturbild |
160 px 300 px |
Die Optimierung kann für Hintergrundbilder, das Bild- und das Fotogalerie- deaktiviert werden.
Weitere Informationen finden Sie in folgenden Artikeln:
Die Deaktivierung der Bildoptimierung kann sich auf die Geschwindigkeit und/oder die Leistung der Seite auswirken.
Maximale Bildgröße
Die Gesamtfläche eines Bildes darf 3.145.728 Pixel nicht überschreiten. Es ist unwahrscheinlich, dass eines Ihrer Bilder über dieser Grenze liegt, aber Sie können dies schnell überprüfen, indem Sie die Pixelbreite mit der Höhe multiplizieren.
Die Bildgröße sollte 200 MB nicht überschreiten.
Das Hochladen eines Bildes, das größer als das Limit ist, kann zu den folgenden Fehlern führen:
- Bilder können nicht hochgeladen werden.
- Bilder werden hochgeladen, aber die Miniaturbilder in der Bildauswahl werden nicht angezeigt.
- Bilder werden im Editor nicht geladen.
- Bilder werden auf der Live-Website nicht geladen.
Richtlinien zur Bildgröße pro Widget
Schieberegler-Widget
Der Schieberegler- wird normalerweise bei größeren Bildern verwendet, um einen dramatischen Effekt zu erzielen. Schieberegler erstrecken sich in der Regel von einem Ende zum anderen, daher ist es gut, Bilder mit einer größeren Breite zu verwenden, damit der Schieberegler passt. Verwenden Sie für quadratische Schieberegler ein gerades Seitenverhältnis, z. B. 1:1.
Es ist am besten, Bilder mit gutem Innenabstand zu wählen, so dass der Hauptinhalt des Bildes bei einer Größenänderung nicht abgeschnitten wird. Die Bildverhältnisse im Schieberegler sollten aus Gründen der Designkonsistenz gleich sein.
- Übliche Seitenverhältnisse: 16:9, 3:4
- Übliche Auflösungsgrößen (Pixel): 1600x900, 1280x720, 1280x960
Mobile Geräte haben oft das entgegengesetzte Seitenverhältnis im Vergleich zu Desktop-Geräten. Möglicherweise müssen Sie die Funktion „Auf Gerät ausblenden“ verwenden, um mobile Schieberegler korrekt anzuzeigen.
Fotogalerie- und Store-Produktgalerie-Widgets
Das Fotogalerie- und die Produktgalerie-Widgets sind die flexibelsten s zur Verwendung mit Bildern, da es so viele Layout-Optionen gibt. Sie können zum Beispiel eine gekachelte Galerie erstellen, die für alle Bilder die gleiche Größe hat, oder ein Mosaik, das pro Bild eine unterschiedliche Größe hat.
Das Seitenverhältnis der Bilder in den Foto- und Produktgalerien sollte die gewünschte Darstellung widerspiegeln.
- Beispielsweise sollten Galerien im quadratischen Stil ein Bildformat von 1:1 haben.
- Galerien mit Bildern im Hochformat sollten längere Höhenverhältnisse haben, wie z. B. 2:5 oder 200 Pixel mal 500 Pixel.
Die Bildverhältnisse sollten aus Gründen der Designkonsistenz gleich sein. Lassen Sie etwas Innenabstand im Bild, sodass der Schwebeeffekt genutzt werden kann und Ihre Bilder nicht abgeschnitten werden.
- Übliche Seitenverhältnisse: beliebiges Seitenverhältnis.
- Übliche Auflösungsgrößen (Pixel): Jede Auflösung, aber nicht größer als 1500 Pixel, wegen der Seitengeschwindigkeit.
Icons
Symbole sind ein sehr wichtiger Bestandteil jeder Website. Sie sind visuelle Markierungen für Informationen und können Ihrer Website ein modernes Aussehen verleihen. Sie können transparente PNGs, JPEGs oder SVGs verwenden.
- Übliche Seitenverhältnisse: Im Allgemeinen 1:1, aber jedes Seitenverhältnis ist möglich.
- Übliche Auflösungsgrößen (Pixel): 200x200, 80x80 oder jede beliebige Auflösung. SVGs können jede beliebige Auflösung haben.
Weitere Informationen finden Sie unter Website-Symbole.
SVGs sind Bilddateien, die HTML-Code enthalten. Das heißt, wenn Sie ein SVG-Symbol zu Ihrer Website hinzufügen, fügen Sie auch Codezeilen hinzu. Mehrere komplexe SVGs können Tausende von Codezeilen hinzufügen und dazu führen, dass Ihre Website nur langsam lädt. Wenn Sie mehrere SVG-Symbole auf derselben Seite verwenden müssen, empfehlen wir, einige von ihnen in normale Bilder (.png, .jpeg usw.) umzuwandeln, um Probleme beim Laden oder mit der Funktionalität zu vermeiden.
Favicons
Favicons werden nicht auf Ihrer eigentlichen Website verwendet, sondern auf der Registerkarte angezeigt, wenn Benutzer Ihre Website öffnen. Es wird empfohlen, das ICO-Format zu verwenden. Wie Sie Bilddateien in ICO konvertieren, erfahren Sie in der folgenden Ressource.
- Erforderliches Seitenverhältnis: 1:1
- Zulässige Auflösungsgrößen (Pixel): 24x24, 36x36, 48x48
Logos
Es wird empfohlen, das SVG-Format für Logobilder zu verwenden, da SVG-Dateien nicht auf dieselbe Weise optimiert werden wie andere Bilddateien. Selbst wenn das Logo, das Sie hochladen, klein ist, verlieren Sie also nicht an Qualität.
Seitenverhältnis vs. Auflösung
Das Seitenverhältnis ist das Verhältnis der Bildattribute Breite und Höhe. Ein Seitenverhältnis von 16:9 kann ein Bild mit 16x9 Pixel oder ein Bild mit 1600x900 Pixel sein. Grundsätzlich ist es jede Bildauflösung, die das Verhältnis 16:9 hat.
Visualisierung der beiden gebräuchlichsten Seitenverhältnisse:
Geräteabhängige Seitenverhältnisse
Zwar werden die Bilder auf Ihrer Website optimiert, doch wird das Design der Bilder auf Ihrer Website nicht in der Größe verändert. Wenn Sie auf dem Desktop ein Bild mit einem Seitenverhältnis von 16:9 verwenden, wird es auf dem Desktop perfekt aussehen, da ein Desktop-Bildschirm oft sehr breit ist. Ein mobiles Gerät ist jedoch viel schmäler, so dass ein Seitenverhältnis von 16:9 manchmal klein aussieht.
Um dies auszugleichen, können Sie entweder die Funktion "Auf Gerät ausblenden" verwenden, um spezifische Versionen für diese Geräte zu erstellen, oder Sie können die Größe des Bildes so ändern, dass es passt. Änderungen der Größe sind geräteunabhängig.
Erwägungen
Das Größte ist nicht immer das Beste
Das Hochladen der größten Auflösung für Ihre Website garantiert, dass die Bilder Ihrer Website für Ihre Kunden und Interessenten hochauflösend dargestellt werden. Denken Sie jedoch daran, dass große Bilder auch einen erheblichen Einfluss auf die Geschwindigkeit Ihrer Seite haben. Da hochaufgelöste Bilder herunterskaliert werden, merken die Benutzer den Unterschied in der Auflösung normalerweise nicht. Es ist besser, Bilder hochzuladen, die so groß sind, wie sie verwendet werden sollen. Wenn Sie beispielsweise ein Bild mit einer Auflösung von 300 Pixel x 300 Pixel auf Ihrer Website haben, sollten Sie es nicht als Bild mit einer Auflösung von 4000 Pixel x 4000 Pixel hochladen.