Medien spielen eine entscheidende Rolle bei der Verbesserung der visuellen Attraktivität und Effektivität Ihrer Website. Die richtige Verwendung von Bildern, Videos und anderen Medientypen kann Besucher ansprechen, Informationen effektiver vermitteln und ein dynamischeres Nutzererlebnis schaffen.
-
Bilder, Icons, Audioclips und Dateien: bis zu 15.000 Bilder, Audioclips und Dateien zusammen pro Site. Zusätzliche Dateien können zu einer Fehlermeldung führen. Jede Datei sollte nicht größer als 50 MB
Beachten Sie, dass das Dateilimit auf 20.000 erhöht wird, wenn Sie einen Elite-Tarif für native Stores nutzen.
-
Videos: bis zu 100 pro Seite. Zusätzliche Dateien können zu einer Fehlermeldung führen. Jede Datei sollte nicht größer als 200 MB sein. Größere Dateien können zu einer Fehlermeldung führen oder das Hochladen nicht abschließen. Wenn zusätzliche Videos benötigt werden, sind YouTube oder Vimeo möglicherweise mögliche Optionen
-
Leerzeichen in Dateinamen werden nicht unterstützt. Es können Dateien hochgeladen werden, die Leerzeichen enthalten, dies kann jedoch zu unerwartetem Verhalten bei der Datei führen.
-
Nachdem Sie eine Datei gelöscht haben, bleibt deren Name möglicherweise noch eine Weile im Cache gespeichert. Geben Sie neu hochgeladenen Dateien einen anderen Namen, da sonst die Fehlermeldung Name bereits vorhanden angezeigt werden könnte oder die gelöschte Datei weiterhin angezeigt wird.
-
SVG-Dateityp: SVGs sind Bilddateien, die HTML-Code enthalten. Wenn Sie also Ihrer Website ein SVG-Symbol hinzufügen, fügen Sie auch Codezeilen hinzu. Mehrere komplexe SVGs können Tausende von Codezeilen hinzufügen und dazu führen, dass deine Website langsam geladen wird. Wenn du mehrere SVG-Symbole auf derselben Seite verwenden musst, empfehlen wir, einige davon in normale Bilder (.png, .jpeg usw.) umzuwandeln, um Lade- oder Funktionsprobleme zu vermeiden
-
Dateien jeglicher Art können nicht in den Stammordner einer Domain hochgeladen werden.
-
Dateimetadaten (einschließlich EXIF-Daten) werden nicht unterstützt und werden beim Hochladen entfernt.
Das Seitenverhältnis ist das Verhältnis zwischen Breite und Höhe eines Mediums und stellt den numerischen Wert seiner Form dar (in der Regel ist das Seitenverhältnis bei Bildern und Videos am wichtigsten). Die Größe des Mediums wirkt sich nicht unbedingt auf das Seitenverhältnis aus. Beispielsweise haben sowohl 1280 x 720 Pixel als auch 3840 x 2160 Pixel dasselbe Seitenverhältnis
Wenn das Seitenverhältnis einer Mediendatei deutlich von der Form des Abschnitts oder Elements abweicht, in dem sie verwendet werden soll, kann es so aussehen, als wäre sie abgeschnitten. Je nach Widget oder Element kann es am besten sein, das Seitenverhältnis der Datei zu ändern. Bei Bildern kann der eingebaute Bildeditor verwendet werden, um das Seitenverhältnis durch Zuschneiden zu ändern. Wenn ein Video bearbeitet werden muss, müsste dies mit einem externen Tool geschehen
Anmerkung
-
Die Dateigrößenbeschränkung beträgt 50 MB pro Bild.
-
Bilddateien tragen zur Datei mit einem Limit von 15.000 bei.
Die folgenden Bilddateitypen werden unterstützt:
png, jpg, jpeg, gif, svg, svg+xml, ico, x-icon, webp
Der Editor optimiert Bilder auf Abruf und passt sie an das verwendete Gerät und die sichtbare Größe auf der Website an.
Beachten Sie, dass die Größe des hochgeladenen Bildes niemals erhöht wird und nur Bilder, die auf der Website angezeigt werden, die kleiner als das Original sind, optimiert werden. Wenn du beispielsweise ein Bild mit einer Breite von 2000 Pixeln hochlädst, es aber in einem Bereich verwendet wird, der nur 1920 Pixel benötigt, wird das Bild auf 1920 Pixel optimiert. Wenn Sie jedoch ein Bild mit einer Breite von 100 Pixeln hochladen, wird es nicht optimiert und kann pixelig erscheinen, wenn
Der Editor kann zwar Bilder jeder Größe optimieren, es wird jedoch empfohlen, Bilder hochzuladen, die der maximalen Größe entsprechen, die auf der Website angezeigt wird. Wenn es sich bei dem Bild beispielsweise um ein Vorschaubild mit einer Breite von 160 Pixeln handelt, sollten Sie erwägen, ein Bild mit einer maximalen Breite von etwa 200 Pixeln hochzuladen
Zusätzlich zur Optimierung werden alle Bilder auf der Website im WebP-Format bereitgestellt. Dieses Format ermöglicht kleinere Dateigrößen bei gleichbleibender Bildqualität und trägt so zu einer schnelleren Leistung der Website bei, ohne die visuelle Klarheit zu beeinträchtigen
Anmerkung
DudaDie Bildoptimierung funktioniert nur bei JPG- und PNG-Bildern. Wenn Sie TIFF-, GIF- oder andere Bildformate hochladen, Duda kann es möglicherweise nicht optimieren.
Die Optimierung kann für Hintergrundbilder, das Bild-Widget und das Fotogalerie-Widget deaktiviert werden.
Weitere Informationen finden Sie in den folgenden Artikeln:
Warnung
Das Deaktivieren der Bildoptimierung kann sich auf die Seitengeschwindigkeit und/oder die Leistung auswirken.
Das Seitenverhältnis ist das Verhältnis zwischen den Attributen Breite und Höhe eines Bildes und hängt im Wesentlichen mit der Form des Bildes zusammen. Ein Seitenverhältnis von 16:9 kann ein Bild mit 16x9 Pixeln oder ein Bild mit 1600 x 900 Pixeln sein. Es ist im Grunde jede Bildauflösung, die das
Visualisierung der beiden gängigsten Seitenverhältnisse:
Die Auflösung eines Bildes bezieht sich auf die Menge an Details, die ein Bild enthält, insbesondere auf die Anzahl der Pixel, aus denen das Bild besteht, und ist im Wesentlichen die Detailgenauigkeit und Klarheit des Bildes.
Bilder werden zwar auf Ihrer Website optimiert, das Design der Bilder auf Ihrer Website wird jedoch nicht geändert. Wenn du ein Bild auf dem Desktop verwendest, das ein Seitenverhältnis von 16:9 hat, wird es auf dem Desktop perfekt aussehen, da ein Desktop-Gerät breit ist. Ein Mobilgerät ist jedoch viel kleiner, weshalb ein Seitenverhältnis von 16:9 manchmal klein aussieht
Um dies zu kompensieren, können Sie entweder die Funktion „Auf Gerät ausblenden“ verwenden, um bestimmte Versionen für diese Geräte zu erstellen, oder Sie können die Größe des Bilds im Designbereich des Widgets ändern. Größenänderungen sind für die meisten Elemente geräteunabhängig
Das empfohlene Seitenverhältnis hängt davon ab, wo es verwendet wird und wie es angezeigt werden soll.
Wenn ein Bild im Querformat verwendet wird, könnte beispielsweise ein Verhältnis von 16:9 empfohlen werden, da dies darauf hindeuten würde, dass es breiter als hoch ist. Im Hochformat wäre das Gegenteil der Fall, 9:16.
Für Größenempfehlungen ist es im Allgemeinen am besten, die Bildbreite gleich oder etwas größer als die optimierte Größe zu belassen. Wenn das Bild beispielsweise in einem Bild-Widget auf dem Desktop verwendet wird, beträgt die empfohlene maximale Breite 1920 Pixel oder ist nur geringfügig größer. Größere Bilder erfordern eine stärkere Optimierung, was sich auf die Bildqualität auswirken kann. Wenn die Optimierung ausgeschaltet ist, werden größere Bilder nicht an Qualität verlieren, aber die Website wird aufgrund ihrer Größe langsamer.
Gängige Verhältnisse und Größen
Wenn ein Bild die gesamte Breite der Website umfasst:
-
Gängige Seitenverhältnisse für Desktop-PCs: 16:9, 3:4
-
Gängige Auflösungsgrößen (px) für Desktop: 1600x900, 1280x720, 1280x960
Mobilgeräte haben im Vergleich zu Desktop-Geräten häufig das entgegengesetzte Seitenverhältnis. Möglicherweise müssen Sie die Funktion „Auf dem Gerät ausblenden“ verwenden, um die Slider auf Mobilgeräten korrekt anzuzeigen
Das Seitenverhältnis und die Größe des Bildes eines Widgets können je nach Größe, Position und Einstellungen des Widgets variieren. Es gibt zwar allgemeine Richtlinien, aber keine festen Standards.
Galerie-Widgets und Widgets, die Galerie-Layouts anbieten
Zu diesen Widgets gehören die folgenden:
-
Foto Gallerie
-
Produkt Gallerie
-
Medien-Slider
-
third party store Seiten-Widgets
Das Seitenverhältnis der Bilder in diesen Widgets sollte so aussehen, wie sie angezeigt werden sollen.
-
Galerien im quadratischen Stil sollten beispielsweise ein Bildverhältnis von 1:1 haben.
-
Galerien im Stil großer Bilder sollten ein längeres Höhenverhältnis haben, z. B. 2:5 oder 200 x 500 Pixel.
-
Die Bildverhältnisse sollten aus Gründen der Designkonsistenz gleich sein. Lassen Sie etwas Abstand im Bild, um den Hover-Effekt zu verwenden, damit Ihre Bilder nicht abgeschnitten werden
-
Übliche Auflösungsgrößen (px): Jede Auflösung, aber wenn möglich nicht größer als 1500px für die Seitengeschwindigkeit.
Alle verfügbaren Layouts verfügen über festgelegte Seitenverhältnisse, die sich nicht ändern, obwohl die Layoutoptionen mit einheitlichen Bildgrößen in den Designeinstellungen die Möglichkeit haben, die Höhe zu ändern. Wenn die Höhe für diese Layouts geändert wird, ändern sich die Seitenverhältnisse je nach Größe des Widgets
Die eingestellten Seitenverhältnisse für die Mosaik-Layouts (die Optionen, bei denen die Bilder unterschiedliche Größen haben) variieren je nach Layout sowie der Anzahl der Spalten, die in den Designeinstellungen festgelegt wurden.
Während das Widget auf der Kategorieseite eine Vielzahl zur Auswahl bietet, hat das Bild auf der Produktseite ein Seitenverhältnis von 1:1.
Um die verfügbaren Optionen für das Widget auf der Kategorieseite zu sehen:
-
Klicken Sie im Seitenbereich auf Speichern.
-
Klicken Sie Seiten speichern.
-
Klicken Sie Seite „Kategorie“ (Wenn im Shop keine Kategorien eingerichtet sind, wird die Seite ausgegraut und kann nicht bearbeitet werden).
-
Klicken Sie mit der rechten Maustaste auf das Widget, das die Kategorien anzeigt, und wählen Sie Design bearbeiten.
-
Klicken Sie Produkte.
-
Klicken Sie auf das Vorschaubild unter Layout um die verfügbaren Layoutoptionen zu sehen.
-
Um die verfügbaren Seitenverhältnisse zu sehen, scrollen Sie im Abschnitt Produkte nach unten zum Seitenverhältnis des Bilds Option.
Standardmäßig überschreibt das Seitenverhältnis der meisten Elemente das Seitenverhältnis des Bilds, was dazu führt, dass Teile des Bildes abgeschnitten werden. Einige Elemente enthalten jedoch eine Einstellung, mit der das gesamte Bild angezeigt werden kann, ohne dass es beschnitten wird
|
Originalbild |
Bild im Widget mit übergeordnetem Seitenverhältnis |
|---|---|
|
Das Seitenverhältnis ist 3:2 |
Ein mögliches Seitenverhältnis könnte beispielsweise 3:1 sein (nur der Teil des Bildes, der nicht von den weißen Kästchen verdeckt wird) |
Bei der Verwendung des Einband Option in den Designeinstellungen des Elements, das Seitenverhältnis des Elements überschreibt das Seitenverhältnis des Bilds. Wenn die Seitenverhältnisse nicht übereinstimmen, werden Teile des Bildes abgeschnitten
Darüber hinaus passen sich einige Elemente, wie Zeilen und Abschnitte, an die Bildschirmgröße des Geräts an. Infolgedessen ändert sich das Seitenverhältnis des Elements je nach Größe des Bildschirms, auf dem gerade die Website angezeigt wird.
Eine Technik, um zu verhindern, dass das Bild abgeschnitten wird, ist die Verwendung der Vollständiges Bild Option in den Designeinstellungen des Elements. Bitte beachten Sie, dass nicht alle Elemente über diese Option verfügen.
Weitere Informationen zu Hintergründen finden Sie unter Hintergründe von Elementen.
Einige Widgets bieten eine Einstellung, mit der das gesamte Bild angezeigt werden kann, ohne dass es beschnitten wird.
Widgets, die die Einstellung bieten, das gesamte Bild anzuzeigen:
-
Bild (im Editor 2.0; im Classic Editor hält sich das Widget immer an das Seitenverhältnis der Bilder)
-
Medien-Slider
-
Foto Gallerie
Die Gesamtfläche eines Bildes darf 3.145.728 Pixel nicht überschreiten. Es ist unwahrscheinlich, dass eines Ihrer Bilder dieses Limit überschreitet, aber Sie können dies schnell überprüfen, indem Sie die Pixelbreite mit der Höhe multiplizieren
Jede Datei sollte nicht größer als 50 MB sein. Größere Dateien können zu einer Fehlermeldung führen oder das Hochladen nicht abschließen
Das Hochladen eines Bilds, das das Limit überschreitet, kann zu den folgenden Fehlern führen:
-
Bilder können nicht hochgeladen werden.
-
Bilder werden hochgeladen, aber die Miniaturansichten in der Bildauswahl werden nicht angezeigt.
-
Bilder werden nicht in den Editor geladen.
-
Bilder werden nicht auf die Live-Site geladen.
Es wird empfohlen, das SVG-Format für Logo-Bilder zu verwenden, da SVG-Dateien nicht auf die gleiche Weise wie andere Bilddateien optimiert werden. Selbst wenn das Logo, das Sie hochladen, klein ist, verlieren Sie nicht an Qualität.
Anmerkung
SVGs sind Bilddateien, die HTML-Code enthalten. Wenn Sie also Ihrer Website ein SVG-Symbol hinzufügen, fügen Sie auch Codezeilen hinzu.
Richtlinien zur Größe
Der Bereich für die Breite des Logos, wenn es in die Kopf- oder Fußzeile integriert wird, liegt zwischen 250 Pixel und 400 Pixel. In der Regel spielt die Höhe keine Rolle und wird durch das Seitenverhältnis des Logos bestimmt
Das Hochladen der größten Auflösung für Ihre Website garantiert, dass die Bilder Ihrer Website für Ihre Kunden und Kunden eine hohe Auflösung haben. Beachten Sie jedoch, dass große Bilder auch drastische Auswirkungen auf Ihre Seitengeschwindigkeit haben. Da hochauflösende Bilder verkleinert werden, bemerken 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 Größe von 300 x 300 Pixeln auf Ihrer Website haben, möchten Sie es nicht als 4000 x 4000 Pixel großes Bild hochladen
So optimierst du die Bildgrößen für deine Website:
-
Laden Sie nur Bilder hoch, die so groß sind, wie sie verwendet werden sollen (wenn das Bild beispielsweise auf der Website als 300 x 300 Pixel angezeigt werden soll, laden Sie es nicht als 4000 x 4000 Pixel großes Bild hoch).
-
Die maximale Bildgröße darf 3.145.728 Pixel nicht überschreiten.
-
Beachten Sie die Seitenverhältnisse, da 16:9 -Bilder auf dem Desktop großartig aussehen, auf Mobilgeräten jedoch zu klein erscheinen. In diesem Fall gilt
-
Benutze das Auf dem Gerät verstecken Funktion zum Erstellen bestimmter Versionen des Images für jedes Gerät.
-
Passen Sie die Bildabmessungen (Seitenverhältnis) an die Größe an — Größenänderungen sind geräteunabhängig.
-
Die Gesamtfläche eines Bildes darf 3.145.728 Pixel nicht überschreiten. Es ist unwahrscheinlich, dass eines Ihrer Bilder dieses Limit überschreitet, aber Sie können dies schnell überprüfen, indem Sie die Pixelbreite mit der Höhe multiplizieren
Anmerkung
-
Informationen und Richtlinien für Webseiten-Symbole finden Sie unter SEO-Einstellungen für Websites.
-
Symboldateien tragen zur Datei mit einem Limit von 15.000 bei.
Der Dateityp SVG ist der einzige unterstützte Dateityp für diese Registerkarte.
-
Übliche Seitenverhältnisse: Im Allgemeinen 1:1, aber jedes Seitenverhältnis funktioniert.
-
Übliche Auflösungsgrößen (px): 200x200, 80x80 oder eine beliebige Auflösung. SVGs können
Warnung
SVGs sind Bilddateien, die HTML-Code enthalten. Wenn Sie also Ihrer Website ein SVG-Symbol 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 langsam geladen wird oder möglicherweise unterbrochen wird. Wenn du mehrere SVG-Symbole auf derselben Seite verwenden musst, empfehlen wir, einige davon in normale Bilder (.png, .jpeg usw.) umzuwandeln, um Lade- oder Funktionsprobleme zu vermeiden
Videos können in den Dateien der Website gehostet werden, indem Sie sie in den Media Manager hochladen oder direkt mit der Kamera und dem Mikrofon Ihres Computers aufnehmen. Darüber hinaus können Videos von YouTube, Vimeo oder Dailymotion mithilfe des Video-Widgets oder als Hintergrund für Elemente, die Videos unterstützen, zu bestimmten Teilen der Website hinzugefügt werden. Diese externen Videos sind nur an dem Ort verfügbar, an dem sie hinzugefügt wurden, und nicht im Editor
Anmerkung
Pro Seite können bis zu 100 Videos hochgeladen werden. Zusätzliche Dateien können zu einer Fehlermeldung führen. Jede Datei sollte nicht größer als 200 MB sein. Größere Dateien können zu einer Fehlermeldung führen oder das Hochladen nicht abschließen. Wenn zusätzliche Videos benötigt werden, sind YouTube oder Vimeo möglicherweise mögliche Optionen
Detaillierte Informationen darüber, wo und wie Videos in die Website integriert werden können, finden Sie in diesen Artikeln:
-
Das Laden von Videos kann Zeit und Bandbreite in Anspruch nehmen und Nutzer von wichtigen Links oder Texten auf Ihrer Seite ablenken. Verwenden Sie Videos daher sparsam.
-
YouTube-Videos werden auf Mobilgeräten nicht unterstützt, da sie auf iOS-Geräten nicht automatisch abgespielt werden.
-
iPhones mit einem Akku im Energiesparmodus spielen Videos auf einer Website nicht automatisch ab, sondern zeigen stattdessen eine Wiedergabetaste an.
-
Bei Hintergrundvideos wird kein Ton wiedergegeben.
-
Wenn du ein Dailymotion-Video hinzufügst, das Teil einer Playlist ist, achte darauf, nur den direkten Link zum Video hinzuzufügen (und lasse den Playlist-Parameter weg, der ungefähr so aussieht:? Playliste=x1x2f3). Wenn die URL deines Videos diesen Parameter hat, entferne ihn einfach. Zum Beispiel:
https://www.dailymotion.com/video/x60ktex?playlist=x5x6f2wärehttps://www.dailymotion.com/video/x60ktex
Es kann eine Reihe von Gründen geben, warum ein Video nicht hochgeladen wird. Hier sind einige Techniken, mit denen du versuchen kannst, Fehler zu beheben:
-
Überprüfen Sie die Dateigröße, um sicherzustellen, dass sie unter 200 MB liegt.
-
Überprüfe die aktuell hochgeladenen Videos, um sicherzustellen, dass es weniger als 100 sind.
-
Versuche, ein anderes Video hochzuladen.
-
Wenn ein anderes Video hochgeladen wird, hängt es wahrscheinlich mit der Videodatei zusammen. Das Erstellen einer neuen Datei aus der Originalquelle kann das Problem beheben
-
Wenn ein anderes Video nicht hochgeladen wird, kann es mit etwas auf Ihrem Computer zusammenhängen, z. B. mit der Seitengeschwindigkeit oder dem Browser. Wenn es lokal auf deinem Computer ist, könntest du folgende Techniken ausprobieren:
-
Browser-Cache löschen
-
Ich versuche einen anderen Browser
-
Ein anderes Netzwerk ausprobieren
-
Starten Sie Ihren Computer neu
-
-
Anmerkung
Audiodateien tragen zur Datei mit einem Limit von 15.000 bei.
Audio kann in den Dateien der Website gehostet werden, indem Sie es in den Media Manager hochladen oder direkt mit dem Mikrofon Ihres Computers aufnehmen. Darüber hinaus kann Audio von SoundCloud oder Mixcloud mithilfe des Audio-Widgets zu bestimmten Teilen der Website hinzugefügt werden. Externes Audio ist nur an dem Ort verfügbar, an dem es hinzugefügt wurde, und nicht im Editor
Einzelheiten zum Integrieren von Audio in eine Website finden Sie unter Audio-Widget.
Anmerkung
-
Dateien auf der Registerkarte „Datei“ des Medienmanagers tragen zur Datei mit einem Limit von 15.000 bei.
-
Sie können keine Dateien in Ihren Stammordner hochladen.
Der Datei-Tab im Medienmanager unterstützt fast jeden Dateityp. Die hier hochgeladenen Dateien können mithilfe der Linkauswahl verlinkt werden, können jedoch nicht direkt in einem Widget verwendet werden (Weitere Informationen zum Link-Picker finden Sie unter Link-Picker). Beispielsweise kann ein auf diesen Tab hochgeladenes Bild mit keinem Bild-Widget verwendet werden.
Ich habe die Fehlermeldung „Name wird bereits verwendet“ erhalten, aber ich habe keine Dateien mit dem Namen
Dateinamen können für eine Weile zwischengespeichert bleiben. Wenn eine Datei mit demselben Namen kürzlich gelöscht wurde, wird sie wahrscheinlich immer noch zwischengespeichert, und Sie müssen einen anderen Namen verwenden
Eine Datei mit demselben Namen wurde möglicherweise kürzlich gelöscht. Dateinamen können für eine Weile zwischengespeichert bleiben. Die Datei müsste umbenannt werden
Um eine Datei umzubenennen, öffnen Sie den Media Manager, wählen Sie die Datei aus und klicken Sie auf Umbenennen. Wenn Sie eine Bibliothek oder einen Picker verwenden, schalten Sie Verwalten Option für die Bibliothek oder den Picker.
Dies liegt wahrscheinlich an einer vorhandenen Datei mit demselben Namen oder an einer kürzlich gelöschten Datei. Dateinamen können für eine Weile zwischengespeichert bleiben. Daher ist das Umbenennen der Datei möglicherweise die beste Option, wenn dieses Problem auftritt
Um eine Datei umzubenennen, öffnen Sie den Media Manager, wählen Sie die Datei aus und klicken Sie auf Umbenennen. Wenn Sie eine Bibliothek oder einen Picker verwenden, schalten Sie Verwalten Option für die Bibliothek oder den Picker.
Löschen Sie die Datei aus dem Medienmanager oder aus einer Bibliothek bzw. einer Medienauswahl, bei der die Option Verwalten aktiviert ist. Die Datei wird sofort aus den Medien Ihrer Website entfernt.
Wenn jemand bereits über den direkten Link zur Datei verfügt, kann er diese möglicherweise noch eine Weile lang öffnen, da Kopien der Datei im Cache verbleiben können. Es gibt keinen festgelegten Zeitraum, wie lange dies der Fall ist.