[AEM Assets]{class="badge positive" title="Gilt für AEM Assets)."}

Best Practices für Dynamic Media about-dm-best-practices

NOTE

Dynamic Media on Adobe Experience Manager (AEM) ist eine umfassende Lösung für die Bereitstellung digitalen Assets, die Assets optimiert, die Personalisierung verarbeitet und über alle Kanäle und Geräte hinweg konsistente, leistungsstarke und markenorientierte Erlebnisse bereitstellt. Unternehmen sehen sich heute einer explosionsartigen Zunahme von Kanälen und Touchpoints ausgesetzt, um mit Anwendern zu interagieren - die Kunden-Journey umfasst mittlerweile physische Geschäfte, das Web, mobile Medien, soziale Medien, E-Mail und Handel -, und Dynamic Media geht diese Komplexität aus einer Hand an.

Wichtige Grundsätze von Dynamic Media

Die folgenden Kernfunktionen definieren, wie Dynamic Media funktioniert und warum es über Unternehmens-Workflows hinweg skaliert werden kann:

  • Einzeldateiansatz: Mit Dynamic Media speichern Sie eine primäre Quelldatei, und alle Größenvarianten, Ausgabedarstellungen und visuellen Transformationen werden zum Zeitpunkt der Bereitstellung dynamisch generiert und optimiert. Dieser Ansatz reduziert Speicherkosten, eliminiert doppelte abgeleitete Assets und beseitigt die Komplexität Workflows, die mit der Pflege mehrerer vorab gerenderter Versionen verbunden sind.
  • Globale Bereitstellung: Intelligente Bildbearbeitung wird während der Inhaltsbereitstellung angewendet und reduziert die Größe der Bilddatei und das Gesamtgewicht der Seite, ohne die visuelle Qualität zu beeinträchtigen. Es ist für Netzwerkbandbreitenbedingungen und Gerätepixelverhältnisse optimiert und sorgt so für schnellere Ladezeiten und eine bessere Core Web Vitals über Ländergrenzen und Geräte hinweg.
  • künstliche Intelligenz (KI)-gesteuert: Smartes Zuschneiden, eine KI-gestützte Funktion, automatisiert das fachbezogene Zuschneiden für Bilder und Videos. Dadurch wird der manuelle Zuschnitt überflüssig und die Skalierung für Unternehmenskataloge effizient durchgeführt, bei denen Tausende von Assets an mehrere Seitenverhältnisse angepasst werden müssen.
  • Videounterstützung: Laden Sie Primärvideos in Dynamic Media hoch und streamen Sie sie adaptiv über mehrere Sprachen mit Unterstützung für beschreibende Audiospuren. Adaptives Streaming stellt sicher, dass die Wiedergabequalität automatisch mit der Bandbreite und den Gerätefunktionen jedes Viewers übereinstimmt.
  • Experience Viewer-Bibliothek Passen Sie Experience Viewer für Bilder und Videos an und markieren Sie sie, damit sie sich nahtlos in Ihre digitalen Storefronts, Produktseiten und Marketing-Erlebnisse integrieren lassen. Diese Viewer unterstützen interaktive Funktionen wie Zoom, Schwenken, Hotspots und 360-Grad-Rotationssets.
  • Unterstützung neuer Formate: Dynamic Media ermöglicht die Bereitstellung von 3D- und Panorama-Erlebnissen und erweitert Asset-Workflows über flache Bilder und Videos hinaus, um Anwendungsfälle für beeindruckende Commerce- und Produktvisualisierungen zu unterstützen.

Anwendung dieser Best Practices

Wenn Sie die Dynamic Media-Journey erkunden, hilft Ihnen die folgende konsolidierte Liste der Best Practices, die Funktionen von vollständig zu nutzen. Passen Sie diese Best Practices für Dynamic Media an Ihre spezifischen Kontext- und Projektanforderungen an, um Erlebnisse kanalübergreifend und geräteübergreifend zu optimieren.

IMPORTANT
Die Best Practices für Dynamic Media in diesem Artikel können sich im Laufe der Zeit weiterentwickeln, wenn neue Technologien in Dynamic Media auftauchen. Die nachfolgenden Informationen beziehen sich auf die neueste Version von Dynamic Media.

Aufnehmen von Assets in Dynamic Media

Business-Case: Effizientes Verwalten großer Asset-Volumen und Sicherstellung, dass nur relevante, genehmigte Inhalte an Endbenutzende bereitgestellt werden.

Dynamic Media bietet zwei komplementäre Steuerelemente - Selektive Synchronisierung und Selektive Veröffentlichung -, mit denen DAM-Teams (Digital Asset Management) steuern können, welche Assets in die Bereitstellungs-Pipeline eintreten und welche letztendlich kundenorientierte Kanäle erreichen. Diese beiden Funktionen optimieren die Verwaltung großer Asset-Bibliotheken und stellen sicher, dass nur geeignete, autorisierte Inhalte die End-Zielgruppen erreichen.

  • Selektive Synchronisierung:
    Die selektive Synchronisierung ist eine proaktive, aufnahmeseitige Steuerung, mit der Admins auswählen können, welche Assets mit Dynamic Media synchronisiert werden sollen. Beispielsweise können Teams nur die Ordner synchronisieren, die Assets enthalten, die eine endgültige Genehmigung erhalten haben, z. B. Ordner mit endgültigen saisonalen Kampagnenbildern, regionsspezifische Produktfotografie oder legal freigegebenes Marketing-Kreativ. Dieser Workflow stellt sicher, dass nur überprüfte Inhalte in die Dynamic Media-Umgebung gelangen, und hilft Teams, die Kontrolle darüber zu behalten, welche Assets sie für die Bereitstellung an Kunden vorbereiten.

  • Selektive Veröffentlichung:
    Nach dem Synchronisieren von Assets bietet die selektive Veröffentlichung eine versandseitige Kontrolle darüber, welche Assets für Endkunden sichtbar sind. Im Gegensatz zur selektiven Synchronisierung, die steuert, was in Dynamic Media auftritt, wird bei der selektiven Veröffentlichung festgelegt, was aus den Dynamic Media-Kanälen austritt. Mit dieser Funktion können Teams bestimmen, welche genehmigten Assets über ihre Kanäle bereitgestellt werden, sodass Zielgruppen nur die relevantesten markeninternen Inhalte zum richtigen Zeitpunkt in einem Kampagnenlebenszyklus sehen.

Die wichtigsten Vorteile von selektiver Synchronisierung und selektiver Veröffentlichung

Gemeinsam bieten diese beiden Best Practices Folgendes:

  • Engere Governance über die Sichtbarkeit von Assets über die gesamte Aufnahme-zu-Bereitstellung-Pipeline hinweg.
  • Geringeres Risiko nicht genehmigte, veraltete oder markenfremde Inhalte in Live-Kanälen zu veröffentlichen.
  • Höhere Produktivität für DAM-, Marketing- und Merchandising-Teams durch Eingrenzung des Workingsets für Assets unter aktiver Verwaltung.
  • Größere Markenkonsistenz, da nur überprüfte und genehmigte Kreative auf Kunden-Touchpoints zugreifen.

