Hur man Hanterar och Optimerar Bilder i en Webbshop [E-handel]

Fler och fler produkter i olika design resulterar i ett enormt antal produktbilder som måste visas i en webbutik.

För att öka butikens prestanda behöver du optimal bildlogik som förenklar redigering och import till butikssystemet. Enhetlig och högpresterande lösning kan implementeras på basis av ett e-handelssystem som Magento 2 från Adobe Commerce.

Innehållsförteckning

Strategi mot floden av bilder

Tillväxten av ett e-handelsföretag åtföljs vanligtvis av ett ökat utbud av produkter. Och ju fler varianter ett företags produkter har, desto fler produktbilder krävs för webbshoppen. Dessutom tillkommer nya bilder för många produktvarianter hela tiden.

Syftet är att optimera sidans prestanda med alla bilder i moderna format och att ha kontroll över bildkvalitet och urval. Det ska inte längre vara nödvändigt att generera bilder i frontend, vilket har haft en negativ inverkan på prestandan. Det är nödvändigt att konvertera de befintliga bilderna utan kvalitetsförlust och föra dem samman med de nya på ett konsekvent sätt med beteckningarna. Samtidigt är det viktigt att snabbt och enkelt integrera nya och gamla bilder.

I det följande ska vi gå in lite på hur dessa åtgärder kan se ut.

Accelererad import

Ett grundläggande krav för många för konverteringsprocessen är att bilderna ska göras tillgängliga på en extern server i alla önskade storlekar.

Synkroniseringstekniken rsync kan användas som hjälpmedel. Detta kompletteras på butiksservern av det Linux-baserade verktyget Cron, som startar synkroniseringsprocessen vid önskad tidpunkt.

Med Magento-modulen är bearbetningstiden per bild för helt färdiga filer max 0,1 sekunder. För varianter som fortfarande måste genereras för de speciella kraven vad gäller upplösning och skärning är max 0,7 sekunder.

Överföringen av kompletta bilduppsättningar när nya kollektioner introduceras kan påskyndas avsevärt tack vare de nya funktionerna: det kan ofta ta flera veckor att synkronisera cirka 200 olika färgprodukter med olika storlekar, men det kan nu ta bara några timmar. Att generera bilderna med hjälp av ett externt verktyg går snabbt, men har problem med vissa färgskärmar. Därför, som en lösning på medellång sikt, bör målet vara att helt förlita sig på förgenererade bilder från den externa tjänsteleverantören.

Bildformat på en ny nivå

För att få alla framtida bilder till en enhetlig kvalitetsnivå kan man visa dem i WebP-format. Det här formatet är modernare än det traditionella JPG: det tillåter förlustfri komprimering med högre bildkvalitet än JPG-format.

Så länge som alla nödvändiga upplösningar är tillgängliga i detta format för en bild, spelas den alltid upp som WebP. Om så inte är fallet växlar webbläsaren till JPG-filen via en reserv. WebP-formatet, å andra sidan, laddas mycket snabbare. Det förbättrar inte bara användarupplevelsen av webbplatsen för kunderna, utan har också en positiv effekt på betyget i sökmotorerna.

Dessutom kan systemet kring bildstorlekar och presentationen av produktvarianterna justerats. Det är vanligt att varje produkt genererar och laddar upp flera bilder för de individuella designerna (t.ex. olika klädstorlekar). Men kan man istället ha fler standardbilder för många variantgrupper i artiklarna.

Detta minskar också antalet oönskade bilddubbletter. Om det till exempel handlar om en behå som finns i olika färger och för olika bröstomkretsar och kupstorlekar, behöver inte längre en separat bild laddas upp för vart och ett av dessa attribut. Till exempel, för en vit behå av en viss typ, visas en bild för alla storlekar.

Namnlogik reviderad

För att Magento-modulen ska kunna känna igen vilken bild som tjänar vilket syfte är det också viktigt för den nya bildlogiken att standardisera bildernas beteckningsmönster. Utifrån detta bör även en riktad indelning i mappstrukturer fungera. Man kan därför markera filnamnen med följande element, som skapar en bildbeskrivning från en enda källa:

Ett huvudnummer för moderprodukten, bifogat med en kod för de olika färgerna, om tillämpligt

Suffix för olika vyer av produkten (t.ex. ”_back” för baksidan)

Alla element i filnamnen i detta mönster är avgränsade med ett understreck. Informationen från detta filnamn kan användas för att avgöra vilka produkter som tillhör en bild och vilken typ av representation en bild är. Ytterligare information hämtas från produkterna, såsom namn och produktserie. Av detta skapar modulen meningsfulla alternativa texter till bilderna. Sådana alternativa texter är ett viktigt bidrag på vägen till tillgänglighet för webbplatser och nätbutiker.

Hittills har standardförhandsvisningsbilden som ställts in av modulen alltid fungerat som huvudbild.

Tack vare alla dessa skräddarsydda åtgärder kan man effektivisera sin webbutik betydligt.