Snelle optimalisatie van afbeeldingen

Snelle optimalisatie van afbeeldingen (Fastly IO) biedt realtime beeldbewerking en optimalisatie om de levering van afbeeldingen te versnellen en het onderhoud van sets met afbeeldingsbronnen voor responsieve webtoepassingen te vereenvoudigen. Zodra gevormde Fastly IO de volgende eigenschappen van de beeldoptimalisering verstrekt:

  • Omzetting met verlies forceren
  • Diepe optimalisatie van afbeeldingen
  • Aangepaste pixelverhoudingen
  • Ondersteuning voor algemene afbeeldingsindelingen: PNG, JPEG, GIF en WebP

Alvorens u toelaat en de Fastly optie IO vormt, moet u opstelling uw Snelle dienst en vormt de Beveiliging van de Oorsprong.

Op basis van uw configuratie-instellingen voegt het fragment Fastly Image Optimization (Fastly IO) de VCL-code in om de beeldoptimalisatie uit te voeren, waardoor de levering van productafbeeldingen in de winkel sneller verloopt. Er zijn drie stappen om Fastly IO te vormen: toelaten, vormen, en verifieer.

SNELLE IO inschakelen

Schakel Fastly Image Optimization (Fastly IO) in vanuit het deelvenster Beheer door het fragment Fastly IO VCL te uploaden. Het fragment bevat de instructies voor een snelle configuratie voor het verwerken van alle afbeeldingen met behulp van standaardconfiguraties.

Eerste vereisten:

om snel IO toe te laten:

  1. Login aan uw lokaal Adminpaneel als beheerder.

  2. Selecteer > Montages > Configuratie > Geavanceerd > Systeem .

  3. In de juiste ruit, breid Volledig Geheime voorgeheugen van de Pagina uit.

  4. Selecteer Snelle Configuratie > Optimalisering van het Beeld om de configuratiemontages te specificeren.

  5. Op het snelst IO fragment gebied, uitgezocht toelaten/onbruikbaar maken.

  6. Upload het fragment Fastly IO:

    • Selecteer StandaardIO configuratieopties om de standaard configuratieoptiepagina van het Beeld te openen optimalisering.
    • Selecteer uploaden om het fragment VCL aan uw server te uploaden.

SNELLE IO configureren

Controleer en werk zo nodig de standaard IO-configuratie-instellingen voor optimalisatie van afbeeldingen bij. Bijvoorbeeld, zou u WebP en de kwaliteitsniveaus van de JPEG voor lossy formaten kunnen willen veranderen, of het formaat veranderen om de beelden van JPEG te dienen aan Progressieve of Basislijn. Bovendien kunt u de snelste IO gebruiken voor meer functies voor het optimaliseren van afbeeldingen, zoals:

  • Omzetting met verlies forceren
  • Diepe optimalisatie van afbeeldingen
  • Aangepaste pixelverhoudingen

om snel IO bij te werken:

  1. Op de Snelle pagina van de Configuratie op het StandaardIO configuratieopties gebied, uitgezocht vorm.

    Mening de Snelle IO configuratiemontages

  2. Herzie en werk de Fastly IO configuratiemontages op de standaard configuratieopties van het Beeld pagina bij:

    van de het overzicht snel IO configuratie

    • AutoWebP? - verlaat standaard het plaatsen (Yes) om beelden in formaat om te zetten WebP in browsers die het steunen. Als u het plaatsen in Nr verandert, gebruikt het snelst het type van beelddossier in plaats van het omzetten van het beeld in formaat WebP.

    • Standaard WebP (verlies) kwaliteit - verlaat het gebrek dat (85) plaatst of het compressieniveau voor verlies dossier-geformatteerde beelden typt. U kunt een geheel getal tussen 1 en 100 opgeven.

    • Standaard JPEG formaatcontroles - verlaat het gebrek plaatsend (Auto), of selecteer het type van JPEG te gebruiken wanneer het dienen van een beeld. Als de waarde aan Auto wordt geplaatst, levert de Fastly beelden met het outputtype dat het inputtype aanpast. Selecteer Basislijn aan vertoningsbeelden lijn door lijn die van bovenkant links en naar het bodemrecht beginnen. Selecteer Progressief om een vaag beeld te tonen dat duidelijk wordt aangezien het laadt.

    • Standaard JPEG kwaliteit - verlaat het gebrek dat (85) plaatst of het compressieniveau voor kwaliteit van lossy dossierformaten typt. Geef een geheel getal op tussen 1 en 100.

    • Upscaling toestaan? - laat standaard het plaatsen (No), of selecteer Yes om beelden terug te keren groter dan het originele brondossier zodat kunnen zij de gevraagde afmetingen passen.

    • Resize filter - verlaat het gebrek plaatsend (Lancsoz3), of selecteer een alternatief. Met deze instelling geeft u aan welk filter wordt gebruikt voor het leveren van een afbeelding waarvan de grootte is gewijzigd. Afhankelijk van het geselecteerde filter kan het gewijzigde formaat van de afbeelding een hoger of lager aantal pixels hebben.

      • Lanczos3 (standaard) - Levert de afbeelding van de beste kwaliteit. Het vergroot de mogelijkheid om randen en lineaire functies in een afbeelding te detecteren en het gebruik van sinc ​resampling voor de beste reconstructie.
      • Lanczos2 - Hiermee wordt hetzelfde filter gebruikt als Lancsoz3 , maar met een minder nauwkeurige benadering van de functie Nieuwe pixels berekenen in sinc.
      • Bicubic - Dit filter heeft een natuurlijk verscherpingseffect wanneer u een afbeelding kleiner maakt.
      • Bilinear - Dit filter heeft een natuurlijk vloeiend effect wanneer u een afbeelding groter maakt.
      • Nearest - Heeft een natuurlijk pixeleffect wanneer het resizing van pixelkunst.
  3. Nadat u de IO configuratiemontages voor de Snelle dienst specificeert, annuleert de uitgezochte ​om aan de Fastly configuratiemontages terug te keren.

  4. In de configuratie van de Optimalisering van het Beeld laat diep beeld optimalisering gebied toe, selecteer ja om diepe beeldoptimalisering aan te zetten.

    laat Snelle IO diepe beeldoptimalisering toe

    Diepe optimalisatie van afbeeldingen is standaard uitgeschakeld. Als deze functie is ingeschakeld, wordt de ingebouwde functie voor het aanpassen van de grootte in Adobe Commerce uitgeschakeld en wordt het vergroten of verkleinen van de grootte overgelaten aan de Fastly IO-service. Optimalisatie van afbeeldingen geldt alleen voor productafbeeldingen. De grootte van CMS-afbeeldingen wordt niet gewijzigd. Zie de Snelle documentatie.

  5. Nadat u diepe beeldoptimalisering toelaat, laat de adaptieve pixelverhoudingeigenschap toe om beelden te produceren die voor gebruik in ontvankelijke websites worden geoptimaliseerd.

    laat snel IO aanpassende pixelverhoudingen toe

    • Op laat adaptieve de pixelverhoudingen van het apparatenapparaat gebied toe, uitgezochte ja.
    • Op het pixelverhoudingen van het Apparaat gebied, keur het gebrek het plaatsen goed, of selecteer het de controlevakje van de Invoer van het Systeem om het plaatsen te verwijderen. Selecteer vervolgens de gewenste verhouding. Een hogere instelling voor pixelverhoudingen voor apparaten levert grotere afbeeldingen op.
  6. Selecteer sparen Configuratie.