Das Ergebnis ist, dass Marketing- und Digital Operations-Teams eine differenziertere Governance und Produktivität bezüglich ihrer Rich-Media-Inhalte erzielen und gleichzeitig den Betriebsaufwand für die Verwaltung von Assets reduzieren, die noch nicht für den öffentlichen Gebrauch bereit sind.

Eine schrittweise Konfigurationsanleitung finden Sie unter Konfigurieren von selektiver Veröffentlichung auf Ordnerebene in Dynamic Media.

Dynamic Media-Viewer

Best Practices für Dynamic Media-Viewer optimieren die Leistung, Funktionalität und das Benutzererlebnis von Dynamic Media-Assets in Adobe Experience Manager (AEM). Diese Richtlinien behandeln Asset-, Publishing, smartes Zuschneiden, Stummschaltung der automatischen Wiedergabe für Videos, Korrekte Einbindung von JavaScript und Viewer-spezifische Einbettung - die Kernbereiche, die bestimmen, ob ein Dynamic Media-Viewer in der Produktion zuverlässig gerendert wird.

Die Befolgung dieser Best Practices bietet eine nahtlose Integration, effizientes Asset-Management und konsistente Viewer-Interaktionen über Browser und Geräte hinweg. Das Synchronisieren von Assets, das Anwenden von smartem Zuschneiden und die Einhaltung von JavaScript-Dateieinschlussregeln schützen jeweils die Integrität und Zuverlässigkeit der Medienbereitstellung in der Laufzeitumgebung.

  • Viewer-Assets synchronisieren:
    Synchronisieren Sie alle Viewer-Assets mit Dynamic Media, bevor Sie den Player verwenden. Nicht synchronisierte Assets sind eine häufige Ursache für fehlende Symbole, fehlerhafte Stile oder nicht funktionale Vorgaben zur Laufzeit.

    • Greifen Sie auf die Seite des Beispiel-Managers unter /libs/dam/gui/content/s7dam/samplemanager/samplemanager zu. Auf dieser Seite werden die Assets eines Viewers re-synchronisiert, einschließlich Standardsymbole, CSS-Dateien und Voreinstellungen.
    • Wenn Sie auf Viewer-Probleme stoßen, lesen Sie den Artikel Fehlerbehebung bei Dynamic Media Viewers .
  • Assets veröffentlichen:
    Veröffentlichen Sie Assets, bevor Sie sie in den Versand-Viewern anzeigen. Dadurch wird sichergestellt, dass die Bereitstellungsebene das Asset bereitstellen kann, wenn der Viewer es anfordert. Nicht veröffentlichte Assets können nicht von der Laufzeit des öffentlichen Viewers aufgelöst werden.

  • Videos automatisch abspielen, stummgeschaltet:
    Verwenden Sie für die automatische Wiedergabe in Videos die Einstellungen für stummgeschaltete Videos. Moderne Browser blockieren die automatische Wiedergabe von Videos, für die Audio aktiviert ist, sodass eine stummgeschaltete Wiedergabe erforderlich ist, damit das Video automatisch ohne Benutzerinteraktion gestartet wird.

  • Smartes Zuschneiden:
    Verwenden Sie die Image v3-Komponente für smartes Zuschneiden, um die Präsentation von Bild-Assets zu verbessern und fokuspunktsensitive Zuschnitte über responsive Breakpoints hinweg zu erstellen.

  • JavaScript-Dateieinbindung:
    Schließen Sie nur die JavaScript-Primärdatei des Viewers auf Ihrer Seite ein. Verweisen Sie nicht auf zusätzliche JavaScript-Dateien, die die Laufzeitlogik des Viewers selbstständig herunterlädt. Insbesondere keine direkte Verknüpfung mit der HTML5 Software Development Kit (SDK)-Utils.js aus dem /s7viewers Kontextpfad - ein Muster, das als Consolidated SDK Include“ bezeichnet wird in dem die Seite einen direkten Verweis auf Utils.js hartcodiert, anstatt ihn vom Viewer laden zu lassen. Die Logik des Viewers verwaltet den Speicherort von Utils.js und anderen Laufzeit-Viewer-Bibliotheken. Diese Speicherorte können sich zwischen Versionen ändern. Ältere Versionen von sekundären Viewer-Includes werden von Adobe nicht auf dem Server gespeichert. Ein direkter Verweis auf diese Versionen beeinträchtigt die Viewer-Funktionalität bei zukünftigen Aktualisierungen.

  • Einbettungsrichtlinien:
    Verwenden Sie die Dokumentation für spezifische Einbettungsrichtlinien für jeden Viewer, da sich Einbettungs-Code, Parameter und Initialisierungsmuster je nach Viewer-Typ unterscheiden.
    Möchten Sie mehr erfahren? Navigieren Sie zu Viewer für AEM Assets.

  • SDK-Tutorial und Beispiele:
    Lesen Sie das Viewer-Tutorial für SDK und die Anwendungsbeispiele für HTML5-SDK, um sich ein umfassendes Bild von SDK-Komponenten-APIs zu machen.

Vorbereiten von Assets für die Bereitstellung

Organisieren Ihrer Assets

Business Case: Um Workflows optimieren, organisieren Sie Assets effizient.

Verwenden Sie für eine effiziente Asset-Organisation, die Workflows optimiert, eine oder mehrere der folgenden Best Practices:

  • Organisieren von Assets in Ordnern:
    Eine effektive Asset-Organisation beginnt mit der Kategorisierung von Assets in Ordnern, ähnlich wie die Dateiorganisation auf einem Computer. Ordnungsgemäße Benennung, durchdachte Unterordnerstrukturierung und diszipliniertes Dateimanagement in diesen Ordnern sind für eine effiziente Asset-Verarbeitung von entscheidender Bedeutung, da eine vorhersehbare Hierarchie die Suche, Batch-Verarbeitung und Steuerung von Assets erleichtert. Die Implementierung systematischer Benennungskonventionen und Metadatenpraktiken maximiert den Nutzen des skalierbaren Repositorys für digitale Assets.
    Möchten Sie mehr erfahren? Navigieren Sie zu Organisieren von Assets in Ordnern.
  • Organisieren von Assets mithilfe von Tags:
    Das Tagging von Assets verbessert die Suchbarkeit, die Erstellung von Sammlungen und das Such-Ranking, da gut getaggte Assets in den relevanten Ergebnissen einfacher abgerufen, gruppiert und angezeigt werden können. Adobe AI weist Assets relevante Tags zu, einschließlich benutzerdefinierter Tags, und vereinfacht die Asset-Verwaltung durch automatische, beschreibende Tags, die den manuellen Aufwand reduzieren und die Metadaten über große Bibliotheken hinweg konsistent halten.
    Möchten Sie mehr erfahren? Navigieren Sie zu Organisieren von Assets mit Tags.
  • Organisieren von Assets als Sammlungen:
    Dynamic Media ermöglicht zusammen mit Experience Manager Assets die effiziente Erstellung, Bearbeitung und Freigabe von Asset-Sammlungen unter Benutzern. Erstellen Sie mehrere Sammlungstypen, einschließlich statischer und dynamischer, suchbasierter Kompilierungen. Geben Sie diese Sammlungen über mehrere Standorte und Teams hinweg mit anpassbaren Zugriffs- und Bearbeitungsberechtigungen frei, was die kontrollierte Zusammenarbeit unterstützt und gleichzeitig die Asset-Governance beibehält.
    Möchten Sie mehr erfahren? Navigieren Sie zu Organisieren von Assets als Sammlungen.
  • Organisieren von Assets mithilfe von Profilen:
    Ein Verarbeitungsprofil ist ein automatisierter Regelsatz, der Assets in bestimmten Ordnern verarbeitet und die Organisation durch Anwendung einer konsistenten Verarbeitung optimiert, z. B. bei Ausgabedarstellungen, Metadatenzuweisungen und Benennungen, wenn Assets hinzugefügt werden. Da Profile auf vorhersehbare Eingaben angewiesen sind, stellt die Standardisierung von Metadaten, Dateinamen und Ordnerstrukturen eine konsistente und präzise Anwendung dieser Profile sicher, während Ihre Sammlung digitaler Assets erweitert wird.
    Möchten Sie mehr erfahren? Navigieren Sie zu Organisieren von Assets mit Profilen.

