är du osäker på varför din webbplats inte rankas bra på Google eller varför konsumenterna inte engagerar sig i den? Bildstorlekar för webbplatser och webbplats hastighet och SEO frågor ses ofta påverkar avvisningsfrekvens och ranking.
för många människor har det alltid varit ett mysterium att spara bilder på webben. Tunga bilder (originalbildstorlekar på 5000px bredd, ooptimerade bilder) kommer inte bara att försämra användarupplevelsen på din webbplats utan kommer också att ha en negativ inverkan på din SEO-strategi (laddningshastighet, avvisningsfrekvens, ranking etc.).
Låt oss bryta ner listan över riktlinjer för webbplatsens bildstorlek.
Varför är bildstorlekar och webbplatsprestanda viktiga?
webbplatser tar längre tid att ladda när grafiken inte är optimerad. Långsamma webbplatser resulterar i en dålig användarupplevelse, en mindre sannolikhet för rankning i Google-sökningar och som ett resultat färre frågor och konsumenter.
riktlinjer för Webbplatsbildstorlek nämner att spara dina fotografier i rätt proportioner och optimera dem för webben kan hjälpa till med en mängd olika saker, inklusive:
• hastighet
enligt Google research, om en webbsida tar längre tid än 5 sekunder att ladda, ökar sannolikheten för att en mobil besökare överger sidan med 90%. Du kan påskynda dina webbsidor genom att krympa och sänka bildstorlekar.
• användarupplevelse
besökare kommer att ha en mer engagerande upplevelse när du surfar på din webbplats om du använder högkvalitativa, övertygande bilder. Du ger dina besökare en sömlös och smidig upplevelse genom att hålla bilderna optimerade och laddas snabbt, vilket uppmuntrar dem att spendera mer tid på din webbplats och utforska ditt innehåll.
• SEO Ranking
ju tidigare din webbplats laddas, desto högre kan du rangordna. På både stationära och mobila enheter laddas webbsidor med optimerad grafik betydligt snabbare.
• försäljning
snabbare laddningshastigheter och förbättrad SEO kan hjälpa till att locka fler besökare till din webbplats, vilket ökar dina chanser att bli kontaktad och bokad.
vilka är de mest lämpliga bildstorlekarna för webbplatser?
slående är byggd för att fungera med ett brett utbud av bildstorlekar för olika skärmstorlekar, sektioner, stilar och mönster. Det är dock ibland användbart att ha ett grovt begrepp om vilka dimensioner som ska laddas upp.
här är några allmänna riktlinjer för webbplatsbildstorlek att följa!
bilden är tagen från slående
1. Bilder för bakgrunden
bakgrundsbilderna från Strikingly är utformade för att passa ett brett utbud av skärmstorlekar, från bildskärm till surfplatta till telefon. För att se till att din bakgrund ser utmärkt ut på alla skärmar rekommenderar vi en storlek på 1600 pixlar bred och 900 pixlar Höjd. Inkludera icke-bakgrundsbilder av personer, varumärken och annan information med försiktighet!
2. Inställningar för bakgrunden
för att storlek/justera din bakgrund har du några alternativ.
Stretch/Cover default: det här alternativet sträcker din bild för att fylla hela skärmen, både i höjd och bredd. Eftersom bilden fungerar som bakgrund på vilken skärmstorlek som helst är det vanligtvis den bästa lösningen. Men om din bild har innehåll på sidorna (särskilt vänster och höger) kanske det inte syns på mobiltelefoner.
innehåller: innehåller visar hela bilden, vilket säkerställer att ingen del av den är hackad av. På vissa enheter kan det dock leda till lite vitt utrymme.
Center: bilden visas i mitten av avsnittet och kommer inte att skalas om du väljer mitten. Å andra sidan kommer bakgrunden att visa vitt utrymme runt kanterna på bilden är för liten. Vissa delar av bilden kan hackas av om den är för stor, särskilt på mindre skärmar.
kakel: kakel kommer att centrera och sedan upprepa en bild, vilket är praktiskt för att skapa mönster.
för att börja riktlinjerna för webbplatsens bildstorlek, notera hur bred bilden visas på sidan.
bilden är tagen från slående
• bakgrundsbilder
den perfekta storleken på bakgrundsbilderna är 1600x900px
• fullbreddsbilder
de ska vara minst 1400 pixlar breda för bästa resultat. Enligt webbplatsens riktlinjer för bildstorlek
• halvbreddsbilder
halvbreddsbilder ska vara minst 700px breda för bästa kvalitet.
• bilder med bredd i bildstorlek i bildstorlek
bilder ska vara minst 480px breda för bästa bildkvalitet med 1/3 bredd.
• bilder med bredd i bildstorlek
för bästa bildkvalitet med 1/4 bredd bör de vara minst 360 pixlar breda.
• små ikoner och logotyper
de ska vara minst 100 pixlar breda.
• galleribilder
vilken storlek som helst är bra för galleribilder! Bilder i galleriet öppnas i en ljuslåda ovanpå din webbplats.
vilken storlek på bilden krävs för din webbplats?
bilderna ska vara så stora som nödvändigt för att passa deras ”behållare” för maximal webbplatsprestanda, beroende på din sidlayout. Bildspelsfoton är till exempel ofta större; bloggbilder är medelstora (med en bredd som är lika med sidbredden minus sidofältet); miniatyrbilder är mindre och så vidare.
enligt riktlinjerna för webbplatsens bildstorlek är det viktigt att först fastställa bilddimensioner för att beräkna bredden på webbplatsens innehållsområde. Du kan använda en ”page ruler” browser plugin för att hjälpa dig att vidta åtgärder, eller så kan du använda utvecklarverktyg integreras i din webbläsare om du har erfarenhet: högerklicka på någon sida element och välj ”Inspektera” från rullgardinsmenyn.
bilden är tagen från slående
använd sedan elementväljarverktyget i verktygsfältet för att sväva över bilden eller innehållssektionen du är intresserad av:
bilden är tagen från påfallande
bild tas från slående
i det här fallet kräver kolumnen ovan en bild med en bredd på minst 525 pixlar.
vi säger ” åtminstone ”eftersom bilder i nyare smartphones med högdensitets” retina ” -skärmar måste vara större än så för att se så skarpa ut som möjligt.
Tänk på följande scenarier:
A. bildspel i full bredd Webbbildstorlek
riktlinjerna för webbplatsbildstorlek rekommenderar 2560 pixlar i bredd för bildspel i full bredd (som automatiskt sträcker sig till webbläsarens fulla storlek). Detta är den vanliga upplösningsbredden för 27 ”och 30” bildskärmar.
bilder kan vara så höga som du vill att de ska vara för att uppnå det bildförhållande du väljer. Helsides bildspel, till exempel, som är vanliga på bröllopsfotograferingswebbplatser, behåller det ursprungliga bildförhållandet för fotografierna. Andra webbplatser använder ett bildspel som sträcker sig över hela sidans bredd men är mindre i höjd (vilket leder till ett bildförhållande på cirka 3:1).
följande är ett exempel på” Panorama ” bildspel från Fotografiska webbplatser:
bilden är tagen från slående usre hemsida
bilderna ska vara 2560 (avrunda till 2500px) pixlar bred och valfri höjd du väljer för bilder som spänner över hela bredden av webbläsaren (beroende på om du vill behålla dina bilder’ native bildförhållande eller gå för en mer panorama cut).
Detta är inte ett fall där vi behöver fördubbla bildstorleken för retina-skärmar eftersom det skulle resultera i massiva 5000px-bilder (för att inte lägga till farorna med bildstöld, med stora filstorlekar).
justera önskad bildstorlek för mindre bildspel som inte tar upp hela bredden på sidan, men bara en del av den (kanske 2000px eller 1800px, etc.)
bilden är tagen från slående usre hemsida
B. bildstorlekar i gallerier (och miniatyrer som förstoras i en Lightbox vy)
miniatyr gallerier är unika situationer där storleken på dina miniatyrer ignoreras till förmån för att se till att bilderna är tillräckligt stora när de förstoras.
ett rutnät med miniatyrbilder som, när de klickas på, öppnas i ett bildspel i helskärm (vanligtvis med ett halvtransparent överlägg under) kallas en ”lightbox view”:
eftersom dessa fotografier öppnas i helskärmsläge rekommenderar riktlinjerna för webbplatsbildstorlek att göra dem minst 1500 pixlar breda (på längsta kanten) för att få dem att se bra ut på stationära datorer och surfplattor.
du kan till och med gå upp till 2000 pixlar om du vill lägga till lite extra ”wow-faktor”, även om det vanligtvis inte är fallet.
bilder justeras av webbläsaren på mobila enheter ändå, och 1500px är tillräckligt stor för att se skarp ut på smartphones med hög PPI ”retina”-skärmar.
vertikala / porträttbilder med en maximal höjd på 1200 pixlar (till exempel 800×1200 pixlar för en 2:3 vertikal bild eller 900×1200 pixlar för en 3:4 vertikal bild) kan vara ännu mindre.
om bildspelet tillåter bläddring mellan foton med hjälp av sidopilar, kulor, svepning på mobil-eller tangentbordspilar på skrivbordet, begränsar bilddimensionerna så här att filstorleken är rimlig kort, vilket resulterar i snabbare bildbelastningar:
C. rekommenderade bildstorlekar för blogginlägg och andra statiska bilder i sidlayouter
om dina bloggfoton inte kräver en klick-för-förstoring (eller ”lightbox”) – funktion, bör de vara dimensionerade enligt kolumnen eller innehållet områdets bredd.
ta följande exempel på ett enda blogginlägg:
bilden är tagen från slående usre hemsida
du kan fastställa den verkliga bredden av innehållsområdet genom att mäta varje stycke text med hjälp av de metoder som beskrivs ovan, till exempel:
bilden är tagen från slående usre hemsida
alternativt, om du redan har bilder, kan du se vilken storlek webbläsaren ändrar storlek på dem.
för att få samma information kan du använda ett webbläsarplugin som Visa bildinformation (egenskaper).
med den informationen (825 pixlar till exempel) kan du nu dubbla storleken för att ta hänsyn till retina-skärmar (så 1650 pixlar i bredd).
beroende på webbplatsens tema och din risktolerans för bildstöld kan du minska den kvantiteten till en mer förnuftig 1200 pixlar på den längsta kanten (så horisontella bilder ska vara 1200px breda och vertikala bilder ska vara 1200px långa, samtidigt som de behåller sitt ursprungliga bildförhållande).
mindre foton som används som miniatyrbilder (som inte behöver utökas) är föremål för samma beslutsprocess.
slutsats
dessa riktlinjer för webbplatsbildstorlek gäller inte riktigt för arkiveringstjänster för foton som PhotoShelter eller SmugMug (som har inbyggda säkerhetsåtgärder och genererar miniatyrbilder med låg upplösning från dina ursprungliga högupplösta filer efter behov av webbplatsen), eller när du säljer dessa bilder som nedladdningar eller utskrifter, som nämnts i början.
att följa dessa riktlinjer för webbplatsstorlek är ett måste om du har en egen värd webbplats och bara behöver presentera dina fotografier på webben.
att välja rätt bilder är en viktig aspekt för att skapa en visuellt tilltalande och snabbladdande webbplats. Det finns utan tvekan en inlärningskurva. Det finns dock andra fördelar att ha, och det är en del av spänningen att skapa och underhålla en webbplats!