Richtlinien zur Bildgröße

Jedes Mal, wenn Sie ein Bild hochladen, werden bis zu 5 verkleinerte Kopien des Bildes erstellt. IONOS 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.

Hinweis
  • Es können bis zu 15.000 Bilder pro Seite hochgeladen werden, wobei jedes Bild nicht größer als 15 MB sein sollte.
  • Es können bis zu 100 Videos pro Website hochgeladen werden, wobei jedes Video nicht größer als 200 MB sein sollte. Sie können auf jeder Seite eine unbegrenzte Anzahl von YouTube/Vimeo-Videolinks verwenden. Weitere Informationen finden Sie unter Video-Widget.
  • Bildnamen dürfen keine Leerzeichen enthalten. So sollte schönes bild.png entweder schönes_bild.png oder schönes-bild.png genannt werden.

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

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 15 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

Der Schieberegler-Widget 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
Hinweis

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

Das Fotogalerie-Widget ist das flexibelste Widget 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 der Fotogalerie 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.

Hinweis

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.