Optimieren der Bildqualität

Business-Case: Erhalten hochwertiger Bilder über Dynamic Media.

Die Verbesserung der Bildqualität in Adobe Experience Manager Dynamic Media hängt von mehreren miteinander verknüpften Faktoren ab, und der Vorgang ist häufig zeitintensiv. Durch die Anwendung bewährter Best Practices wird jedoch die visuelle Ausgabe kontinuierlich verbessert. Zu den Schwerpunktbereichen gehören:

  • Optimale Bildgröße - Abgleichen der Pixelabmessungen zur Anzeige des Kontexts, um unnötige Skalierung zu vermeiden.
  • Bildscharfzeichnung - Anwenden der entsprechenden Scharfzeichnungsmethode für die beabsichtigte Ausgabegröße und das Medium.
  • Beste Bildformate - Auswahl des Dateiformats, das eine Balance zwischen Qualität, Dateigröße und Browser- oder Gerätekompatibilität herstellt.

Ausführlichere Anleitungen zu den einzelnen Bereichen finden Sie unter Best Practices zur Optimierung der Bildqualität.

Da die Wahrnehmung der Bildqualität von Person zu Person unterschiedlich ist, ist ein systematischer, testgesteuerter Ansatz beim Experimentieren unerlässlich, um wiederholbare, hochwertige Ergebnisse zu erzielen. Um diesen Prozess zu unterstützen, bietet Adobe Experience Manager mehr als 100 Dynamic Media-Befehle für die Bildverbesserung - eine breite Palette von Steuerelementen, mit denen Teams Scharfzeichnung, Farbe, Komprimierung, Zuschneiden, Größenanpassung und andere Rendering-Verhaltensweisen auf Asset-Basis anpassen können.

Einen kurzen Überblick über diese Funktionen finden Sie unter Dynamic Media- (3 Minuten, 17 Sekunden).

Um zu bewerten, wie sich die einzelnen Befehle auf das endgültige gerenderte Bild auswirken, können Benutzer ein Bild in Dynamic Media hochladen, die Benutzeroberfläche des Tools unter der angegebenen URL öffnen und die Befehle anwenden, die sie testen möchten. Dieser praxisnahe Vergleich erleichtert es, die genauen Parameterkombinationen zu identifizieren, die das gewünschte visuelle Ergebnis liefern, bevor sie in großem Maßstab veröffentlicht werden.

Um direkt zu experimentieren, starten Sie Dynamic Media-Momentaufnahme.

Standardisierung der auf Bilder angewendeten Stile

Business-Case: Effizientes Standardisieren von Stil und Transformation, die auf meine Bild-Assets angewendet werden.

Verwenden Sie Bildvorgaben regelmäßig in Dynamic Media, um Bildgrößen, Formate und Eigenschaften über jeden Kanal hinweg, in dem Ihre Assets angezeigt werden, konsistent und dynamisch anzupassen. Eine Bildvorgabe ist ein benannter, wiederverwendbarer Satz von Befehlen zur Größenanpassung und Formatierung - nach der Definition kann die Vorgabe bei Bedarf angewendet werden, sodass dasselbe Quell-Asset in der exakten, für jede Oberfläche erforderlichen Ausgabedarstellung bereitgestellt wird, ohne dass mehrere abgeleitete Dateien erstellt und gespeichert werden.

In der Praxis steuern Bildvorgaben Attribute wie:

  • Abmessungen - Breite, Höhe und Seitenverhältnis für die bereitgestellte Ausgabedarstellung.
  • Format - Das Bildformat der Ausgabe, das am besten für das Zielgerät oder den Browser geeignet ist.
  • Bildeigenschaften - Qualität, Scharfzeichnung, Farbe und andere visuelle Transformationen, die zum Zeitpunkt des Renderns angewendet werden.

Da die Vorgabe dynamisch angewendet wird, bleibt das ursprüngliche Master-Asset unberührt und eine einzige Quelle kann jede erforderliche Variante dynamisch generieren. Dies stellt die visuelle Konsistenz über Storefronts, Marketing-Oberflächen und Kampagnen hinweg sicher und reduziert gleichzeitig den manuellen Produktionsaufwand.

Beispielsweise automatisieren Bildvorgaben die Größe und Formatierung von Produktbildern sowohl für Desktop- als auch für Mobilgeräte - dasselbe Produktfoto kann als großes Hero-Bild auf dem Desktop und als angemessen große, optimierte Ausgabedarstellung auf Mobilgeräten bereitgestellt werden, die alle unter derselben benannten Vorgabe stehen. Daher erzwingen Teams ein einheitliches Erscheinungsbild, verkürzen Produktionszyklen und vereinfachen Aktualisierungen: Ändern Sie die Vorgabe einmal, und jedes Bild, das sie verwendet, erbt die neue Behandlung.

Möchten Sie es einmal ausprobieren? Navigieren Sie zu Grundlagen der Erstellung von Bildvorgaben zum Rendern von Assets

Anpassen des Fokus und Framing von Bildern und Videos

Business-Case: Sicherstellen, dass der Zielpunkt meiner Bilder oder Videos geräteübergreifend im Fokus bleibt.

Funktionsweise von smartem Zuschneiden

Smartes Zuschneiden ist eine Funktion zum automatischen Zuschneiden in Dynamic Media, die von Adobe AI, dem Adobe-Framework für künstliche Intelligenz und maschinelles Lernen, unterstützt wird. Smartes Zuschneiden identifiziert und bewahrt automatisch das primäre Subjekt - oder den Zielpunkt - in einem Bild oder Video auf und stellt dann das Asset so um, dass der Fokus zentriert und sichtbar bleibt, wenn sich das Ansichtsfenster ändert.

