Bilder & Medien

Bereiche und Formate

• „Bilder“ enthält die Quellbilder und weitere Grafiken wie Logos und Symbole. In die Bildordner unter „quellbilder“ lädt der Dateimanager JPG, PNG, GIF und WebP, im Hauptordner „Bilder“ zusätzlich SVG und ICO.
• „Dateien“ nimmt auch PDF, Office-Dokumente, MP4 und viele weitere Formate an. Produktvideos gehören in den Unterordner „videos“.
• „Downloads“ enthält die Dateien von Download-Artikeln.
• Fotos im HEIC-Format vom Smartphone, AVIF und TIFF nimmt der Dateimanager in den Bildordnern nicht an. Wandeln Sie sie vorher in JPG oder WebP um.

Upload-Grenze und große Dateien

Die Grenze für eine Datei legen die PHP-Einstellungen des Servers fest. Es gilt der kleinere der beiden Werte für Datei-Upload und Formulardaten. „Hochladen“ öffnet direkt die Dateiauswahl Ihres Rechners; die Grenze zeigt der Dateimanager dabei nicht an. Wie hoch sie in Ihrem Shop ist, sagt Ihnen der Support.

Für eine sehr große PDF-Datei haben Sie drei Wege: die Datei verkleinern (die meisten PDF-Programme können Dokumente für das Web speichern), sie per SFTP in den Ordner files laden oder den Support bitten, die Grenze anzuheben.

Datei mit gleichem Namen

Liegt im Ordner schon eine Datei mit demselben Namen, fragt der Dateimanager nach. „Überschreiben“ ersetzt die vorhandene Datei, „Umbenennen“ legt die neue unter einem anderen Namen ab. Was nach dem Überschreiben zu tun ist, steht unter Bild ersetzen.

Bild bearbeiten

Der Stift neben einem Produkt- oder Merkmalsbild („Quellbild bearbeiten“) öffnet den Bildeditor des Dateimanagers mit „Zuschneiden“, „Größe ändern“ und „Umdrehen/Rotieren“. Er bearbeitet JPG, PNG und GIF, aber keine WebP-Dateien. Speichern Sie danach den Artikel, damit der Shop die Vorschaubilder neu erzeugt.

Was der Shop selbst umbenennt

• Hochladen im Dateimanager: Aus „ü“ wird „u“, aus „ß“ wird „sz“. Leerzeichen und alle anderen Zeichen außer Buchstaben, Ziffern, Bindestrich und Unterstrich werden zu „_“.
• Speichern eines Artikels, einer Kategorie oder eines Herstellers: Der Shop benennt das Quellbild um (ä → ae, ö → oe, ü → ue, ß → ss, Leerzeichen und Komma → „_“) und trägt den neuen Namen ein. Andere Sonderzeichen wie „é“ oder „&“ bleiben stehen.
• Import mit Bild-URL: Der Porter schreibt den Namen klein und ersetzt Umlaute.

Warum Umlaute trotzdem Ärger machen

Dateien, die per FTP oder Import in einen Ordner kommen, behalten ihren Namen. Speichern Sie dann einen Artikel, benennt der Shop die Datei um. Bringt ein späterer Import oder ein anderer Artikel wieder den alten Namen mit Umlaut mit, findet der Shop die Datei nicht mehr. Die Hilfe des Porters verlangt deshalb ausdrücklich Namen ohne Umlaute und Leerzeichen.

Außerdem zählt die Groß- und Kleinschreibung: Tasse.JPG und tasse.jpg sind für den Server zwei verschiedene Dateien.

Mit neuem Dateinamen (empfohlen)

1. Laden Sie die neue Datei unter einem neuen Namen hoch, zum Beispiel tasse-blau-v2.jpg.
2. Wählen Sie sie im Artikel im Feld „Produktbild“ aus und speichern Sie.
3. Weil die Bildadresse neu ist, sehen alle Besucher sofort das neue Bild. Die alte Datei räumen Sie später auf, siehe Aufräumen.

Unter demselben Dateinamen

1. Laden Sie die Datei im Dateimanager in denselben Ordner hoch und wählen Sie „Überschreiben“. Maßgeblich ist der Name, der im Bildfeld steht.
2. Bei Produktbildern öffnen Sie den Artikel und speichern ihn. Dabei löscht der Shop die Vorschaubilder aller Bilder dieses Artikels und erzeugt sie beim nächsten Aufruf neu.
3. Bei Kategorie- und Herstellerbildern und bei den kleinen Merkmalsbildern der Auswahl erneuert das Speichern die Vorschaubilder nicht. Wählen Sie unter Einstellungen → Design → Bilder den Reiter „Thumbnails löschen“.
4. Laden Sie die Seite in Ihrem Browser ohne Zwischenspeicher neu, unter Windows mit Strg + F5, auf dem Mac mit Cmd + Shift + R.

