Zum Hauptinhalt springen Zur Hauptnavigation springen
Shopware 6 Plugins

Pixelangelo Bildoptimierung für Ihren Shopware-Shop

Produktbilder sind der größte Posten beim Laden einer Shopseite – und der, an dem im Alltag niemand Zeit hat zu arbeiten. Pixelangelo verkleinert, komprimiert und wandelt jedes Bild automatisch in WebP und AVIF um. Jeder Browser bekommt die kleinste Variante, die er darstellen kann. Ohne Cloud-Dienst, ohne Handarbeit, ohne dass sich an Ihrem Arbeitsablauf etwas ändert.

Ihre Vorteile

Was sich für Ihren Shop ändert

  • Kürzere Ladezeiten, ohne Handarbeit

    Jedes neu hochgeladene Bild wird automatisch komprimiert und auf eine sinnvolle Größe gebracht. Niemand muss mehr Bilder vor dem Upload durch ein Bildbearbeitungsprogramm schicken.
  • Moderne Bildformate automatisch

    Zu jedem Bild und jeder Vorschaugröße entstehen WebP- und AVIF-Versionen. Bei gleicher Optik sind sie meist deutlich kleiner als das ursprüngliche JPEG oder PNG.
  • Passende Größe für jedes Gerät

    Der Browser bekommt genaue Angaben, welche Bildgröße er für Smartphone, Tablet oder Desktop laden soll. Auf dem Handy wird nicht länger das Desktop-Bild geladen.
  • Besserer PageSpeed-Wert

    Die wichtigsten Bilder oben auf der Seite laden bevorzugt, alle weiteren erst beim Scrollen. Das zahlt direkt auf den Core-Web-Vitals-Wert Largest Contentful Paint ein, den Google in die Bewertung einbezieht.
  • Schärfere Produktbilder

    Auf Wunsch werden die Vorschaubilder mit einer hochwertigeren Bildbearbeitung direkt aus dem Original neu berechnet. In Kategorie- und Suchlisten ist der Unterschied sichtbar.
  • Alles auf Ihrem Server

    Kein externer Dienst, kein API-Schlüssel, keine Bilder, die den Server verlassen. Pixelangelo setzt im Shop kein zusätzliches JavaScript, keine Cookies und kein Tracking ein.
So arbeitet das Plugin

Ein Upload, mehrere fertige Varianten

Pixelangelo setzt genau an der Stelle an, an der Shopware Bilder entgegennimmt und wieder ausgibt. Beim Hochladen wird ein Bild auf eine einstellbare Kantenlänge verkleinert, komprimiert, in den Bildschirm-Farbraum sRGB gerechnet und zusätzlich als WebP und AVIF gespeichert – samt aller Vorschaugrößen.

Auch unhandliche Vorlagen aus Herstellerdaten nimmt das Plugin an: TIFF-Dateien werden verarbeitet, bei mehrseitigen TIFFs wird automatisch die größte Seite verwendet, und Bilder aus Druckvorlagen sehen nach der Farbraum-Umrechnung im Browser so aus, wie sie sollen.

Im Shop entscheidet dann der Browser. Pixelangelo bietet ihm AVIF, WebP und das Originalformat gemeinsam an; geladen wird die beste Variante, die er versteht. Ältere Browser bekommen weiterhin das klassische JPEG oder PNG.

Welche Dateitypen überhaupt angefasst werden, legen Sie selbst fest – so bleiben etwa Logos oder Spezialgrafiken unangetastet. Und weil die gesamte Verarbeitung auf Ihrem eigenen Server läuft, gibt es weder laufende Kosten pro Bild noch eine Abhängigkeit von einem externen Dienst.

Bemängelt PageSpeed Insights bei Ihnen die Bilder?

Dann ist das genau der Punkt, den Pixelangelo abräumt – für neue Bilder automatisch und für den bestehenden Bildbestand in einem einmaligen Durchlauf.

Funktionen

Was Pixelangelo übernimmt

Vom Upload bis zur Auslieferung im Browser – und mit Werkzeugen für den bestehenden Bildbestand.

Jedes Bild wird aufbereitet, bevor es im Shop landet

Die Aufbereitung läuft automatisch mit dem Upload. Ob und wie stark komprimiert wird, stellen Sie ein.

  • Verkleinern übergroßer Bilder auf eine maximale Kantenlänge, voreingestellt 1920 Pixel
  • Kompression mit einstellbarer JPEG-Qualität, voreingestellt 75
  • WebP- und AVIF-Version zu jedem Bild und jeder Vorschaugröße
  • Optionale verlustfreie Nachoptimierung von PNG und JPEG
  • Optionale Reparatur defekter PNG-Dateien aus externen Quellen
  • Umrechnung in den Bildschirm-Farbraum sRGB, auch bei Druckvorlagen
  • Verarbeitung von TIFF-Dateien aus Herstellerdaten