Zu den wichtigsten Funktionen gehören:

  • Automatisierte Themenerkennung: Adobe AI analysiert jedes Asset, um das wichtigste visuelle Thema zu finden, und eliminiert manuelle Zuschnittsentscheidungen für jeden Breakpoint.
  • Responsives Framing: Die Funktion behält den Fokus über Desktop-Computer, Tablets und Mobilgeräte hinweg bei, sodass der Betrachter immer die beabsichtigte Komposition sieht.
  • Gilt sowohl für Bilder als auch für Videos: Smartes Zuschneiden unterstützt Standbilder und Videoinhalte und erweitert so das konsistente Rahmenverhalten über Medientypen hinweg.
  • Geräteoptimierter Versand: Jeder Betrachter erhält eine entsprechend zugeschnittene, auf seinen Bildschirm abgestimmte Ausgabedarstellung, die eine schnellere Wahrnehmung der Nachricht und stärkere visuelle Interaktion unterstützt.

Dies ist wichtig, da ein einzelnes Hero-Bild oder -Video oft über viele Seitenverhältnisse hinweg angezeigt werden muss - breite Desktop-Banner, quadratische soziale Kacheln und hohe mobile Bildschirme. Ohne intelligentes Zuschneiden kann das Hauptmotiv aus dem Rahmen driften oder ungeschickt geschnitten werden. Smartes Zuschneiden verhindert dies, indem der Fokus zum Anker jeder Ausgabedarstellung gemacht wird.

Best Practice: Erstellen eines Bildprofils mit smartem Zuschneiden

Erstellen Sie ein Bildprofil, das mit smartem Zuschneiden konfiguriert ist. Im Profil:

  1. Legen Sie die Bildschirmgrößen und Seitenverhältnisse fest, die unterstützt werden sollen.
  2. Ermöglicht Adobe AI die Erkennung und das Neurahmen für jede definierte Größe.
  3. Einmalige Veröffentlichung und responsive Bereitstellung: Das Profil stellt sicher, dass jedes Bild und Video ohne zusätzliche manuelle Arbeit für das Gerät des Viewers optimiert ist.

Dieser Ansatz zentralisiert die Zuschneidelogik, reduziert den Produktions-Overhead und sorgt für eine konsistente Markendarstellung über jeden Kanal hinweg.

Weitere Informationen

Möchten Sie mehr erfahren? Sehen Sie sich Verwenden von smartem Zuschneiden mit AEM Assets Dynamic Media (6 Minuten, 35 Sekunden) und Verwenden von Dynamic Media Smart Crop für Video (6 Minuten, 22 Sekunden) an - beide exemplarischen Vorgehensweisen zeigen smartes Zuschneiden in Adobe Experience Manager (AEM) Assets.

Verbessern von SEO-Rankings

Business-Case: Konfigurieren von Dynamic Media, um verbesserte SEO-Rankings zu erhalten.

Wenden Sie die folgenden Empfehlungen konsistent an, damit Ihre Bilder effektiv zu Ihrer gesamten SEO-Strategie beitragen.

  • Aussagekräftige Bilddateinamen:
    Verwenden Sie beschreibende, schlüsselwortreiche Dateinamen die den Bildinhalt widerspiegeln. Zum Beispiel:

    • Verwenden Sie myCompany-Silver-Wrist-Watch
    • Vermeiden Sie die Verwendung von myCompany_Silver_Wrist_Watch oder myCompanySilverWristWatch

    Beschreibende Dateinamen helfen Suchmaschinen, den Bildkontext zu interpretieren, was die SEO-Leistung direkt verbessert. Google bevorzugt Bindestriche vor Unterstrichen oder Leerzeichen in einem Dateinamen, da Bindestriche als Trennzeichen geparst werden, Unterstriche jedoch nicht. Vermeiden Sie außerdem die Verkettung von Wörtern in einem Dateinamen, da verkettete Zeichenfolgen die einzelnen Keywords verdecken, auf die sich Crawler verlassen.

  • Benutzerdefinierte Domain:
    Implementieren Sie eine benutzerdefinierte Domain die Ihr Unternehmen oder Ihren Markennamen enthält, um die Markenerkennung, die Domain-Autorität und das Vertrauen der Benutzer zu stärken. Zum Beispiel:

    • Verwenden Sie http://images.mycompany.com/is/image/companyname/
    • Vermeiden von https://s7d1.scene7.com/is/image/folder/AdobeStock_28563982

    Eine Marken-Domain überdeckt Ihren Firmennamen in der URL selbst und gibt Suchmaschinen und Benutzern ein sofortiges Signal der Eigentümerschaft und Relevanz.

  • SEO-freundliche Ordnerstruktur:
    Organisieren Sie Ihre Bilder in einer Ordnerhierarchie, die Ihren Unternehmens- oder Markennamen enthält, um eine bessere Indizierung zu ermöglichen, z. B. http://images.mycompany.com/is/image/companyname/. Ein klarer semantischer Pfad hilft Crawler, die Site-Architektur zu verstehen und Assets mit der richtigen Markenentität zu verknüpfen.

  • Regelsätze für Dynamic Media:
    Verwenden Sie Regelsätze um URLs basierend auf Faktoren wie Gerätetyp, Bildformat oder Anfragekontext bedingt zu transformieren und so sowohl SEO als auch das Benutzererlebnis zu verbessern.
    Möchten Sie mehr erfahren? Navigieren Sie zu Verwenden von Regelsätzem zum Transformieren von URLs.

  • Intelligente Bildbearbeitung und smartes Zuschneiden:
    Verwenden Sie Funktionen intelligente Bildbearbeitung und smartes Zuschneiden in Dynamic Media, um optimierte, responsive Bilder bereitzustellen, die auf jedes Gerät und jeden Viewport zugeschnitten sind. Diese Funktionen reduzieren die Payload-Größe und beschleunigen die Seitenladezeiten. Da die Seitengeschwindigkeit ein bestätigtes Google-Ranking-Signal ist, das an Core Web Vitals gebunden ist, stärkt die schnellere Bereitstellung das SEO-Ranking als direkten nachgelagerten Effekt.
    Möchten Sie mehr erfahren? Navigieren Sie zu Intelligente Bildbearbeitung oder sehen Sie sich Verwenden des intelligenten Zuschnitts mit AEM Assets Dynamic Media (6 Minuten, 35 Sekunden) an.

Diese Best Practices stimmen direkt mit den Best Practices für die Image-SEO von Google überein, die den Schwerpunkt auf die Bereitstellung von Kontext und Klarheit für Suchmaschinen durch geeignete Benennungskonventionen, strukturierte Daten und optimierte Bildbereitstellung legen. Die Befolgung der eigenen Anleitungen von Google ist der zuverlässigste Weg zur anhaltenden Bildsichtbarkeit in Suchergebnissen.