Größe einstellen

• Einstellbar sind „Breite Produktbild (hochauflösend)“ und „Höhe Produktbild (hochauflösend)“. Die kleineren Größen behalten ihre Breite und übernehmen automatisch das Seitenverhältnis. Bei Kategoriebildern gilt dasselbe für die große Fassung.
• Erlaubt sind 10 bis 5000 Pixel. Nach dem Speichern löscht der Shop die betroffenen Vorschaubilder und erzeugt sie beim nächsten Aufruf neu.
• Die Werte bestimmen die Auflösung der Vorschaubilder, nicht, wie groß ein Bild auf der Seite erscheint. Den Platz gibt das Layout vor.

Welche Auflösung hochladen?

• Laden Sie Produktbilder mindestens so groß hoch wie die hochauflösende Größe, ab Werk also 1980 × 1980 Pixel, und im gleichen Seitenverhältnis, ab Werk quadratisch. Kleinere Bilder vergrößert der Shop, sie wirken dann unscharf.
• Der Shop verkleinert hochgeladene Quellbilder nicht. Bereiten Sie Bilder direkt aus der Kamera vorher auf etwa 2000 Pixel Kantenlänge vor, das spart Speicherplatz.
• Fotos speichern Sie als JPG oder WebP, Grafiken mit transparentem Hintergrund als PNG oder WebP.

Zuschnitt oder Rand

Passt das Seitenverhältnis eines Bilds nicht zur eingestellten Größe, gibt es zwei Möglichkeiten. Mit „Crop Funktion für Bilder“ zoomt der Shop hinein und schneidet oben und unten oder links und rechts etwas ab. Ab Werk ist das für Produkt-, Kategorie- und Sliderbilder eingeschaltet.

Ohne Zuschnitt setzt er das ganze Bild ein und füllt die freien Ränder mit „Thumbnails: Hintergrundfarbe“, ab Werk #FFFFFF (Weiß). Am besten laden Sie Bilder gleich im richtigen Seitenverhältnis hoch, dann gibt es weder Rand noch Beschnitt.

Schwarze Ränder

Schwarze Ränder oder ein schwarzer Hintergrund entstehen, wenn unter „Thumbnails: Transparenz“ der Wert products gewählt ist und die Vorschaubilder als JPG entstehen. JPG kennt keine Transparenz, durchsichtige Flächen werden schwarz.

Abhilfe: products abwählen, dann füllt die Hintergrundfarbe die Flächen, oder das Ausgabeformat auf webp oder png stellen, siehe WebP. Prüfen Sie auch, ob „Thumbnails: Hintergrundfarbe“ versehentlich auf Schwarz steht. Danach „Thumbnails löschen“.

So arbeitet es

• Die Einstellung heißt Einstellungen → Design → Bilder → Lazy-Load für Bilder und steht ab Werk auf true.
• Beim Scrollen beginnt das Laden rund 400 Pixel bevor ein Bild sichtbar wird, damit es rechtzeitig da ist.

Abschalten

Stellen Sie „Lazy-Load für Bilder“ auf false, lädt der Browser alle Bilder einer Seite sofort, auch die ganz unten. Lassen Sie die Einstellung deshalb an, außer der Support rät Ihnen zu etwas anderem.

Bildwechsel beim Überfahren

Zeigt eine Kachel in der Galerieansicht beim Überfahren mit der Maus ein anderes Bild, ist „Anzeige alternativer Bilder im Produktlisting“ eingeschaltet. Gezeigt wird die zweite Bildzeile des Artikels. Artikel mit nur einem Bild wechseln nicht.

Die Einstellung gehört zur Gruppe Einstellungen → Design → Produktauflistung. Sehen Sie sie dort nicht, ist sie nur für XONIC freigegeben; der Support schaltet sie für Sie um. Schalten Sie in einem Bereich den Vorschau-Streifen ein, entfällt der Bildwechsel dort von selbst.

Vorschau-Streifen

„Weitere Bilder als Vorschau-Streifen im Listing“ zeigt unter dem Bild bis zu vier kleine Bilder des Artikels. Ein Klick tauscht das Hauptbild. Passen nicht alle hinein, fasst die letzte Kachel den Rest als „+N“ zusammen.

Sie schalten den Streifen je Bereich ein: Kategorielisting, Produktpräsentation (Produktblöcke auf Start-, Kategorie- und Produktseiten) und Optionslisting (Variantenliste auf der Produktseite), jeweils in Galerie- oder Listenansicht. Ab Werk ist er überall aus.

