Komprimering af billeder på WordPress siden

Optimering og komprimering af billeder på WordPress hjemmesiden, er et af de første steder du skal sætte ind, for at få loadtiden i bund. Hvis din hjemmeside er mere end et par sekunder om at åbne, så bliver dine besøgende utålmodige og klikker væk.

Ofte er det billeder der får en side til at fylde, og dermed loade langsomt, og billeder står ofte for størstedelen af de byte’s der skal downloades, før en side kan vises.

Flotte billeder på en hjemmeside ser godt ud, men billeder der fylder meget, og er en dræber for indlæsningshastigheden.

Test om dine billeder kan komprimeres yderligere

Hvis du er i tvivl om dine billeder er optimeret godt nok, kan du prøve at køre Google PageSpeed Insight på din side.

Hvis “Optimer billeder” popper op som noget du bør løse, skal du have kigget på dine billeder.

En test med Pingdom Website Speed Test vil vise, hvor meget billederne rent faktisk fylder.

Filtyper til billeder

De mest almindelige filtyper til billeder er JPG, GIF og PNG. JPG som bruges til almindelige fotografier, kan komprimeres temmelig meget, og stadig have en god kvalitet.

GIF bruges til grafik, f.eks. logoer og lignende. PNG kan bruges til både fotos og grafik, men fotos fylder oftest mere, end det samme foto vil fylde i JPG.

Upload billeder i den rigtige dimension

WordPress har en indbygget funktion, der kan skalere dimensionen på billeder. Hvis du skalerer et billede ned, reduceres filstørrelsen tilsvarende, men der er ikke indbygget optimering og komprimering af billederne.

En fejl som mange begår er, at de uploader et billede direkte fra et kamera eller en telefon. Sådan et billede fylder adskillige Mb, og vil gøre siden langsom.

Hvis det billede du skal bruge, eksempelvis skal have dimensionen 300x300px, så beskær billedet i det format, inden du uploader det.

Jeg vil til enhver tid foreslå, at du selv ændrer dimension på billeder inden du uploader. Ved selv at skalere, opnår du bedre kontrol med billedet. Du undgår samtidig at have flere versioner af det samme billede liggende på din server, hvilket vil betyde at det tager længere tid at lave backup af WordPress siden.

Komprimering af billeder

Optimering og komprimering af billeder er en balancegang mellem størrelse og kvalitet. Man kan dog komprimere et billede ganske meget, uden man kan se forskel på kvaliteten.

Komprimering af billeder kan ske på forskellige måder. Der findes programmer man kan installere på computeren, online tjenester og WordPress plugins.

Personligt har jeg tre favoritter, som jeg altid vender tilbage til.

RIOT Radical Image Optimization Tool – Et gratis program du kan downloade fra RIOT’s hjemmeside. Det er let at bruge, og kan komprimere JPG og PNG og GIF filer. Jeg bruger oftest RIOT når jeg skal komprimere et enkelt billede, men det er også muligt at komprimere flere billeder på én gang.

Shrink O’Matic – Dette program bruger jeg ofte til at komprimere mange billeder på én gang. Indstillingerne kan sættes så filnavne og filtyper ikke ændres ved komprimering. Det er nyttigt, hvis du skal komprimere mange billeder, der allerede er uploadet til WordPress.

EWWW Image Optimizer – Et gratis WordPress plugin som jeg er blevet meget glad for. EWWW Image Optimizer komprimerer billeder efterhånden som du uploader dem til WordPress, men kan også komprimere billeder der allerede er uploadet. EWWW har en smart funktion der også kan komprimere billeder uden for Image mappen, f.eks. billeder der hører til dit tema. Jeg optimerer altid billeder inden jeg uploader dem, men bruger EWWW til at hive de sidste overflødige byte’s ud af billederne.

Som sagt findes der også online tjenester der kan komprimere billeder f.eks. Image Optimizer, Web Photo ResizerKraken, JPEGmini og TinyPNG.

Komprimering af billeder der allerede er uploadet

Hvis du vil lave en optimal komprimering, af de billeder du allerede har uploadet, er du nødt til at downloade dem først. Derefter kan du komprimere dem med eksempelvis Shrink O’Matic og efterfølgende uploade dem igen.

Hvis du beholder de samme filnavne og filtyper, så kan du uden videre erstatte de oprindelige billeder med de komprimerede i Image mappen.