Möchten Sie mehr erfahren? Navigieren Sie zu Best Practices für die URL-Struktur von Google und Best Practices für die Bilder-SEO von Google

Dynamische Verbesserung von Bildern und Erstellung visueller Effekte mithilfe von Befehlen

Business-Case: Anwenden umfangreicher visueller Effekte auf Bilder.

Dynamic Media bietet eine Suite von URL-Befehlen (Uniform Resource Locator), die Bilder verbessern und bei Bedarf visuelle Effekte generieren, sodass nicht mehr mehrere statische Asset-Varianten gespeichert werden müssen. In den folgenden Abschnitten werden die wichtigsten Bildumwandlungsprozesse erläutert und für jeden Schritt funktionierende URL-Beispiele bereitgestellt.

Effekte innerhalb des Quellbilds

Aufgabe
Vorgehensweise
Hochladen und Veröffentlichen des Originalbilds
  • Laden Sie das Originalbild in Dynamic Media hoch.
  • Vergewissern Sie sich, dass das Asset veröffentlicht und über eine öffentliche URL erreichbar ist.
  • In diesem Beispiel wird ein Stockbild einer Uhr auf weißem Hintergrund (als „Bild X“ bezeichnet) in Dynamic Media hochgeladen.
    https://s7g2.scene7.com/is/image/genaibeta/watch-silver-offer
Erstellen einer Maske
Anwenden von URL-Befehlen in Dynamic Media für Effekte

Wenden Sie nach der Vorbereitung der Maske URL-Befehle an, um Effekte wie einen äußeren Glanz oder eine Hintergrundfarbänderung in „Bild X“ hinzuzufügen. Nachfolgend finden Sie zwei Beispiele:

Hinzufügen eines Bildrands

Dynamic Media bearbeitet Bilder direkt über URL-Parameter und ist somit ein leistungsstarkes Tool zur Erstellung dynamischer digitaler Erlebnisse, ohne Quellelemente neu zu generieren. Die folgenden Beispiele beginnen mit der URL des Basisbilds: https://s7g2.scene7.com/is/image/genaibeta/ocean-facing-hotel.

Aufgabe
Vorgehensweise
Weißer Rahmen
Verwenden Sie zum Hinzufügen eines weißen Rahmens die folgende URL:
https://s7g2.scene7.com/is/image/genaibeta/ocean-facing-hotel?size=400,400&extend=10,10,10,10
In dieser URL fügt der extend=10,10,10,10-Parameter einen 10-Pixel-Rahmen auf allen vier Seiten hinzu (oben, rechts, unten, links).
Unschärfe entlang des weißen Rahmens
Um einen Weichzeichnereffekt entlang des weißen Rahmens hinzuzufügen, strukturieren Sie die URL wie folgt:
https://s7g2.scene7.com/is/image/genaibeta/ocean-facing-hotel?size=400,400&extend=10,10,10,10&effect=-1&op_blur=60&color=0,0,0
In dieser URL aktiviert der effect=-1 den Effekt und legt op_blur=60 die Weichzeichnerintensität fest. Höhere Werte erzeugen eine weichere, diffuse Kante.
Schlagschatteneffekt entlang des äußeren Rands
Um einen Schlagschatten entlang der äußeren Begrenzung hinzuzufügen, verwenden Sie diese URL:
https://s7g2.scene7.com/is/image/genaibeta/ocean-facing-hotel?size=400,400&extend=10,10,10,10&effect=-1&$shadow$&color=0,0,0
Der Parameter “$shadow$” ruft den Schatteneffekt auf und legt color=0,0,0 Schattenfarbe auf Schwarz fest, um einen maximalen Kontrast bei helleren Hintergründen zu erzielen.

Kombinieren und ändern Sie diese URL-Parameter, um die erforderlichen visuellen Effekte für Produktbilder, Marketing-Banner und kreative Kampagnen zu erzielen.

Erstellen von Bildüberlagerungen

Um ein Logo oder ein Symbol auf einem vorhandenen Bild einzublenden, stellt Dynamic Media eine direkte Methode mithilfe von URL-Befehlen bereit. Die Schritte lauten wie folgt.

Schritt
Vorgehensweise
Hochladen und Veröffentlichen des Basisbilds
Laden Sie zunächst das Basisbild hoch, das die Überlagerung erhalten soll, und veröffentlichen Sie es. Jedes veröffentlichte Asset kann als Basis dienen.
Hier ist beispielsweise ein Basisbild:
https://s7g2.scene7.com/is/image/genaibeta/decorative-room-sofa.
Hochladen und Veröffentlichen des Logos oder Symbolbilds
Laden Sie als Nächstes das Bild hoch, das sich oben auf der Basis befindet, und veröffentlichen Sie es. Bei diesem Überlagerungselement sollte es sich um eine transparente PNG-Datei (Portable Network Graphics), die das Logo oder Symbol enthält, sodass nur die Grafikpixel angezeigt werden und der umgebende Bereich das zugrunde liegende Bild anzeigt.
Im Folgenden finden Sie ein transparentes PNG eines Sternobjekts mit Transparenzeffekten, das hier als Überlagerung verwendet wird:
https://s7g2.scene7.com/is/image/genaibeta/decorate-star
Anwenden der Dynamic Media-URL

Erstellen Sie nun eine Dynamic Media-URL, die das Basisbild mit dem Logo oder Symbolbild zusammensetzt. URL-Befehle behandeln die Ebenen.
Die URL-Struktur sieht wie folgt aus:
https://s7g2.scene7.com/is/image/genaibeta/decorative-room-sofa?layer=1&src=decorate-star&scale=1.25&posN=0.33,-.25&fmt=png
wobei das Asset

  • hotspotRetailBaseImage das Basisbild ist.
  • starxp ist das Logo/Symbolbild.
  • layer=1 platziert das Logo oder Symbol als erste Ebene über dem Basisbild.
  • scale=1.25 vergrößert das Logo/Symbol um 25 Prozent im Verhältnis zu seiner ursprünglichen Größe.
  • posN=0.33,-.25 legt die normalisierte Position des Logos/Symbols relativ zu den Abmessungen des Basisbilds fest.
  • fmt=png gibt den Verbund im PNG-Format aus, wobei die Transparenz erhalten bleibt.

Weitere Details finden Sie unter src für weitere Informationen zum src-Befehl und zu anderen Dynamic Media-URL-Befehlen.

Überlagern von Werbetext

Die folgenden Schritte überlagern eine Werbenachricht auf einem Bild mithilfe der Textoperatoren von Dynamic Media (die Rich-Text-Konventionen ähnlich denen von HTML (HyperText Markup Language) und CSS (Cascading Style Sheets) beim Web-Rendering folgen).

