For mange gründere og markedsførere er det visuelle essensielt for virksomheten deres. Bilder kan ha en enorm innvirkning både på brukere og på ytelsen til et nettsted, og derfor er det viktig å mestre bildeoptimalisering for nettstedets velvære.
Hva er egentlig bildeoptimalisering og hvordan optimaliserer du bilder for nettsider? Vi deler med deg alle de nødvendige trinnene du må ta vare på for å sikre at bildene dine lastes uten problemer.
I denne oversikten vil vi lede deg gjennom følgende emner:
Når du optimerer bilder, reduserer du størrelsen uten å sette bildekvaliteten i fare. Og når du reduserer størrelsen på filene dine, lastes sidene inn raskere. Dette er viktig for både SEO og de besøkende. Jo raskere innholdet ditt lastes helt inn, desto lavere vil fluktfrekvensen være. En annen ting å huske på når det kommer til bilder er imperativet med god oppløsning, som betyr bilder av høy kvalitet. Å øke oppløsningen til et bilde ved å bruke verktøy som Photoshop er ganske enkelt, så du må unnskylde for å spare på det. Men la oss gå tilbake til emnet vårt i dag, som er bildeoptimalisering for hastighetsformål.
For rundt et tiår siden bestemte Google seg for å inkludere nettstedshastighet blant sine relevante rangeringsfaktorer. En av deres webansvarlige, John Mueller, skrev det tilbake i 2016 nettsteder bør ta mindre enn 2-3 sekunder å laste, og dette er fortsatt aktuelt den dag i dag.
Over tid har Google til og med utviklet verktøy som f.eks Googles PageSpeed Insights, for å hjelpe folk med å evaluere nettsidens hastighet. Utallige andre verktøy tjener samme formål, f.eks Pingdom, GTmetrix, eller Sidevekt (som forteller deg hvor mye bilder påvirker sidehastigheten din), men PageSpeed Insights er fortsatt ganske populær blant SEO-eksperter.
Ikke glem å bruke optimaliseringsverktøy for bedre rangering, noen av dem er helt gratis.
Hvis bildene dine er for store, vil Google sannsynligvis ikke kunne gjennomsøke og indeksere dem, og dette kan være en annen medvirkende årsak til lavere rangeringer. Ikke glem at noen av de besøkende kommer fra Google Bildesøk (du kan sjekk bildetrafikken din i Google Analytics), så gjør ditt beste for å beholde dem.
En annen fordel med å bruke mindre bildefiler er det du kan lage sikkerhetskopier på kort tid. De også ta opp mindre lagringsplass (noe som vil redusere kostnadene for backuplagring) og suge opp mindre båndbredde. De fleste hostingplaner kommer med visse båndbreddegrenser per plan, så du bør bruke bildene dine på en smart måte.
Filformatering
La oss starte med å vise deg hvordan du velger riktig filformat. Det finnes mange bildeformater der ute, men de tre vanligste er:
Bildedimensjoner
Bilder du tar med smarttelefonen eller et profesjonelt kamera har store oppløsninger på rundt 300 dpi og dimensjonene på minst 2000 px og over. Men så store bilder passer ikke for nettsteder, de tar evigheter å laste. Visst, du vil at bildene dine skal se imponerende ut, men likevel må lastetiden være lav. Det er derfor du må endre bildestørrelsen i Photoshop eller annen bilderedigeringsprogramvare etter eget valg før du legger dem til på nettstedet ditt. Selve oppløsningen betyr til syvende og sist ikke så mye som vekten på bildet, som må holde seg under 100 kb, eller 150 kb maks. Men mer om det i neste kapittel.
Bildekomprimering
Hvis du overdriver og komprimerer bildet for mye, vil det resultere i en liten filstørrelse og et bilde av lav kvalitet. På den annen side, når en komprimeringshastighet ikke er stor, har bildene god kvalitet, men er også store.
Som en tommelregel, den totale vekten til nettstedet ditt bør ikke overstige 2 MB. Ideelt sett bør størrelsen på den hurtiglastende nettsiden være rundt 1 MB.
Med det i tankene, vurdere å holde bildene dine på rundt 150 KB eller mindre. Hvis du bruker PNG-formatet, ikke gå over 100 KB.
Det finnes to typer kompresjon: tapsfri og tapsfri.
Tapende eller irreversibel kompresjon betyr at noen av dataene og kvaliteten vil gå tapt fra den originale versjonen. Selv etter at du har redusert størrelsen på filen betraktelig, ser det ut til at det ikke er noen merkbare forskjeller. Selvfølgelig, ved nærmere ettersyn, vil disse forskjellene være mer tydelige. Hvis den nye filstørrelsen er for liten, kan du se noen pikselerte områder og taggete kanter på bildet.
Tapsfri kompresjon er en metode som lar deg redusere bildestørrelsen uten å forringe kvaliteten. Ingen data går tapt når en fil er tapsfritt komprimert, noe som betyr at de originale dataene kan gjenopprettes når som helst. Men siden ingen data fjernes, kan filer ikke komprimeres med mer enn 50 %.
Bildenavn
Ikke overse dette trinnet. Å gi riktige navn til bildefilene dine er viktig for bilde-SEO, siden Google og andre søkemotorer gjennomsøker navn på bildefilene dine. Unngå generiske navn, men gå heller nedover den beskrivende ruten og inkludere søkeord. Hvis det for eksempel er et bilde av en bil på nettstedet ditt, kan du spesifisere merke og modell i filnavnet.
Det er også viktig å optimalisere alt-attributter aka tekstalternativer til bilder. Hvis en nettleser av en eller annen grunn ikke kan gjengi et bilde, vil den alternative teksten vises i stedet. Selv når en side lastes helt inn, vises alt-attributter hvis du holder markøren over et bilde. De betyr ganske mye ettersom de påvirker nettstedets SEO og øker sjansene for at bildene dine vises i Googles bildesøk. Bare vær forsiktig så du ikke overfyller alt-attributtene dine med søkeord, siden søkemotorer kan straffe deg for å gjøre det.
Forhåndsvisning av uskarpt bilde
Dette trinnet handler om skape inntrykk av bilder av høy kvalitet som lastes raskt inn ved å laste inn den lavere kvalitetsversjonen av et bilde først. Mens de besøkende venter på at nettstedet skal lastes helt, vises den mindre versjonen av bildet. Det er strukket til den opprinnelige størrelsen, og det virker uskarpt, men dette varer bare en liten stund før bildet i full størrelse lastes inn. Selv om det krever litt grunnleggende CSS-kunnskap, skaper uskarphet-effekten er faktisk ganske gjennomførbart.
Bildeoptimeringsverktøy lar deg endre bildene dine etter dine behov. Du kan komprimere dem, endre filtyper, endre bildedimensjoner osv.
Adobe Photoshop
Det mest populære bilderedigeringsverktøyet er utvilsomt Adobe Photoshop. Den har noen imponerende bilderedigeringsfunksjoner, men Lagre for web alternativ er spesielt interessant.
Når du trenger å redusere størrelsen på ett av bildene dine uten å sette kvaliteten på spill, bruk dette alternativet. Det vil tillate deg velg bildetype, bildekvalitet og dimensjoner. Følg med på Kvalitet og uskarphet alternativer. Ved å endre dem (selv uten å berøre andre innstillinger), kan du opprettholde et bilde av høy kvalitet som ikke veier mye.
Bildeoptimaliseringsplugins i WordPress
WordPress kommer med mange smarte plugins som kan hjelpe deg med å optimalisere bildene dine uten for mye oppstyr. Men uansett hvor kraftig hver av dem er, bør du fortsatt endre størrelsen på bildene dine før du laster dem opp til WordPress, ellers kan du miste mye verdifull vertsplass.
Noen av de beste pluginene for bildeoptimalisering inkluderer Optimole, EWWW Image Optimizer Cloud, Tenk deg, Smush, Optimus – WordPress Image Optimizer, og Komprimer JPEG- og PNG-bilder.
Smush er den mest populære, med over 1 million aktive nedlastinger, men uansett hvilken plugin du velger, vil alle hjelpe deg med å optimalisere bilder slik at nettstedet ditt kan lastes raskere. Det eneste du kan se etter er det en plugin du installerer kan komprimere og optimere bilder eksternt, på sine egne servere. På den måten vil ikke sidens lastetid bli påvirket av bildestørrelser.
Konklusjon
Bildeoptimalisering er en av de avgjørende faktorene for nettstedets feilfrie ytelse. Hvis det gjøres dårlig, risikerer du lave rangeringer, høye lastetider, i tillegg til stor sprett og lave konverteringsfrekvenser. Å optimalisere bilder på riktig måte vil ikke bare hjelpe deg med å lede en mer vellykket nettbedrift, men det vil spare deg for mye lagringsplass på nettstedet du sikkert trenger ettersom nettstedet ditt fortsetter å utvikle seg og utvides.
Det kom aldri noe godt fra dårlig UX, så følg tipsene våre om hvordan du kan optimalisere bilder for nettet, og nettstedet ditt vil fungere som et smurtverk.
Støtt vårt arbeid ❤️
Hvis du likte denne artikkelen, vurder å gi en tips for å hjelpe oss med å fortsette å publisere kvalitetsinnhold.
