[AEM Assets]{class="badge positive" title="Gilt für AEM Assets)."}
Best Practices für die Optimierung der Bildqualität best-practices-for-optimizing-the-quality-of-your-images
Adobe Experience Manager bietet mehr als 100 Dynamic Media-Bildbereitstellungsbefehle zum Optimieren, Optimieren und Rendern von Bildern. Dieser umfangreiche Befehlssatz ermöglicht es, nahezu alle Aspekte der Verarbeitung und Bereitstellung eines Bildes zu steuern, von der Auflösung und Komprimierung bis hin zum Scharfzeichnen und Rendern von Farben.
Die Optimierung der Bildqualität ist ein iterativer, manchmal zeitaufwendiger Prozess, da mehrere verschiedene Faktoren zu akzeptablen Ergebnissen beitragen - darunter Auflösung, Komprimierungsgrad, Dateiformat, Scharfzeichnung und Farbgenauigkeit. Das Ergebnis ist auch teilweise subjektiv, da Personen die Bildqualität unterschiedlich wahrnehmen und die Anzeigebedingungen von einem Display, Browser oder Gerät zum anderen variieren. Aufgrund dieser Variabilität ist strukturiertes Experimentieren erforderlich: die methodische Anpassung einer Variablen nach der anderen und der Vergleich der gerenderten Ausgabe ist der zuverlässigste Weg zu konsistenter Qualität.
Die folgenden Best Practices optimieren den Prozess und liefern mithilfe einer Reihe von Kernbefehlen und bewährten Techniken effizient hochwertige Ergebnisse. Ihre Anwendung geht über rein ästhetische Aspekte hinaus: Ordnungsgemäß optimierte Bilder reduzieren die Dateigröße und die Ladezeit, was die Seitenleistung, das Benutzererlebnis und die Bereitstellung auf allen Geräten und unter allen Netzwerkbedingungen verbessert.
Schlüsselfaktoren, die die Bildqualität beeinflussen
- Auflösung und Abmessungen - Passen Sie die bereitgestellten Pixelabmessungen an die tatsächliche Anzeigegröße an, um unnötige Artefakte für die Hochskalierung oder Herunterskalierung zu vermeiden.
- Komprimierung - Schaffen Sie ein Gleichgewicht zwischen Dateigröße und sichtbarem Qualitätsverlust, da eine aggressive Komprimierung die Bandbreite reduziert, aber Artefakte verursachen kann.
- Dateiformat - Wählen Sie das Format aus, das am besten für den Bildinhalt und das Zielgerät geeignet ist, um ein Gleichgewicht zwischen Qualität und Bereitstellungseffizienz herzustellen.
- Scharfzeichnen - Wenden Sie die Scharfzeichnung an, um der beim Ändern der Größe auftretenden Weichzeichnung entgegenzuwirken, die die wahrgenommenen Details wiederherstellt.
- Farb-Rendering - Bewahren Sie die genaue Farbe auf, damit Bilder konsistent über verschiedene Displays und Betrachtungsumgebungen hinweg angezeigt werden.
Empfohlener Ansatz
- Baseline festlegen. Rendern Sie ein Bild mit Standardeinstellungen, damit Sie einen Referenzpunkt für den Vergleich haben.
- Passen Sie jeweils nur eine Variable an. Ändern Sie einen einzelnen Befehl oder Parameter und werten Sie dann das Ergebnis aus, da durch die Isolierung von Variablen klar wird, welche Anpassung welche Auswirkung erzeugt hat.
- Gerenderte Ausgabe visuell vergleichen. Da die Bildqualität zum Teil subjektiv ist, sollten Sie die Ergebnisse auf repräsentativen Geräten und Displays nebeneinander überprüfen.
- Balance zwischen Qualität und Leistung. Vergewissern Sie sich, dass die Qualitätsverbesserungen die Dateigröße nicht bis zu dem Punkt erhöhen, an dem Seitenladezeit und Versand beeinträchtigt sind.
- Standardisieren erfolgreicher Einstellungen. Sobald Sie Befehlskombinationen identifiziert haben, die konsistente Ergebnisse liefern, können Sie diese wiederverwenden, um zukünftige Optimierungen zu optimieren.
Durch die Kombination dieser grundlegenden Befehle mit strukturierten Experimenten erzielen Sie schnell und wiederholbar eine hochwertige, leistungsstarke Bildbereitstellung für Ihre Dynamic Media-Assets.
Aktivieren der intelligenten Bildbearbeitung in Dynamic Media bp-enable-smart-imaging
Intelligente Bildbearbeitung:
- Die Aktivierung der intelligenten Bildbearbeitung in Dynamic Media ermöglicht die automatische Optimierung von (Format, Größe und Qualität basierend auf den Funktionen des Client-Browsers. Die intelligente Bildbearbeitung führt diese Formataushandlung bei jeder Anfrage durch und liefert das effizienteste Bild, das ein bestimmter Browser unterstützt, sodass Seiten schneller geladen werden und weniger Bandbreite verbrauchen.
Weitere Informationen finden Sie unter Intelligente Bildbearbeitung. - Die Leistung bei der Bildbereitstellung wird durch die dynamische Anpassung dieser Parameter verbessert, da die Bereitstellung der kleinsten geeigneten Datei für jeden Browser die übertragene Payload reduziert und die Seitenladezeiten verbessert.
- Administratoren und Entwickler können die intelligente Bildbearbeitung mithilfe des Selbstauswertungstools () .
Bildformate:
- Verwenden Sie in einer URL möglichst keine expliziten
fmt=webp(WebP)- oderfmt=avif(AVIF)-Befehle, es sei denn, dies ist speziell für einen Anwendungsfall erforderlich. Die Hartcodierung eines Formats in der URL überschreibt die automatische Aushandlung und kann verhindern, dass die intelligente Bildbearbeitung das optimale Format für Browser bereitstellt, die eine effizientere Alternative unterstützen. - Die intelligente Bildbearbeitung wählt für jede Anfrage automatisch das beste Format aus. Dadurch werden übertragene Bytes reduziert und optimale Bandbreitengewinne erzielt.
Standardverhalten:
- Wenn in der URL kein Formatbefehl angegeben ist und die intelligente Bildbearbeitung nicht aktiviert ist, erfolgt die Dynamic Media-Bildbereitstellung standardmäßig im Format JPEG. Daher werden Formate der nächsten Generation wie WebP und AVIF erst automatisch bereitgestellt, wenn die intelligente Bildbearbeitung aktiviert ist.
Indem Sie fundierte Entscheidungen zu Bildformaten treffen und die intelligente Bildbearbeitung aktivieren, verbessern Sie direkt die Bereitstellungsleistung und das Benutzererlebnis.
Best Practices für die Auswahl des Quellbilds bp-select-source-image
Wichtige Überlegungen zum Arbeiten mit Quellbildern:
-
Format des Quellbilds:
- Die Verwendung verlustfreien Formaten - PNG (Portable Network Graphics), TIFF (Tagged Image File Format) oder PSD (Photoshop Document) - sorgt für eine hohe Bildqualität und beseitigt Komprimierungsartefakte, die durch verlustbehaftete Formate wie JPEG verursacht werden.
- Diese Formate behalten alle ursprünglichen Pixeldaten bei. Dadurch sind sie ideal für das Bearbeiten, Retuschieren und wiederholtes erneutes Speichern, da bei jeder Verarbeitung der Datei keine Qualität verloren geht.
-
Größe des Quellbilds:
- Beginnend mit einem hochauflösenden Bild bietet mehr Details und größere Flexibilität, da das Hochskalieren eines kleinen Bildes keine Details wiederherstellen kann, die nie erfasst wurden.
- Wenn Bilder in verschiedenen Größen angezeigt werden müssen (z. B. auf allen Geräten oder in Bildschirmauflösungen), ermöglicht ein größeres Quellbild eine bessere Skalierung und schärfere Ergebnisse bei jeder Zieldimension.
- Bei Bildern, die einen Zoom unterstützen, z. B. Produktfotos, bei denen Kunden feine Details untersuchen, zielen Sie auf Abmessungen von etwa 2.000 Pixeln oder mehr auf der längsten Seite.
- Logos oder Banner, die keinen Zoom erfordern, können in der für ihren Verwendungszweck größten Größe hochgeladen werden.
Wenn Sie diese Entscheidungen auf Quellebene treffen, wird die Qualität des endgültigen visuellen Inhalts direkt bestimmt, da jeder nachgelagerte Schritt der Größenanpassung, des Zuschnitts und der Komprimierung die Stärken oder Schwächen der Originaldatei übernimmt.
Best Practices für die Bildgröße best-practices-for-image-size
Die dynamische Reduzierung der Bildgröße ist eine der häufigsten Aufgaben bei der Bildbereitstellung. Dazu müssen die Zielabmessungen angegeben und optional der Modus für die Neuberechnung ausgewählt werden, um das Bild herunterzuskalieren. Das empfohlene Best Practice-URL-Muster ist &wid=<value>&hei=<value>&resMode=sharp2 (oder &hei=<value>&resMode=sharp2, wenn nur die Höhe festgelegt ist), was die höchste visuelle Qualität für Bilder in der Größe liefert.
Dimensionierungsparameter
Verwenden Sie für die Bildgröße &wid=<value> und &hei=<value>:
&wid=<value>legt die Bildbreite fest.&hei=<value>legt die Bildhöhe fest.- Wenn nur eine Dimension angegeben ist, berechnen diese Parameter automatisch die andere Dimension entsprechend dem Seitenverhältnis des Bildes, wobei die ursprünglichen Proportionen erhalten bleiben und Verzerrungen vermieden werden.
Neuberechnung (resMode)
&resMode=<value> steuert den Algorithmus für die Neuberechnung - den Prozess der Reduzierung der Pixelabmessungen eines Bildes. Die Wahl des Algorithmus wirkt sich direkt auf die Schärfe und Qualität des endgültigen skalierten Bildes aus.
- Beginnen Sie mit
&resMode=sharp2. Dieser Wert bietet die beste Bildqualität, da er beim Herunterskalieren von Bildern Kantendetails und feine Textur beibehält und gestochen scharfe, artefaktfreie Ergebnisse erzeugt. &resMode=bilin(bilinear) ist schneller, aber da er den Durchschnitt der Pixel einfacher bestimmt, erzeugt er häufig Alias-Artefakte - sichtbare gezackte Kanten, Moiré-Muster und Verlust von feinen Details. Infolgedessen tauschtbilindie Bildqualität gegen die Verarbeitungsgeschwindigkeit aus.
Im Gegensatz bilin wird im sharp2-Modus die visuelle Wiedergabetreue priorisiert. Dadurch ist dieser Modus die bevorzugte Wahl für die Bereitstellung von Bildern in hoher Qualität und Größe.
Empfohlene Best Practices
Verwenden Sie als Best Practice für die Bildgröße &wid=<value>&hei=<value>&resMode=sharp2 oder &hei=<value>&resMode=sharp2. Diese Kombination legt die Zielmaße fest, behält das richtige Seitenverhältnis bei und wendet den Downsampling-Algorithmus mit der höchsten Qualität an.
Best Practices für Bild-Scharfzeichnung best-practices-for-image-sharpening
Die Bild-Scharfzeichnung stellt den komplexesten Aspekt bei der Kontrolle von Bildern auf Websites dar. Hier werden viele Fehler gemacht. Weitere Informationen zur Funktionsweise von Scharfzeichnung und Unschärfemaske in Experience Manager finden Sie in den folgenden hilfreichen Ressourcen:
-
Das Whitepaper Best Practices für Adobe Dynamic Media Classic – Bildqualität und Scharfzeichnen gilt auch für Experience Manager.
-
Sehen Sie sich das Video Verwenden von Bildscharfzeichnung mit Experience Manager – Dynamic Media an.
In Experience Manager können Sie Bilder während der Aufnahme, Bereitstellung oder beides scharfzeichnen. Es empfiehlt sich, Bilder nur mit einer Methode scharfzuzeichnen (nicht mit beiden Methoden). Das Scharfzeichnen von Bildern bei der Bereitstellung über eine URL liefert die besten Ergebnisse in den meisten Workflows, da Sie die Scharfzeichnung auf die endgültige gerenderte Größe anpassen können, anstatt sie in das aufgenommene Asset einzubinden.
Es gibt zwei Methoden zum Scharfzeichnen von Bildern:
-
Einfaches Scharfzeichnen (
&op_sharpen) - Ähnlich wie der Adobe Photoshop-Scharfzeichnungsfilter wird nach der dynamischen Größenanpassung einfaches Scharfzeichnen angewendet. Diese Methode kann nicht vom Benutzer konfiguriert werden. Verwenden Sie&op_sharpennur, wenn dies erforderlich ist. -
Unscharf maskieren (
&op_USM) - Unscharf maskieren ist ein Scharfzeichnungsfilter nach Industriestandard, der den Kantenkontrast erhöht, damit ein Bild schärfer erscheint. Als Best Bractice wird empfohlen, Bilder anhand der folgenden Richtlinien mit der Unschärfemaske scharfzuzeichnen. Bei Verwendung der Unschärfemaske können Sie die drei folgenden Parameter steuern:-
&op_sharpen=amount,radius,threshold- Betrag (0-5, Stärke des Effekts.)
- Radius (0-250, Breite der „Scharfzeichnungslinien“, die um das scharfgezeichnete Objekt gezeichnet werden, gemessen in Pixel.)
Die Parameter Radius und Betrag haben gegensätzliche Auswirkungen: Da das Verringern des Radius den Effekt schwächt, können Sie durch Erhöhen des Betrags kompensieren. Der Radius ermöglicht eine feinere Steuerung, da ein niedrigerer Wert nur die Kanten-Pixel schärft, während ein höherer Wert einen größeren Bereich von Pixeln schärft, wodurch ein ausgeprägterer Halogen erzeugt wird.
- Schwellenwert (0-255, Empfindlichkeit der Wirkung.)
Dieser Parameter bestimmt, wie stark sich die scharfgezeichneten Pixel vom Umgebungsbereich unterscheiden müssen, damit sie als Kantenpixel eingestuft und vom Filter scharfgezeichnet werden. Mit dem Parameter threshold können Sie die übermäßige Scharfzeichnung von Bereichen mit ähnlichen Farben, wie Hauttönen, vermeiden. Bei einem Schwellenwert von 12 werden beispielsweise leichte Variationen der Hauttonhelligkeit ignoriert, um kein „Rauschen“ zu erzeugen, trotzdem wird kontrastreichen Bereichen, z. B. wo Wimpern auf die Haut treffen, Kantenkontrast hinzugefügt.
Weitere Informationen zum Festlegen dieser drei Parameter, einschließlich Best Practices für den Filter, finden Sie in den folgenden Ressourcen:
-
Das Whitepaper Best Practices für Adobe Dynamic Media Classic – Bildqualität und Scharfzeichnen gilt auch für Experience Manager.
-
Sehen Sie sich das Video Verwenden von Bildscharfzeichnung mit Experience Manager – Dynamic Media an.
-
Mit Experience Manager können Sie auch einen vierten Parameter steuern: monochrome (0,1). Dieser Parameter bestimmt, ob die Unschärfemaske auf jede Farbkomponente separat (mit dem Wert 0 oder auf die Bildhelligkeit/-intensität (mit dem Wert 1 angewendet wird.
-
Es wird empfohlen, mit dem Unschärfemasken-Parameter für den Radius zu beginnen. Sie können zu Beginn die folgenden Radiuseinstellungen verwenden:
- Website: 0,2-0,3 Pixel
- Fotodruck (250 - 300 ppi): 0,3 - 0,5 Pixel
- Offset-Druck (266 - 300 ppi): 0,7 - 1,0 Pixel
- Leinwanddruck (150 ppi): 1,5-2,0 Pixel
Führen Sie die folgenden Schritte aus, um das Scharfzeichnen zu verfeinern:
- Erhöhen Sie den Betrag schrittweise von 1,75 auf 4.
- Wenn die Scharfzeichnung immer noch nicht zufriedenstellend ist, erhöhen Sie den Radius um einen Dezimalpunkt.
- Führen Sie den Betrag erneut von 1,75 auf 4.
- Wiederholen Sie dies nach Bedarf, bis das Ergebnis zufriedenstellend ist.
Belassen Sie die Einstellung für den Monochrom-Parameter bei 0.
Best Practices für die JPEG-Komprimierung (&qlt=) best-practices-for-jpef-compression-qlt
-
Die empfohlene Best Practice-Einstellung für die JPG-Komprimierung ist
&qlt=85,0. Bei den meisten Bildern sorgt dieser Wert für einen Ausgleich zwischen hoher visueller Qualität und einer kontrollierten Dateigröße. -
Dieser Parameter steuert die Qualität der JPG-Kodierung. Ein höherer Wert bedeutet eine höhere Bildqualität, aber eine größere Dateigröße; ein niedrigerer Wert bedeutet eine niedrigere Bildqualität, aber eine kleinere Dateigröße. Der gültige Bereich ist 0-100.
-
Um die Qualität zu optimieren, setzen Sie den Parameterwert nicht auf 100. Der Unterschied zwischen einer Einstellung von 90 oder 95 und 100 ist für das menschliche Auge fast nicht wahrnehmbar. Daher wird durch die Einstellung 100 die Bilddateigröße unnötig vergrößert, ohne dass ein visueller Gewinn wahrnehmbar wäre. Um die Qualität zu optimieren und gleichzeitig übergroße Dateien zu vermeiden, setzen Sie die
qlt= valuedaher auf 90 oder 95. -
Um für eine kleine Dateigröße zu optimieren und dabei die Bildqualität auf einem akzeptablen Niveau zu halten, setzen Sie den
qlt= valueauf 80. Werte unter 70-75 führen zu signifikanter, sichtbarer Beeinträchtigung wie Blockierungsartefakten, Banderolierung und dem Verlust feiner Details, sodass sie für Produktionsbilder nicht empfohlen werden. -
Als allgemeine Best Practice empfiehlt sich die
qlt= valueauf 85, wodurch eine zuverlässige Mittelschicht zwischen Qualität und Dateigröße für eine breite Palette von Bildinhalten geschaffen wird. -
Verwenden der Chroma-Markierung in
qlt=- Der
qlt=Parameter verfügt über eine zweite Einstellung, die die Neuberechnung der RGB- steuert - eine Komprimierungstechnik, die die Auflösung von Farbinformationen (Chroma) reduziert und gleichzeitig die Luminanzdetails beibehält. Schalten Sie die Neuberechnung ein mithilfe des,1oder aus mithilfe des,0. - Beginnen Sie bei den meisten Workflows mit ausgeschaltetem RGB--Downsampling
,0). Diese Einstellung liefert eine bessere Bildqualität, da sie Farbdaten mit voller Auflösung beibehält. Dies ist besonders wichtig für synthetische Bilder mit scharfen Kanten, hohem Kontrast und feinen Farbübergängen, bei denen sonst Downsampling-Artefakte sichtbar wären.
- Der
Verwenden Sie &qlt=85,0 als Best Practice für die JPG-Komprimierung.
Best Practices für die Dimensionierung in JPEG (&jpegSize=) best-practices-for-jpeg-sizing-jpegsize
Der &jpegSize=-Parameter garantiert, dass ein bereitgestelltes Bild eine bestimmte Maximalgröße nicht überschreitet. Daher ist es unerlässlich, JPEG-Bilder an (mit begrenztem Speicher) liefern. Durch Erzwingen einer Obergrenze für die Dateigröße wird verhindert, dass der verfügbare Speicher auf eingeschränkten Clients durch übergroße Bilder überlastet wird.
Funktionsweise von &jpegSize=
- Legen Sie
&jpegSize=in Kilobyte fest mithilfe derjpegSize=<size_in_kilobytes>. Dieser Wert definiert die maximal zulässige Dateigröße für die Bildbereitstellung. &jpegSize=funktioniert in Kombination mit dem&qlt=JPEG-Qualitätsparameter (Komprimierung . Wenn die JPEG-Antwort mit dem angegebenen&qlt=-Wert nicht dasjpegSizeLimit überschreitet, wird das Bild mit&qlt=genau wie definiert zurückgegeben, wobei die angeforderte Qualität erhalten bleibt.- Wenn das Bild nicht den
jpegSizeGrenzwert am angegebenen&qlt=überschreitet, verringert das System&qlt=inkrementell, bis das Bild in die maximal zulässige Größe passt. Infolgedessen wird die Qualität nur so stark verringert, wie dies zur Erfüllung der Größenbeschränkung erforderlich ist, wodurch die Kompatibilität mit dem Zielgerät sichergestellt wird. - Wenn das System feststellt, dass das Bild nicht so reduziert werden kann, dass es in die maximal zulässige Größe passt, wird ein Fehler zurückgegeben, anstatt ein nicht konformes Bild bereitzustellen.
Best Practice für Geräte mit begrenztem Arbeitsspeicher
Als Best Practice empfiehlt es sich beim Bereitstellen von JPEG-Bildern an Geräte mit begrenztem Speicher &jpegSize= und diese mit&qlt= zu kombinieren. Mit dieser Kombination können Sie sowohl die Zielqualität als auch die feste Deckengröße festlegen, sodass das System die höchstmögliche Qualität liefert, die noch innerhalb der Speichergrenzen des Geräts passt.
Zusammenfassung der Best Practices best-practices-summary
Um hohe Bildqualität bei geringer Dateigröße“ zu, beginnen Sie mit der folgenden empfohlenen Kombination von Dynamic Media-Bildbereitstellungsparametern:
fmt=jpg&qlt=85,0&resMode=sharp2&op_usm=1.75,0.3,2,0
Diese Kombination liefert unter den meisten Umständen hervorragende Ergebnisse und dient als zuverlässige Ausgangsbasis für die meisten Bilder. Der op_usm Wert gilt für Unschärfemaske (USM) Scharfzeichnung, bei der die Parameter Betrag, Radius, Schwellenwert und Schwarzweißverhalten des Effekts steuern.
Feinabstimmung der Scharfzeichnung (Unschärfemaske)
Wenn ein Bild weiter optimiert werden muss, passen Sie die Unschärfemaske (USM)) folgenden Verfahren schrittweise an:
- Legen Sie Radius“ auf 0,2 oder 0 3 als Ausgangspunkt fest.
- Erhöhen Sie Betrag von 1,75 auf maximal 4 - entspricht 400 % in Adobe Photoshop.
- Überprüfen Sie das gerenderte Bild, um zu bestätigen, dass das gewünschte Ergebnis erzielt wurde.
- Wenn das Scharfzeichnungsergebnis immer noch nicht zufriedenstellend ist, erhöhen Sie den Radius in Dezimalschritten.
- Bei jedem Dezimalinkrement des Radius starten Sie den Betrag bei 1,75 neu und erhöhen ihn allmählich auf 4.
- Wiederholen Sie die Schritte 4 und 5, bis das gewünschte Ergebnis erzielt ist.
Während die oben genannten Werte einen Ansatz darstellen, den Creative Studios validiert haben, können Sie mit anderen Werten beginnen und anderen Strategien folgen. Ob die Ergebnisse zufriedenstellend sind, ist eine subjektive Angelegenheit, also strukturiertes, iteratives Experimentieren ist wichtig um für jedes Bild das beste Gleichgewicht zwischen Schärfe, Qualität und Dateigröße zu erzielen.
Tipps zur Workflow-Optimierung
Beim Experimentieren helfen Ihnen die folgenden allgemeinen Vorschläge, Ihren Workflow zu optimieren:
- Testen von Parametern in Echtzeit auf einer URL. Durch die direkte Anpassung der Werte in der URL können Sie den Effekt sofort in der Vorschau anzeigen und schnell iterieren.
- Befehle in einer Bildvorgabe gruppieren. Bildbereitstellungsbefehle für Dynamic Media können in einer Bildvorgabe gruppiert werden. Eine Bildvorgabe ist ein Satz von URL-Befehlsmakros, denen ein benutzerdefinierter Vorgabenname zugewiesen ist, z. B.
$thumb_low$und&product_high$. Wenn Sie in einem URL-Pfad auf den benutzerdefinierten Vorgabenamen verweisen, werden diese Vorgaben aufgerufen. Mit dieser Funktion können Sie Befehle und Qualitätseinstellungen für verschiedene Bildverwendungsmuster auf Ihrer Website verwalten, konsistente Einstellungen durch Wiederverwendung fördern und die Gesamtlänge von URLs verkürzen. - Erweiterte Optimierungsoptionen in Experience Manager verwenden. Experience Manager bietet außerdem erweiterte Möglichkeiten zur Optimierung der Bildqualität, z. B. Scharfzeichnung bei der Aufnahme. Zur Abstimmung und Optimierung der Renderergebnisse können die Beratungs-Services von Adobe benutzerdefinierte insight und Best Practices bereitstellen.