Schritt
Vorgehensweise
Hochladen und Veröffentlichen des Basisbilds
Laden Sie zunächst das Basisbild hoch, das den Text enthalten soll, und veröffentlichen Sie es. Jedes Bild ist akzeptabel. Hier finden Sie ein Beispiel für ein Basisbild:
https://s7g2.scene7.com/is/image/genaibeta/leather-sofa
Anwenden von Textoperatoren in Dynamic Media
Wenden Sie mithilfe von Dynamic Media Textoperatoren an, um dynamischen Text zur Anfragezeit direkt auf dem Bild zu rendern - was personalisierte Werbeaktionen, lokalisierte Kopien oder A/B-getestete Überschriften ermöglicht, ohne neue Quelldateien zu erstellen. Die folgende Beispiel-URL veranschaulicht diese Funktion:
https://s7g10.scene7.com/is/image/genaibeta/leather-sofa?layer=1&posN=-0.3,-0.455&text={\rtf1\ansi{\fonttbl{\f0+Arial;}}{\colortbl+\red255\green255\blue255;}\copyfit1000\vertalc\qc{\cf0\fs42+New+Collection}}&size=370,70&textAttr=130&bgcolor=FF3333&wid=600&hei=600

Größenänderungen und Zuschneiden für verschiedene Anwendungsfälle

Grundlagen zum Ändern der Bildgröße

Durch Ändern der Bildgröße ändern sich Abmessungen, Auflösung und Dateigröße. Zu den wichtigsten Aspekten gehören:

  • Pixelzusammensetzung:
    Digitale Bilder bestehen aus winzigen Punkten, den Pixeln. Jedes Bild enthält bei der Erstellung eine feste Pixelanzahl. Durch Größenanpassung werden Pixel hinzugefügt oder subtrahiert, um die Abmessungen, die Auflösung und die Dateigröße des Bildes zu ändern.
  • Seitenverhältnis:
    Durch Beibehaltung des Seitenverhältnisses (des Verhältnisses zwischen Breite und Höhe) wird Verzerrungen vermieden. Unabhängig davon, ob die Platzierung vergrößert (vergrößert) oder verkleinert (verkleinert) wird, sorgt das Beibehalten des Seitenverhältnisses für visuelle Konsistenz über Platzierungen hinweg.
  • Überlegungen zur Qualität:
    Die Größenanpassung wirkt sich direkt auf die Bildqualität aus. Vermeiden Sie drastisches Hochskalieren, da dies zu sichtbarer Pixelierung führt. Stattdessen sollten Sie die Quelle in einer größeren nativen Größe und Auflösung reproduzieren. Verwenden Sie für kleinere Ausgabedarstellungen geeignete Tools, um Schärfe und Details beizubehalten.
Zuschneiden versus Größenanpassung

Zuschneiden und Größenanpassung sind komplementäre Dynamic Media-Techniken, mit denen Bilder für verschiedene Anwendungsfälle umgewandelt werden, z. B. Miniaturansichten, Produktanzeigebilder und Hero-Banner.

  • Zuschnitt:
    Entfernt einen Teil eines Bildes, um seine Komposition und den Rahmen zu ändern. Beim Zuschneiden werden nicht die verbleibenden Pixel skaliert, sondern die Aufmerksamkeit auf einen ausgewählten Bereich gelenkt.
  • Größenanpassung:
    Ändert die Abmessungen, die Auflösung und die Dateigröße des gesamten Bildes unter Beibehaltung des Seitenverhältnisses.

Das folgende Anwendungsbeispiel wendet beide Techniken auf ein Wohnzimmerbild an:

Diese Varianten unterstützen gängige Darstellungskontexte wie E-Commerce-Listen, Hero-Banner und Miniatur-Raster.
Eine vollständige Liste der in einer URL verfügbaren Befehle finden Sie unter Befehlsreferenz.

Bereitstellen von GIF-Bildern

Business-Case: Streamen von GIFs mit Dynamic Media

Dynamic Media unterstützt das Hochladen und Bereitstellen von GIF-Assets, einschließlich animierter GIFs. Die Schlüsselregel: Um eine animierte GIF zu rendern, ersetzen Sie is/image durch is/content in der URL. Der is/image leitet das Asset durch den Bildverarbeitungs-Server (der die Datei auf ein einzelnes Frame reduziert), während der is/content die ursprüngliche Asset-Binärdatei streamt, wobei alle Animationsframes erhalten bleiben.

Wenn Sie beispielsweise abc.gif hochgeladen haben, verwenden Sie die folgenden URL-Muster:

Statische GIF-Bereitstellung (Einzelbild-Rendering)

Dieser URL-Pfad rendert eine statische Ansicht der GIF über den Bildserver und ermöglicht so Standard-Bildmodifikatoren:

https://your.domain.com/is/image/yourfolder/abc

Versand mit animiertem GIF (vollständige Animation)

Dieser URL-Pfad rendert die Animationsansicht der GIF, indem der Rohinhalt direkt bereitgestellt wird:

https://your.domain.com/is/content/yourfolder/abc
NOTE
Bei Verwendung von is/content im URL-Pfad werden Bildumwandlungsbefehle nicht auf das Asset angewendet. Dies liegt daran, dass der is/content-Handler die ursprüngliche, nicht verarbeitete Binärdatei bereitstellt, anstatt sie durch die Bild-Server-Pipeline zu leiten. Dies ist genau das, was die Animation erhält, aber auch bedeutet, dass Größenanpassung, Zuschnitt, Formatkonvertierung und andere Bildmodifikatoren auf diesem Pfad ignoriert werden.

Auswählen des richtigen Pfads:

  • Verwenden Sie is/image, wenn Sie Bildtransformationen (Größenanpassung, Zuschnitt, Formatkonvertierung) benötigen und ein statisches Bild akzeptabel ist.
  • Verwenden Sie is/content, wenn die animierte Wiedergabe der GIF erhalten bleiben muss und akzeptieren Sie, dass Umwandlungsparameter nicht wirksam werden.

Veröffentlichen eines Videos für meine Website

