Beste praksis for bilde i Squarespace
Store og tunge bildefiler kan gjere nettsida di unødvendig treig. (Snegle på tastatur.)
Foto: @pixelshot / Canva
Store og tunge bildefiler kan gjere nettsida di unødvendig treig. Difor er det viktig å formattere bilda dine på ein god måte. I dette innlegget får du vite kva som er beste praksis for bildebruk i Squarespace, og kva du bør gjere med bilda dine FØR du legg dei inn på nettsida di.
1. Lagre bilda i rett format FØR du legg dei inn i Squarespace
Gjer det til ein regel at du alltid lagrar bilda dine i både rett storleik og filformat, før du lastar dei inn i Squarespace. Lag deg ein bildebank med god struktur, der du lett kan finne tilbake både til originalbilde og bilde som er klare til publisering. Hugs å få med opplysningar om fotograf/bildebyrå, slik at du kan kredittere desse, utan å måtte kaste bort unødig tid på å leite.
Les også: 11 tips for bra bildebruk
2. Så store skal bilda vere i Squarespace
Squarespace lar deg laste opp filer på inn til 20 MB, men så store filer vil gjere nettsida di tung og treig. Squarespace anbefalar at du held deg under 500 KB per bilde. Sjølv brukar eg å halde meg innanfor 300 KB per bilde, og eg synest det gir god nok bildekvalitet i dei aller fleste tilfella. Er du usikker på kor stort eit bilde du allereie har lasta inn er, kan du sjekke det slik:
Legg til ei bildeblokk kvar som helst på ei side, og vel SEARCH FOR IMAGES i redigeringsboksen.
Finn det aktuelle bildet i My Library og klikk på dei tre prikkane i øvre høgre bildekant. I boksen som kjem opp, vil du finne Size, altså storleiken på bildet ditt.
Slett bildeblokka etterpå.
3. Så breie skal bilda vere i Squarespace
Kor stor dimensjon eit bilde har før du lastar inn på sida di, kan ha stor innverknad på korleis bildet tek seg ut på skjermen.
Squarespace anbefalar å bruke bilde som er mellom 1500 og 2500 pikslar breie. Bilde med mindre enn 1500 pikslar, kan fort bli uskarpe og pikselerte.
Eg foreslår å prøve 1500 pixlar på alle vanlege bilde. Til eitt eller nokre få bakgrunnsbilde og bannerbilde kan du eventuelt bruke 2500 pixlar.
4. Filtypar i Squarespace
Du kan velje mellom fleire ulike filtypar som kan lastast opp til Squarespace-sida di:
.jpg
.png
.gif
I dei aller fleste tilfella bør du bruke .jpg-format. Dette formatet er godt likt av dei ulike nettlesarane, noko som verkar positivt for synlegheita til sida di. .jpg-filer er også enkle å redusere storleiken på, og du kan lett halde deg innanfor 300-500 KB per bilde.
Eit unnatak frå .jpg-regelen, er bilde med transparent bakgrunn, bilde med tekst eller viktige små detaljar. Då vil .png vere den rette filtypen å bruke.
.gif-animasjonar tek ofte stor plass, og bør brukast med varsemd.
5. Bildeforhold i Squarespace (lengd : breidd)
I Squarespace er det svært enkelt å skjere til bilda etter at du har lagt dei inn på sida di. Så lenge du sikrar at breidda på bildet ditt er minst 1500 pikslar, er det ingen fare. Her er dei ulike formata som Squarespace lar deg velje mellom:
Kvadratisk (1:1)
Ståande (2:3, 3:4, 4:5, 9:16)
Liggande (3:2, 4:3, 5:4, 16:9).
6. Bannerbilde i Squarespace
Du kan legge til bannerbilde på alle sider ved å legge til eit innhaldsfelt (section) i toppen av sida. Deretter legg du på eit bakgrunnsbilde i dette innhaldsfeltet. Du kan legge tekst eller knappar som overlegg på dette biletet, og du kan legge fleire seksjonar under bannerbildet for å legge til meir innhald på same sida.
Slik blir bannerbilda dine gode:
Bruk bilde som er mellom 1500 og 2500 pikslar breie.
Hald storleiken under 300–500 KB.
Pass på at bilda er breiare enn dei er høge. Liggande bilde med forholdet 16:9 fungerer bra.
Ikkje bruk bilde med tekst på sjølve bildet. Legg heller tekst som overlegg på bildet.
Bruk gjerne illustrasjonsbilde utan menneske eller med abstrakte mønster, om du skal ha tekst på bilda.
Om du har tekst på bilde med menneske, pass på at ingenting dekker ansiktet. Sjekk korleis teksten dekker bildet både på stor og liten skjerm, inkludert på smarttelefon.
7. Bakgrunnsbilde i Squarespace
Bakgrunnsbilde blir lagt til på same måten som bannerbilde, men som ein seksjon lenger nede på sida. Det kan vere fint å bruke bakgrunnsbilde for å bryte opp innhaldet på sida di. Bruk dei same reglane for storleik for bakgrunnsbilda som for bannerbilda i punkt 6.
8. Bildegalleri i Squarespace
Galleribilde er eigentleg akkurat som andre bilde, og du bør også her dei vere 1500 pikslar breie og mindre enn 500 KB. Eg vil dessutan anbefale deg å vere påpasseleg med utsnitta på bilda dine. Eg har eigentleg sansen for å halde seg til eit fast bildeforhold på heile nettstaden din. Det blir oftast både ryddig og fint. Men i bildegalleriet synest eg dette er ekstra viktig.
Om du er konsekvent her, vil Squarespace vil få ein enklare jobb med å vise sida di på ein god måte. Dette gjeld uanett om du vel å vise bilda dine i lysbildeshow, bildenett (grid), karusell eller stabla (stacked).
9. Så stor skal logoen vere i Squarespace
Sjølv om logoen din truleg vil vere mindre enn dei andre bilda dine, er det lurt å bruke ei bildefil som er stor nok (men ikkje meir enn 300–500 KB) og brei nok til at logoen din blir klår og skarp, uansett kor stor skjermen er. Når du har lagt inn logoen, kan du framleis eksperimentere med storleiken, til du finn kva som passar på di nettside.
10. Faneikon (favicon) i Squarespace
Faneikonet er det vesle symbolet som du kan sjå øvst på dei ulike fanene i nettlesaren. Det er eit lite, men gjenkjenneleg merke for bedrifta di. Det kan vere identisk med logoen di, eller ha ei eiga utforming som er i tråd med bedriftsprofilen.
Ikonet er verkeleg bitte lite. Du kan laste inn ikon som er mellom 100 x 100 og 300 x 300 pikslar. Dette blir nedskalert av Squarespace til berre 16 x 16 pikslar. Ikonet ditt må altså vere kvadratisk.
Bruk .png-format eller .ico-format til faneikonet.
11. Bruk av tekst på bilde, bildetittel, bildetekst og metatekst i Squarespace
Om du vil ha tekst på eit bilde, bør du så langt det er mulig legge teksten som overlegg på bilda dine. Dette gjer teksten søkbar, og teksten vert synleg, sjølv om biletet vert krympa til ulike skjermar.
I Squarespace vil tittelen, eller eventuelt bildeteksten, fungere som alt-tekst, om du ikkje har lagt til alt-tekst på annan måte. Bildetitlar og alt-tekst fortel søkemotorane kva bildet handar om, noko som vil gjere det meir sannsynleg at det dukkar opp i søkeresultat.
Les også: Dette innhaldet bør du ha på nettsida di
Lykke til!
Eg håpar bloggposten var nyttig. Har du tilbakemeldingar, spørsmål eller tips til tema for denne bloggen, så send meg gjerne ein e-post.
Dette innlegget vart første gang publisert 28. september 2021.
Monika Haanes Waagan, Akka AS.
Kjelder: Squarespace.com, paigebrunton.com
