Optimering af billeder, kan gøre din hjemmeside en del hurtigere at loade for brugeren. Frem for at skulle vente på, at dine flotte store billeder tager en evighed om at loade, er det lidt federe, hvis man ikke føler man skal vente.
Derfor vil jeg gennemgå 3 måder at optimere billeder på, i WordPress.
2 der hjælper på hastigheden af din hjemmesiden og et enkelt der kan befri dig for en irriterende fejl.
Komprimering
Når man snakker om komprimering af et billede, snakker vi om hvor meget det fylder på en disk. Vi snakker ikke om bredden og højden på billedet. Man kunne også kalde det “vægten” af et billede, hvis man skulle lave en lille analogi.
Og på samme måde, som et menneske bevæger sig langsommere, jo mere det vejer, tager et billede også længere tid at loade i browseren, jo mere det fylder. Og når billedet kommer lige fra en telefon eller et kamera, fylder det en hel del.
Derfor skal du komprimere billederne inden du bruger dem på din hjemmeside.
Plugins til komprimering
Der findes mange lækre og gode plugins derude, hvor du kan installere dem hurtigt og dermed sikre, at billederne bliver komprimeret hver gang du uploader dem til WordPress. En handy og nem løsning.
TinyPNG, Kraken.io og EWWW Image Optimizer er nogle af de mest populære derude og er ganske fremragende. Jeg foretrækker personligt det første, TinyPNG, men der er minimal forskel.
Manuel komprimering
En nørd som mig foretrækker dog, at gøre det manuelt hver gang. Det skyldes primært, at jeg ønsker færrest mulige plugins installeret af sikkerhedshensyn. Ikke fordi de enkelte plugins er usikre, men fordi flere plugins installeret giver hackere flere indgange.
Alle de tre ovennævnte plugins, har tilsvarende værktøjer på deres hjemmesider, til at klare komprimeringen manuelt:
- TinyPNG (på trods af navnet, kan det også komprimeres JPG filer)
- Kraken.io
- EWWW Image Optimizer
De to første kommer med gratis udgaver, med begrænset mængder, mens EWWW Image Optimizer kunde findes i en betalt version.
Tilpasning af dimensioner
Nu skal vi så til bredden og højden på et billede. For uploader du bare billedet “blindt” efter de er taget, vil du højst sandsynligt finde ud af, at den fulde størrelse af billedet aldrig bliver brugt. Og så vil den bare fylde på serveren.
Og bliver den brugt, kan du risikere, at den fulde størrelse bruges selvom billedet kun vises i et mindre format på hjemmesiden.
Så sørg for altid at uploade billedet i den størrelse du skal bruge det – som udgangspunkt.
Når du lægger et billede ind i et indlæg eller på en side, kan du altid vælge at bruge den fulde størrelse. Så der er ingen grund til at uploade et for stort billede, bare for at være sikker.
Cropping med WordPress
At beskære et billede i bredden og/eller højden, kaldes “cropping” på engelsk. Og du behøver slet ikke bruge Photoshop eller et andet billedredigeringsprogram til det. WordPress klarer beskæring helt fint.
Find billedet i dit mediebibliotek (Medier) og klik på det. Skærmen til redigering af billedet åbnes.
Under billedet finder du knappen Rediger billede. Klik på den.
Herefter kommer du til redigeringsområdet. For at beskære billedet, klikker du på et område på billedet og holder musen nede, mens du trækker den rundt for at markere et område på billedet.
Når du har valgt det område du vil have beskåret billedet til, klikker du på beskær-knappen øverst til venstre for billedet.
For at beskæringen skal fuldføres, skal du klikke på Gem til sidst.
Undgå underlige tegn i filnavnet
I Danmark synes vi jo ikke, at 26 bogstaver er nok, så vi har tilføjet 3 af vores egne i form af æ, ø og å. Ind i mellembruger vi jo også é og lignende tegn. Tilsammen kaldes jeg dem “underlige tegn” 😉
Finten her er, at dem må du ikke bruge i filnavnet på billedet. Så når du gemmer billedet på din computer, inden du uploader det til WordPress, skal du omdøbe det, så det ikke indeholder specialtegn (som vidst er det mere korrekte navn).
I nogle tilfælde risikerer du nemlig, at en browser ikke vil vise et billede, fordi filnavnet indholdt æ, ø, å eller andre specielle tegn. Det undgår du ved kun at bruge a-z og tegn som – og _.
Hjælp dig selv lidt
Hvis du er typen der kunne finde på at bruge specielle tegn i filnavnet, kan det jo være rart med en ekstra “vagthund” i tilfælde af, at man skulle glemme det eller have overset det.
Her kommer pluginnet Clean Image Filenames ind i billedet.
Installer pluginnet og du har med det samme en lille assistent, der hjælper dig. Det forhindrer dig ikke i at uploade billedet, men erstattet specialtegn, med tilsvarende “gyldige” tegn.
Desværre kan det ikke sørge for, at gamle billeder renses for specialtegn, men det er da en start.