Business-Case: Veröffentlichen Sie schnell ein Video für eine Marketing-Site.

  • Videoprofil auswählen:
    Wählen Sie zunächst in Dynamic Media ein geeignetes Videoprofil aus. Wählen Sie das Profil Adaptive Videokodierung, das in Adobe Experience Manager (AEM) Assets unter „Videoprofile“ verfügbar ist und mehrere Ausgabedarstellungen der Quelle mit unterschiedlichen Bitraten und Auflösungen erzeugt. Diese vordefinierten Kodierungseinstellungen stellen sicher, dass das Video für die Wiedergabe auf verschiedenen Geräten und Bandbreitenbedingungen optimiert ist. Alternativ können Sie ein benutzerdefiniertes adaptives Videoprofil erstellen, das auf die spezifischen Versandanforderungen zugeschnitten ist.

  • Profil zuweisen:
    Weisen Sie das ausgewählte Videoprofil den Ordnern zu, in die das Video hochgeladen wird. Dieser Schritt stellt sicher, dass die richtigen Kodierungseinstellungen beim Hochladen automatisch angewendet werden, sodass die Kodierung nicht pro Asset konfiguriert werden muss.

  • Laden Sie das Originalvideo hoch:
    Laden Sie die Originalvideodatei hoch. Verwenden Sie eine Masterdatei mit hoher Auflösung und hoher Bildqualität. Da die adaptive Kodierung alle Ausgabedarstellungen von der Quelle ableitet, bestimmt die Wiedergabetreue des Originals direkt die maximale Qualität jeder veröffentlichten Ausgabedarstellung.

  • Vorschau und Veröffentlichung:
    Zeigen Sie eine Vorschau des Videos an, um sich zu vergewissern, dass die Wiedergabe, die Miniaturen und die Kodierungsausgabe korrekt wiedergegeben werden. Sobald Sie zufrieden sind, veröffentlichen Sie sie. Beim Veröffentlichen wird das Video im Bereitstellungsnetzwerk von Adobe aktiviert und für Site-Besucher verfügbar gemacht.

  • Verknüpfen oder einbetten:
    Wählen Sie nach der Veröffentlichung zwischen zwei Bereitstellungsoptionen.

    • Direkter Link:
      Verwenden Sie die bereitgestellte URL, um eine direkte Verknüpfung mit dem Video herzustellen. Setzen Sie auf der Marketing-Site einen entsprechenden Hyperlink dazu.
    • Einbetten des Videos:
      Kopieren Sie den bereitgestellten eingebetteten Code und fügen Sie ihn in die HTML der Web-Seite ein, auf der das Video angezeigt werden soll. Durch das Einbetten wird das Video inline auf der Seite wiedergegeben, sodass die Viewer nicht zu einem externen Player umgeleitet werden.

Möchten Sie mehr erfahren? Navigieren Sie zu Video.

Konfigurieren von Videos für optimale Qualität und Interaktion

Business-Case: Richten Sie Videos für die beste Qualität und Interaktion ein.

Um die höchste Videoqualität zu liefern und die Interaktion der Betrachter zu maximieren, kombinieren Sie die folgenden Best-Practice-Strategien in Dynamic Media:

  • Verwenden des integrierten HTML5-Video-Viewers:
    Die Dynamic Media HTML5-Video​Viewer-Vorgaben) funktionieren als robuste, produktionsbereite Video-Player. Diese Vorgaben beseitigen gängige Probleme bei der HTML5-Videowiedergabe auf Desktop- und Mobilgeräten.
    Insbesondere lösen die Vorgaben Herausforderungen wie die Bereitstellung von Streaming mit adaptiver Bit-Rate und die begrenzte Reichweite von Desktop-Browsern, um konsistente Wiedergabeerlebnisse in einer Vielzahl von Client-Umgebungen zu gewährleisten.
    Ausführliche Anleitungen finden Sie unter Best Practice: Verwenden des HTML 5-Video-Viewers.

  • Verwenden von Dynamic Media-Videoprofilen:
    Dynamic Media-Videoprofile ermöglichen effizientes Videomanagement, konsistente Ausgabequalität und adaptives Streaming über verschiedene Bereitstellungskanäle hinweg. Daher bleiben Video-Assets hinsichtlich Kodierung, Auflösung und Bereitstellungsverhalten einheitlich, was den manuellen Konfigurationsaufwand verringert.
    Implementierungsdetails finden Sie unter Dynamic Media-Videoprofile.

  • Befolgen Sie die Best Practices zur Videokodierung:
    Wenden Sie Videokodierungsprofile an, um die Qualität des Originalvideos beizubehalten und eine übermäßige Skalierung während des Kodierungsprozesses zu vermeiden. Dadurch wird sichergestellt, dass die endgültige Ausgabe visuell originalgetreu bleibt, was für die Viewer-Bindung und die Markenpräsentation entscheidend ist.
    Technische Spezifikationen finden Sie unter Best Practices für die Videokodierung.

  • Adaptives Streaming anstelle von progressivem Streaming:
    Adaptives Streaming passt die Videoqualität dynamisch in Echtzeit an die Internet-Verbindungsgeschwindigkeit und die Gerätefunktionen des Viewers an.
    Es nutzt branchenübliche Protokolle wie HLS (HTTP Live Streaming) und DASH (Dynamic Adaptive Streaming über HTTP) um eine optimale Wiedergabequalität unter variablen Netzwerkbedingungen zu erzielen.
    Im Gegensatz progressives Streaming bei dem Videodateien unabhängig von Bandbreitenschwankungen linear bereitgestellt werden, minimiert das adaptive Streaming die Pufferung, reduziert Wiedergabeunterbrechungen und bietet ein geräteübergreifendes Anwendererlebnis. Daher ist adaptives Streaming die bevorzugte Methode für eine moderne, interaktionsorientierte Videobereitstellung.

Internationalisierung von Videos für den mehrsprachigen Gebrauch

Business Case: Bereiten Sie Videos für den mehrsprachigen Gebrauch auf globalen Märkten vor.

Die Internationalisierung von Videos für den mehrsprachigen Gebrauch ist für das Erreichen einer globalen Zielgruppe von entscheidender Bedeutung. Dynamic Media bietet einen integrierten Workflow, der Videos vorbereitet, lokalisiert und für Zuschauer weltweit verteilt, sodass eine einzige Quelldatei viele Regionen bedienen kann, ohne den Produktionsaufwand zu duplizieren.

  • Hochladen Ihrer Videos:

    • Erstellen Sie zunächst ein Videoverschlüsselungsprofil. Sie können entweder das vordefinierte Profil Adaptive Videokodierung verwenden, das im Lieferumfang von Dynamic Media enthalten ist, oder Ihr eigenes benutzerdefiniertes Profil erstellen, das auf Ihre Bitrate, Auflösung und Codec-Anforderungen abgestimmt ist.
    • Verknüpfen Sie das Videokodierungsprofil mit einem oder mehreren Ordnern, in die Sie Ihre Primärvideos hochladen. Dadurch wird sichergestellt, dass jedes Asset, das in diesen Ordnern abgelegt wird, konsistent verarbeitet wird.
    • Laden Sie die Primärvideos in diese Ordner hoch. Dynamic Media kodiert sie automatisch basierend auf dem zugewiesenen Videoverarbeitungsprofil und erstellt adaptive Ausgabedarstellungen für die Bereitstellung.
    • Dynamic Media unterstützt hauptsächlich Kurzvideos (bis zu 30 Minuten) mit einer Mindestauflösung größer als 25 × 25. Videodateien jeweils bis zu 15 GB können hochgeladen werden.
  • Verwalten von Videos:

    • Organisieren, Durchsuchen und Suchen von Video-Assets direkt in Adobe Experience Manager (AEM).
    • Vorschau und Veröffentlichung von Video-Assets über eine einzige Oberfläche.
    • Sehen Sie sich das Quellvideo zusammen mit den kodierten Ausgabedarstellungen und zugehörigen Miniaturansichten an, um die Ausgabequalität vor der Veröffentlichung zu bestätigen.
    • Bearbeiten Sie Videoeigenschaften wie Titel, Beschreibung und Tags, um die interne Auffindbarkeit und nachgelagerte SEO-Metadaten zu verbessern.
  • Lokalisierung:

    • Erstellen Sie für jede Zielgeographie oder -sprache Audiospuren und Untertitel, damit die Zuschauer in jedem Markt nativ gesprochene Dialoge und lesbare Untertitel erhalten.
    • Fügen Sie diese Audio- und Untertitelspuren über die AEM-Benutzeroberfläche zu Ihren Videos hinzu, sodass alle lokalisierten Varianten an ein einzelnes Master-Asset angehängt bleiben.
    • Wenn Benutzer die Videos abspielen, wählen sie zur Laufzeit ihre bevorzugte Sprache für Audio und Untertitel aus, sodass sie keine separaten Videodateien pro Sprache hosten müssen.
  • Veröffentlichen:

    • Wenn Sie AEM als Web Content Management (WCM)-System verwenden, können Sie Ihren Web-Seiten über das native Authoring-Erlebnis direkt Videos hinzufügen.
    • Wenn Sie ein WCM-System eines Drittanbieters verwenden, können Sie Videos auf Ihren Web-Seiten mithilfe von URLs oder Einbettungs-Codes verknüpfen oder einbetten, die von Dynamic Media generiert wurden.

