DokumentationAEM as a Cloud ServiceAnvändarhandbok

Bästa tillvägagångssätt för att optimera bildkvaliteten best-practices-for-optimizing-the-quality-of-your-images

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

Skapat för:

  • Användare

Att optimera bildkvaliteten kan vara en tidskrävande process eftersom många faktorer bidrar till att återge godtagbara resultat. Resultatet är delvis subjektivt eftersom individer upplever olika bildkvalitet. Strukturerade experiment är avgörande.

Adobe Experience Manager innehåller över 100 Dynamic Media-kommandon för att justera och optimera bilder och återge resultat. Följande riktlinjer kan hjälpa dig att effektivisera processen och uppnå goda resultat snabbt med några viktiga kommandon och bästa metoder.

Aktivera Smart Imaging i Dynamic Media bp-enable-smart-imaging

Smart bildåtergivning:

  • Om du aktiverar Smart Imaging i Dynamic Media kan du automatiskt optimera bildformat, storlek och kvalitet baserat på webbläsarens funktioner.
    Vill du veta mer? Gå till Smart bildbehandling.
  • Den förbättrar bildens prestanda genom att dynamiskt justera dessa parametrar.
  • Du kan utvärdera Smart Imaging med självutvärderingsverktyget Snapshot.

Bildformat:

  • Undvik att använda explicita fmt=webp- eller fmt=avif-kommandon i en URL om det inte krävs särskilt för ett användningsfall.
  • Smart Imaging väljer automatiskt det bästa formatet, vilket ger optimala bandbreddsvinster.

Standardbeteende:

  • Om inget formatkommando har angetts i URL:en och Smart Imaging inte har aktiverats används JPEG-formatet som standard för bildleverans i Dynamic Media.

Genom att göra välgrundade val i bildformat och aktivera Smart Imaging kan du påverka prestanda och användarupplevelser avsevärt.

Bästa tillvägagångssätt för att välja källbild bp-select-source-image

Viktiga överväganden när du arbetar med källbilder:

  • Source bildformat:

    • Med förlustfria format som PNG, TIFF och PSD kan du vara säker på att bildkvaliteten förblir hög utan några komprimeringsartefakter.
    • Dessa format bevarar alla ursprungliga data, vilket gör dem idealiska för redigering och vidare bearbetning.

  • Source bildstorlek:

    • Från och med en högupplöst bild får du mer detaljrikedom och flexibilitet.
    • När bilder måste visas i olika storlekar (till exempel på olika enheter eller skärmupplösningar) ger en större källbild bättre skalning.
    • För bilder som har stöd för zoomning (t.ex. produktfoton) bör du rikta in dig på dimensioner på minst 2 000 pixlar på den längsta sidan.
    • Logotyper och banderoller som inte kräver zoomning kan laddas upp i den största storlek som behövs för deras avsedda användning.

Genom att göra dessa noggranna val på källnivå kan du bidra avsevärt till den övergripande kvaliteten på det visuella innehållet.

Bästa tillvägagångssätt för bildstorlek best-practices-for-image-size

Att minska bildstorleken dynamiskt är en av de vanligaste uppgifterna. Det handlar om att ange storleken och, om så önskas, vilket nedsamplingsläge som används för att nedskala bilden.

  • För storleksändring av bilder är det bästa och enklaste sättet att använda &wid=<value> och &hei=<value>, eller bara &hei=<value>. Dessa parametrar ställer automatiskt in bildbredden i enlighet med proportionerna.
  • &resMode=<value>styr den algoritm som används för nedsampling. Börja med &resMode=sharp2. Det här värdet ger den bästa bildkvaliteten. Nedsamplingen value =bilin är snabbare, men leder ofta till aliasing av artefakter.

Använd &wid=<value>&hei=<value>&resMode=sharp2 eller &hei=<value>&resMode=sharp2 om du vill ändra bildstorlek

Bästa tillvägagångssätt för bildskärpa best-practices-for-image-sharpening

