Läs om hur Core Components kan utnyttja AEM as a Cloud Service webboptimerade funktioner för bildleverans för att leverera bilder effektivare.
Den webboptimerade funktionen för bildleverans i AEM som en molntjänst levererar bildresurser från DAM i WebP-format. WebP kan minska hämtningsstorleken för en bild med i genomsnitt 25 %, vilket ger snabbare sidinläsning.
Det är enkelt att aktivera webboptimerad bildleverans i Core Components, och eftersom alla vanliga webbläsare har stöd för WebP blir upplevelsen transparent för slutanvändaren. Den enda skillnaden de kommer att märka är att innehållet laddas snabbare!
Om du vill aktivera webboptimerad bildleverans redigerar du en sidmall och aktiverar bara alternativet Aktivera webboptimerade bilder i designdialogrutan Bildkomponent. Det här alternativet är tillgängligt för v1, v2 och v3 i Image Component.
Om du inte känner till designdialogrutor och AEM sidmallar kan du kan du läsa det här dokumentet.
Så ja! Bilderna levereras nu med Image Component i WebP-format.
När du har aktiverat webboptimerad bildleverans kanske du också vill kontrollera din dispatcherkonfiguration för att verifiera att den inte blockerar begäran till bildtjänsten. URL:er för den här tjänsten har följande format.
/adobe/dynamicmedia/deliver/dm-aid--741ed388-d5f8-4797-8095-10c896dc9f1d/skitouring.jpg?quality=80&preferwebp=true
Detta kan generaliseras med det här reguljära uttrycket.
\/adobe\/dynamicmedia\/deliver\/([^:[]|*\/])\/([\w-])\.(gif|png|png8|jpg|pjpg|bjpg|webp|webpll|webply)(?[a-z0-9=&]*)?
Webboptimerad bildleverans är transparent för konsumenten och påverkar inte koden. Det enda som slutanvändaren kommer att märka är snabbare laddningstid.
Därför måste du visa sidans källa för att kunna observera den faktiska beteendeändringen.
src
attributpoäng till URL:en för den nya bildtjänsten.Webboptimerad bildleverans är endast tillgängligt i AEM as a Cloud Service. Om det inte är tillgängligt, t.ex. när AEM 6.5 körs lokalt eller på en lokal utvecklingsinstans, återställs bildleveransen till den adaptiva bildservern.
På samma sätt som aktivering av webboptimerad bildleverans inte påverkar markeringen, har tillbakadragande till den adaptiva bildservern ingen effekt på markeringen eftersom bara URL:en i src
attributet för img
-elementet ändras.
Funktionen är bara tillgänglig på AEM as a Cloud Service. Kör AEM lokalt eller lokalt, Image-komponenten faller bakåt till att använda den adaptiva bildservern.
När AEM SDK används på localhost
, bildtjänsten är inte tillgänglig och bildåtergivningen faller bakåt till att använda den adaptiva bildservern.
Om du vill använda den webboptimerade bildleveranstjänsten ska du driftsätta projektet i en AEMaaCS-utvecklingsmiljö och exakt testa hur bildtjänsten fungerar med bildtjänsten.
Bildtjänsten fungerar bara för resurser som finns under /content/dam
och det fungerar inte för bilder som laddas upp direkt till sidan och lagras under en cq:Page
-objekt. Sådana resurser levereras fortfarande med Adaptive Image Server som en fallback.
Den webboptimerade bildtjänsten hanterar alla bildåtergivningar som är 2 048 pixlar och mindre och väljer den största av dem som den bas som de ska använda de begärda inställningarna på (bredd, beskärning, format, kvalitet osv.).
Bilden kommer aldrig att skalas upp. Dessa renderingar definierar därför den bästa storlek och kvalitet som bildtjänsten kan leverera. Se därför till att alla dina resurser har zoomrenderingen 2 048 pixlar, och om de inte har det, bearbeta dem på nytt.
För att leverera WebP-format använder den webboptimerade bildleveranstjänsten en teknik som kallas"innehållsförhandling". Detta innebär att ett WebP-filformat returneras, även om ett JPG- eller PNG-filtillägg begärs, men endast när webbläsaren gjorde begäran fick ett image/webp
HTTP accept header. Webbläsare som stöder den här tekniken kan sedan ange det här huvudet och äldre webbläsare kommer fortfarande att få filformatet JPG eller PNG.
Fördelen med den här tekniken är att img
-elementet och dess attribut kan vara desamma, vilket ger optimal kompatibilitet för befintliga webbplatser och garanterar en så smidig övergång som möjligt till webboptimerad bildleverans.
Ja, den webboptimerade bildleveranstjänsten kan användas av anpassade komponenter. Adobe rekommenderar utöka bildkomponenten i detta fall.
Följande är ett gränssnitt som kan användas för att generera resurs-URL:en.
com.adobe.cq.wcm.spi.AssetDelivery.getDeliveryURL(Resource resource, Map<String, Object> parameterMap)
Den här tjänsten tar en resursresurs som obligatorisk första parameter och kan ta en valfri karta över önskade bildomformningar som ska användas och som kan innehålla följande parametrar.
path
- Tillgångs-ID som ska levereras måste ha ett mönster ([^:\[\]\|\*\/]+)
(t.ex.: unicorn–1234
)seoname
- Användardefinierat SEO-centrerat namn som ska läggas till i bild-URL:en, kan innehålla bindestreck, måste vara av mönstret ([\w-]+)
(t.ex.: my-friend-the-unicorn
)format
- Det önskade bildformatet, kan gif
, png
, png8
, jpg
, pjpg
, bjpg
, webp
, webpll
, webply
(t.ex.: webp
)preferwebp
- Leverera om möjligt WebP-utdata utan att ta hänsyn till format
parameter (se Frågor och svar om innehållsförhandling), boolesk (t.ex.: true
)width
- Den önskade bildupplösningen i pixlar måste vara större än 1 (t.ex.: 400
)quality
- den önskade komprimeringen, mellan 1
och 100
(t.ex.: 75
)c
- Önskade bildbeskärningskoordinater, kommaavgränsade pixelvärden (t.ex.: 100,100,400,200
)r
- Den önskade bildrotationen kan 90
, 180
, 270
(t.ex.: 90
)flip
- Den bild som du vill vända, kan h
, v
, hv
(t.ex.: h
)Se föregående avsnitt Aktivera webboptimerad bildleverans för kärnkomponenter för ett exempel-URL och reguljära uttryck.
Nej, det här ska aldrig hända.