Anwendungsfälle

Wofür Händler Pixelangelo einsetzen

  • Große Fotostudio-Bilder

    Das Fotostudio liefert Produktbilder mit 5.000 Pixeln Breite, und niemand im Team kommt dazu, sie vorher zu verkleinern. Pixelangelo erledigt das beim Upload – die Kategorieseiten laden spürbar schneller.
  • Schlechte PageSpeed-Werte

    Google bemängelt nicht optimierte Bilder und fehlende moderne Bildformate. Mit WebP, AVIF, Ladepriorisierung und einem einmaligen Durchlauf über den Bestand sind genau diese Punkte adressiert.
  • Herstellerdaten in TIFF oder CMYK

    Importierte Bilder sind riesig oder sehen im Shop farblich falsch aus. Pixelangelo verarbeitet TIFF-Dateien und rechnet Druckfarbräume in den Bildschirm-Farbraum um.
  • Gewachsener Bildbestand

    In einem Shop, der seit Jahren läuft, liegen Tausende unoptimierte Bilder. Wir verarbeiten sie einmalig nach, erzeugen fehlende Vorschaubilder neu und räumen Medien-Einträge ohne Datei auf.
  • Unscharfe Bilder in Listen

    Die Shopware-Vorschaubilder wirken weich, obwohl die Originale gestochen scharf sind. Mit der hochwertigen Vorschaubild-Erzeugung werden sie aus dem Original neu berechnet.
  • Shop mit mobilem Schwerpunkt

    Wenn der Großteil des Umsatzes über das Smartphone kommt, zählt jede eingesparte Sekunde. Passende Bildgrößen je Gerät und moderne Formate wirken dort am stärksten.
Ablauf

So kommt Pixelangelo in Ihren Shop

Die Einrichtung übernehmen wir. Danach läuft die Optimierung für jedes neue Bild von allein.

  1. Schritt 1

    Server prüfen

    Wir klären mit Ihrem Hoster, ob die nötigen Bildbibliotheken auf dem Server vorhanden sind und ob die Shopware-Hintergrundverarbeitung läuft. Für die verlustfreie Nachoptimierung kommen zwei kleine Zusatzprogramme dazu.
  2. Schritt 2

    Installation

    Wir installieren und aktivieren das Plugin in Ihrem Shopware-6-Shop. Pixelangelo läuft im Shop selbst, es ist keine App und keine externe Anbindung.
  3. Schritt 3

    Einstellungen festlegen

    Gemeinsam legen wir fest, welche Dateitypen bearbeitet werden, wie stark komprimiert wird und ob die Originalbilder angefasst werden sollen. Bei einem eigenen Theme stellen wir zusätzlich die Breite des Inhaltsbereichs korrekt ein.
  4. Schritt 4

    Bestand nachverarbeiten

    Die vorhandenen Bilder werden einmalig nachoptimiert und umgewandelt – ordnerweise aus der Medienverwaltung heraus oder per Kommandozeile für den gesamten Bestand. Das läuft im Hintergrund, der Shop bleibt erreichbar.
  5. Schritt 5

    Messen und nachjustieren

    Wir schauen uns PageSpeed und Core Web Vitals vor und nach dem Durchlauf an und justieren Qualitätsstufen und Ladepriorisierung nach. Danach arbeitet das Plugin ohne weiteres Zutun.
Ehrlich gesagt

Was Sie vor dem Einsatz wissen sollten

  • Die Originalbilder werden verändert

    Wenn Sie die Optimierung der Originale einschalten, werden die hochgeladenen Dateien dauerhaft überschrieben – das lässt sich nicht zurückdrehen. Wir empfehlen vorher eine Sicherung des Bildbestands und entscheiden diese Einstellung bewusst mit Ihnen.
  • Nicht jedes Template profitiert

    Pixelangelo wirkt dort, wo der Shop Bilder über die zentrale Bildausgabe von Shopware darstellt. Bindet ein Theme oder Plugin Bilder anders ein, greifen WebP, AVIF und Ladepriorisierung dort nicht. Das prüfen wir an Ihrem Shop.
  • Nur Bilder aus der Medienverwaltung

    Verarbeitet wird, was Shopware verwaltet. Dateien, die an der Medienverwaltung vorbei auf den Server gelangen, erfasst das Plugin nicht.
  • Der Server braucht Luft

    Bildbearbeitung kostet Rechenzeit: Uploads dauern etwas länger, und die einmalige Nachverarbeitung eines großen Bestands braucht ihre Zeit. Sie läuft deshalb im Hintergrund mit niedriger Priorität.
  • Mehr Dateien auf der Platte

    Je Bild und Vorschaugröße können bis zu zwei weitere Dateien entstehen. Der Speicherbedarf auf dem Server steigt entsprechend – das sollte beim Hosting eingeplant sein.
  • Einstellungen gelten shopweit

    Qualitätsstufen und Formate werden für den gesamten Shop festgelegt, nicht je Verkaufskanal. Da Shopware Medien ohnehin kanalübergreifend verwaltet, ist das in der Praxis selten ein Thema.