Bildskärpa är den mest komplicerade aspekten när det gäller att styra bilder på webbplatsen och var många misstag görs. Ta dig tid att lära dig mer om hur skärpa och oskarp maskning fungerar i Experience Manager genom att titta på följande resurser:

Med Experience Manager kan du öka skärpan i bilder vid intag, vid leverans eller både och. Normalt är det dock bäst att öka skärpan i bilder med bara en metod eller en annan, men inte med båda. Att skärpa bilderna vid leverans, på en URL-adress, ger oftast bäst resultat.

Det finns två metoder för bildskärpa:

  • Enkel skärpa ( &op_sharpen) - Precis som skärpefiltret som används i Photoshop, tillämpar enkel skärpa grundläggande skärpa på den slutliga vyn av bilden efter den dynamiska storleksändringen. Den här metoden kan dock inte konfigureras av användaren. Det bästa sättet är att undvika att använda &op_sharpen om det inte behövs.

  • Oskarp maskering ( &op_USM) - Oskarp maskering är ett skärpefilter som är branschstandard. Det bästa sättet är att göra bilder skarpare med oskarp maskering enligt riktlinjerna nedan. Med Oskarp maskning kan du styra följande tre parametrar:

    • &op_sharpen=belopp,radie,tröskelvärde

      • amount (0-5, effektens styrka.)
      • radius (0-250, bredden på de"skärpelinjer" som ritas runt det skarpa objektet, mätt i pixlar.)

      Tänk på att parametrarnas radie och mängd fungerar mot varandra. Minskad radie kan kompenseras genom att öka beloppet. Med radie får du bättre kontroll eftersom ett lägre värde ökar skärpan endast för kantpixlarna, medan ett högre värde ökar skärpan för ett större antal pixlar.

      • threshold (0-255, effektkänslighet.)

      Den här parametern avgör hur annorlunda de pixlar som ska göras skarpare måste vara från det omgivande området innan de betraktas som kantpixlar och filtret gör dem skarpare. Parametern threshold hjälper till att undvika att göra områden med liknande färger, som hudtoner, för mycket skarpare. Ett tröskelvärde på 12 ignorerar till exempel små variationer i hudtonens ljusstyrka för att undvika att lägga till"brus", samtidigt som kantkontrasten läggs till i områden med hög kontrast, till exempel där ögonfransarna möter huden.

      Mer information om hur du ställer in de här tre parametrarna, inklusive de bästa sätten att använda med filtret, finns i följande resurser:

Ett tips är att börja med parametern unsharp mask radius. Radie-inställningar som du kan börja med är följande:

  • Website: 0,2-0,3 pixlar
  • Photographic printing (250-300 ppi): 0,3-0,5 pixlar
  • Offset printing (266-300 ppi): 0,7-1,0 pixlar
  • Canvas printing (150 ppi): 1,5-2,0 pixlar

Öka mängden gradvis från 1,75 till 4. Om skärpan fortfarande inte är som du vill ha den ökar du radien med ett decimalkomma och kör mängden igen från 1,75 till 4. Upprepa vid behov.

Lämna den monokroma parameterinställningen på 0.

Bästa tillvägagångssätt för JPEF-komprimering (&qlt=) best-practices-for-jpef-compression-qlt

  • Den här parametern styr JPG kodningskvaliteten. Ett högre värde innebär en bild med högre kvalitet men en stor filstorlek. Ett lägre värde innebär en bild med lägre kvalitet men mindre filstorlek. Intervallet för parametern är 0-100.

  • Om du vill optimera kvaliteten ska du inte ange parametervärdet 100. Skillnaden mellan en inställning på 90 eller 95 och 100 är nästan osynlig. Och ändå ökar 100 bildfilens storlek i onödan. Om du vill optimera för kvaliteten men undvika att bildfilerna blir för stora anger du därför qlt= value till 90 eller 95.

  • Om du vill optimera för en liten bildfilsstorlek men behålla bildkvaliteten på en acceptabel nivå anger du qlt= value till 80. Värden under 70 till 75 ger en signifikant försämring av bildkvaliteten.

  • För att vara i mitten bör du ange qlt= value till 85 för att förbli i mitten.

  • Använda kroma-flaggan i qlt=

    • Parametern qlt= har en andra inställning som gör att du kan aktivera nedsampling av färgvärden i RGB med värdet ,1 eller inte med värdet ,0.
    • Om du vill göra det enkelt kan du börja med nedsampling av färgförändringar i RGB inaktiverat (,0). Den här inställningen ger vanligtvis bättre bildkvalitet, särskilt för syntetiska bilder med många skarpa kanter och kontrast.

