Bilder er en av de viktigste elementene i et anstendig nettsted. De tar tak i besøkendees oppmerksomhet, gjør innholdet mer delbart og tvinger brukerne til å ta tiltak (for eksempel kjøp av produkter).

Men å legge til høyoppløselige bilder, eller de med store filstørrelser, kan gjøre nettstedet ditt sakte og gi dårlig brukeropplevelse for sluttbrukeren. Det er virkelig ingen unnskyldning for å levere en dårlig brukeropplevelse med de mange verktøyene der ute som kan hjelpe deg å komprimere bildene dine uten et merkbart tap i kvalitet og til og med automatisere prosessen for deg.

I denne artikkelen vil jeg vise deg mange måter å optimalisere bilder for bruk på nettet og mer spesifikt på WordPress-nettsteder.

Velg riktig filformat

JPEG og PNG er to av de mest populære bildefilformatene på nettet. JPEG er et komprimert format som vanligvis brukes til bilder som inneholder mange farger, mens PNG er mye bedre for bilder med tekst, illustrasjoner, logoer, skjermbilder og gjennomsiktige bilder. Et annet vanlig format er GIF som passer best til bilder med få farger eller bilder med store områder av samme farge. GIF brukes mest for animerte bilder på nettet i dag.

De fleste bilderedigeringsprogramvarene lar deg lagre filen i mange forskjellige formater. Å velge riktig format vil sikre at du får det skarpeste bildet som er mulig, noe som bør forbedre brukeropplevelsen på nettstedet ditt.

Bruk riktig størrelse og oppløsning

Du må være forsiktig når du legger til bilder på nettstedet ditt. Det regnes som den beste fremgangsmåten for å lagre bildene dine i samme bredde og høyde som den vil vises på nettsiden og med den minste filstørrelsen som mulig uten å miste kvalitet.

Komprimer bildene dine før du laster opp

Det er mange verktøy der ute som vil hjelpe deg å komprimere bildene dine før du laster dem opp til serveren din. Photoshop har for eksempel en praktisk "lagre for web og enheter" -funksjonen som lar deg velge format og kvalitetsinnstillinger. Du vil også se filstørrelsen for bildet ditt når du bruker en bestemt innstilling. Andre bildehåndteringsverktøy som GIMP tilbyr lignende alternativer.

Nettbaserte komprimeringsverktøy finnes også, for eksempel Picresize, Kraken.io og TinyPNG, hvor du kan laste opp dine høyoppløselige bilder, optimalisere dem og laste ned komprimert format for bruk på Internett.

Komprimer bilder etter opplasting

Det finnes flere plugins for dette formålet, og en av de mest populære er WP Smush som hjelper til med å optimalisere JPEG, PNG eller GIF-formater enkeltvis eller i bulk ved hjelp av dedikerte servere. Den fjerner bare metadata og ubrukte farger fra filene for å senke filstørrelsen. Med den gratis versjonen er du begrenset til bilder 1 MB og under, men du kan fjerne denne begrensningen ved å oppgradere til Pro-versjonen som tillater opptil 5 MB.

En annen stor plugin med lignende funksjoner er EWWW Image Optimizer som kan hjelpe deg med å konvertere bildene dine til formatet som gir lavest mulig filstørrelse.

Det finnes andre tilgjengelige på WordPress-depotet, så vær så snill å utforske. Det er de to jeg har brukt tidligere, og de jobber begge bra, så de burde være gode nok for deg også.

Merk bildene dine riktig

Bortsett fra å endre størrelsen på bildene dine, er det en god måte å gi en god opplevelse på nettstedet ditt ved å merke bildene dine riktig. Dette betyr at du alltid bruker " alt " -attributtet i tilfelle bildet ikke kunne lastes inn eller for skjermlesere, slik at de besøkende får en tekstbasert beskrivelse av bildet. Det hjelper også søkemotorer med å indeksere bilder bedre på nettstedet ditt, og kan hente deg en betydelig mengde søketrafikk.

Hvis du legger til tekster når det er nødvendig, er det en fin måte å hjelpe nettstedet ditt til å forstå bildet bedre. Serring riktig beskrivende tittelkoder og bildefilnavn hjelper på samme måte. Så i stedet for å lagre bildene dine som " FXSCSUYE.jpg ", bruk en beskrivende tittel og navn med søkeord som er relevante for emnet og nettstedet ditt. Dette er også bra fra et SEO-synspunkt.

Lazy-Loading

Lazy Loading er en teknikk som brukes av mange nettsteder for å spare båndbredde ved bare å laste bilder når en bruker ruller til visningsrammen på bildet. De første bildene lastes umiddelbart, men andre vil vente til brukeren er i nærheten av bildet før du laster inn. Hvis du legger til denne funksjonen på nettstedet ditt, sparer du båndbredde for deg og brukeren din og forbedrer hastigheten på websidene dine. BJ Lazy Load er et flott plugin for å legge Lazy Loading til ditt WordPress-nettsted.

Bruk et Content Delivary Network

Ved å bruke et Content Delivery Network (CDN), reduseres belastningen på serveren betydelig og øker ytelsen til nettstedet ditt. En CDN vil ganske enkelt tjene ressurser fra serveren nærmest plasseringen til brukeren som ber om det. For eksempel, hvis en besøkende fra Beijing ber om et bilde, og CDN du bruker, har en server i Seoul og Sydney, vil bildet bli servert fra serveren i Seoul.

MaxCDN er en høyverdig CDN som du kan prøve, og det finnes andre som CloudFlare, CDN.net og mer.

Bunnlinjen

Optimalisering av bilder for bruk på nettet er en av de største måtene å forbedre nettstedets lastetid og generelle brukeropplevelse. Hvis du har noen andre optimaliseringsteknikker du vil dele, vennligst gjør det i kommentarene nedenfor.