Leistungen

Was die Einbindung umfasst

  • Pixelangelo

    Plugin & Einrichtung
    Preis auf Anfrage
    • Prüfung der Server-Voraussetzungen mit Ihrem Hoster
    • Installation und Aktivierung im Shop
    • Abstimmung von Formaten, Qualitätsstufen und Dateitypen
    • Einstellung der Ladepriorisierung und der Container-Breite
    • Einmalige Nachverarbeitung Ihres bestehenden Bildbestands
    • Messung von PageSpeed und Core Web Vitals vorher und nachher
    Jetzt anfragen
  • Individuelle Erweiterung

    Projektbezogen
    Preis auf Anfrage
    • Anpassung eines eigenen Themes an die Bildausgabe des Plugins
    • Ausnahmen für Slider, Menüs und ausgeblendete Bereiche bei der Ladepriorisierung
    • Abstimmung mit anderen Bild- oder Performance-Erweiterungen
    • Aufräumen und Bereinigen eines gewachsenen Medienbestands
    • Begleitende Performance-Optimierung über Bilder hinaus
    • Betreuung im laufenden Betrieb
    Jetzt anfragen
Begriffe

Kurz erklärt

WebP

Ein Bildformat, das von allen heute gebräuchlichen Browsern unterstützt wird und bei gleicher Optik meist deutlich kleinere Dateien ergibt als JPEG oder PNG.

AVIF

Das derzeit effizienteste verbreitete Bildformat. Es komprimiert noch stärker als WebP, braucht beim Erzeugen aber mehr Rechenzeit und wird von sehr alten Browsern nicht verstanden.

Vorschaubild (Thumbnail)

Die kleineren Varianten eines Bildes, die Shopware automatisch erzeugt und in Kategorie-, Such- und Listenansichten anzeigt. Für die wahrgenommene Bildqualität im Shop sind sie entscheidender als das Original.

picture-Element

Eine HTML-Technik, mit der einem Browser mehrere Bildformate gleichzeitig angeboten werden. Er lädt das erste, das er versteht – so bekommen moderne Browser AVIF und ältere weiterhin JPEG oder PNG.

Largest Contentful Paint (LCP)

Einer der Core-Web-Vitals-Werte von Google: die Zeit, bis das größte sichtbare Element einer Seite geladen ist. Auf Shopseiten ist das fast immer ein Produktbild – deshalb wirkt Bildoptimierung hier so direkt.

Ladepriorisierung

Die Steuerung, welche Bilder sofort geladen werden und welche erst, wenn der Besucher sie in den sichtbaren Bereich scrollt. Richtig gesetzt beschleunigt sie den ersten Eindruck einer Seite merklich.

sRGB

Der Standard-Farbraum für Bildschirme. Bilder aus Druckvorlagen liegen oft in einem anderen Farbraum vor und wirken im Browser flau oder verfälscht, bis sie umgerechnet werden.

Hintergrundverarbeitung (Message Queue)

Ein Mechanismus von Shopware, der aufwendige Aufgaben abarbeitet, ohne den Shop zu blockieren. Pixelangelo nutzt ihn für die Nachverarbeitung großer Bildmengen und ordnet seine Aufgaben mit niedriger Priorität ein.

Häufige Fragen

  • Nein. Sie laden Bilder wie gewohnt in die Shopware-Medienverwaltung, alles Weitere passiert automatisch im Hintergrund. Der Upload dauert etwas länger, weil Optimierung und Umwandlung direkt dabei erledigt werden.
Aus dem Magazin

Passende Beiträge

01 – 03 / 09

Wie schwer sind Ihre Produktbilder?

Schicken Sie uns die Adresse Ihres Shops. Wir schauen uns an, wie groß die Bilder auf Ihren wichtigsten Seiten heute sind, was davon an Ladezeit hängt und was Pixelangelo in Ihrem Fall herausholen würde.

Preis auf Anfrage Plugin jetzt anfordern
Kontakt

Sprechen wir über Ihre Ladezeit

Schreiben Sie uns kurz, welchen Shop Sie betreiben und wie groß Ihr Bildbestand ungefähr ist – wir melden uns mit einer ersten Einschätzung und stellen Ihnen das Plugin bereit.

Kontaktformular
Datenschutz
Die mit einem Stern (*) markierten Felder sind Pflichtfelder.

Ihre Angaben verwenden wir nur zur Beantwortung Ihrer Anfrage.