Omzetting met verlies forceren

Standaard dwingt de Fastly IO-service de conversie van verliesvrije indelingen zoals PNG, BMP of WEBP naar de indeling JPEG/WEBP.

Het voordeel van een gedwongen omzetting met verlies is dat kleinere afbeeldingen worden gebruikt.
Als u bijvoorbeeld de indeling JPEG of WEBp gebruikt in plaats van PNG, kan de grootte met 60 tot 70 procent worden verkleind, afhankelijk van het kwaliteitsniveau dat is opgegeven in de Fastly IO-configuratie.

Afhankelijk van het kwaliteitsniveau dat is geselecteerd voor optimalisatie van de afbeelding, kunnen er visuele verschillen in afbeeldingen optreden. Alpha kanaal/transparanties worden bijvoorbeeld verwijderd en vervangen door een witte achtergrond, tenzij u de optie Diepe afbeelding optimaliseren gebruikt en de achtergrondkleur van uw thema gebruikt.

Als u het omzetten met verlies (WebP Auto? = No) uitschakelt, wijzigt Fastly IO slechts JPEG beelden in formaat WEBP voor compatibele browsers. Er worden geen andere afbeeldingstypen gewijzigd. Als de oorspronkelijke afbeelding bijvoorbeeld PNG is, is de uitvoer van de service Fastly IO PNG.

Diepe optimalisatie van afbeeldingen

Diepe optimalisatie van afbeeldingen is standaard uitgeschakeld. Als u deze optie inschakelt, wordt het formaat van de ingebouwde Adobe Commerce uitgeschakeld en wordt het volledig geoffload naar de Fastly IO-service.
Deze eigenschap resizes slechts productafbeeldingen 0}. De grootte van CMS-afbeeldingen wordt niet gewijzigd.

Als u uitgebreide optimalisatie van afbeeldingen inschakelt, voegt u een achtergrondkleurdefinitie toe aan elke afbeelding zoals die in uw thema is gedefinieerd. Het resultaat is dat WebP-afbeeldingen worden overgeschakeld van WebP-verlies naar WebP-verlies. Een van de belangrijkste verschillen tussen verliesloos en verlies is dat bij verlies het alfakanaal van PNG-afbeeldingen wordt verwijderd, wat veel kleinere afbeeldingen oplevert. Afbeeldingen met transparanties kunnen er echter vreemd uitzien op product- en campagnepagina's die een andere achtergrond gebruiken.

De volgende code vertegenwoordigt bijvoorbeeld de oorspronkelijke bron voor een afbeelding van het thema Luma:

<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"/>

Wanneer de functie Fastly IO Deep image optimization is ingeschakeld, wordt de oorspronkelijke broncode voor de afbeelding herschreven, zoals in het volgende voorbeeld wordt getoond:

<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"/>

Aangepaste pixelverhoudingen

De functie Adaptieve pixelverhoudingen is handig voor het optimaliseren van afbeeldingen voor progressieve webtoepassingen. Hiermee kunt u meerdere afbeeldingsgrootten en resoluties van één afbeeldingsbronbestand leveren door een srcset toe te voegen voor elke productafbeelding.

Wanneer de functie Aangepaste pixelverhoudingen is ingeschakeld, levert de Fastly IO-service een afbeelding met een vaste breedte die zich kan aanpassen aan variaties device-pixel-ratios .
De service wijzigt bijvoorbeeld de definitie van de productafbeelding, zoals in het volgende voorbeeld wordt getoond:

<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"/>

Zie srcset browser steunen specificatie.

SNEL IO valideren

Nadat u I.O. toelaat en snel vormt, bevestig uw configuratie door de tests van de Webpaginasnelheid met en zonder Fastly toe te laten IO uit te voeren. Lees ook de afbeeldingen in uw winkel om de afbeeldingsgrootte en de weergave op problemen te controleren.

recommendation-more-help
05f2f56e-ac5d-4931-8cdb-764e60e16f26