Webboptimerad bildleverans

Senaste uppdatering: 2024-02-01
  • Skapat för:
  • Developer
    Admin
    User

Läs om hur Core Components kan utnyttja AEM as a Cloud Service webboptimerade funktioner för bildleverans för att leverera bilder effektivare.

Ökning

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!

Aktivera webboptimerad bildleverans för kärnkomponenter

Aktivera webboptimerad bildleverans genom att redigera en sidmall och helt enkelt aktivera 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.

Aktivera webboptimerad bildleverans i designdialogrutan

Så ja! Bilderna levereras nu med Image Component i WebP-format.

När du har aktiverat webboptimerad bildleverans kanske du vill kontrollera din dispatcherkonfiguration för att verifiera att den inte blockerar begäran till bildleveranstjänsten. Se this FAQ entry för mer information.

Verifierar WebP-leverans

Webboptimerad bildleverans är transparent för konsumenten. Det enda som slutanvändaren kommer att märka är snabbare laddningstid. För att kunna observera eventuella beteendeförändringar måste du därför kontrollera innehållstypen för de återgivna bilderna i webbläsaren. Alla moderna webbläsare har stöd för WebP. Du kan referera till den här webbplatsen om du vill ha information om webbläsarstöd.

  1. I AEM redigerar du en sida som är baserad på mallen där du aktiverad webboptimerad bildleverans för bildkomponenten.
  2. I sidredigeraren väljer du Sidinformation längst upp till vänster och sedan Visa som publicerad.
  3. Öppna webbläsarens utvecklarverktyg och välj fliken Nätverk.
  4. Läs in sidan igen och sök efter HTTP-begäranden som läser in bilderna och kontrollera innehållstypen för bilden som webbläsaren tog emot.

När webboptimerad bildleverans inte är tillgänglig

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.

Om du återgår till den adaptiva bildservern ändras src attributet för img -element i sidkällan.

Vanliga frågor

Varför finns det inget alternativ för att aktivera webboptimerade bilder i min miljö?

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.

Varför fungerar inte tjänsten med den lokala SDK:n?

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.

Varför fungerar inte tjänsten för vissa bilder på min sida?

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.

Varför visas en bild med sämre kvalitet eller så begränsas bildstorleken?

När bildobjekt under /content/dam bearbetas AEM as a Cloud Service miljöer genererar optimerade renderingar med olika dimensioner. Den webboptimerade bildtjänsten analyserar den bredd som Image Core Component kräver, tar hänsyn till den ursprungliga bilden och alla renderingar som är 2 048 pixlar och mindre, och väljer den största av dessa (inom bildtjänsten för storlek och dimensionsbegränsningar kan hantera, för närvarande 50 MB och 12kx12k) som bas för de begärda inställningarna (bredd, beskärning, format, kvalitet osv.).

För att bevara originalets återgivning skalförändras inte bilderna. Ovannämnda återgivningar definierar den bästa kvalitet som bildtjänsten kan leverera. Eftersom du ofta inte kan påverka storleken och/eller dimensionerna på den ursprungliga bildresursen bör du kontrollera att alla bildresurser har en zoomåtergivning på 2 048 pixlar och om de inte gör det, bearbeta om dem.

URL-adressen till bilderna slutar fortfarande med .JPG eller .PNG, inte .WEBP, och det finns inget SRCSET-attribut eller PICTURE-element. Använder detta verkligen optimerade webbformat?

För att leverera WebP-format utför den webboptimerade bildleveranstjänsten serverdriven innehållsförhandling. Detta hjälper till att välja det optimala utdataformatet för bilden baserat på klientens annonserade funktioner, vilket gör att bildleveranstjänsten kan ignorera filtillägget.

Fördelen med att använda innehållsförhandling är att webbläsare som inte annonserar stöd för WebP fortfarande får filformatet JPG eller PNG utan att några ändringar behöver göras i markeringen av sidan. Detta ger optimal kompatibilitet för befintliga webbplatser och garanterar en så smidig övergång som möjligt till webboptimerad bildleverans.

Kan jag använda webboptimerad bildleverans med min egen komponent?

Ja, den webboptimerade bildleveranstjänsten kan användas av anpassade komponenter som byggs av utöka bildkomponenten,

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)
VARNING

Inbäddning av direkt URL-adress i en upplevelse som inte har byggts via tidigare nämnda SPI (som finns AEM as a Cloud Service webbplatser) bryter mot Användningsvillkor för Media Library.

Kan bilder inte visas när webboptimerade bilder har aktiverats?

Nej, det ska aldrig ske av följande skäl.

  • I HTML ändras inte markeringen när webboptimerade bilder aktiveras, utan bara värdet för src ändras för bildelementet.
  • När den nya bildtjänsten inte är tillgänglig eller inte kan bearbeta den önskade bilden, kommer den URL som skapas att tillbaka till Adaptive Image Servlet.

Dispatcheringsregler kan dock blockera den webboptimerade bildleveranstjänsten. URL:er för bildleveranstjänsten börjar med /adobeoch undersöker avsändarloggarna för avvisade begäranden som beskrivs här bör hjälpa till att felsöka eventuella fel som uppstår när bilderna levereras till webbläsaren.

På denna sida