Billeder er fantastiske!
– og i en stadigt mere visuel verden, er billeder fuldstændigt nødvendige!
Gerne i rigelige mængder…

Derfor indgår billedkarusseller og -slidere mm. som en hovedingrediens i ethvert moderne websites udtryk.

Men direkte heroverfor står hastighed for sitet – load tider og page speed.

Billeder – store, smukke billeder i særdeleshed – er en af de helt store udfordringer for hurtige load tider.
Faktisk er billeder i rigtigt mange tilfælde hovedskurken – og bør være den første, mistænkte – hvis dine load tider indeholder plads til forbedringer.

Spørgsmålet om load tider er særligt påtrængende på mobile devices, hvor Google siden juli 2018 officielt har ladet load tider influere på sitets page rank.
Altså placering i søgeresultater.

Load og pagespeed test kan du teste nedenfor – GT Metrix er yderligere helt genialt med specifikke råd, anbefalinger og henvisninger til konkrete ændringer.
Her på sitet scorer vi ekstremt dårligt – men det er vel nærmest helt klassisk, at bageren ikke spiser eget brød…eller?!?

Uanset hvad, er dette et af stederne at starte rejsen mod hurtigere load tider:

https://gtmetrix.com/

Billeder.

Men lad os først starte med at forstå hvorfor billeder kan være en hovedskurk!

Først og fremmest handler det om størrelse – kb og mb. Jo større/tungere, desto flere data skal hentes/downloades. Desto længere tid tager det. Desto ringere hastighed.

Missionen er derfor at reducere billedets størrelse maximalt og reducere billedets oplevede kvalitet minimalt.

Simpelt, ikke?
Men størrelse forstået som kb/mb for billeder handler om primært 3 parametre:
-Format/type
-Opløsning/ppi
-»fysisk« højde x bredde cm/pixels

I dag, når man tager billeder fra et DSLR (spejlrefleks kamera) eller en mobil, er dimensionerne massivt store – og alt alt alt for store til at kunne fungere fra et website.

Mit Nikon giver jpg fotos i størrelsen 6000*4000 pixels i 240 ppi
Min iPhone 6 gav billeder i 4000 * 3000 pixels i 72 ppi

Ganger vi pixlerne op, giver iPhone billedet 4000*3000=12.000.000 pixels…hvilket svarer til 12 mb i 72 ppi og dermed alt for stort til meningsfuldt at fungere på nettet.
Og et Nikon billede i 240 ppi ville dræbes af ehvert forsøg på at ramme selv en middelmådig load hastighed…

Noget skal gøres.

Og det er ALTID best at gøre det FØR billedet uploades i wordpress eller andre web/cms systemer. Så lad os starte med at se på formater.

Format.

Billedformater findes i talrige former; det er altid fil-endelsen, der afslører hvor vi er henne…

Til webbrug er der grundlæggende to (tre) formater, det giver mening at tale om: jpg og png (dvs fil endelserne .jpg og .png). Det tredie format er gif, der primært egner sig animerede billeder, da formatet er begrænset til et begrænset antal farver.

Men der findes andre formater, herunder .tif (til grafik) og .psd (photoshop) og en række andre specialformater. Men hvert format har egen spidskompetencer og primær anvendelse

Tommelfingerregler er derfor at konvertere til:
-jpg => brug jpg til fotos, da du får højeste kompression med laveste tab af kvalitet
-png => brug png til grafik, da kompressionen er lavere end jpg, dvs billedet bliver større
Og brug png til fritlagte billeder, da baggrunden kan fjernes helt (gennemsigtigt) LINK
-gif => brug gif til animerede billeder (kraftigt komprimeret men kun 256 farver)

 

Opløsning
Hvor fint pixelleret et billede er, beskrives som ppi: Pixels Per Inch, altså pixels per tomme.
Og opløsningens kvalitet handler derfor om præcist hvor mange pixler en tomme indeholder.

Til TRYK – altså på papir i »gamle« dage – regnede vi med krav til billeder på 300 ppi som nedre grænse før det synligt reducerede billedkvaliteten i det færdige, trykte materiale. PPI er iøvrigt ikke det samme som DPI (dots per inch), dpi bruges alene til tryk/printteknik, og handler om evnen til at afsætte små farvepunkter per tomme…og kan gå væsentligt højere op end 300dpi.

