Hastighedsoptimering med WebP
Webshop Classic kan sættes til automatisk at generere en optimeret udgave af de produktbilleder du lægger op. Billedet konverteres til WebP og gemmes side om side med en kopi i JPG format. På denne måde kan shoppen servere billedet i WebP format hvis browseren understøtter dette, og ellers benyttes JPG billedet som “fallback” til ældre browsere.
WebP er et billedformat, der oprindeligt er udviklet af On2 Technologies (nu Google) og som er designet til at fylde mindre end de gængse billedformater, men med mulighed for samme kvalitet. Google Page Speed anbefaler WebP som et optimeringsparameter, netop for at få en hurtigere side. 94% af alle browsere understøtter WebP medio 2021, omend ikke alle billedbehandlingsprogrammer gør det.
Opsætning
Gå til Indstillinger > Shopindstillinger > Billeder:
- Konverter billeder til WebP: Denne funktion bevirker at alle produktbilleder som uploades i formaterne JPG, PNG og GIF, konverteres til WebP og tilsvarende billeder i JPG (der fungerer som fallback). WebP filerne får samme navn og placering som original filerne, bare med filtypen “.webp”.
- WebP-kvalitet: Denne indstilling bestemmer kvaliteten af konverteringen og dermed også størrelsen på WebP filen. Som med andre billedkonverteringer danner originalfilen grundlaget for konverteringen inkl. evt. begrænsninger originalfilen måtte introducere (lav opløsning/størrelse, høj komprimering mv.).
Klik Gem når du har foretaget dine valg.
TIP: Hvis du uploader et WebP billede med WebP konvertering aktiveret, så vil systemet automatisk generere det JPG billede der benyttes som fallback, hvis ældre browsere ikke understøtter WebP.
Eksempel
I dette eksempel har vi uploadet vores produktbillede “Appelsin.png”. I shoppens mediearkiv kan vi efterfølgende se at shoppen har genereret tilsvarende WebP og JPG filer ud fra de størrelser som er angivet i shoppens indstillinger:
Systemet overskriver eksisterende billedfiler hvis vi gentager processen. Havde vi f.eks. uploadet et JPG billede som vores originale billede, ville tilsvarende WebP og JPG filer stadigvæk blive genereret som vist herover. Endelserne “-o”, “-p”, “-r”, og “-t” tilføjes automatisk filnavne som indikator for billedtypen.
Hvis du uploader billeder direkte i mediearkivet, skal du sørge for at der er sat markering i “Autoscaler (bruges kun til produktbilleder)” i upload dialogen, for at den automatiske konvertering til WebP slår igennem:
Bemærk: Billeder der allerede ligger i shoppens mediearkiv konverteres ikke automatisk til WebP når funktionen “Konverter billeder til WebP” aktiveres i shoppens indstillinger.
Konvertering af eksisterende billedfiler
Benyt WebP konvertering til automatisk konvertering af billederne på det ønskede produkt. Hvis du ønsker at konvertere eksisterende billeder manuelt i shoppens mediearkiv kan dette gøres med funktionen “Rescaler“, som arbejder på mappeniveau. Dette betyder at der oprettes tilsvarende WebP filer ud fra alle original-filer som findes i mappen (original filer kendes på “-o” i enden af filnavnet). I eksemplet herunder har vi højreklikket på den ønskede mappe og valgt “Rescaler” hvorefter shoppen har oprettet WebP versioner af alle original filerne:
Denne funktion overskriver eksisterende WebP billeder i den pågældende mappe. Det vil sige at du f.eks. foretage en reskalering og tjekke om kvaliteten af billederne er som forventet, og hvis ikke kan du ændre dine shopindstillinger for WebP-kvalitet (se længere oppe i artiklen) og herefter køre optimeringen igen.
Bemærk: Hvis du har mange billeder i den pågældende mappe, bør du som udgangspunkt ikke benytte massekonvertering via reskalering i shoppen, da dette lægger en belastning på din shop hvilket kan påvirke performance. Foretag i stedet konvertering af mange billeder på en lokal computer som beskrevet herunder.
Se sektionen i bunden af denne artikel for, hvordan du efterfølgende associerer de nye billedfiler med eksisterende produkter.
Massekonvertering til WebP
Hvis du ønsker at foretage konvertering af mange billeder til WebP kan du benytte følgende muligheder:
- WebP konvertering (op til 10.000 produkter)
- Konvertering via API (over 10.000 produkter, forudsætter kodeerfaring)
- Manuel konvertering (se herunder)
Hvis du ønsker at foretage konvertering af mange billeder til WebP kan du enten at benytte WebP- eller API konvertering som beskrevet her, eller foretage en manuel konvertering som beskrevet herunder. Manuel konvertering har til formål at binde færre ressourcer på shoppens server, hvilket også gælder for Konvertering via API.
Til manuel konvertering kan du f.eks. benytte Irfan View med WebP-plugin -begge dele er gratis og findes via linket.
Vigtigt: Hvis du tilføjer WebP billeder manuelt via FTP skal du sørge for at supplere en udgave af samme billede i JPG format, med samme navn så shoppen har et alternativ til WebP som kan serveres hvis browseren ikke understøtter WebP. I eksemplet herover vil vi derfor skulle konvertere vores PNG filer til både WebP og JPG.
Se sektionen herunder for, hvordan du efterfølgende associerer de nye billedfiler med eksisterende produkter.
Associering af nye billedfiler med eksisterende produkter
Når du har konverteret eller uploadet nye billedfiler manuelt skal du sørge for at opdatere dine produkter, så produkterne associeres med de nye WebP billedfiler. Dette kan gøres ved at eksportere de pågældende produkter i XML-format og lave en search/replace på filendelserne, fra “.jpg”, “.png” og “.gif” til “.webp”.
Sørg for både at sætte markering ved “Produktfoto” og “Billeder” nederst på siden i eksport dialogen, for at få alle billedstierne ud i din XML-eksport (dette er ikke muligt i en CSV-eksport):
Her har vi erstattet filendelserne “.png” med “.webp” i vores eksporterede fil, som vi herefter importerer i shoppen således, at vi får de nye billedfiler bundet op på produkterne:
Du kan læse mere om import af produkter her. Denne funktionalitet forudsætter at du er tryg ved at arbejde med import/eksport af produkter.
Bemærk: Import/Eksport funktionaliteten er et tilkøb til shoppen. Alternativt kan filassocieringen foretages manuelt ved, at tilføje billederne til hvert enkelt produkt.
