Dato: 14.08.2015
Tips fra fotografen: Billeder til hjemmesiden
Billeder er et af de bærende elementer, når man har en hjemmeside. Dog er der mange vigtige ting man skal huske på, inden man uploader dem til sin hjemmeside, så man undgår at siden bliver langsom, hvilket forringer brugeroplevelsen.
Mange mono.net brugere synes at billedredigering er lidt af en jungle. Vi har derfor bedt fotograf og mono.net ekspert Martin Thaulow om at komme med nogle af sine bedste tips til, hvordan man kan optimere især billedstørrelser til hjemmesiden.
Se blogpost af Martin Thaulow nedenfor.
Når det kommer til formater og størrelser i forhold til billeder på hjemmesiden, så kan det være svært at finde ud af, hvad der er det mest optimale til nettet - især hvis du ikke arbejder professionelt med billedredigering til daglig.
I dette blogindlæg har jeg derfor forsøgt at kredse om mange af de spørgsmål, jeg ofte får fra hjemmesideejere om, hvordan de optimerer deres billeder til hjemmesiden. Jeg håber du kan bruge det til at få styr på billederne på din egen hjemmeside!
Billedformater til hjemmesider - JPG!
Der findes et væld af forskellige billedeformater, så hvilken et skal du vælge til din hjemmeside? Til internettet er .jpg eller .jpeg klart at foretrække. Samtidig er .jpg det format de fleste har deres billeder liggende i, så det er jo bare et plus. Til grafikker som logoer og andre ikoner, der er png. der er bedste, men det er en helt anden snak.
Og hvad så med billedstørrelsen?
Størrelsen på billederne er også meget væsentlig, da de påvirker hvor hurtigt din hjemmeside loader. Både mængden af MB (megabyte) billedet fylder, men også selve størrelsen (længde og højde på billedet) bør du overveje.
De foretrukne størrelser til Mono's platform kan du se på Mono Academy, ud fra hvilke sideskabeloner du bruger. Jeg vil anbefale, at man følger disse mål (især i forhold til bredden af billedet!), og at du sørger for at eksportere billederne i det rigtige mål fra et billedredigeringsprogram som fx Photoshop og pixlr.com, frem for at uploade og beskære dem direkte i systemet.
For det første sikrer du dig, at billedet bliver vist 100% korrekt (systemet kan godt strække billedet så det passer til de moduler du bruger, hvis du ikke selv har beskåret det rigtigt). For det andet kan det være tidsbesparende at have alle formater på plads fra starten af, så du ikke skal bruge så meget tid på at redigere billederne når de først er lagt ind på hjemmesiden.
Hvor mange MB må billederne fylde?
I forhold til MB-størrelsen på et billede, så er der god grund til at være opmærksom på netop denne ”lille” detalje. Flere tror, at de blot kan tage et uredigeret billede, og så uploade det til ens hjemmeside, (hvilket de også kan). Der er dog flere aspekter, du skal være opmærksom på i den sammenhæng - især, hvis du vil optimere din hjemmesides hastighed.
Hvis du ikke er opmærksom og komprimerer størrelsen på dine billeder, inden du uploader dem, så bliver hjemmesiden langsom. Tager du et billede direkte fra din smartphone eller kamera og uploader det direkte til hjemmesiden, så fylder et billede nemt fra 3MB og opefter. Det lyder umiddelbart ikke af meget, men hvis du har et galleri med f.eks. 10-20 billeder, så bliver det altså til en del, og hjemmesiden kommer på overarbejde.
Det er derfor vigtigt at komprimere dine billeder inden de bliver uploadet. Mono har pt. en begrænsning på 8MB pr. uploadede fil for at sikre, at du ikke uploader så enorme filer, at det går ud over kvaliteten på sitet. For et enkelt billede er det godt, hvis du kan få det ned og fylde fra 300KB og nedefter. Det gør både, at dine besøgende får en hurtigere side at loade (god brugeroplevelse), men det optimerer også hjemmesiden i forhold til Google. Google ser nemlig også på datamængden på din side, og hvis den er for tung, så trækker det ned. Derfor påvirker din billedredigering faktisk også din SEO.
Sådan komprimerer du dine billeder
Hvis du på din hjemmeside oplever, at et billede loader langsomt (det ligner at billedet ”ruller” ned som et gardin,) så er det helt sikkert fordi, at dine billeder er for store!
Det kan derfor anbefales at bruge Photoshop eller et gratis online program som f.eks. pixlr.com til at gøre billederne mindre. På eksemplet herunder har jeg lagt et billede ind i Photoshop fra mit kamera, som jeg gerne vil lægge på hjemmesiden. Det er dog alt for stort (bemærk billedstørrelsen i nedre højre hjørne). Klik på højre eller venstre pil i billedet for at gå til næste eksempel. Her kan du se hvordan jeg har komprimeret billedet, så billedstørelsen er blevet meget mindre.
Hvis du ikke har mulighed for at få taget professionelle billeder til din hjemmeside, er der en række hjemmesider på nettet, hvorfra du kan finde billeder i god kvalitet, som godt må bruges på din hjemmeside. Jeg har listet nogle stykker herunder, men med en hurtig google søgning kan du nemt finde frem til mange flere.
brug billeder fra google - lovligt
Som udgangspunkt bør du ikke bruge billeder som du har fundet på Google på din hjemmeside, da du kan risikere at dem som har rettighederne til de billeder opkræver dig betaling for at bruge det!
Der er dog en måde hvorpå du kan finde billeder, som du kvit og frit kan bruge på din hjemmeside fra Google. Du skal bare gå til www.google.com, klikke på Indstillinger > Avanceret søgning > Brugsrettigheder, og vælge en af indstillingerne, der giver dig mulighed for at bruge billederne på din hjemmeside.
Det var alt fra mig for denne gang. Jeg håber at rådene giver mening og inspirerer dig til at optimere billederne på din hjemmeside!
De bedste hilsner
Martin Thaulow, CCO & Co-founder af Good people
Martin Thaulow har i flere år opbygget hjemmesider i mono.net, leveret produktbilleder til forskellige webshops, taget professionelle billeder af medarbejdere til hjemmesider, og meget meget mere. Med andre ord har han stor erfaring, og vi i Mono kan stå inde for, at hans arbejde er tip top.
Derfor er Good people blevet officiel mono.net partner. Du kan finde deres Mono Apps "Designopsætning", "Fotopakke", "Design support" og "Avanceret kursus" lige her, og få hjælp til både din hjemmesides opbygning, design, billedindhold og meget mere.