er du usikker på, hvorfor din hjemmeside ikke rangerer godt på Google, eller hvorfor forbrugerne ikke engagerer sig i den? Billedstørrelser for hjemmesider og hjemmeside hastighed og SEO spørgsmål ses ofte påvirker afvisningsprocenter og placeringer.
for mange mennesker har det altid været et mysterium at gemme billeder til internettet. Tunge billeder (originale billedstørrelser med en bredde på 5000 stk., ikke-optimerede billeder) vil ikke kun forringe brugeroplevelsen på din hjemmeside, men vil også have en negativ indvirkning på din SEO-strategi (indlæsningshastighed, afvisningsprocent, placering osv.).
lad os nedbryde listen over retningslinjer for billedstørrelse på hjemmesiden.
Hvorfor er billedstørrelser og hjemmesidens ydeevne vigtige?
hjemmesider tager længere tid at indlæse, når grafikken ikke er optimeret. Langsomme hjemmesider resulterer i en dårlig brugeroplevelse, en mindre sandsynlighed for placering i Google-søgninger og som følge heraf færre forespørgsler og forbrugere.
retningslinjer for billedstørrelse på hjemmesiden nævner, at det at gemme dine fotografier i de rigtige proportioner og optimere dem til internettet kan hjælpe med en række ting, herunder:
• hastighed
ifølge Google research, hvis en hjemmeside tager længere tid end 5 sekunder at indlæse, øges sandsynligheden for, at en mobil besøgende forlader siden med 90%. Du kan fremskynde din hjemmeside sider ved at skrumpe og sænke billedstørrelser.
• brugeroplevelse
besøgende får en mere engagerende oplevelse, når du surfer på din hjemmeside, hvis du bruger overbevisende billeder af høj kvalitet. Du giver dine besøgende en problemfri og jævn oplevelse ved at holde disse fotos optimeret og indlæses hurtigt, hvilket tilskynder dem til at bruge mere tid på din side og udforske dit indhold.
• SEO Ranking
jo før din hjemmeside indlæses, jo højere kan du rangere. På både stationære og mobile enheder indlæses hjemmesider med optimeret grafik væsentligt hurtigere.
• salg
hurtigere indlæsningshastigheder og forbedret SEO kan hjælpe med at tiltrække flere besøgende til din side, hvilket øger dine chancer for at blive kontaktet og booket.
hvad er de mest passende billedstørrelser til hjemmesider?
slående er bygget til at arbejde med en bred vifte af billedstørrelser til forskellige skærmstørrelser, sektioner, stilarter og design. Det er dog lejlighedsvis nyttigt at have et groft koncept for, hvilke dimensioner der skal uploades.
her er et par generelle retningslinjer for billedstørrelse på hjemmesiden, der skal følges!
billedet er taget fra påfaldende
1. Billeder til baggrunden
baggrundsbillederne fra slående er designet til at passe til en bred vifte af skærmstørrelser, fra skærm til tablet til telefon. For at sikre, at din baggrund ser fremragende ud på alle skærme, anbefaler vi en størrelse på 1600 billedpunkter bred med 900 billedpunkter højde. Medtag ikke-baggrundsbilleder af personer, mærker og andre oplysninger med forsigtighed!
2. Indstillinger for baggrunden
for at størrelse/justere din baggrund har du et par alternativer.
Stretch/Cover standard: denne indstilling strækker dit billede for at fylde hele skærmen, både i højde og bredde. Da billedet fungerer som baggrund på enhver skærmstørrelse, er dette normalt den bedste løsning. Men hvis dit billede har indhold på siderne (især venstre og højre), er det muligvis ikke synligt på mobiltelefoner.
Indeholder: Indeholder viser det komplette billede og sikrer, at ingen del af det er hugget af. På nogle enheder kan dette dog resultere i noget hvidt rum.
Center: billedet vises i midten af sektionen og skaleres ikke, hvis du vælger midten. På den anden side vil baggrunden vise hvidt rum omkring kanterne af billedet er for lille. Nogle elementer i billedet kan hugges af, hvis det er for stort, især på mindre skærme.
Tile: Tile vil centrere og derefter gentage et billede, som er praktisk til at skabe mønstre.
for at starte retningslinjerne for billedstørrelse på hjemmesiden skal du notere, hvor bredt billedet vises på siden.
billedet er taget fra påfaldende
• baggrundsbilleder
den ideelle størrelse af baggrundsbillederne er 1600h900ph
• billeder i fuld bredde
de skal være mindst 1400 billedbilleder brede for de bedste resultater. I henhold til retningslinjerne for billedstørrelse
• billeder med halv bredde
billeder med halv bredde skal være mindst 700 gange brede for den bedste kvalitet.
• billeder af bredde
billeder skal være mindst 480 gange brede for at få billeder af den bedste kvalitet på 1/3 bredde.
• billeder af bredde
for de bedste billeder i 1/4 bredde skal de være mindst 360 billedpunkter brede.
• små ikoner og logoer
de skal være mindst 100 billedpunkter brede.
• galleri billeder
enhver størrelse er fint for galleri billeder! Billeder i galleriet åbnes i en lysboks oven på din hjemmeside.
hvilken størrelse billede kræves til din hjemmeside?
billeder skal være så store som nødvendigt for at passe til deres “containere” for maksimal hjemmesideydelse, afhængigt af dit sidelayout. Billeder er ofte større; blogbilleder er mellemstore (i en bredde svarende til sidebredden minus sidebjælken); miniaturebilleder er mindre osv.
i henhold til retningslinjerne for billedstørrelse på hjemmesiden er det vigtigt først at fastslå billeddimensioner for at beregne bredden på dit sides indholdsområde. Du kan bruge et plugin til “sidelineal” til at hjælpe dig med at træffe foranstaltningerne, eller du kan bruge udviklerværktøjerne integreret i din internetsøgemaskine, hvis du har erfaring: Højreklik på et hvilket som helst sideelement og vælg “Undersøg” i rullemenuen.
billedet er taget fra slående
brug derefter elementvælgerværktøjet på værktøjslinjen til at holde musepekeren over det billede eller indhold, du er interesseret i:
billedet er taget fra påfaldende
billedet er taget fra påfaldende
i dette tilfælde kræver kolonnen ovenfor et billede med en bredde på mindst 525 billedpunkter.
vi siger “i det mindste”, fordi billeder i nyere smartphones med “retina”-skærme med høj densitet skal være større end det for at se så skarpe ud som muligt.
overvej følgende scenarier:
A. billedstørrelse i fuld bredde
retningslinjerne for billedstørrelse på hjemmesiden anbefaler 2560 billedbilleder i bredden for lysbilleder i fuld bredde (som automatisk strækker sig til bro.serens fulde størrelse). Dette er den sædvanlige opløsningsbredde for 27 “og 30” skærme.
billeder kan være så høje, som du vil have dem til at være for at opnå det billedformat, du vælger. Helsides lysbilleder, for eksempel, som er almindelige på bryllupsfotograferingshjemmesider, opretholder det originale billedformat for fotografierne. Andre hjemmesider gør brug af et billede, der spænder over hele bredden af siden, men er mindre i højden (hvilket fører til et billedformat på omkring 3:1).
følgende er et eksempel på” panoramiske ” billeder fra fotografiske hjemmesider:
billedet er taget fra påfaldende usres hjemmeside
billederne skal være 2560 (afrundes til 2500ph) billedbilleder brede og enhver højde, du vælger for billeder, der spænder over hele bredden af bro.sereren (afhængigt af om du vil bevare dine billeders oprindelige billedformat eller gå til et mere panoramisk snit).
dette er ikke et tilfælde, hvor vi er nødt til at fordoble billedstørrelsen for retina-skærme, fordi det ville resultere i massive 5000 billeder (for ikke at tilføje farerne ved billedtyveri med store filstørrelser).
juster den ønskede billedstørrelse for mindre dias, der ikke optager hele bredden af siden, men kun en del af den (måske 2000ph eller 1800ph osv.)
billedet er taget fra slående usres hjemmeside
B. billedstørrelser i gallerier (og miniaturebilleder, der forstørres i en Lysboksvisning)
Miniaturegallerier er unikke situationer, hvor størrelsen på dine miniaturebilleder ignoreres for at sikre, at fotos er store nok, når de forstørres.
et gitter af miniaturebilleder, der, når de klikkes på, åbnes i en fuldskærmsvisning (typisk med et halvtransparent overlay nedenunder) kaldes en “lysboksvisning”:
fordi disse fotografier åbnes i fuldskærmstilstand, anbefaler retningslinjerne for billedstørrelse at gøre dem mindst 1500 billedbilleder brede (på den længste kant) for at få dem til at se godt ud på desktops og tablets.
du kan endda gå op til 2000 billedpunkter, hvis du ønsker at tilføje nogle ekstra “vovefaktor”, selv om det normalt ikke er tilfældet.
billeder justeres alligevel af bro.sereren på mobile enheder, og 1500ph er stor nok til at se sprød ud på smartphones med “retina”-skærme med høj PPI.
lodrette / portrætbilleder med en maksimal højde på 1200 billedpunkter (f.eks. 800h1200 billedpunkter for et 2:3 lodret billede eller 900h1200 billedpunkter for et 3:4 lodret billede) kan være endnu mindre.
hvis visningen tillader at gennemse mellem fotos ved hjælp af sidepile, kugler, stryge på mobil eller tastaturpile på skrivebordet, vil begrænsning af billeddimensionerne som denne holde filstørrelsen rimelig kort, hvilket resulterer i hurtigere billedbelastninger:
C. anbefalede billedstørrelser til blogindlæg og andre statiske billeder i sidelayout
hvis dine blogfotos ikke kræver en klik for at forstørre (eller “lysboks”)-funktion, skal de dimensioneres i henhold til den anbefalede billedstørrelse kolonne eller indholdsområdets bredde.
Tag følgende eksempel på et enkelt blogindlæg:
billedet er taget fra slående usres hjemmeside
du kan fastslå den reelle bredde af indholdsområdet ved at måle ethvert afsnit af tekst ved hjælp af de ovenfor beskrevne metoder, for eksempel:
billedet er taget fra slående usres hjemmeside
Alternativt, hvis du allerede har billeder, kan du se, hvilken størrelse bro.sereren ændrer størrelsen på dem til.
for at få de samme oplysninger kan du bruge et plugin som Se Billedinfo (egenskaber).
med disse oplysninger (825 billedpunkter for eksempel) kan du nu fordoble størrelsen for at tage højde for retina-skærme (så 1650 billedpunkter i bredden).
afhængigt af dit steds tema og din risikotolerance for billedtyveri, kan du reducere denne mængde til en mere fornuftig 1200 billedpunkter på den længste kant (så vandrette billeder skal være 1200 gange brede, og lodrette billeder skal være 1200 gange høje, mens de bevarer deres originale billedformat).
mindre fotos, der bruges som miniaturebilleder (som ikke behøver at udvides), er underlagt den samme beslutningsproces.
konklusion
disse retningslinjer for billedstørrelse gælder ikke rigtig for fotoarkiveringstjenester som PhotoShelter eller SmugMug (som har indbyggede sikkerhedsforanstaltninger og genererer miniaturebilleder med lav opløsning fra dine originale high-res-filer efter behov af siden), eller når du sælger disse billeder som overførsler eller udskrifter, som nævnt i begyndelsen.
at følge disse retningslinjer for billedstørrelse på hjemmesiden er et must, hvis du har et selvhostet sted og kun har brug for at præsentere dine fotografier på nettet.
at vælge de rigtige billeder er et vigtigt aspekt ved at skabe en visuelt tiltalende og hurtig loading hjemmeside. Der er uden tvivl en læringskurve. Der er dog andre fordele at have, og det er alt sammen en del af spændingen ved at oprette og vedligeholde en hjemmeside!