er du usikker på hvorfor nettstedet ditt ikke rangerer godt På Google eller hvorfor forbrukerne ikke engasjerer seg med Det? Bildestørrelser for nettsteder og nettsidehastighet og SEO-problemer blir ofte sett på å påvirke bounce-priser og rangeringer.
for mange mennesker har lagring av bilder på nettet alltid vært et mysterium. Tunge bilder (originale bildestørrelser på 5000px bredde, uoptimaliserte bilder) vil ikke bare forringe brukeropplevelsen på nettstedet ditt, men vil også ha en negativ innvirkning PÅ SEO-strategien din (lasthastighet, avvisningsfrekvens, rangering, etc.).
La oss bryte ned listen over retningslinjer for bildestørrelse på nettstedet.
Hvorfor Er Bildestørrelser Og Nettstedytelse Viktig?
Nettsteder tar lengre tid å laste Inn når grafikk ikke er optimalisert. Langsomme nettsteder resulterer i en dårlig brukeropplevelse, en mindre sannsynlighet for rangering I Google-søk, og som et resultat færre spørringer og forbrukere.
retningslinjer For Bildestørrelse på Nettstedet nevner at lagring av bildene dine i de riktige proporsjonene og optimalisering av dem for nettet kan hjelpe med en rekke ting, inkludert:
ifølge Google research, hvis en nettside tar lengre tid enn 5 sekunder å laste, øker sannsynligheten for at en mobil besøkende forlater siden med 90%. Du kan øke hastigheten på nettsidene dine ved å krympe og senke bildestørrelser.
• Brukeropplevelse
Besøkende vil ha en mer engasjerende opplevelse når du surfer på nettstedet ditt hvis du bruker høykvalitets, overbevisende bilder. Du gir en sømløs og smidig opplevelse for de besøkende ved å holde disse bildene optimalisert og lastes raskt, noe som oppfordrer dem til å bruke mer tid på nettstedet ditt og utforske innholdet ditt.
• SEO Rangering
jo raskere nettstedet ditt laster, jo høyere kan du rangere. På både stasjonære og mobile enheter lastes nettsider med optimalisert grafikk vesentlig raskere.
• Salg
Raskere lastehastigheter og forbedret SEO kan bidra til å tiltrekke flere besøkende til nettstedet ditt, noe som øker sjansene for å bli kontaktet og bestilt.
Hva Er De Mest Passende Bildestørrelsene for Nettsteder?
Strikingly er bygget for å fungere med et bredt spekter av bildestørrelser for forskjellige skjermstørrelser, seksjoner, stiler og design. Det er imidlertid noen ganger nyttig å ha et grovt konsept av hvilke dimensjoner som skal lastes opp.
Her er noen generelle retningslinjer for bildestørrelse for nettstedet å følge!
Bildet er tatt Fra Påfallende
1. Bilder For Bakgrunnen
bakgrunnsbildene Fra Slående er designet for å passe til et bredt spekter av skjermstørrelser, fra skjerm til nettbrett til telefon. For å sikre at bakgrunnen din ser utmerket ut på alle skjermer, anbefaler vi en størrelse på 1600 piksler bred og 900 piksler høyde. Inkluder ikke-bakgrunnsbilder av personer, merker og annen informasjon med forsiktighet!
2. Innstillinger For Bakgrunnen
til størrelse / justere bakgrunnen, har du noen alternativer.
Stretch/Cover standard: dette alternativet strekker bildet for å fylle hele skjermen, både i høyde og bredde. Fordi bildet vil fungere som bakgrunn på en hvilken som helst skjermstørrelse, er dette vanligvis den beste løsningen. Men hvis bildet ditt har innhold på sidene (spesielt venstre og høyre), kan det ikke være synlig på mobiltelefoner.
Contain: Contain vil vise hele bildet, slik at ingen deler av det er kappet av. På enkelte enheter kan dette imidlertid føre til noe hvitt mellomrom.
Senter: bildet vil bli vist i midten av seksjonen og vil ikke bli skalert hvis du velger senteret. På den annen side vil bakgrunnen vise hvitt mellomrom rundt kantene på bildet er for lite. Noen elementer i bildet kan hakkes av hvis det er for stort, spesielt på mindre skjermer.
Tile: Tile vil senter og deretter gjenta et bilde, som er nyttig for å lage mønstre.
for å starte retningslinjene for bildestørrelse på nettstedet, noter deg hvor bredt bildet vises på siden.
Bildet er tatt Fra Slående
den ideelle størrelsen på bakgrunnsbildene er 1600x900px
• bilder I full bredde
de Skal være minst 1400 piksler brede for å få de beste resultatene. I henhold til retningslinjene for bildestørrelse
• bilder Med Halv bredde
bilder Med Halv bredde bør være minst 700 px brede for best mulig kvalitet.
Bilder skal være minst 480px brede for best kvalitet 1/3 bredde bilder.
for best kvalitet 1/4 bredde bilder, bør de være minst 360 piksler bred.
de skal være minst 100 piksler brede.
• Galleri bilder
Enhver størrelse er greit for galleri bilder! Bilder i galleriet åpnes i en lysboks på toppen av nettstedet ditt.
Hvilken Størrelse Bilde Kreves For Nettstedet ditt?
Bilder skal være så store som nødvendig for å passe til «beholderne» for maksimal ytelse på nettstedet, avhengig av sideoppsettet. Lysbildeseriebilder, for eksempel, er ofte større; bloggbilder er mellomstore( med en bredde som er lik sidebredden minus sidepanelet); miniatyrbilder er mindre, og så videre.
I henhold til retningslinjene for bildestørrelse på nettstedet, er det viktig å først fastslå bildedimensjoner for å beregne bredden på nettstedets innholdsområde. Du kan bruke en» page ruler » nettleser plugin for å hjelpe deg med å ta tiltakene, eller du kan bruke utviklerverktøyene integrert i nettleseren din hvis du har erfaring: Høyreklikk på et hvilket som helst sideelement og velg «Inspiser» fra rullegardinmenyen.
Bildet er tatt Fra Påfallende
bruk deretter elementvelger-verktøyet på verktøylinjen til å holde markøren over bildet eller innholdsdelen du er interessert i:
Bildet er tatt Fra Påfallende
Bildet er tatt Fra Slående
i dette tilfellet krever kolonnen ovenfor et bilde med en bredde på minst 525 piksler.
vi sier «minst» fordi bilder i nyere smarttelefoner med høy tetthet «retina» skjermer må være større enn det for å se så skarpe som mulig.
Vurder følgende scenarier:
A. Bildestørrelse For Lysbildefremvisning I Full Bredde
retningslinjene for bildestørrelse for nettsted anbefaler 2560 piksler i bredde for lysbildefremvisninger i full bredde(som automatisk strekker seg til nettleserens fulle størrelse). Dette er den vanlige oppløsningsbredden for 27″ og 30″ skjermer.
Bilder kan være så høye som du vil at De skal være for å oppnå aspektforholdet du velger. Helsides lysbildeserier, for eksempel, som er vanlige på bryllupsfotograferingsnettsteder, opprettholder det opprinnelige aspektforholdet til fotografiene. Andre nettsteder bruker en lysbildefremvisning som spenner over hele bredden på siden, men er mindre i høyde (fører til et sideforhold på rundt 3:1).
følgende er et eksempel på «panorama» lysbildeserier fra fotografiske nettsteder:
Bildet er tatt Fra Slående usres nettsted
Bilder skal være 2560 (avrunde til 2500px) piksler brede og hvilken høyde du velger for bilder som spenner over hele bredden av nettleseren(avhengig av om du vil bevare bildens innfødte aspektforhold eller gå for en mer panoramisk kutt).
Dette er ikke et tilfelle der vi trenger å doble bildestørrelsen for retina-skjermer fordi det vil resultere i massive 5000px-bilder (ikke for å legge til farene ved bildetyveri, med store filstørrelser).
Juster ønsket bildestørrelse for mindre lysbildeserier som ikke tar opp hele bredden på siden, men bare en del av den (kanskje 2000px eller 1800px, etc.)
Bildet er tatt fra Slående usres nettsted
B. Bildestørrelser I Gallerier (Og Miniatyrbilder Som Forstørres I En Lysboksvisning)
Miniatyrgallerier er unike situasjoner der størrelsen på miniatyrbildene dine ignoreres for å sikre at bildene er store nok når de forstørres.
et rutenett med miniatyrbilder som, når de klikkes på, åpnes i en lysbildefremvisning i fullskjerm (vanligvis med et halvtransparent overlegg under), refereres til som en «lysboksvisning»:
fordi disse bildene åpnes i fullskjermmodus, anbefaler retningslinjene for bildestørrelse på nettstedet å gjøre dem minst 1500 piksler brede (på den lengste kanten) for å få dem til å se bra ut på skrivebord og nettbrett.
Du kan til og med gå opp til 2000 piksler hvis du vil legge til litt ekstra «wow-faktor», selv om det vanligvis ikke er tilfelle.
Bilder justeres av nettleseren på mobile enheter uansett, og 1500px er stor nok til å se skarp ut på smarttelefoner med høy-ppi «retina» – skjermer.
Vertikale/stående bilder med en maksimal høyde på 1200 piksler (for eksempel 800×1200 piksler for et 2:3 vertikalt bilde eller 900×1200 piksler for et 3:4 vertikalt bilde) kan være enda mindre.
Hvis lysbildeserien tillater surfing mellom bilder ved hjelp av sidepiler, kuler, sveipe på mobil eller tastaturpiler på skrivebordet, begrenser bildedimensjonene som dette, filstørrelsen er rimelig kort, noe som resulterer i raskere bildebelastninger:
C. Anbefalte Bildestørrelser For Blogginnlegg og Andre Statiske Bilder I Sideoppsett
hvis bloggbildene dine ikke krever en klikk for å forstørre (eller «lysboks»)-funksjon, bør de dimensjoneres i henhold til kolonnen eller innhold områdets bredde.
Ta følgende eksempel på et enkelt blogginnlegg:
Bildet er tatt Fra Slående usres nettsted
du kan fastslå den virkelige bredden på innholdsområdet ved å måle et tekststykke ved hjelp av metodene som er skissert ovenfor, for eksempel:
Bildet er tatt fra Slående usres nettsted
Alternativt, hvis du allerede har bilder, kan du se hvilken størrelse nettleseren endrer størrelsen på dem til.
for å få den samme informasjonen, kan du bruke en nettleser-plugin som View Image Info (properties).
med denne informasjonen (for eksempel 825 piksler) kan du nå doble størrelsen for å ta hensyn til retina-skjermer (så 1650 piksler i bredde).
Avhengig av nettstedets tema og risikotoleransen for bildetyveri, kan du redusere denne mengden til en mer fornuftig 1200 piksler på den lengste kanten (så horisontale bilder skal være 1200px brede, og vertikale bilder skal være 1200px høye, samtidig som de beholder sitt opprinnelige aspektforhold).
Mindre bilder som brukes som miniatyrbilder (som ikke trenger å bli utvidet) er underlagt samme beslutningsprosess.
Konklusjon
disse retningslinjene for bildestørrelse på nettstedet gjelder egentlig ikke for bildearkiveringstjenester som PhotoShelter eller SmugMug (som har innebygde sikkerhetstiltak og genererer miniatyrbilder med lav oppløsning fra de opprinnelige høyoppløselige filene etter behov fra nettstedet), eller når du selger disse bildene som nedlastinger eller utskrifter, som nevnt i begynnelsen.
Å Følge disse retningslinjene for bildestørrelse er et must hvis du har et eget nettsted og bare trenger å presentere bildene dine på nettet.
Å Velge de riktige bildene Er et viktig aspekt ved å skape et visuelt tiltalende og raskt lastende nettsted. Det er uten tvil en læringskurve. Men det er andre fordeler å være hadde, og det er alle en del av spenningen ved å opprette og vedlikeholde et nettsted!