Share
När du utvecklar eller uppdaterar en webbplats, bör några av dina grundläggande mål leverera en optimal slutanvändarupplevelse och förbättra webbplatskonverteringar, eftersom dessa två aspekter är nyckeln till drivande intäkter och förbättrar företagets botten. Men ett problem du kan upptäcka är att medan din växande användning av bilder resulterar i en mer tilltalande design, kan det påverka webbplatsens prestanda negativt.
Idag står bilder för mer än 60% av hämtat innehåll på en webbsida, så optimering av bilder kan ge betydande prestandaförbättringar. Bildoptimering är emellertid både en konst och en vetenskap, som kräver noggrann utvärdering av olika parametrar och en delikat balans mellan innehåll, format, kvalitet och dimensioner.
Oavsett om din webbapplication stöder användaruppladdade bilder, du levererar statiska bilder, eller om du visar profilbilder från sociala nätverk, behöver du förmodligen manipulera dem för att passa den grafiska designen på din webbplats. I den här handledningen utforskar vi de funktioner som Cloudinary erbjuder omfattande molnbaserad bild- och videostyrningslösning. Du får se hur det kan hjälpa dig att optimera bilder och i slutändan förbättra din webbplatss prestanda.
Bildformat kan ha en betydande inverkan på belastningstider. Men manuell bestämning av optimala format och kodarinställningar för varje bilds innehåll kan vara komplext och ineffektivt.
Cloudinary bestämmer och levererar dynamiskt varje bild i det mest effektiva formatet baserat på bildinnehåll och visning av webbläsare. Bilder kan laddas upp till Cloudinary i olika format och enkelt konverteras till andra format. Till exempel kan det automatiskt leverera bilder som WebP till Chrome eller JPEG-XR till Internet Explorer. I vissa fall kan PNG väljas när du behöver behålla insynen.
Det finns många anledningar att du kanske vill ändra det levererade bildformatet:
För att leverera bilder i ett annat format, ange bara det nya formatet som filtillägg för leveransadressen. När du använder Cloudinary SDK-filer kan du antingen ange det nya formatet som en förlängning till resursnamnet eller använda formatparametern.
Exempel:
Se demo.
Justera komprimeringskvaliteten automatiskt
Precis justering av komprimeringskvalitet och kodningsinställningar kan avsevärt minska filstorleken utan märkbar försämring i visuell kvalitet. Att hitta rätt inställningar för varje bild är emellertid mer komplicerat än det låter.
Cloudinary automatiserar filstorlek kontra kvalitetsavvägningsbeslut. Cloudinarys intelligenta kvalitets- och kodningsalgoritmer analyserar varje bild för att hitta det optimala balansen och ger en perceptuellt fin bild samtidigt som filstorleken minimeras. Analysera varje bild individuellt för att hitta optimala komprimeringsnivåer och bildkodningsinställningar möjliggör exakt justering av komprimeringsnivån kompletterad med finjustering av kodningsinställningarna och kan avsevärt minska filstorleken utan försämring märkbar för det mänskliga ögat.
Exempel:
 |  |
Se demo.
Du kan se bildens omvandling här.
Om du levererar bilder med större dimensioner än den skärm som krävs måste du använda onödig bandbredd och sakta ner sidlastningen. Men manuellt skapa flera versioner av varje bild för att passa olika skärmupplösningar kan vara resurskrävande. Cloudinary gör det möjligt att dynamiskt skala bildupplösningen för att servera den optimala versionen som matchar varje användares enhetens upplösning och visningsdimensioner utan att leverera onödiga pixlar.
Dessutom kräver bilder ofta beskärning för att passa responsiva layouter och olika enhetsdimensioner. Den Cloudinary Content-aware beskärningsalgoritmen använder en kombination av heuristics för att automatiskt detektera regionen av intresse för varje bild och sedan beskära den på flyg.
Dessa intelligenta beskärningsfunktioner säkerställer att fokusen för varje bild ingår i den resulterande avledda bilden, inte bara för foton med ansikten, men för vilken innehållstyp som helst. Varje bild analyseras individuellt för att hitta den optimala regionen att fokusera på.
Originalbild:
Exempel på olika växtlägen:
Se demo.
För att se bilden via transformationsadressen, se den här.
Cloudinary gör att du enkelt kan omvandla dina bilder i flygning till alla nödvändiga format, stil och dimension och optimerar även bilder för att få minimal filstorlek för en förbättrad användarupplevelse och för att spara bandbredd.
Kärnan i Cloudinary-lösningen är möjligheten att leverera bilder med dynamiska webbadresser via ett snabbt, globalt innehållsleveransnätverk (CDN). Webbadressen innehåller det offentliga ID-en för den begärda bilden plus eventuella omvandlingsparametrar. Det offentliga ID är den unika identifieraren för bilden och anges antingen när du laddar upp bilden till ditt molnkonto eller automatiskt tilldelas av Cloudinary.
Eventuella instruktioner för omvandling (manipulering) kan läggas till före det offentliga ID-en i leveransadressen. När URL-adressen öppnas först skapas den härledda bilden i flyg och levereras till din användare. Den härledda bilden cachas också på CDN och är omedelbart tillgänglig för alla efterföljande användare som begär samma bild.
Dessa tips är bara några sätt som Cloudinary kan hjälpa dig att optimera bilder för din webbplats, för att förbättra prestanda och slutanvändarupplevelse.
Cloudinary-webbplatsen innehåller detaljerad dokumentation om hur dessa funktioner fungerar. Du kan också hitta blogginlägg som förklarar de 10 största misstag du kan göra i hanteringen av webbsidor och hur man löser dem, samt hur man analyserar webbsidor för att förbättra hastigheten och minska bandbreddskostnaderna.
Accentsconagua