Galerie-Button

„Galerie-Button im Listing-Bild“ zeigt unten rechts im Bild einen Knopf. Er öffnet alle Bilder des Artikels in einer Großansicht zum Blättern und Vergrößern, ohne die Produktseite aufzurufen. Der Knopf erscheint nur bei Artikeln mit mehr als einem Bild.

Bilder ausblenden

„Produktbild anzeigen“ blendet die Bilder in Listen aus, „Produktbild anzeigen (Family Products)“ die Bilder der Variantenliste auf der Produktseite. Was eine Kachel ohne Bild zeigt, steht unter Ohne Bild.

Zwei Bildquellen

• Bild des Werts: unter Produkte → Produktmerkmale am Wert. Es gilt für alle Artikel mit diesem Wert.
• Optionsbild: im Artikel im Reiter „Merkmale“ am Wert, Feld „Optionsbild“. Es gilt nur für diesen Artikel.
• Beide Dateien liegen im Ordner der Merkmalsbilder (Bilder → quellbilder → optionen). Das Feld „Optionsbild“ sucht nur dort, ein Bild aus dem Ordner der Produktbilder findet es nicht.

Wo das Bild erscheint

Das legt die „Optionsbildanzeige“ des Merkmals im Artikel fest: „direkt bei der Auswahl“, „in der Bildgalerie“ oder „kombiniert (beides)“.

In die Galerie kommt nur das „Optionsbild“ am Artikel. Die Auswahlknöpfe zeigen das Optionsbild und, wenn es fehlt, das Bild des Werts. Steht die Anzeige auf „in der Bildgalerie“ oder „kombiniert (beides)“, springt die Galerie bei der Auswahl eines Werts auf dessen Bild.

Mehrere Bilder je Wert

Rechts neben dem Feld „Optionsbild“ steht ein Knopf mit einer Zahl („Zusatz Optionsbilder“). Er erscheint, sobald die Optionsbildanzeige nicht auf „direkt bei der Auswahl“ steht. Im Fenster „Zusatzbilder für …“ fügen Sie mit „neue Zeile“ weitere Bilder hinzu und schließen mit „Speichern und Schließen“.

Wählt der Kunde den Wert, zeigt die Galerie das Hauptbild und die Zusatzbilder dieses Werts. Ein Klick auf das Hauptbild bringt die vollständige Galerie zurück, die Auswahl bleibt bestehen.

Falsches oder kein Bild

• Die Galerie wechselt nicht: Am Wert fehlt das „Optionsbild“, oder die Optionsbildanzeige steht auf „direkt bei der Auswahl“. Wahlweise nimmt die Galerie das Bild des Werts als Ersatz, wenn „Bild des Merkmalswerts als Ersatz in der Bildgalerie“ unter Einstellungen → Design → Produktdetailansicht an ist. Schalten Sie das nur ein, wenn die Bilder der Werte Produktfotos sind und keine Farbmuster.ab 4.10
• Dieselbe Datei an mehreren Werten: Die Galerie zeigt jede Datei nur einmal und verknüpft sie mit dem ersten Wert. Geben Sie jedem Wert eine eigene Datei.
• Verkettete Merkmale wie Farbe und Größe: Das Bild hängt an der Kombination. Die dynamische Bildanzeige folgt der Auswahl ab 4.10, davor nur die Anzeige legacy.ab 4.10

Die Felder

• „Produktvideo“: eine MP4-Datei aus dem Dateimanager (Dateien → videos) oder ein Link zu YouTube oder Vimeo. Videos von TikTok und Facebook erkennt der Shop ebenfalls.
• „Videovorschaubild“: ein Bild aus dem Ordner der Produktbilder. Der Shop legt ein Play-Symbol darüber. Laut Hilfetext ist es für Apple-Geräte Pflicht; tragen Sie es deshalb immer ein.
• „Beschreibung“ je Sprache.

Datenschutz

Videos von YouTube, Vimeo, TikTok und Facebook lädt der Shop erst, nachdem der Besucher den Hinweis zum externen Inhalt bestätigt hat; YouTube bindet er über youtube-nocookie.com ein. Nennen Sie die Dienste trotzdem in Ihrer Datenschutzerklärung. Eine eigene MP4-Datei liegt in Ihrem Shop und kommt ohne fremden Anbieter aus.

Kategoriebild

