Dokumentation Handel Användarhandbok om Commerce i molninfrastrukturen

Snabb bildoptimering

Last update: Mon Jul 15 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

Skapat för:

Administratör
Utvecklare

Snabb bildoptimering (Fast IO) ger bildredigering i realtid och optimering för snabbare bildleverans och enklare underhåll av bildkällorna för responsiva webbapplikationer. När Fast IO har konfigurerats har den följande funktioner för bildoptimering:

Tvinga förlustkonvertering
Djupgående bildoptimering
Adaptiva pixelproportioner
Stöd för vanliga bildformat: PNG, JPEG, GIF och WebP

Innan du aktiverar och konfigurerar alternativet för snabb IO måste du konfigurera tjänsten Snabb och konfigurera origin-skydd.

Baserat på dina konfigurationsinställningar infogar kodavsnittet Fast Image Optimization (Fast IO) VCL-koden för att utföra den bildoptimering som snabbar upp produktleveransen i butiken. Det finns tre steg för att konfigurera IO-funktionen snabbt: Aktivera, Konfigurera och Verifiera.

Aktivera snabb IO

Aktivera snabb bildoptimering (Snabb IO) från panelen Admin genom att ladda upp VCL-kodfragmentet Fast IO. Utdraget innehåller snabbkonfigurationsinstruktioner för att bearbeta alla bilder med hjälp av bildoptimerare, med hjälp av standardkonfigurationer.

Förutsättningar:

Installera eller uppgradera till Snabb modulversion 1.2.62 eller senare
Konfigurera skärm med fast startpunkt och serverdel

Så här aktiverar du snabb IO:

Logga in som administratör på din lokala Admin -panel.
Välj Lagrar > Inställningar > Konfiguration > Avancerat > System.
Expandera Helsidescache i den högra rutan.
Välj Snabb konfiguration > Bildoptimering för att ange konfigurationsinställningarna.
I fältet Snabbt IO-kodfragment väljer du Aktivera/inaktivera.
Ladda upp IO-kodutdraget Fast:
- Välj Standardalternativ för I/O-konfiguration för att öppna sidan med standardkonfigurationsalternativ för bildoptimering.
- Välj Överför om du vill överföra VCL-fragmentet till servern.

Konfigurera IO snabbt

Granska och uppdatera standardinställningarna för I/O-konfiguration för bildoptimering efter behov. Du kan till exempel ändra WebP- och JPEG-kvalitetsnivåerna för förstörande format, eller ändra formatet för visning av JPEG-bilder till Progressiv eller Baslinje. Du kan även använda Fast IO för mer detaljrika bildoptimeringsfunktioner, som:

Tvinga förlustkonvertering
Djupgående bildoptimering
Adaptiva pixelproportioner

Så här uppdaterar du snabbt IO:

Välj Konfigurera på sidan Snabb konfiguration i fältet Standardalternativ för I/O-konfiguration.
Granska och uppdatera IO-konfigurationsinställningarna snabbt på sidan Standardkonfigurationsalternativ för bildoptimering:
- Automatisk WebP? - lämna standardinställningen (Yes) för att konvertera bilder till WebP-format i webbläsare som stöder det. Om du ändrar inställningen till Nej används bildfiltypen i stället för att bilden konverteras till WebP-format.
- Standardkvalitet för WebP (förstörande) - lämna standardinställningen (85) eller skriv in komprimeringsnivån för förstörande filformaterade bilder. Du kan ange ett heltal mellan 1 och 100.
- Standardformatkontroller för JPEG - låt standardinställningen (Auto) stå kvar, eller välj den JPEG-typ som ska användas när en bild visas. Om värdet är inställt på Auto levereras bilder med den utdatatyp som matchar indatatypen fast. Välj Baslinje om du vill visa bilderna rad för rad från det övre vänstra hörnet till det nedre högra hörnet. Välj Progressiv om du vill visa en suddig bild som blir tydlig när den läses in.
- Standardkvalitet för JPEG - lämna standardinställningen (85) eller skriv in komprimeringsnivån för kvalitet på förlustfilformat. Ange ett heltal mellan 1 och 100.
- Tillåt uppskalning? - lämna standardinställningen (No), eller välj Yes om du vill att bilder som är större än originalkällfilen ska returneras så att de får plats med de begärda dimensionerna.
- Ändra storlek på filter - behåll standardinställningen (Lancsoz3) eller välj ett alternativ. Den här inställningen anger vilket filter som används för att skapa en storleksändrad bild. Beroende på vilket filter som är markerat kan den storleksändrade bilden ha ett högre eller lägre antal pixlar.
  - Lanczos3 (standard) - Ger bilden med bäst kvalitet. Det ökar möjligheten att identifiera kanter och linjära funktioner i en bild och använder sinc-omsampling för att ge bästa möjliga rekonstruktion.
  - Lanczos2 - Använder samma filter som Lancsoz3 men med en mindre exakt uppskattning av omsamplingsfunktionen sinc.
  - Bicubic - Har en naturlig skärpeeffekt när en bild blir mindre.
  - Bilinear - Har en naturlig utjämningseffekt när du gör en bild större.
  - Nearest - Har en naturlig pixelförvandlingseffekt när du ändrar storlek på pixelbilder.
