Ønsker du at uploade billeder til dit WordPress-websted, men er du ikke sikker på, hvilke størrelser eller filtyper billederne skal have? Er du ikke bekendt med processen med at ændre størrelse og komprimere billeder til internettet? I denne artikel vil jeg forklare, hvorfor det er vigtigt at bruge korrekt billedstørrelse for dit websted, plus vise dig, hvordan du ændrer størrelse og komprimerer dine billeder ved hjælp af den gratis billedredigering GIMP.
Hvorfor det er vigtigt at ændre størrelsen på dit websteds billeder
Lad os starte med, hvorfor det er så vigtigt at ændre størrelsen på dit websteds billeder.
Ifølge WordPress.org, spiller den overordnede "fysiske størrelse" af et billede en stor rolle for en hjemmesides ydeevne. “Filstørrelsen [af et billede] dikterer den tid, det tager at indlæse din side; jo større filstørrelsen er... jo længere tid vil [en side] tage at indlæse." Med andre ord vil upload af en stor filstørrelse til dit websted sænke ydeevnen af den side, du føjer indholdet til, og normalt vises som langsommere sideindlæsningshastigheder i dit websteds analysedata.
“Filstørrelsen [af et billede] dikterer den tid, det tager at indlæse din side; jo større filstørrelsen er... jo længere tid vil [en side] tage at indlæse."
-WordPress.org
Sideindlæsningshastighed, også blot kaldet "side hastighed," er "hvor hurtigt indholdet på din side indlæses," ifølge SEO-side Moz. At have langsommere sider kan resultere i højere "afvisningsrater", som er en fancy metric, der repræsenterer sessioner, hvor en besøgende forlader dit websted efter at have set en enkelt side. Langsommere sider kan også mindske den tid, besøgende bruger på dit websteds sider, da folk kan blive utålmodige, når de venter på, at en sides indhold indlæses og forlader dit websted hurtigere.
Disse metrics er vigtige, fordi du typisk ønsker, at brugerne bruger mere tid på dit websted og ser på flere sider på tværs af dit websted.
De er også vigtige, fordi de spiller en rolle i, hvordan dit websted rangerer på søgemaskineresultatsider eller "SERP'er". Serps er simpelthen de resultatsider, der vises, når du skriver et ord eller en sætning i Google og trykker på enter-tasten. Fordi større billeder er tegn på dårlig webdesignpraksis og negativt påvirker brugerens oplevelse på dit websted, kan søgemaskiner som Google muligvis straffe dit websted for at have disse større billeder og placere dit websted under andre websteder, der klarer sig bedre.
Jo lavere din hjemmeside for eksempel ligger på Google, jo mindre trafik får din side, og jo mere trafik vil der gå til dine konkurrenter, der rangerer over dig i søgeresultaterne.
Ved at reducere filstørrelsen på dine billeder på din hjemmeside, kan du forbedre din side hastighed og dermed forbedre andre målinger som afvisningsprocent tid på page for i sidste ende at forbedre dine placeringer på søgemaskiner.
Bemærk, at der er mange andre vigtige variabler, der indgår i søgerangeringer, så at rette dine billeder er kun en del af en solid SEO (Søgemaskineoptimering) strategi. Men det er bestemt meget vigtigt for at hjælpe dit websted med at rangere højere på steder som Google for at hjælpe med at øge dit websteds trafik.
Sådan ændrer du størrelsen på billeder til WordPress i GIMP
Så hvordan ændrer du størrelsen på billeder korrekt til WordPress?
Du kan formindske et billedes filstørrelse blot ved at formindske den overordnede størrelse af billedet vha skalering beskæring før du uploader det til din hjemmeside. Derudover kan du anvende det, der hedder "kompression” til dit billede for at reducere størrelsen yderligere.
GIMP, den gratis og open source-fotoeditor, kan udføre alle disse opgaver, mens den også eksporterer til anbefalede "next-gen" filformater for yderligere at reducere dine billeders filstørrelse og forbedre dit websteds ydeevne.
Skaler dit billede
For at komme i gang med denne proces skal du åbne det billede, du vil uploade til dit websted, i GIMP. Du kan gøre dette ved at trække og slippe dit billede fra din computer til GIMPs billedvindue, eller du kan blot gå til Filer>Åbn, når du er inde i GIMP.
Hvis du bruger Filer>Åbn metoden, skal du navigere til placeringen af billedet på din computer inde fra dialogboksen "Åbn billede", der vises, og dobbeltklikke på billedfilen, når du har fundet den for at åbne den i GIMP (eller klik på "Åbn"-knappen i nederste højre hjørne af dialogvinduet).
Helt øverst i GIMP-vinduet er en funktion kaldet "Title Bar" (rød pil på billedet ovenfor). Her kan du se dit billedes aktuelle dimensioner (forstørret grøn boks på billedet). Mit billede er 1920×1280 – hvor det første tal, 1920, repræsenterer bredden af mit billede (i pixels), og det andet tal, 1280, repræsenterer højden af mit billede. De endelige billeddimensioner, du vil bruge til dit billede, afhænger af, hvor i WordPress du har tænkt dig at bruge billedet, samt hvilket tema du bruger.
Til denne øvelse ændrer jeg størrelsen på mit billede til standardstørrelsen 1200×630 pixels, der anbefales til billeder af blogindlæg.
Med dette i tankerne er den første ting, jeg vil gøre, at beskære mit billede, så billedformatet på mit originale billede matcher billedformatet for den anbefalede størrelse. For at gøre dette tager jeg fat i mit beskæringsværktøj ved at trykke på shift+c på mit tastatur eller klikke på beskæringsværktøjsikonet i GIMP-værktøjskassen (rød pil på billedet ovenfor).
Dernæst, i Værktøjsindstillinger for dette værktøj, markerer jeg afkrydsningsfeltet ud for "Fixed" (grøn pil) og klik på rullemenuen for at vælge "Aspect ratio" (blå pil).
Jeg skriver "1200:630" for at indstille mit billedformat i tekstfeltet under rullemenuen (gul pil). Dette matcher billedformatet af den anbefalede billedstørrelse, som jeg vil have mit endelige billede til.
Ved hjælp af beskæringsværktøjet vil jeg nu klikke og trække min mus hen over billedet for at tegne beskæringsområdet. Når jeg slipper min mus, vil alt uden for beskæringsområdet være nedtonet (rød pil på billedet ovenfor - forudsat at "Highlight" er markeret i værktøjsindstillingerne, hvilket det normalt er som standard).
Som standard har mit beskæringsområde hjælpelinjerne indstillet som "Centerlinjer" (gul pil på billedet ovenfor). Jeg kan ændre denne indstilling ved at bruge rullemenuen med hjælpelinjer nederst i Værktøjsindstillinger. For eksempel vil jeg ændre mine guider til "Rule of Thirds" (grøn pil). De forskellige guidemuligheder her er baseret på fotografiske principper, hvilket gør det nemt at indramme din komposition ved hjælp af disse principper.
Du kan holde musen over en hvilken som helst af siderne eller hjørnerne af beskæringsområdet (dvs. det fremhævede område angivet med den røde pil på billedet ovenfor), og derefter klikke og trække for at ændre størrelsen på beskæringsområdets grænse. Bemærk, at du altid kan se størrelsen på dit afgrødeområde i felterne "Størrelse" placeret i Værktøjsindstillingerne (angivet med grønt på billedet ovenfor). Du vil gerne beholde den samlede størrelse af beskæringsområdet større end den endelige størrelse på 1200 × 630 på billedet.
Du kan også klikke og trække med musen i midten af beskæringsområdet (rød pil) for at flytte beskæringen på billedet.
Når du er klar til at beskære billedet, skal du klikke én gang inde i beskæringsområdet, og dit billede vil blive beskåret.
Bemærk, at hvis indstillingen "Slet beskårne pixels" i Værktøjsindstillinger ikke er markeret (grøn pil i billedet ovenfor), vil din originale billedgrænse stadig vises rundt om dit billede via en gul stiplet linje (rød pil). Du kan gendanne det originale billede og dermed fortryde beskæringen ved at gå til Billede>Tilpas lærred til lag. Kun området af dit billede inden for lærredets grænse vil blive eksporteret.
Vores billede er nu beskåret til det billedformat, vi ønsker, men hvis du igen ser på vores billeddimensioner i "Titellinjen", vil du se, at billedet er 1532×804 (omridset med grønt og forstørret på ovenstående billede – dine dimensioner vil sandsynligvis være lidt anderledes baseret på, hvor stort du tegnede dit beskæringsområde på dit billede). Vi bliver nu nødt til at skalere vores billede, så det passer til vores ønskede dimensioner.
For at gøre dette skal du gå til Billede> Skaler billede (rød pil).
I boksen "Skala billede", der vises, under "Billedstørrelse", skal du sørge for, at kædeledsikonet ved siden af boksene "bredde" og "højde" er forbundet (rød pil på billedet ovenfor). Skift derefter "Bredde" på dit billede til 1200 (grøn pil). Tryk på tabulatortasten. Højden på billedet opdateres automatisk til "630". Under "Kvalitet" skal du sørge for, at rullemenuen "Interpolation" (blå pil) er indstillet til enten "NoHalo" eller "LoHalo" for den bedste billedkvalitet efter skaleringen. (For mere information om interpolation, tjek min tutorial om emnet).
Tryk på knappen "Skaler" for at skalere dit billede (gul pil).
Når skaleringen er færdig, skal du tjekke billeddimensionerne i titellinjen. Du skulle nu se en billedstørrelse på 1200×630 – den nøjagtige størrelse, vi ønsker! Så hvad gør vi nu?
Komprimer dit billede ved at eksportere til WebP
Beskæring og skalering af billedet reducerede filstørrelsen ved at reducere billedets højde fra 1920 til 1200 pixels og bredden fra 1280 til 630 pixels, men vi kan reducere billedstørrelsen yderligere ved at anvende komprimering, når vi eksporterer billedet.
Så vi skal nu eksportere billedet til et filformat, der vil anvende komprimering på billedet uden mærkbart at reducere kvaliteten af billedet. Selvom JPEG'er altid er en god mulighed, er der en endnu bedre mulighed nu tilgængelig: WebP.
WebP-formatet anvender mere komprimering end JPEG, mens det påvirker kvaliteten af billedet mindre, end en JPEG gør. Med andre ord får du et bedre udseende billede med en mindre filstørrelse. Plus, WebP-formater understøttes af alle top 5 webbrowsere.
For at eksportere til WebP skal du gå til Filer>Eksporter som (rød pil).
Klik på en af mapperne i sektionen "Steder" (markeret med grønt) for at vælge det billede på din computer, hvor du vil gemme dit billede. Du kan blot dobbeltklikke på en mappe for at gå ind i den og se, hvilken mappe du er i ved siden af titlen "Gem i mappe" (rød pil). Omdøb derefter dit billede til det, du vil have – bare sørg for at afslutte dit billednavn med udvidelsen ".webp" (blå pil) for at eksportere billedet i WebP-formatet. Når du er klar, skal du klikke på "Eksporter" i nederste højre hjørne af vinduet (gul pil).
Derefter vises dialogen "Eksporter billede som WebP". Sørg for, at "Lossless" ikke er markeret (rød pil). Jeg sætter typisk "Billedkvalitet" til 80 (blå pil - dette er en procent, så jo lavere procent, desto lavere bliver kvaliteten af billedet, men jo mindre bliver billedfilstørrelsen). Hvis dit billede ikke indeholder gennemsigtighed (dvs. et logo uden baggrund), behøver du ikke bekymre dig om skyderen "Alpha quality" (faktisk, i et eksperiment, jeg udførte, sænkede alfakvaliteten fra 100 til 90 faktisk en smule øget filstørrelsen på et billede med en gennemsigtig baggrund fra 8.50 kb til 8.52 kb). Rullemenuen "Kildetype" kan du beholde indstillet til "Standard".
Hvorvidt du vil markere eller fjerne markeringen af nogen af metadataindstillingerne, inklusive Exif-data, ITPC-data og XMP-data, er op til dig. Exif- og XMP-data er metadata, der typisk tildeles af dit kamera, og som beskriver oplysninger om dit foto, f.eks. hvilken kameramodel der blev brugt, eller hvilken type objektiv der blev brugt. ITPC, på den anden side, bruges af medlemmer af pressen og tildeler oplysninger til dit billede, såsom ejerskab, rettigheder og licensering. Hvis du ikke er sikker på, hvad du skal gøre, skal du bare lade disse muligheder være markeret.
Ligeledes har du det fint med at lade "Gem farveprofil" være umarkeret, da de fleste browsere automatisk vil bruge sRGB-farverummet til at vise dit billede, hvilket er det, GIMP bruger. Hvis du bruger en anden farveprofil, skal du lade dette være markeret. Hvis du også er bekymret for, at billedet ikke vises korrekt for visse browsere, tilføjer det kun et par kb til den samlede billedstørrelse, hvis du lader det være markeret.
Endelig kan indstillingen "Gem thumbnail" forblive umarkeret, hvilket yderligere vil spare os for nogle kilobytes.
Klik på "Eksporter" (gul pil på billedet ovenfor) for at eksportere billedet til WebP-formatet. Når man sammenligner den eksporterede WebP-fil med en JPEG-fil, der har samme størrelse og også har dens kvalitet indstillet til "80", kommer WebP-billedet på omkring 30 kb, eller ca. 25 %, mindre i størrelse end JPEG.
Du kan nu logge ind på dit WordPress-websted og navigere til siden eller indlægget, hvor du vil uploade dit billede, eller du kan blot navigere til "Medie"-sektionen ved at bruge hovednavigationen og trække og slippe dit billede ind i mediebiblioteket. I mit tilfælde vil jeg navigere til "Indlæg" ved hjælp af hovednavigationen (rød pil på billedet ovenfor) og vil klikke på "Blog-indlæg 1" (blå pil) for at redigere det blogindlæg.
Jeg åbner derefter sidebjælken for indlægsindstillinger (rød pil) og ruller ned til afsnittet "Udvalgt billede" og udvider dette afsnit (blå pil). Derefter klikker jeg på billedet for at erstatte det med mit nye billede.
Jeg navigerer til fanen "Upload filer" (rød pil) og kan trække og slippe mit billede fra min computer til WordPress (blå pile).
Til sidst klikker jeg på "Indstil udvalgt billede" for at anvende denne ændring (rød pil).
Klik på "Opdater" (rød pil) for at opdatere din side med det nye fremhævede billede.
Hvis jeg klikker på "Se indlæg" (blå pil)...
…du vil nu se det nye fremhævede billede, der vises øverst på min blog.
Det var det for denne tutorial! Hvis du vil lære mere om at designe et WordPress-websted, anbefaler jeg, at du tjekker min WordPress 6.0 for ikke-kodere kursus! Eller, hvis du vil lære mere om GIMP, så tjek min GIMP 2.10 Masterclass på Udemy!