Brug FTP når du skal downloade og uploade billeder.

Test af billedkomprimering

For at finde ud af, hvor meget størrelsen på billeder betyder i forhold til loadtiden, har jeg lavet et testindlæg, kun bestående af et enkelt billede. Jeg har optimeret og komprimeret billedet på forskellige måder, og målt loadtiden med Pingdom Website Speed Test.

Testen er lavet på en side hostet hos UnoEuro. Loadtiden vil være påvirket af faktorer som temaet der er brugt, serverens svartid, Pingdoms svartid og måske andre udefra kommende faktorer.

For at få en nogenlunde præcis måling af loadtiden, er den målt tre gange i hver test, og den gennemsnitlige tid er brugt.

Test af komprimering af billeder

Billedet jeg har brugt til testen, er taget med min iPhone. Dimensionen var oprindelig 3264 x 2449 px og billedet fyldte 2,2MB (her er billedet skaleret ned til 600×450 px og komprimeret til 40Kb)

Komprimering af billeder - Test af loadtid

Testen viser en reduktion i loadtiden på 774 millisekunder fra det ukomprimerede billede, til det billede der er færdigkomprimeret inden upload, hvilket svarer til en reduktion på 63,5%. Sidestørrelsen falder til 284,8kb, næsten 1/10 af den oprindelige størrelse.

Komprimeringen med EWWW Image Optimizer har effekt, men ikke nær så meget som jeg forventede. Forklaringen på at loadtiden stiger lidt mellem test 4 og 5 må tillægges serverens svartid, da sidestørrelse trods alt er faldt en smule.

Billeder der er skaleret i WordPress, falder positivt både i loadtid og sidestørrelse.

Konklusionen må være, at billeder skal komprimeres inden upload til serveren, for at få den hurtigste loadtid.

CDN – Content Delivery Network

Hvis din side har mange billeder, og besøgende fra mange lande, kan du overveje en CDN løsning. Jeg skal ikke komme så meget ind på CDN her, men kort fortalt lægger du dit statiske indhold (f.eks. billeder) på servere rundt om i verden. Når en besøgende ser din side, hentes indholdet fra den server der er nærmest brugeren, og loader dermed hurtigere.

Prøv at køre en Pingdom test fra forskellige steder i verden, og se hvor stor forskellen er i loadhastigheden.

Andre gode råd når du arbejder med billeder

Husk at ændre filnavnet på billedet, så det beskriver hvad billedet viser, og udfyld “Alt teksten” når du indsætter billedet i WordPress. Det fortæller søgemaskinerne hvad billedet forestiller, og er en vigtig SEO faktor.

Husk nu at du ikke bare må finde et billede på nettet, og bruge det på din side. Medmindre det udtrykkeligt er angivet, at billedet må bruges, skal du spørge om lov først.

Lær mere om WordPress og beskyt din computer

Husk også at tjekke de andre IT produkter jeg har samlet på Helpdesken.dk/shoppen

WordPress manualen

WordPress manualen WordPress Manualen lærer dig at lave din egen hjemmeside eller webshop med WordPress. Manualen er for både begyndere og let øvede.
WordPress Manualen er på mere end 180 sider, og den guider dig på en grundig og lærerig måde igennem processen med at lave din egen hjemmeside eller webshop.
Manualen starter med at forklare hvad Wordpress egentlig er, og forklare hvordan du køber et domænenavn og vælger det rigtige webhotel.
Du guides igennem opsætningen af en hjemmeside og du bliver sat ind i plugins, SEO og sikkerhed.
Et helt afsnit fortæller om hvordan du laver en webshop med det gratis plugin Woocommerce.

199,00

Til shop

Norton Security

Norton Security De fleste ved efterhånden, at det er vigtigt at beskytte sin computer imod skadelig virus. Norton Security beskytter derudover også mod malware og sikrer dine personlige data, hvilket bl.a. forebygger identitetstyveri og økonomisk kriminalitet.
Norton Security beskytter ikke kun din computer, men også dine andre enheder som smartphone og tablets (iOS og Android), så du trygt kan anvende dem på internettet og du ved at både ud og din familie er sikret på den bedst tænkelige måde.
Omfatter 25 GB sikker lagringsplads i skyen for din pc med mulighed for at tilføje mere plads, når du får behov for det

389,00

Til shop

Skriv en kommentar