När du har angett IO-konfigurationsinställningar för tjänsten Snabbt väljer du Avbryt för att återgå till inställningarna för snabb konfiguration.
I konfigurationsfältet Aktivera djupbildsoptimering i Bildoptimering väljer du Ja för att aktivera djupbildsoptimering.

Djupbildsoptimering är inaktiverat som standard. När den här funktionen är aktiverad inaktiveras den inbyggda storleksförändringsfunktionen i Adobe Commerce och storleksändringen avlastas till tjänsten Snabbt IO. Bildoptimering gäller endast produktbilder. Storleken på CMS-bilder ändras inte. Se Snabbt dokumentation.
När du har aktiverat djupbildsoptimering aktiverar du funktionen adaptiva pixelproportioner för att generera bilder som är optimerade för användning på responsiva webbplatser.
- Välj Ja i fältet Aktivera pixelproportioner för adaptiva enheter.
- Acceptera standardinställningen i fältet Enhetspixelproportioner eller markera kryssrutan Systemindata om du vill ta bort inställningen. Välj sedan önskat förhållande. En högre inställning för pixelproportioner för enheten ger större bilder.
Välj Spara konfiguration.

Tvinga förlustkonvertering

Som standard tvingar tjänsten Fast IO konvertering av förlustfria format som PNG, BMP eller WEBP till JPEG/WEBP-format.

Fördelen med att tvinga fram förlustkonvertering är att mindre bilder används.
Om du till exempel använder formaten JPEG eller WEBp i stället för PNG kan storleken minskas med 60 till 70 procent beroende på den kvalitetsnivå som anges i Snabb IO-konfiguration.

Beroende på vilken kvalitetsnivå som valts för bildoptimering kan du uppleva skillnader i bild. Kanal/genomskinlighet för Alpha tas till exempel bort och ersätts med en vit bakgrund, om du inte använder Djup bildoptimering som använder bakgrundsfärgen för temat.

Om du inaktiverar förlustkonvertering (WebP Auto? = No) ändras JPEG-bilder endast till WEBP-format för kompatibla webbläsare. Inga andra bildtyper ändras. Om den ursprungliga bilden till exempel är PNG är utdata från tjänsten Snabb IO PNG.

Djupgående bildoptimering

Djupbildsoptimering är inaktiverat som standard. Om du aktiverar det här alternativet inaktiveras den inbyggda storleksändringen i Adobe Commerce och den avlastas helt till tjänsten Fast IO.
Den här funktionen ändrar bara storlek på product-bilder. Storleken på CMS-bilder ändras inte.

Om du aktiverar djupbildsoptimering läggs en bakgrundsfärgdefinition till i alla bilder som definieras i ditt tema. Detta resulterar i att WebP-bilder växlas från förlustfria WebP-bilder till förlustfria WebP-bilder. En av de största skillnaderna mellan förlustfri och förstörande är att alfakanalen tas bort från PNG-bilder, som innehåller mycket mindre bilder. Bilder med genomskinlighet kan dock se udda ut på produkt- och kampanjsidor som använder en annan bakgrund.

Följande kod representerar till exempel den ursprungliga källan för en bild från Luma-temat:

<img class="product-image-photo"
     src="https://mymagentosite/pub/media/catalog/product/cache/f073062f50e48eb0f0998593e568d857/m/b/mb02-gray-0.jpg"
     width="240"
     height="300"
     alt="Fusion Backpack"/>

När funktionen för snabb IO-djup-optimering är aktiverad skrivs den ursprungliga källkoden för bilden om enligt följande exempel:

<img class="product-image-photo"
     src="https://mymagentosite/pub/media/catalog/product/m/b/mb02-gray-0.jpg?width=240&height=300&quality=80&bg-color=255,255,255&fit=bounds"
     width="240"
     height="300"
     alt="Fusion Backpack"/>

Adaptiva pixelproportioner

Funktionen Adaptiva pixelproportioner är användbar för att optimera bilder för progressiva webbprogram. Du kan leverera flera bildstorlekar och upplösningar från en bildkällfil genom att lägga till en srcset för varje produktbild.

När funktionen Adaptiva pixelproportioner är aktiverad levererar tjänsten Snabb IO en bild med fast bredd som kan anpassas till varierande device-pixel-ratios.
Tjänsten ändrar till exempel produktbilddefinitionen så som visas i följande exempel:

<img class="product-image-photo"
     srcset="https://mymagentosite/pub/media/catalog/product/m/b/mb02-gray-0.jpg?width=240&height=300&quality=80&bg-color=255,255,255&fit=bounds&dpr=2 2x,
  https://mymagentosite/pub/media/catalog/product/m/b/mb02-gray-0.jpg?width=240&height=300&quality=80&bg-color=255,255,255&fit=bounds&dpr=3 3x"
     src="https://mymagentosite/pub/media/catalog/product/m/b/mb02-gray-0.jpg?width=240&height=300&quality=80&bg-color=255,255,255&fit=bounds"
     width="240"
     height="300"
     alt="Fusion Backpack"/>

Se srcset webbläsarstöd och specifikation.

Validera IO snabbt

När du har aktiverat och konfigurerat Snabbt IO validerar du konfigurationen genom att utföra hastighetstester på webbsidor med och utan Fast IO aktiverat. Granska även bilderna i din butik för att kontrollera bildstorlek och utseende.

recommendation-more-help

05f2f56e-ac5d-4931-8cdb-764e60e16f26