• Unter Produkte → Kategorien / Produkte die Kategorie bearbeiten, Feld „Kategorienbild“. Die Datei liegt in Bilder → quellbilder → kategorien.
• Das Bild erscheint als Kopfbild der Kategorieseite, auf den Kacheln der Unterkategorien und der Startseite, im Menü und im linken Navigationsmenü auf dem Smartphone.
• Maß: „Breite Kategoriebild (groß)“ und „Höhe Kategoriebild (groß)“ unter Einstellungen → Design → Bilder, ab Werk 840 × 355 Pixel, also etwa 2,4 : 1. Der Zuschnitt ist für Kategorien ab Werk an: Bilder in einem anderen Seitenverhältnis schneidet der Shop zu.
• Empfehlung: JPG oder WebP, mindestens 840 × 355 Pixel, im selben Seitenverhältnis.

Herstellerbild

• Unter Produkte → Hersteller den Hersteller bearbeiten, Feld „Herstellerbild“. Die Datei liegt in Bilder → quellbilder → hersteller.
• Das Logo erscheint auf der Herstellerseite, in der Herstellerbox, im Hersteller-Slider und auf der Produktseite.
• Maß: „Breite Herstellerbild (groß)“ und „Höhe Herstellerbild (groß)“, ab Werk 300 × 150 Pixel, also 2 : 1. Herstellerbilder schneidet der Shop ab Werk nicht zu, freie Ränder füllt er mit der Hintergrundfarbe.
• Empfehlung: Logo als PNG oder WebP im Seitenverhältnis 2 : 1, mindestens 300 × 150 Pixel. Ein zweites Bild wie ein Markenbanner gehört in die Herstellerbeschreibung, siehe Leitfaden Produkte anlegen & pflegen.

Produktbilder

• In den Bildspalten steht der Dateiname relativ zum Ordner der Produktbilder. Die Dateien laden Sie vorher in den Dateimanager oder per SFTP hoch.
• Mit der Importoption path=catch lädt der Porter Bilder von einer Internetadresse. Er nimmt dabei Dateien mit den Endungen JPG, JPEG, PNG, GIF und WebP an, siehe Import & Export.
• Der Standardporter „Bilderupdate“ enthält die Produktbilder mit Beschreibung.

Bilder für viele Kategorien

1. Laden Sie die Bilder in den Ordner Bilder → quellbilder → kategorien.
2. Exportieren Sie mit dem Standardporter „Kategorienupdate“. Er enthält die Spalte für das Kategorienbild und ist ab Werk ausgeschaltet, siehe Leitfaden Import & Export.
3. Tragen Sie je Kategorie den Dateinamen ein und importieren Sie die Datei wieder.
4. Die Option path=catch eignet sich hier nicht: Sie speichert heruntergeladene Bilder immer im Ordner der Produktbilder.

Schalter je Bild

An jedem Bild gibt es den Schalter „KI-generiert – Hinweis anzeigen“: an jeder Bildzeile im Reiter „Bilder“, an Optionsbild und Zusatzbildern im Reiter „Merkmale“, am Bild des Werts, am Kategorienbild, am Herstellerbild sowie bei News, Slider, Banner und im xoContentEditor.

Im Shop

Eingeschaltet trägt das Bild eine dezente Pille „KI-generiert“. Sie ist echter Text, Screenreader lesen sie vor. Bei Produktbildern markiert der Shop das Bild zusätzlich in den strukturierten Daten für Suchmaschinen. Position und Darstellung (hell oder dunkel) legen Sie unter Einstellungen → Design → KI-Kennzeichnung fest.

Wann es Pflicht ist

Nach Art. 50 der KI-Verordnung (EU) 2024/1689, anwendbar seit 2. August 2026, müssen Deepfakes gekennzeichnet werden: künstliche Bilder, die echten Personen, Gegenständen oder Orten ähneln und echt wirken würden. Ob ein Bild darunter fällt, entscheiden Sie. Im Zweifel fragen Sie Ihre Rechtsberatung.

„Thumbnails löschen“: gefahrlos

Löscht alle Vorschaubilder. Der Shop erzeugt sie beim nächsten Aufruf einer Seite neu, die ersten Aufrufe dauern dann etwas länger. Ihre Quellbilder bleiben unberührt. Das lohnt sich vor allem nach einer Umstellung auf WebP oder nach geänderten Bildgrößen.

„Quellbildordner bereinigen“: nur mit Sicherung

Sie wählen die Ordner Hersteller, Kategorien, Optionen, Produkte und Slider. Der Shop löscht darin jede Datei, die kein Hersteller, keine Kategorie, kein Artikel, kein Merkmal bzw. kein Slider als Bild eingetragen hat. Bei „Produkte“ löscht er auch nicht verwendete Produktvideos. Gelöschte Dateien lassen sich nicht wiederherstellen.

Wenn Sie Artikel löschen, entfernt „Bilder vom Server löschen“ deren Bilder gleich mit, siehe Leitfaden Produkte anlegen & pflegen.