Til online brug er reglen normalt 72 ppi, uden at det gør ud over den oplevede billedkvalitet. Det betyder ikke, at det SKAL reduceres til 72 ppi, men når denne nedre grænse giver mening, så er det bestemt af skærmens (ringe) evne til at gengive mange pixels (lav ppi). Med det forbehold at der er forskel på skærme.

Som vi så ved mobiltelefon billedeksemplet benyttes typisk 72 ppi, men tilgengæld massivt store flader. PPI og størrelse opvejer hinanden, dvs halv størrelse kan omveksles til dobbelt ppi.

Normalt vil dit valgte billedbehandlingsprogram automatisk reducere ppi hvis du vælger en funktion som optimering til web (photoshop fx.) Herefter kan du optimere størrelsen, i cm eller pixels.

”Fysisk størrelse”

De faktiske dimensioner er betydeligt mere indlysende at reducere, udfra forståelsen af, at jo større billedets dimensioner er, desto mere fylder det i kb/mb.

Forskellen på nettet er dog, at cm erstattes af antal pixels.
Og at på nettet, er der som udgangspunkt kun behov for størrelser defineret ud fra de skærme vi typisk benytter. Og hvilke placeringer / formål billedet har.

Grænserne flyder jo hele tiden, men hvis der optimeres til en størrelse online vil det jo ofte afhænge af, til hvilket formål, vi bruger billedet.

Følgende tommelfingerregler er fundet hos https://visualcomposer.com/

• Blog posts: 1200 x 630px
• Hero images (full screen images): 2880 x 1500px
• Landscape feature image: 900 x 1200px
• Portrait feature image: 1200 x 900
• Fullscreen slideshow: 2800 x 1500px
• Gallery images: 1500px x auto width

Det giver grundlæggende ikke mening at benytte et større format end formålet tilskriver, da du blot får ringere load hastighed uden gevinst ved billedets brug i websitet.

Som nævnt ovenfor er der ofte genveje at hente i billedredigeringsprogrammerne.

Og herudover er det ikke helt ligegyldigt med hvilke midler et billede komprimeres. De bedre programmer har stor betydning for den endelige kvalitet ift at “resample” og komprimere et billede

Alternativer til Photoshop
– Programmer til billedredigering

Klassikeren er Photoshop. Og jo nyere version, desto bedre resultater i forhold til at komprimere billeder…siger rygterne. har du allerede adgang til Photoshop, behøver du ikke at læse videre. Medmindre din version er gammel…

Fordi Photoshop er et dyrt bekendtskab er der virkeligt mange alternativer. Her nævnes blot to reelle alternativer.

 

Pixlr
Det lette alternativ til Photoshop, opbygget på samme måde, med arbejde i lag, og med genkendelige værktøjer og funktionaliteter.
Kun på de avancerede funktioner mangler, herunder at du kun kan redigere eet foto ad gangen og ikke kan konvertere batches af billeder. Omvendt er styrken at Pixlr er simplere at gå til. Er du professionel bruger, har du alligevel Photoshop. Og er du ikke, tja, så er Pixlr et virkeligt godt alternativ. Og gratis….

https://pixlr.com/

 

Photopea
Og nyligt er jeg stødt på endnu et online alternativ til Photoshop. Det minder meget om Pixlr, og endnu mere om Photoshop. Men er gratis.

https://www.photopea.com/

 

GIMP
Med GIMP tager vi lidt yderligere features ombord, herunder muligheder for vektpor filer og plugins fra tredieparter.

GIMPs interface er ikke så overskueligt og intuitivt som Pixlr, men muligheden for f.x. at tilknytte RAW fil konverter er et stort plus for os, med stor kærlighed til selv at tage fotos. Som RAW konverter kan vi pege på UFRaw.

Personligt har jeg aldrig lært at elske GIMPs egen opbygning og ikoner….gid GIMP havde ladet sig inspirere lidt mere af Photoshop, præcist som de foran nævnte letvægtere indenfor Photoshop alternativer….

https://www.gimp.org/