Använd &qlt=85,0 som bästa praxis för komprimering JPG.

Bästa tillvägagångssätt för att ändra storlek på JPEG (&jpegSize=) best-practices-for-jpeg-sizing-jpegsize

Parametern jpegSize är användbar om du vill garantera att en bild inte överskrider en viss storlek för leverans till enheter som har begränsat minne.

  • Den här parametern anges i kilobyte (jpegSize=&lt;size_in_kilobytes&gt;). Det definierar den största tillåtna storleken för bildleverans.
  • &jpegSize= interagerar med JPG komprimeringsparametern &qlt=. Om JPG svar med den angivna JPG-komprimeringsparametern (&qlt=) inte överskrider ejpegSize-värdet returneras bilden med &qlt= enligt definitionen. Annars minskas &qlt= gradvis tills bilden får plats i den högsta tillåtna storleken. Eller tills systemet avgör att det inte får plats och returnerar ett fel.

Det bästa är att ange &jpegSize= och lägga till parametern &qlt= om du levererar JPG-bilder till enheter med begränsat minne.

Sammanfattning av bästa praxis best-practices-summary

Det bästa sättet att uppnå hög bildkvalitet och liten filstorlek är att börja med följande kombination av parametrar:

fmt=jpg&qlt=85,0&resMode=sharp2&op_usm=1.75,0.3,2,0

Den här kombinationen av inställningar ger utmärkta resultat under de flesta omständigheter.

Om bilden behöver optimeras ytterligare finjusterar du stegvis skärpeparametrarna (oskarp maskning) genom att börja med radien 0,2 eller 0,3. Därefter ökar du mängden gradvis från 1,75 till maximalt 4 (vilket motsvarar 400 % i Photoshop). Kontrollera att resultatet är det önskade.

Om skärpeeffekten fortfarande inte är tillräcklig ökar du radien i decimalsteg. För varje decimalsteg startar du om beloppet vid 1,75 och ökar det gradvis till 4. Upprepa den här processen tills du uppnår önskat resultat. Värdena ovan är en metod som de kreativa studierna har validerat, men kom ihåg att du kan börja med andra värden och följa andra strategier. Oavsett om resultaten är tillfredsställande för dig eller inte är en subjektiv fråga, så är strukturerade experiment avgörande.

Följande allmänna förslag är användbara när du experimenterar för att optimera arbetsflödet:

  • Testa olika parametrar i realtid direkt på en URL.
  • Det är en god vana att gruppera Dynamic Media Image Serving-kommandon i en bildförinställning. En bildförinställning är i princip URL-kommandomakron med anpassade förinställningsnamn som $thumb_low$ och &product_high$. Det anpassade förinställningsnamnet i en URL-sökväg anropar de här förinställningarna. Den här funktionen hjälper dig att hantera kommandon och kvalitetsinställningar för olika användningsmönster för bilder på webbplatsen och förkortar den totala längden på URL-adresser.
  • Experience Manager har också mer avancerade sätt att finjustera bildkvaliteten, t.ex. genom att använda skärpebilder vid intag. Adobe Consulting-tjänster kan hjälpa dig med anpassade insikter och metodtips för att optimera återgivningsresultaten.
recommendation-more-help
fbcff2a9-b6fe-4574-b04a-21e75df764ab