Share
Når du utvikler eller oppdaterer et nettsted, bør noen av dine kjernemål levere en optimal sluttbrukeropplevelse og forbedre nettstedskonverteringer, siden disse to fasene er nøkkelen til kjøreinntekter og forbedrer bedriftens bunnlinje. Men et problem du kan oppdage er at mens den voksende bruken av bilder resulterer i en mer tiltalende design, kan det påvirke nettstedets ytelse negativt.
I dag tegner bilder for mer enn 60% av nedlastet innhold på en nettside, så optimalisering av bilder kan gi betydelige ytelsesforbedringer. Imidlertid er bildeoptimalisering både en kunst og en vitenskap, som krever nøye vurdering av ulike parametere og en delikat balanse mellom innhold, format, kvalitet og dimensjoner.
Enten ditt webprogram støtter brukeropplastede bilder, du leverer statiske bilder, eller du viser profilbilder fra sosiale nettverk, må du sannsynligvis manipulere dem slik at de passer til den grafiske utformingen av nettstedet ditt. I denne veiledningen vil vi utforske funksjonene som tilbys av Cloudinarys omfattende skybaserte bilde- og videostyringsløsning. Du får se hvordan det kan hjelpe deg med å optimalisere bilder og til slutt forbedre nettstedets ytelse.
Bildeformater kan ha betydelig innvirkning på belastningstider. Men manuell bestemmelse av optimal format og koderinnstillinger for hvert bildes innhold kan være komplisert og ineffektivt.
Cloudinary bestemmer og leverer dynamisk hvert bilde i det mest effektive formatet, basert på bildeinnhold og visning av nettleser. Bilder kan lastes opp til Cloudinary i forskjellige formater og enkelt konverteres til andre formater. For eksempel kan den automatisk levere bilder som WebP til Chrome eller JPEG-XR til Internet Explorer. I noen tilfeller kan PNG velges når du trenger å bevare gjennomsiktigheten.
Det er mange grunner til at du kanskje vil endre det levert bildeformat:
For å levere bilder i et annet format, bare angi det nye formatet som filtypen for leveringsadressen. Når du bruker klare SDKer, kan du enten angi det nye formatet som en utvidelse til ressursnavnet eller bruke formatparameteren.
Eksempel:
Se demonstrasjonen.
Juster komprimeringskvaliteten automatisk
Presis justering av komprimeringskvalitet og kodingsinnstillinger kan redusere filstørrelsene betydelig uten merkbar forringelse i visuell kvalitet. Å finne de riktige innstillingene for hvert bilde er imidlertid mer komplisert enn det høres ut.
Cloudinary automatiserer filstørrelsen mot kvalitetsavgjørelse. Cloudins intelligente kvalitet og kodingsalgoritmer analyserer hvert bilde for å finne den optimale balansen, og produsere et perceptuelt fint bilde mens du minimerer filstørrelsen. Ved å analysere hvert bilde enkeltvis for å finne det optimale komprimeringsnivået og bildekodingsinnstillingene, kan du justere kompresjonsnivået presis ved hjelp av finjustering av kodingsinnstillingene, og kan redusere filstørrelsen betydelig uten å bli forringet i det menneskelige øye.
Eksempel:
 |  |
Se demonstrasjonen.
Du kan se bildets transformasjon her.
Å levere bilder med dimensjoner større enn den nødvendige skjermstørrelsen, bruker unødvendig båndbredde og senker sidelasten. Men manuell oppretting av flere versjoner av hvert bilde for å passe til ulike skjermoppløsninger kan være ressursintensiv. Cloudinary gjør det mulig å dynamisk skalere bildeoppløsning for å betjene den optimale versjonen som samsvarer med brukerens enhetsoppløsning og visningsdimensjoner uten å levere unødvendige piksler.
I tillegg krever bilder ofte beskjæring for å passe responsive oppsett og mangfoldige enhetsdimensjoner. Den Cloudinary Content-aware beskjæringsalgoritmen bruker en kombinasjon av heuristikk til automatisk å oppdage regionen av interesse for hvert bilde og deretter beskjære det på fly.
Disse intelligente beskjærefunksjonene sikrer at fokuset på hvert bilde er inkludert i det resulterende avledede bildet, ikke bare for bilder med ansikter, men for hvilken som helst innholdstype. Hvert bilde analyseres individuelt for å finne den optimale regionen å fokusere på.
Opprinnelig bilde:
Eksempel på forskjellige avlinger:
Se demonstrasjonen.
For å se bildet via transformasjonsadressen, se det her.
Cloudinary gjør at du enkelt kan forvandle bildene dine i fly til et ønsket format, stil og dimensjon, og optimaliserer også bilder for å få minimal filstørrelse for en bedre brukeropplevelse og for å spare båndbredde.
I hjertet av Cloudinary-løsningen er evnen til å levere bilder ved hjelp av dynamiske nettadresser via et raskt, verdensomspennende innholdsleveringsnettverk (CDN). URL-adressen inneholder den offentlige IDen til det forespurte bildet, pluss eventuelle valgfrie transformasjonsparametere. Det offentlige ID er den unike identifikatoren for bildet, og er enten angitt når du laster opp bildet til din Cloudinary-konto, eller tildeles automatisk av Cloudinary.
Eventuelle transformasjons- (manipulasjons) instruksjoner kan legges til for offentlig ID i leveringsadressen. Når URL-adressen er første gang, blir det avledede bildet opprettet i fly og levert til brukeren. Det avledede bildet lagres også på CDN og er umiddelbart tilgjengelig for alle påfølgende brukere som ber om det samme bildet.
Disse tipsene er bare noen få måter som Cloudinary kan hjelpe deg med å optimalisere bilder for nettstedet ditt, for å forbedre ytelsen og sluttbrukeropplevelsen.
Cloudinary-nettstedet gir detaljert dokumentasjon for hvordan disse funksjonene fungerer. Du kan også finne blogginnlegg som forklarer de 10 beste feilene du kan gjøre i håndtering av nettsider og hvordan du kan løse dem, samt hvordan du analyserer nettsider for å forbedre hastigheten og redusere båndbreddekostnadene.
Accentsconagua
