Best Practices für Dynamic Media about-dm-best-practices
-
Sind haben bislang noch nicht mit Dynamic Media gearbeitet? Einen schnellen, allgemeinen Überblick über Dynamic Media finden Sie unter Arbeiten mit Dynamic Media.
-
Befolgen Sie die Best Practices für Dynamic Media, um den größtmöglichen Nutzen zu erzielen.
-
Probieren Sie mit dem Snapshot-Tool die Dynamic Media-Bildfunktionen aus.
-
Stellen Sie eine reibungslose Videowiedergabe mit adaptivem Video sicher.
-
Automatisieren Sie das Zuschneiden von Bildern mit der Funktion „Intelligenter Zuschnitt“.
-
Automatisieren Sie das Zuschneiden von Videos mit der Funktion „Intelligenter Zuschnitt“.
-
Stellen Sie ein interaktives 3D-basiertes Erlebnis bereit.
-
Weitere Informationen finden Sie unter Dynamic Media-Ressourcen.
Organisationen müssen sich für die Interaktion mit Benutzenden mit zahlreichen Kanälen und Geräten auseinandersetzen. Die Customer Journey umfasst Ladengeschäfte, das Internet, Mobilgeräte, Social Media, E-Mails und Commerce. Um diesen Anforderungen gerecht zu werden, bietet Dynamic Media für Adobe Experience Manager (AEM) eine umfassende Lösung. Sie optimiert die Bereitstellung von Assets, handhabt die Personalisierung und sorgt für konsistente, leistungsfähige und markenorientierte Erlebnisse über Kanäle und Geräte hinweg.
Zu den wichtigsten Grundsätzen von Dynamic Media gehören die Folgenden:
- Einzeldatei-Ansatz: Mit Dynamic Media speichern Sie eine primäre Quelldatei. Alle Größenvarianten und visuellen Effekte werden zum Zeitpunkt der Bereitstellung dynamisch erstellt und optimiert. Dieser Ansatz spart Speicherkosten und beseitigt die Komplexität von Workflows.
- Wirklich global: Die intelligente Bildbearbeitung, die während der Inhaltsbereitstellung angewendet wird, reduziert die Bild- und Seitengröße erheblich, ohne die visuelle Qualität zu beeinträchtigen. Sie ist für Netzwerkbandbreite und gerätespezifische Pixelverhältnisse optimiert.
- KI-gestützt: Das intelligente Zuschneiden, eine KI-gesteuerte Funktion, automatisiert auf Bildern und in Videos das Zuschneiden entsprechend den Interessenschwerpunkten. Die Funktion macht manuelles Arbeiten überflüssig und skaliert effizient für die Verwendung in Unternehmen.
- Einfaches Video: Laden Sie Primärvideos in Dynamic Media hoch und streamen Sie sie mit beschreibendem Audio adaptiv über mehrere Sprachen hinweg.
- Erlebnis Viewer-Bibliothek: Passen Sie Erlebnis-Viewer für Bilder und Videos an und versehen Sie sie mit ihrer Marke. Diese Viewer lassen sich nahtlos in Ihre digitalen Erlebnisse integrieren.
- Unterstützung neuer Formate: Dynamic Media ermöglicht die Bereitstellung von 3D- und Panoramaerlebnissen.
Während der Erkundung der Dynamic Media Journey können Sie sich die unten stehende, konsolidierte Liste mit Best Practices ansehen, um die Funktionen optimal zu nutzen. Passen Sie diese Best Practices für Dynamic Media an Ihre spezifischen Kontext- und Projektanforderungen an, damit Sie Ihre Erlebnisse kanal- und geräteübergreifend optimieren können.
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.
Optimieren Sie die Verwaltung einer großen Anzahl von Assets effizient. Stellen Sie sicher, dass nur die entsprechenden autorisierten Inhalte Ihre Endbenutzenden erreichen, indem Sie die Funktionen Selektive Synchronisierung und Selektive Veröffentlichung in Dynamic Media verwenden.
-
Selektive Synchronisierung:
Eine proaktive Funktion, mit der Sie auswählen können, welche Assets mit Dynamic Media synchronisiert werden sollen. Sie können beispielsweise nur diejenigen Ordner mit Assets synchronisieren, für die die endgültige Genehmigung erteilt wurde. Dieser Workflow hilft Ihnen dabei, die Kontrolle darüber zu behalten, welche Assets für die Bereitstellung an Ihre Kundschaft vorbereitet werden. -
Selektive Veröffentlichung:
Nach der Synchronisierung Ihrer Assets können Sie durch die selektive Veröffentlichung steuern, welche Assets für Ihre Kundinnen und Kunden sichtbar sind. Auf diese Weise können Sie steuern, welche genehmigten Assets tatsächlich über Ihre Kanäle bereitgestellt werden, und sicherstellen, dass Ihre Kundinnen und Kunden nur die besten und relevantesten Inhalte sehen.
Mithilfe dieser beiden Best Practices können Sie eine bessere Kontrolle, Verwaltung und Produktivität Ihrer Rich-Media-Inhalte erzielen.
Möchten Sie mehr erfahren? Navigieren Sie zu Konfigurieren einer selektiven Veröffentlichung auf der Ordnerebene in Dynamic Media:.
Dynamic Media-Viewer
Die Best Practices für den Dynamic Media-Viewer sind wichtige Richtlinien zum Optimieren der Leistung, Funktionalität und des Anwendererlebnisses von Dynamic Media-Assets in AEM. Diese Verfahren stellen sicher, dass Assets ordnungsgemäß synchronisiert, veröffentlicht und konfiguriert werden, um alle Funktionen von Dynamic Media nutzen zu können.
Durch Befolgen dieser Best Practices können Sie eine nahtlose Integration, ein effizientes Asset-Management und verbesserte Viewer-Interaktionen erzielen. Die Synchronisierung von Assets, die Verwendung des intelligenten Zuschnitts und die Einhaltung der JavaScript-Dateieinschlussrichtlinien sind wichtige Vorgehensweisen. Diese Empfehlungen tragen dazu bei, die Integrität und Zuverlässigkeit der Medienbereitstellung über verschiedene Plattformen und Geräte hinweg aufrechtzuerhalten.
-
Synchronisieren von Viewer Assets:
Stellen Sie sicher, dass alle Viewer-Assets mit Dynamic Media synchronisiert sind, bevor Sie den Player verwenden.- Greifen Sie auf die Seite des Beispiel-Managers unter
/libs/dam/gui/content/s7dam/samplemanager/samplemanagerzu. Auf dieser Seite können Sie die Assets eines Viewers neu synchronisieren, einschließlich vordefinierter Symbole, CSS-Dateien und Vorgaben. - Wenn Probleme mit dem Viewer auftreten, lesen Sie den Artikel Fehlerbehebung bei Dynamic Media-Viewern.
- Greifen Sie auf die Seite des Beispiel-Managers unter
-
Veröffentlichen von Assets:
Stellen Sie sicher, dass Assets veröffentlicht werden, bevor Sie sie in den Bereitstellungs-Viewern anzeigen. -
Stummgeschaltete automatische Wiedergabe von Videos:
Verwenden Sie für die automatische Wiedergabe in Videos stummgeschaltete Videoeinstellungen, da Browser die Wiedergabe von Videos mit Lautstärke einschränken. -
Smartes Zuschneiden:
Verwenden Sie die Image v3-Komponente für das smarte Zuschneiden, um die Darstellung von Bild-Assets zu verbessern. -
JavaScript-Dateiaufnahme:
Schließen Sie nur die primäre Viewer-JavaScript-Datei auf Ihrer Seite ein. Vermeiden Sie es, auf zusätzliche JavaScript-Dateien zu verweisen, die durch die Laufzeitlogik des Viewers heruntergeladen werden könnten. Stellen Sie insbesondere keine direkte Verknüpfung mit der HTML5 SDKUtils.js-Bibliothek aus dem Kontextpfad/s7viewersher (auch als konsolidiertes SDK-Include bezeichnet). Die Viewer-Logik verwaltet den Speicherort vonUtils.jsoder ähnlichen Laufzeit-Viewer-Bibliotheken, die sich zwischen Versionen ändern können. Adobe speichert ältere Versionen von sekundären Viewer-Includes nicht auf dem Server, sodass ein direkter Verweis auf diese die Viewer-Funktionalität in zukünftigen Updates beeinträchtigen kann. -
Einbettungsrichtlinien:
Verwenden Sie die Dokumentation zum Einbetten von Richtlinien, die für jeden Viewer spezifisch sind.
Möchten Sie mehr erfahren? Navigieren Sie zu Viewer für AEM Assets. -
SDK-Tutorial und Beispiele:
Sehen Sie sich das Viewer SDK-Tutorial und die HTML5 SDK-Anwendungsbeispiele an, um sich mit den SDK-Komponenten-APIs vertraut zu machen.
Vorbereiten von Assets für die Bereitstellung
Organisieren Ihrer Assets
Business-Case: Effizientes Organisieren von Assets, um Workflows zu optimieren.
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 Organisation von Assets besteht darin, sie in Ordner zu kategorisieren, ähnlich wie bei der Organisation der Dateien auf einem Computer. Die ordnungsgemäße Benennung, Strukturierung von Unterordnern und Dateiverwaltung innerhalb dieser Ordner sind für eine effiziente Verarbeitung der Assets von entscheidender Bedeutung. Durch die Implementierung systematischer Benennungskonventionen und Metadatenpraktiken wird die Nützlichkeit Ihres digitalen Asset-Repositorys maximiert.
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, Sammlungserstellung und das Ranking von Suchen. Die KI von Adobe Sensei verwendet einen selbstlernenden Algorithmus für präzises Tagging, das den schnellen Abruf von Assets ermöglicht. Außerdem erkennt Adobe Sensei relevante Tags, einschließlich benutzerdefinierter Tags, und weist sie Assets zu, wodurch das Asset-Management mit automatischem, beschreibendem Tagging vereinfacht wird.
Möchten Sie mehr erfahren? Navigieren Sie zu Organisieren von Assets mit Tags. - Organisieren von Assets als Sammlungen:
Dynamic Media- und Experience Manager-Assets ermöglichen Benutzenden die effiziente Erstellung, Bearbeitung und Freigabe von Asset-Sammlungen. Sie können verschiedene Sammlungstypen einrichten, einschließlich statischen Listen und dynamischen, suchbasierten Kompilierungen. Diese Sammlungstypen können über verschiedene Standorte hinweg mit anpassbaren Zugriffs- und Bearbeitungsrechten freigegeben werden.
Möchten Sie mehr erfahren? Navigieren Sie zu Organisieren von Assets als Sammlungen. - Organisieren von Assets mit Profilen:
Ein Verarbeitungsprofil automatisiert die Verarbeitung von Assets in angegebenen Ordnern und optimiert so deren Organisation. Durch die Standardisierung von Metadaten, Dateinamen und Ordnerstrukturen können diese Profile konsistent und präzise angewendet werden, wenn Sie Ihre digitale Asset-Sammlung erweitern.
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.
Das Verbessern der Bildqualität erfordert eine sorgfältige Berücksichtigung verschiedener Faktoren. Dies kann ein zeitintensiver Prozess sein. Es gibt jedoch einige bewährte Vorgehensweisen, die Ihnen dabei helfen können, die erwünschten Ergebnisse zu erzielen. Zu diesen Best Practices gehören u. a. der Erhalt einer optimalen Bildgröße, das Scharfzeichnen von Bildern und die Auswahl der bestgeeigneten Bildformate.
Möchten Sie mehr erfahren? Navigieren Sie zu Best Practices für die Optimierung der Bildqualität.
Da die Wahrnehmung der Bildqualität von Mensch zu Mensch variiert, ist manchmal ein systematischer Versuchsansatz unerlässlich, um die erwünschten Ergebnisse zu erzielen. Adobe Experience Manager unterstützt diesen Prozess mit mehr als 100 Dynamic Media-Befehlen zur Bildverbesserung.
Möchten Sie mehr erfahren? Sehen Sie sich Dynamic Media Snapshot an (3 Minuten, 17 Sekunden).
Um die Auswirkungen dieser verschiedenen Befehle auf die Bildqualität zu bewerten, können Sie ein Bild in Dynamic Media hochladen, die Benutzeroberfläche des Tools unter der angegebenen URL verwenden und die Befehle anwenden, die Sie ausprobieren möchten.
Möchten Sie es einmal ausprobieren? Starten Sie Dynamic Media Snapshot
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, damit Sie Größe, Formate und Eigenschaften von Bildern konsistent und dynamisch anpassen können. Sie können sich eine Bildvorgabe als Makro vorstellen: Es handelt sich um einen benannten Satz von Befehlen zur Größenanpassung und Formatierung. Wenn Ihre Site beispielsweise Produktbilder in verschiedenen Größen und Formaten mit spezifischer Komprimierung für Desktop und Mobilgeräte benötigt, automatisieren Bildvorgaben diesen Prozess effizient.
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.
„Intelligenter Zuschnitt“ ist eine Funktion in Dynamic Media, die Adobe Sensei, Adobes KI und ein Framework für maschinelles Lernen verwendet, um das Zuschneiden von Bildern und Videos zu automatisieren. Sie erkennt das Hauptmotiv oder den Zielpunkt eines Bildes oder Videos intelligent und fokussiert darauf. Mit dieser intelligenten Funktion wird sichergestellt, dass der Fokus auf Desktop-Computern und Mobilgeräten mit unterschiedlichen Bildschirmgrößen unverändert bleibt.
Es empfiehlt sich, mit dem „intelligenten Zuschnitt“ ein Bildprofil zu erstellen. Im Profil können Sie verschiedene Bildschirmgrößen definieren und Adobe Sensei den Rest erledigen lassen. So stellen Sie sicher, dass Ihre Bilder und Videos immer für das Gerät der Betrachtenden optimiert sind.
Möchten Sie mehr erfahren? Sehen Sie sich Verwenden des intelligenten Zuschnitts mit AEM Assets Dynamic Media (6 Minuten, 35 Sekunden) und Verwenden des intelligenten Zuschnitts von Dynamic Media für Videos (6 Minuten, 22 Sekunden) an.
Verbessern von SEO-Rankings
Business-Case: Konfigurieren von Dynamic Media, um verbesserte SEO-Rankings zu erhalten.
Wenden Sie die folgenden Empfehlungen regelmäßig an, um sicherzustellen, dass Ihre Bilder effektiv zu Ihrer SEO-Gesamtstrategie beitragen.
-
Bedeutungstragende Namen von Bilddateien:
Verwenden Sie beschreibende Dateinamen, die den Bildinhalt widerspiegeln. Zum Beispiel:- Verwenden Sie
myCompany-Silver-Wrist-Watch - vermeiden Sie
myCompany_Silver_Wrist_WatchodermyCompanySilverWristWatch
Dies hilft Suchmaschinen dabei, den Bildkontext zu verstehen, und verbessert die SEO. Google bevorzugt in einem Dateinamen Bindestriche gegenüber Unterstrichen oder Leerzeichen. Vermeiden Sie in einem Dateinamen auch die Verkettung von Wörtern.
- Verwenden Sie
-
Benutzerdefinierte Domain:
Implementieren Sie eine benutzerdefinierte Domain, die Ihren Unternehmens- oder Markennamen enthält, um die Markenerkennung und das Vertrauen in die Marke zu stärken. Zum Beispiel:- Verwenden Sie
http://images.mycompany.com/is/image/companyname/ - vermeiden Sie
https://s7d1.scene7.com/is/image/folder/AdobeStock_28563982
- Verwenden Sie
-
SEO-freundliche Ordnerstruktur:
Organisieren Sie Ihre Bilder in einer Ordnerstruktur, die Ihren Unternehmensnamen oder Ihre Marke enthält, um eine bessere Indizierung zu erzielen, z. B.http://images.mycompany.com/is/image/companyname/. -
Regelsätze in Dynamic Media:
Erfahren Sie, wie Sie URLs basierend auf verschiedenen Faktoren bedingt transformieren können, um die SEO und das Anwendererlebnis zu verbessern.
Möchten Sie mehr erfahren? Navigieren Sie zu Verwenden von Regelsätzem zum Transformieren von URLs. -
Intelligente Bildbearbeitung und intelligenter Zuschnitt:
Verwenden Sie die Funktionen „Intelligente Bildbearbeitung“ und „Intelligenter Zuschnitt“ in Dynamic Media, um optimierte und responsive Bilder bereitzustellen. Dies verbessert nicht nur die Seitenladezeiten, sondern wirkt sich auch positiv auf SEO-Rankings aus.
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.
Beachten Sie, dass diese Best Practices besonders auf die Best Practices für die SEO der Bildersuche von Google ausgerichtet sind. Solche Verfahren unterstreichen, wie wichtig es ist, Suchmaschinen durch ordnungsgemäße Namenskonventionen, strukturierte Daten und eine optimierte Bildbereitstellung Kontext und Klarheit zu bieten.
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 Reihe von Befehlen für die dynamische Verbesserung von Bildern und das Erstellen visueller Effekte, ohne dass mehrere statische Assets erforderlich sind. Im Folgenden finden Sie kurze Erklärungen zu einigen dieser Prozesse und mehrere Beispiele, die Sie anleiten sollten:
Effekte innerhalb des Quellbilds
- Laden Sie zunächst das Originalbild in Dynamic Media hoch.
- Vergewissern Sie sich, dass es veröffentlicht wurde und über eine URL zugänglich ist.
- In diesem Beispiel wird ein Stockbild einer Uhr mit weißem Hintergrund (nennen wir es „Bild X“) in Dynamic Media hochgeladen.
https://s7g2.scene7.com/is/image/genaibeta/watch-silver-offer
- Entwickeln Sie eine Maske, die das Motiv (den Bereich, in dem Sie Effekte anwenden möchten) und den Hintergrund (den Bereich, den Sie ändern möchten) definiert.
https://s7g2.scene7.com/is/image/genaibeta/watch-silver-offer-maskps - Masken sind in der Regel Graustufenbilder, wobei Weiß das Motiv und Schwarz den Hintergrund darstellt. Sie können Masken mit Tools wie Adobe Photoshop erstellen.
Möchten Sie mehr erfahren? Navigieren Sie zu Erstellen und Bearbeiten einer schnellen Maske in Photoshop. - Erstellen Sie für „Bild X“ eine Maske, die genau das Motiv konturiert, das Sie optimieren möchten. Beispiel: eine Person oder ein Objekt.
Nachdem Sie Ihre Maske erstellt haben, verwenden Sie URL-Befehle, um Effekte wie „Schein nach außen“ anzuwenden oder die Hintergrundfarbe auf „Bild X“ zu ändern. Im Folgenden finden Sie zwei Beispiele:
- Effekt „Schein nach außen“:
Um den Effekt „Schein nach außen“ entlang des Motivrands hinzuzufügen, bearbeiten Sie die URL wie folgt:
https://s7g10.scene7.com/is/image/genaibeta/watch-silver-offer?mask=watch-silver-offer-maskps&maskUse=invert&effect=-1&pos=100,100&op_blur=75&op_grow=1&opac=25
In dieser URL erzeugen die Parameterop_blur,op_growundopacden Effekt „Schein nach außen“. - Ändern der Hintergrundfarbe:
Um die Hintergrundfarbe zu ändern, verwenden Sie die URL mit einem anderen Wert für die Hintergrundfarbe:
https://s7g10.scene7.com/is/image/genaibeta/watch-silver-offer?mask=watch-silver-offer-maskps&maskUse=invert&maskUse=invert&color=255,255,0
In diesem Beispiel setztcolor=255,255,0die Hintergrundfarbe auf Gelb. Ändern Sie für visuelle Auswirkungen den Hintergrund in eine bestimmte Farbe.
Hinzufügen eines Bildrands
Mit Dynamic Media können Sie Bilder direkt über URLs bearbeiten, wodurch es zu einem leistungsstarken Tool für die Erstellung dynamischer digitaler Erlebnisse wird. Im Folgenden finden Sie einige Beispiele. Beginnen wir mit der folgenden URL des Originalbilds: https://s7g2.scene7.com/is/image/genaibeta/ocean-facing-hotel.
https://s7g2.scene7.com/is/image/genaibeta/ocean-facing-hotel?size=400,400&extend=10,10,10,10
Unter dieser URL legt der Parameter
extend=10,10,10,10 die Rahmengröße von zehn Pixeln an allen Seiten fest.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
Unter dieser URL wendet der Parameter
effect=-1 den Unschärfe-Effekt an und op_blur=60 steuert die Intensität der Unschärfe.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$ erstellt den Schatteneffekt und color=0,0,0 setzt die Schattenfarbe auf Schwarz.Experimentieren Sie mit diesen URLs, um die gewünschten visuellen Effekte zu erzielen.
Erstellen von Bildüberlagerungen
Wenn Sie ein Logo oder Symbol als Überlagerung auf einem vorhandenen Bild platzieren möchten, bietet Dynamic Media eine einfache Möglichkeit, dies mithilfe von URL-Befehlen zu erreichen. Sehen wir uns die einzelnen Schritte an.
Hier ist beispielsweise ein Basisbild:
https://s7g2.scene7.com/is/image/genaibeta/decorative-room-sofa.
Hier ist das transparente PNG-Bild eines Sternobjekts mit Transparenzeffekten, das überlagert werden soll:
https://s7g2.scene7.com/is/image/genaibeta/decorate-star
Erstellen Sie jetzt eine Dynamic Media-URL, die das Basisbild mit dem Logo oder Symbolbild kombiniert. Sie können URL-Befehle verwenden, um diesen Effekt zu erzielen.
Die URL-Struktur sieht etwa so 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
hotspotRetailBaseImagedas Basisbild ist.starxpist das Logo/Symbolbild.layer=1gibt an, dass das Logo oder Symbol über dem Basisbild platziert werden soll.scale=1.25passt die Größe des Logos/Symbols an.posN=0.33,-.25bestimmt die Position des Logos/Symbols relativ zum Basisbild.fmt=pngstellt sicher, dass die Ausgabe im PNG-Format vorliegt.
Möchten Sie mehr erfahren? Navigieren Sie zu src, um mehr über den src-Befehl und andere URL-Befehle in Dynamic Media zu erfahren.
Überlagern von Werbetext
Im Folgenden werden die Schritte zum Überlagern eines Bilds mit einer Werbetext-Nachricht mithilfe von HTML und CSS beschrieben.
https://s7g2.scene7.com/is/image/genaibeta/leather-sofa
https://s7g10.scene7.com/is/image/genaibeta/leather-sofa?layer=1&posN=-0.3,-0.455&text=%7b\rtf1\ansi%7b\fonttbl%7b\f0+Arial;%7d%7d%7b\colortbl+\red255\green255\blue255;%7d\copyfit1000\vertalc\qc%7b\cf0\fs42+New+Collection%7d%7d&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
Das Ändern der Bildgröße umfasst das Ändern der Abmessungen, Auflösung und Dateigröße eines Bildes. Beachten Sie dabei Folgendes:
- Pixelzusammensetzung:
Digitale Bilder bestehen aus winzigen Punkten, die Pixel genannt werden. Wenn ein Bild erstellt wird, hat es eine bestimmte Anzahl Pixel. Bei der Größenanpassung werden Pixel hinzugefügt oder entfernt, um die Abmessungen, Auflösung und Dateigröße des Bildes zu ändern. - Seitenverhältnis:
Die Beibehaltung des Seitenverhältnisses (das Verhältnis zwischen Breite und Höhe) ist entscheidend, um Verzerrungen zu vermeiden. Unabhängig davon, ob Sie ein Bild vergrößern (Upscaling) oder verkleinern (Downscaling), wird durch die Beibehaltung des Seitenverhältnisses die visuelle Konsistenz gewährleistet. - Aspekte bezüglich der Qualität:
Die Größenanpassung kann sich auf die Bildqualität auswirken. Vermeiden Sie ein zu drastisches Vergrößern, da dieses zu einer Verpixelung führen kann. Ziehen Sie stattdessen in Erwägung, das Bild in einer größeren Größe und Auflösung zu reproduzieren. Verwenden Sie für kleinere Bilder die entsprechenden Tools, um die Auflösung beizubehalten.
Zuschneiden versus Größenanpassung
Zuschneiden und Größenanpassung sind zwei Techniken in Dynamic Media, mit denen Sie Bilder für verschiedene Anwendungsfälle transformieren können, zum Beispiel für das Erstellen von Miniaturansichten, Produktanzeigebildern oder Bannern.
- Zuschneiden:
Umfasst das Entfernen eines Teils eines Bildes, um dessen Komposition und Ausschnitt zu ändern. Die Gesamtdimensionen werden nicht geändert, sondern es wird auf einen bestimmten Bereich fokussiert. - Größenänderung:
Passt die Abmessungen, Auflösung und Dateigröße des gesamten Bildes unter Beibehaltung des Seitenverhältnisses an.
Sehen wir uns einen Anwendungsfall mit folgendem Bild eines Wohnzimmers an:
- Original-Wohnzimmerbild:
https://s7g2.scene7.com/is/image/genaibeta/decorative-room-sofa - Miniaturansicht (200 Pixel x 200 Pixel):
Eine kleinere Version, die für schnelles Laden/Anzeigen geeignet ist.
https://s7g10.scene7.com/is/image/genaibeta/decorative-room-sofa?wid=200&hei=200&fit=crop - Miniaturansicht mit Zuschnitt (200 x 200 Pixel):
Mit Fokus auf den Bereich mit dem Sofa zugeschnitten.
https://s7g10.scene7.com/is/image/genaibeta/decorative-room-sofa?wid=200&hei=200&cropN=.24,.24,.6,.72&fit=crop - Produktanzeigebild (800 x 600 Pixel):
Zum Präsentieren des Sofas zugeschnitten und in der Größe angepasst.
https://s7g10.scene7.com/is/image/genaibeta/decorative-room-sofa?wid=800&hei=600&cropN=.24,.24,.6,.72&fit=crop - Banner (1720 x 820 Pixel):
Abgeleitet vom Originalbild, wobei der Raum betont wird.
https://s7g10.scene7.com/is/image/genaibeta/decorative-room-sofa?wid=1720&hei=820&cropN=0,.1,1,1&fit=crop
Probieren Sie diese Varianten für Ihre speziellen Anforderungen ruhig aus.
Möchten Sie mehr über die Befehle erfahren, die in einer URL verfügbar sind? Navigieren Sie zur Befehlsreferenz.
Bereitstellen von GIF-Bildern
Business-Case: Streamen von GIFs mit Dynamic Media
Sie können GIFs über Dynamic Media hochladen und bereitstellen. Um ein animiertes GIF zu rendern, ersetzen Sie in der URL is/image durch is/content. Wenn Sie beispielsweise abc.gif hochgeladen haben, verwenden Sie Folgendes:
-
Dieser URL-Pfad rendert eine statische Ansicht des GIF:
code language-none https://your.domain.com/is/image/yourfolder/abc -
Dieser URL-Pfad rendert die Animationsansicht des GIF:
code language-none https://your.domain.com/is/content/yourfolder/abc
is/content im URL-Pfad werden Bildumwandlungsbefehle nicht auf das Asset angewendet.Veröffentlichen eines Videos für meine Website
Business-Case: Veröffentlichen Sie schnell ein Video für eine Marketing-Site.
-
Auswählen eines Videoprofils:
Zunächst sollten Sie in Dynamic Media ein geeignetes Videoprofil auswählen. Sie können das Profil Adaptive Videoverschlüsselung auswählen, das in AEM Assets unter „Videoprofile“ verfügbar ist. Diese vordefinierten Verschlüsselungsseinstellungen stellen sicher, dass Ihr Video für die Wiedergabe auf verschiedenen Geräten und unter verschiedenen Bandbreitenbedingungen optimiert ist. Alternativ können Sie auch Ihr eigenes Profil für adaptive Videos erstellen. -
Zuweisen des Profils:
Weisen Sie das ausgewählte Videoprofil den Ordnern zu, in die das Video hochgeladen werden soll. Dieser Schritt stellt sicher, dass beim Hochladen die richtigen Verschlüsselungseinstellungen angewendet werden. -
Hochladen des Originalvideos:
Laden Sie die Originalvideodatei hoch. Stellen Sie sicher, dass es sich um ein hochauflösendes Video mit guter Qualität handelt. Je besser das Quellvideo, desto besser das Endergebnis. -
Erstellen der Vorschau und Veröffentlichen:
Erstellen Sie eine Vorschau des Videos, um sicherzustellen, dass alles wie erwartet aussieht. Sobald Sie zufrieden sind, veröffentlichen Sie das Video. Dadurch wird das Video für Ihre Zielgruppe zugänglich. -
Verknüpfen oder Einbetten:
Nach der Veröffentlichung haben Sie zwei Optionen.- Direktes Verknüpfen:
Verwenden Sie die bereitgestellte URL, um eine direkte Verknüpfung zum Video herzustellen. Verknüpfen Sie es entsprechend mit einem Hyperlink auf Ihrer Marketing-Site. - Einbetten des Videos:
Kopieren Sie den bereitgestellten eingebetteten Code und fügen Sie ihn in die HTML Ihrer Web-Seite ein, auf der das Video angezeigt werden soll. Hierdurch kann das Video direkt auf Ihrer Site wiedergegeben werden.
- Direktes Verknüpfen:
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 bestmögliche Qualität und Interaktion für Ihre Videos sicherzustellen, sollten Sie eine Kombination der folgenden Strategien implementieren, die Best Practices darstellen:
-
Verwenden des integrierten HTML5-Video-Viewers:
Die HTML5-Video-Viewer-Vorgaben in Dynamic Media sind robuste Video-Player. Verwenden Sie diese, um häufig auftretende Probleme im Zusammenhang mit der Wiedergabe von HTML5-Videos und Mobilgeräten zu vermeiden.
Diese Vorgaben gehen Herausforderungen wie die Bereitstellung von adaptivem Bitrate-Streaming oder die eingeschränkte Reichweite eines Desktop-Browsers an.
Möchten Sie mehr erfahren? Navigieren Sie zu Best Practice: Verwenden des HTML 5-Video-Viewers. -
Verwenden von Dynamic Media-Videoprofilen:
Videoprofile in Dynamic Media helfen Ihnen, eine effiziente Videoverwaltung und konsistente Qualität zu erzielen und adaptives Streaming anzuwenden.
Möchten Sie mehr erfahren? Navigieren Sie zu Dynamic Media-Videoprofile. -
Befolgen der Best Practices für die Videoverschlüsselung:
Wenden Sie Videoverschlüsselungsprofile an, die die Originalvideoqualität ohne übermäßiges Downscaling während der Kodierung beibehalten.
Möchten Sie mehr erfahren? Navigieren Sie zu Best Practices für die Verschlüsselung von Videos. -
Anwenden von adaptivem Streaming anstelle von progressivem Streaming:
Beim adaptiven Streaming wird die Videoqualität basierend auf der Geschwindigkeit der Internet-Verbindung und den Gerätefunktionen der Betrachtenden angepasst.
Es verwendet Protokolle wie HLS (HTTP Live Streaming) oder DASH (Dynamic Adaptive Streaming over HTTP), um eine optimale Wiedergabequalität sicherzustellen.
Im Gegensatz zu progressivem Streaming, bei dem Videos linear bereitgestellt werden, minimiert das adaptive Streaming die Pufferung und bietet ein nahtloses Zuschauererlebnis.
Internationalisierung von Videos für den mehrsprachigen Gebrauch
Business-Case: Richten Sie Videos auf den mehrsprachigen Gebrauch aus.
Die Internationalisierung von Videos für den mehrsprachigen Gebrauch ist für das Erreichen einer globalen Zielgruppe von entscheidender Bedeutung. Dynamic Media bietet Funktionen, die Ihnen bei der Erreichung dieses Ziels helfen können.
-
Hochladen Ihrer Videos:
- Erstellen Sie zunächst ein Videoverschlüsselungsprofil. Sie können entweder das vordefinierte und bereits in Dynamic Media integrierte Profil „Adaptive Videoverschlüsselung“ verwenden oder Ihr eigenes benutzerdefiniertes Profil erstellen.
- Verknüpfen Sie das Videoverarbeitungsprofil mit den Ordnern, in die Sie die Primärvideos hochladen.
- Laden Sie die Primärvideos in diese Ordner hoch. Dynamic Media verschlüsselt sie basierend auf dem zugewiesenen Videoverarbeitungsprofil.
- Dynamic Media unterstützt hauptsächlich Kurzvideos (bis zu 30 Minuten) und einer Mindestauflösung von 25 x 25. Es können Videodateien mit einer Größe von bis zu 15 GB hochgeladen werden1.
-
Verwalten von Videos:
- In AEM können Sie Video-Assets organisieren, suchen und durchsuchen.
- Zeigen Sie Video-Assets in der Vorschau an und veröffentlichen Sie sie.
- Zeigen Sie das Quellvideo und seine kodierten Ausgabeformate zusammen mit den zugehörigen Miniaturansichten an.
- Bearbeiten Sie Videoeigenschaften wie Titel, Beschreibung und Tags2.
-
Lokalisierung:
- Erstellen Sie Audiospuren und Untertitel für jede Zielregion/Sprache.
- Fügen Sie diese Audio- und Untertitelspuren über die AEM-Oberfläche zu Ihren Videos hinzu.
- Wenn Benutzende die Videos abspielen, können sie ihre bevorzugte Sprache für Audio und Untertitel auswählen.
-
Veröffentlichen:
- Wenn Sie AEM als Ihr WCM-System (Web Content Management) verwenden, können Sie Ihren Web-Seiten direkt Videos hinzufügen.
- Wenn Sie das WCM-System eines Drittanbieters verwenden, können Sie Videos mithilfe von URLs oder Einbettungs-Codes auf Ihren Web-Seiten verknüpfen oder einbetten.
Möchten Sie mehr erfahren? Navigieren Sie zu Ü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.
Die intelligente Bildbearbeitung in Dynamic Media ist ein leistungsstarkes Tool, das die Leistung bei der Bildbereitstellung verbessert, indem Format, Größe und Qualität des Bildes automatisch auf Grundlage der Browser-Funktionen der Kundin oder des Kunden optimiert werden.
Adobe empfiehlt, die Funktionen der intelligenten Bildbearbeitung zu verwenden, anstatt das Bildformat manuell auf webp oder avif zu setzen. Hier sind die Gründe:
- Browser-Kompatibilität:
Die intelligente Bildbearbeitung stellt sicher, dass das bereitgestellte Bildformat mit dem Browser der Benutzenden kompatibel ist. - Optimale Komprimierung:
Basierend auf dem jeweiligen Browser, den Netzwerkbedingungen und der Bildschirmauflösung wird das beste Komprimierungsformat ausgewählt. - Moderne Formate:
Zwar istavifist ein neueres Format, das eine bessere Komprimierung bietet, jedoch wird es noch nicht allgemein in allen Browsern unterstützt. - Best Practices:
Um das beste Web-optimierte Format zu gewährleisten, können Sie auf die Auswahl der intelligenten Bildbearbeitung vertrauen, anstatt die Befehlefmt=webpoderfmt=avifmanuell zu verwenden.
Mithilfe der intelligenten Bildbearbeitung können Sie sicherstellen, dass Ihre Bilder so effizient wie möglich und auf die Browser-Umgebung der jeweiligen Benutzenden zugeschnitten bereitgestellt werden. Dieser Ansatz vereinfacht den Prozess und kann zu einer verbesserten Leistung in Bezug auf die Ladezeiten von Bildern und das gesamte Anwendererlebnis führen.
Möchten Sie mehr erfahren? Navigieren Sie zu 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?
Das CDN (Content Delivery Network) speichert Dynamic Media-Assets für die schnelle Bereitstellung an Kundinnen und Kunden zwischen. Wenn an diesen Assets Aktualisierungen vorgenommen werden, ist es wichtig, dass die Änderungen sofort auf der Website wirksam werden. Indem der CDN-Cache bereinigt oder ungültig gemacht wird, können von Dynamic Media bereitgestellte Assets schnell aktualisiert werden. Dadurch entfällt die Notwendigkeit, auf den Ablauf des Caches basierend auf dem TTL-Wert (Time To Live) zu warten, der normalerweise auf zehn Stunden festgelegt ist. Je nach Anwendungsfall können Sie die Einstellungen für den TTL-Wert (Time to Live) des CDN entsprechend aktualisieren.
Möchten Sie mehr erfahren? Navigieren Sie zu Invalidierung des CDN-Cache mithilfe von Dynamic Media.