Weitere Informationen zur Verwaltung der lokalisierten Wiedergabe finden Sie unter Über die Unterstützung mehrerer Untertitel und Audiospuren für Videos in Dynamic Media.

Bereitstellen von Assets an Kundinnen und Kunden

Optimieren von Bildgrößen und Minimieren der Seitenladezeiten

Business-Case: Optimieren Sie die Größe von Bildern für Browser oder Bildschirme und reduzieren Sie die Seitenladezeit.

Dynamic Media Smart Imaging ist eine Funktion zur Bildbereitstellung, die die Leistung verbessert, indem sie die Format, Größe und Qualität jedes Bildes basierend auf den Funktionen des Client-Browsers, den Netzwerkbedingungen und der Bildschirmauflösung automatisch optimiert. Da die Optimierung zur Anfragezeit erfolgt, erhält jeder Besucher ein Bild, das auf seine spezifische Betrachtungsumgebung zugeschnitten ist.

Adobe empfiehlt, die automatischen Funktionen der intelligenten Bildbearbeitung zu verwenden, anstatt manuell ein Bildformat wie webp oder avif zu erzwingen. Dies hat folgende Gründe:

  • Browser-Kompatibilität:
    Die intelligente Bildbearbeitung garantiert, dass das bereitgestellte Bildformat mit dem Browser des Benutzers kompatibel ist, da sie Browser-Unterstützungssignale erkennt, bevor ein Format ausgewählt wird. Dadurch werden fehlerhafte Bilder oder Fallback-Fehler in Browsern verhindert, die neuere Formate noch nicht unterstützen.
  • Optimale Komprimierung:
    Die intelligente Bildbearbeitung wählt das beste Komprimierungsformat aus, das auf dem spezifischen Browser, den Netzwerkbedingungen und der Bildschirmauflösung basiert. Daher verringern sich Dateigrößen ohne sichtbaren Qualitätsverlust, was den Bandbreitenverbrauch reduziert und das Rendering beschleunigt.
  • Moderne Formate:
    avif ist zwar ein neueres Format, das eine bessere Komprimierung als ältere Formate bietet, es wird jedoch noch nicht überall in Browsern unterstützt. Die intelligente Bildbearbeitung dient avif nur dort, wo sie unterstützt wird, und greift an anderer Stelle auf ein kompatibles Format zurück, wodurch Kompatibilitätslücken vermieden werden.
  • Best Practices:
    Um für jede Anfrage das beste Web-optimierte Format zu gewährleisten, sollten Entwickler die intelligente Bildbearbeitung die Formatauswahl automatisch vornehmen lassen, anstatt manuell Befehle wie fmt=webp oder fmt=avif anzugeben. Dadurch entfällt die Notwendigkeit, die Rendering-Logik pro Browser beizubehalten, und die Bereitstellung bleibt an die sich weiterentwickelnde Browser-Unterstützung angepasst.

Da die intelligente Bildbearbeitung die Bereitstellung in Echtzeit an jede Anfrage anpasst, werden Bilder auf die effizienteste Weise bereitgestellt, die an die Browser-Umgebung jedes Benutzers angepasst ist. Dieser Ansatz vereinfacht die Bereitstellungs-Pipeline und verbessert die Ladezeiten von Bildern und das gesamte Anwendererlebnis.

Weitere Informationen finden Sie unter Intelligente Bildbearbeitung.

Änderungen nach der Bereitstellung von Assets an Kundinnen und Kunden

Business-Case: Wie kann sichergestellt werden, dass die Änderungen sofort im CDN erscheinen, nachdem neue Inhalte veröffentlicht oder vorhandene Inhalte überschrieben wurden?

Durch Bereinigen oder Invalidierung des CDN-Cache werden Dynamic Media-Assets sofort im Bereitstellungsnetzwerk aktualisiert anstatt darauf zu warten, dass die standardmäßige TTL (Time To Live) - die in der Regel auf 10 Stunden eingestellt ist automatisch abläuft.

Das CDN (Content Delivery Network) Dynamic Media-Assets an geografisch verteilten Edge-Knoten zwischenspeichern, um sie schnell an Kunden bereitzustellen. Wenn Aktualisierungen für diese Assets veröffentlicht werden, würden die zwischengespeicherten Kopien an diesen Edge-Knoten ansonsten die vorherige Version weiter bereitstellen, bis die TTL abläuft. Daher können Kunden ohne explizite Invalidierung veraltete Inhalte Stunden lang sehen, nachdem eine Änderung live geschaltet wurde.

Die Cache-Invalidierung löst dies auf zwei Arten:

  • Sofortige Verbreitung: Invalidierung (oder Bereinigung) des Caches signalisiert dem CDN, die gespeicherte Kopie zu verwerfen, sodass die nächste Anfrage das aktualisierte Asset direkt aus der Quelle abruft. Dadurch wird sichergestellt, dass Änderungen sofort auf der Website angezeigt werden.
  • Keine Abhängigkeit vom TTL-Ablauf: Teams müssen nicht auf das 10-Stunden- warten, das für zeitkritische Korrekturen, Markenaktualisierungen oder dringende Inhaltsaustauschvorgänge wichtig ist.

Je nach spezifischem Anwendungsfall können die Einstellungen der CDN-TTL auch angepasst werden, z. B. um die TTL für häufig aktualisierte Assets zu verkürzen oder um sie für stabile, langlebige Inhalte zu erweitern, damit die Frische- gegen die Ursprungslast ausgeglichen wird.

Ausführliche Anweisungen finden Sie unter Invalidierung des CDN-Cache über Dynamic Media.

recommendation-more-help
experience-manager-cloud-service-help-main-toc