Er du ute etter å laste opp bilder til WordPress-siden din, men er du usikker på hvilke størrelser eller filtyper bildene skal ha? Er du ukjent med prosessen med å endre størrelse og komprimere bilder for nettet? I denne artikkelen vil jeg forklare hvorfor det er viktig å bruke riktig bildestørrelse for nettstedet ditt, samt vise deg hvordan du endrer størrelse og komprimerer bildene dine ved å bruke det gratis bilderedigeringsprogrammet GIMP.
Hvorfor det er viktig å endre størrelsen på bildene på nettstedet ditt
La oss begynne med hvorfor det er så viktig å endre størrelsen på bildene til nettstedet ditt.
Ifølge WordPress.org, spiller den generelle "fysiske størrelsen" på et bilde en stor rolle i ytelsen til en nettside. "Filstørrelsen [på et bilde] dikterer tiden det tar å laste inn siden din; jo større filstørrelsen er... jo lengre tid vil [en side] ta å laste." Med andre ord, opplasting av en stor filstørrelse til nettstedet ditt vil redusere ytelsen til siden du legger til innholdet på, og vanligvis vises som langsommere sideinnlastingshastigheter i nettstedets analysedata.
"Filstørrelsen [på et bilde] dikterer tiden det tar å laste inn siden din; jo større filstørrelsen er... jo lengre tid vil [en side] ta å laste."
-WordPress.org
Sideinnlastingshastighet, også referert til som "Page Speed," er "hvor raskt innholdet på siden din lastes," ifølge SEO-side Moz. Å ha tregere sider kan resultere i høyere "avvisningsrater," som er en fancy beregning som representerer økter der en besøkende forlater nettstedet ditt etter å ha sett en enkelt side. Langsommere sider kan også redusere tiden besøkende bruker på sidene til nettstedet ditt, ettersom folk kan bli utålmodige når de venter på at innholdet på en side skal lastes inn og forlate nettstedet ditt raskere.
Disse beregningene er viktige fordi du vanligvis vil at brukere skal bruke mer tid på nettstedet ditt og se på flere sider på nettstedet ditt.
De er også viktige fordi de spiller en rolle i hvordan nettstedet ditt rangerer på søkemotorresultatsidene, eller «SERP-er». SERPs er ganske enkelt resultatsidene som vises når du skriver inn et ord eller en setning i Google og trykker på enter-tasten. Fordi større bilder er et tegn på dårlig webdesignpraksis og negativt påvirker brukerens opplevelse mens du er på nettstedet ditt, kan søkemotorer som Google straffe nettstedet ditt for å ha disse større bildene og ranger nettstedet ditt under andre nettsteder som gir bedre resultater.
Jo lavere nettsiden din rangerer på for eksempel Google, jo mindre trafikk får siden din og jo mer trafikk vil gå til konkurrentene dine som rangerer over deg i søkeresultatene.
Ved å redusere filstørrelsen på bildene dine på nettstedet ditt, kan du forbedre din Page Speed og dermed forbedre andre beregninger som avvisningshastighet og tid på page for til slutt å forbedre rangeringene dine på søkemotorer.
Merk at det er mange andre viktige variabler som går inn i søkerangeringer, så å fikse bildene dine er bare en del av en solid SEO (Søkemotoroptimalisering) strategi. Imidlertid er det absolutt veldig viktig for å hjelpe nettstedet ditt til å rangere høyere på steder som Google for å øke trafikken til nettstedet ditt.
Hvordan endre størrelse på bilder for WordPress i GIMP
Så hvordan endrer du størrelsen på bilder riktig for WordPress?
Du kan redusere et bildes filstørrelse ganske enkelt ved å redusere den totale størrelsen på bildet ved å bruke skalering og beskjæring før du laster det opp til nettstedet ditt. I tillegg kan du bruke det som kalles "kompresjon” til bildet ditt for å redusere størrelsen ytterligere.
GIMP, den gratis og åpen kildekode-fotoredigereren, kan utføre alle disse oppgavene samtidig som den eksporterer til anbefalte «neste generasjons»-filformater for ytterligere å redusere bildenes filstørrelse og forbedre nettstedets ytelse.
Skaler bildet ditt
For å komme i gang med denne prosessen, åpne bildet du vil laste opp til nettstedet ditt til GIMP. Du kan gjøre dette ved å dra og slippe bildet fra datamaskinen til GIMPs bildevindu, eller du kan ganske enkelt gå til Fil>Åpne når du er inne i GIMP.
Hvis du bruker Fil>Åpne-metoden, naviger til plasseringen av bildet på datamaskinen din fra "Åpne bilde"-dialogen som vises, og dobbeltklikk på bildefilen når du har funnet den for å åpne den i GIMP (eller klikk på "Åpne"-knappen nederst til høyre i dialogvinduet).
Helt øverst i GIMP-vinduet er en funksjon kalt "Tittellinjen" (rød pil i bildet ovenfor). Her vil du se bildets nåværende dimensjoner (forstørret grønn boks på bildet). Bildet mitt er 1920×1280 – med det første tallet, 1920, som representerer bredden på bildet mitt (i piksler), og det andre tallet, 1280, representerer høyden på bildet mitt. De endelige bildedimensjonene du vil bruke for bildet ditt vil avhenge av hvor i WordPress du har tenkt å bruke bildet, samt hvilket tema du bruker.
For denne opplæringen vil jeg endre størrelsen på bildet mitt til standardstørrelsen på 1200 × 630 piksler som anbefales for bilder på blogginnlegg.
Med dette i tankene er det første jeg vil gjøre å beskjære bildet mitt slik at sideforholdet til originalbildet mitt samsvarer med sideforholdet til den anbefalte størrelsen. For å gjøre dette tar jeg tak i beskjæringsverktøyet mitt ved å trykke shift+c på tastaturet eller klikke på beskjæringsverktøyikonet i GIMP-verktøykassen (rød pil i bildet ovenfor).
Deretter, i Verktøyalternativer for dette verktøyet, merker jeg av i boksen ved siden av "Fixed" (grønn pil) og klikker på rullegardinmenyen for å velge "Aspect ratio" (blå pil).
Jeg skriver "1200:630" for å angi sideforholdet mitt i tekstfeltet under rullegardinmenyen (gul pil). Dette samsvarer med sideforholdet til den anbefalte bildestørrelsen jeg vil at mitt endelige bilde skal være.
Ved å bruke beskjæringsverktøyet vil jeg nå klikke og dra musen over bildet for å tegne beskjæringsområdet. Når jeg slipper musen, vil alt utenfor beskjæringsområdet være nedtonet (rød pil i bildet ovenfor - forutsatt at "Høydepunkt" er merket av i Verktøyalternativene, som det vanligvis er som standard).
Som standard har beskjæringsområdet mitt hjelpelinjer angitt som "Sentre linjer" (gul pil i bildet ovenfor). Jeg kan endre denne innstillingen ved å bruke rullegardinlistene til bunnen av Verktøyalternativene. For eksempel vil jeg endre guidene mine til "Rule of Thirds" (grønn pil). De ulike guidealternativene her er basert på fotograferingsprinsipper, noe som gjør det enkelt å ramme komposisjonen din ved å bruke disse prinsippene.
Du kan holde musen over hvilken som helst av sidene eller hjørnene av beskjæringsområdet (dvs. det uthevede området merket med den røde pilen i bildet ovenfor), og deretter klikke og dra for å endre størrelsen på grensen til beskjæringsområdet. Merk at du alltid kan se størrelsen på beskjæringsområdet ditt i "Størrelse"-feltene i Verktøyalternativene (skissert i grønt i bildet ovenfor). Du vil beholde den totale størrelsen på beskjæringsområdet større enn den endelige størrelsen på 1200 × 630 på bildet.
Du kan også klikke og dra musen i midten av beskjæringsområdet (rød pil) for å flytte beskjæringen på bildet.
Når du er klar til å beskjære bildet, klikker du én gang inne i beskjæringsområdet, og bildet vil bli beskåret.
Merk at hvis alternativet "Slett beskårne piksler" i Verktøyalternativene ikke er merket av (grønn pil i bildet ovenfor), vil den opprinnelige bildegrensen fortsatt vises rundt bildet via en gul stiplet linje (rød pil). Du kan gjenopprette det opprinnelige bildet, og dermed angre beskjæringen, ved å gå til Bilde>Tilpass lerret til lag. Bare området av bildet ditt innenfor lerretsgrensen vil bli eksportert.
Bildet vårt er nå beskåret til sideforholdet vi ønsker, men hvis du igjen ser på bildedimensjonene våre i "Tittellinjen" vil du se at bildet er 1532×804 (skissert i grønt og forstørret i bildet ovenfor – dimensjonene dine vil sannsynligvis være litt forskjellige basert på hvor stort du tegnet beskjæringsområdet på bildet). Vi må nå skalere bildet vårt for å matche ønsket dimensjoner.
For å gjøre dette, gå til Bilde> Skaler bilde (rød pil).
I "Scale Image"-boksen som vises, under "Image Size", sørg for at kjedelenkeikonet ved siden av "bredde" og "høyde"-boksene er koblet sammen (rød pil på bildet ovenfor). Deretter endrer du "Bredde" på bildet til 1200 (grønn pil). Trykk på tabulatortasten. Høyden på bildet vil automatisk oppdateres til "630." Under "Kvalitet", sørg for at rullegardinmenyen "Interpolering" (blå pil) er satt til enten "NoHalo" eller "LoHalo" for best bildekvalitet etter skaleringen. (For mer informasjon om interpolering, sjekk ut veiledningen min om emnet).
Trykk på "Skaler"-knappen for å skalere bildet ditt (gul pil).
Når skaleringen er fullført, sjekk ut bildedimensjonene i tittellinjen. Du skal nå se en bildestørrelse på 1200×630 – den nøyaktige størrelsen vi ønsker! Så hva gjør vi nå?
Komprimer bildet ditt ved å eksportere til WebP
Beskjæring og skalering av bildet reduserte filstørrelsen ved å redusere høyden på bildet fra 1920 til 1200 piksler, og bredden fra 1280 til 630 piksler, men vi kan redusere bildestørrelsen ytterligere ved å bruke komprimering når vi eksporterer bildet.
Så vi må nå eksportere bildet til et filformat som vil bruke komprimering på bildet uten merkbart å redusere kvaliteten på bildet. Selv om JPEG-er alltid er et godt alternativ, er det et enda bedre alternativ nå tilgjengelig: WebP.
WebP-formatet bruker mer komprimering enn JPEG, mens det påvirker kvaliteten på bildet mindre enn en JPEG gjør. Med andre ord vil du få et bedre bilde med en mindre filstørrelse. I tillegg støttes WebP-formater av alle topp 5 nettlesere.
For å eksportere til WebP, gå til Fil>Eksporter som (rød pil).
Klikk på en av mappene i "Steder"-delen (skissert i grønt) for å velge bildet på datamaskinen din der du vil lagre bildet. Du kan ganske enkelt dobbeltklikke på en mappe for å gå inn i den, og se hvilken mappe du befinner deg i ved siden av "Lagre i mappe"-tittelen (rød pil). Gi så nytt navn til bildet ditt til det du vil – bare sørg for at du avslutter bildenavnet med utvidelsen ".webp" (blå pil) for å eksportere bildet i WebP-formatet. Når du er klar, klikker du på "Eksporter" nederst til høyre i vinduet (gul pil).
Deretter vil "Eksporter bilde som WebP"-dialogen vises. Sørg for at «Lossless» ikke er merket av (rød pil). Jeg setter vanligvis "Bildekvalitet" til 80 (blå pil - dette er en prosent, så jo lavere prosentandel, jo lavere blir kvaliteten på bildet, men jo mindre blir bildefilstørrelsen). Hvis bildet ditt ikke inneholder gjennomsiktighet (dvs. en logo uten bakgrunn), trenger du ikke å bekymre deg for "Alpha quality"-glidebryteren (faktisk, i et eksperiment jeg utførte, senket alfakvaliteten fra 100 til 90 faktisk litt økt filstørrelsen på et bilde med en gjennomsiktig bakgrunn fra 8.50 kb til 8.52 kb). Rullegardinmenyen "Kildetype" kan du beholde satt til "Standard".
Hvorvidt du vil merke av eller fjerne merket for noen av metadataalternativene, inkludert Exif-data, ITPC-data og XMP-data, er opp til deg. Exif- og XMP-data er metadata som vanligvis tilordnes av kameraet ditt som beskriver informasjon om bildet ditt, for eksempel hvilken kameramodell som ble brukt eller hvilken type objektiv som ble brukt. ITPC, på den annen side, brukes av medlemmer av pressen og tildeler informasjon til bildet ditt som eierskap, rettigheter og lisensiering. Hvis du ikke er sikker på hva du skal gjøre, la disse alternativene være merket.
På samme måte går det fint med å la «Lagre fargeprofil»-alternativet være umerket, da de fleste nettlesere automatisk vil bruke sRGB-fargerommet for å vise bildet ditt, som er det GIMP bruker. Hvis du bruker en annen fargeprofil, bør du la dette være merket av. Dessuten, hvis du er bekymret for at bildet ikke vises riktig for visse nettlesere, vil det å la det være merket bare legge til noen få kb til den totale bildestørrelsen.
Til slutt kan alternativet "Lagre miniatyr" forbli umerket, noe som vil spare oss ytterligere for noen kilobyte.
Klikk "Eksporter" (gul pil i bildet over) for å eksportere bildet til WebP-formatet. Når du sammenligner den eksporterte WebP-filen med en JPEG-fil som har samme størrelse og som også har kvaliteten satt til "80", kommer WebP-bildet inn på omtrent 30 kb, eller omtrent 25 %, mindre i størrelse enn JPEG.
Du kan nå logge inn på WordPress-nettstedet ditt og navigere til siden eller innlegget der du vil laste opp bildet ditt, eller ganske enkelt navigere til "Media"-delen ved å bruke hovednavigasjonen og dra og slippe bildet inn i mediebiblioteket. I mitt tilfelle vil jeg navigere til «Innlegg» ved å bruke hovednavigasjonen (rød pil i bildet ovenfor) og vil klikke på «Blogginnlegg 1» (blå pil) for å redigere det blogginnlegget.
Jeg åpner deretter sidefeltet for innleggsinnstillinger (rød pil) og ruller ned til delen "Utvalgt bilde" og utvider denne delen (blå pil). Deretter klikker jeg på bildet for å erstatte det med mitt nye bilde.
Jeg navigerer til "Last opp filer"-fanen (rød pil), og kan dra og slippe bildet fra datamaskinen til WordPress (blå piler).
Til slutt klikker jeg "Angi utvalgt bilde" for å bruke denne endringen (rød pil).
Klikk "Oppdater" (rød pil) for å oppdatere siden din med det nye fremhevede bildet.
Hvis jeg klikker "Se innlegg" (blå pil)...
…du vil nå se det nye fremhevede bildet øverst på bloggen min.
Det var alt for denne opplæringen! Hvis du vil lære mer om å designe et WordPress-nettsted, anbefaler jeg å sjekke ut min WordPress 6.0 for ikke-kodere kurs! Eller, hvis du vil lære mer om GIMP, sjekk ut min GIMP 2.10 Masterclass på Udemy!
