oletko epävarma, miksi sivustosi ei ole sijoittunut hyvin Googlessa tai miksi kuluttajat eivät ole sitoutuneet siihen? Kuvakoot sivustot ja Sivuston nopeus ja SEO kysymyksiä nähdään usein vaikuttavat pomppunopeus ja rankingissa.
monille Kuvien tallentaminen nettiin on aina ollut arvoitus. Raskaat kuvat (alkuperäiset kuvakoot 5000px leveydellä, optimoimattomat kuvat) eivät ainoastaan heikennä sivustosi käyttökokemusta, vaan niillä on myös kielteinen vaikutus SEO-strategiaasi (latausnopeus, pomppunopeus, ranking jne.).
eritellään verkkosivujen kuvakokoohjeiden lista.
miksi kuvakoot ja verkkosivujen suorituskyky ovat tärkeitä?
verkkosivujen lataus kestää kauemmin, kun grafiikkaa ei ole optimoitu. Hitaat sivustot johtavat huonoon käyttökokemukseen, pienempään todennäköisyyteen sijoittua Google-hauissa, ja sen seurauksena vähemmän kyselyitä ja kuluttajia.
sivuston kuvakokoohjeissa mainitaan, että valokuvien tallentaminen oikeisiin mittasuhteisiin ja niiden optimointi Webiä varten voi auttaa monissa eri asioissa, kuten:
• nopeus
Google Researchin mukaan, jos verkkosivun lataaminen kestää kauemmin kuin 5 sekuntia, todennäköisyys sille, että mobiilikävijä hylkää sivun kasvaa 90%. Voit nopeuttaa verkkosivujasi kutistamalla ja pienentämällä kuvakokoja.
• käyttäjäkokemus
kävijöillä on mukaansatempaavampi kokemus verkkosivujasi selatessa, jos käytät korkealaatuisia, kiehtovia kuvia. Tarjoat kävijöille saumattoman ja sujuvan kokemuksen pitämällä kuvat optimoituna ja lataamalla ne nopeasti, mikä kannustaa heitä viettämään enemmän aikaa sivustossasi ja tutkimaan sisältöäsi.
• SEO-Ranking
mitä nopeammin sivustosi latautuu, sitä korkeammalle voit sijoittua. Sekä työpöytä-että mobiililaitteissa optimoidulla grafiikalla varustetut verkkosivut latautuvat huomattavasti nopeammin.
• myynti
nopeampi latausnopeus ja parannettu SEO voivat auttaa houkuttelemaan enemmän kävijöitä sivustollesi, mikä lisää mahdollisuuksiasi saada yhteyttä ja varata.
mitkä ovat sopivimmat kuvakoot verkkosivustoille?
Hätkähdyttävä on rakennettu toimimaan laajalla kuvakoolla eri näyttökokoja, osioita, tyylejä ja malleja varten. Kuitenkin, se on joskus hyödyllistä olla karkea käsitys siitä, mitä ulottuvuuksia ladata.
Tässä muutamia yleisiä verkkosivujen kuvakokoohjeita, joita kannattaa noudattaa!
Kuva on otettu räikeästi
1. Kuvat taustalle
Strikinglyn taustakuvat on suunniteltu sopimaan monenlaisiin näyttökokoihin monitorista tablettiin ja puhelimeen. Jotta taustasi näyttää erinomaiselta kaikilla näytöillä, suosittelemme kokoa 1600 pikseliä leveä 900 pikseliä Korkeus. Sisällytä muita kuin taustakuvia henkilöistä, tuotemerkeistä ja muista tiedoista varoen!
2. Asetukset Tausta
kokoa / kohdista tausta, sinulla on muutamia vaihtoehtoja.
Stretch/Cover oletus: tämä asetus venyttää kuvan täyttämään koko näytön sekä korkeudeltaan että leveydeltään. Koska kuva toimii taustana millä tahansa näytön koolla, tämä on yleensä paras ratkaisu. Jos kuvassasi on kuitenkin sisältöä sivuilla (erityisesti vasemmalla ja oikealla), se ei välttämättä näy matkapuhelimissa.
Contain: Contain näyttää koko kuvan varmistaen, ettei siitä ole katkaistu mitään osaa. Joissakin laitteissa tämä voi kuitenkin aiheuttaa jonkin verran valkoista tilaa.
keskusta: kuva näkyy osion keskellä, eikä sitä skaalata, jos valitsee keskipisteen. Toisaalta taustalla näkyy valkoinen tila kuvan reunoilla on liian pieni. Osa kuvan elementeistä saatetaan katkaista, jos se on liian suuri, varsinkin pienemmillä näytöillä.
laatta: laatta keskittää ja toistaa sitten kuvan, joka on kätevä kuvioiden luomiseen.
aloittaaksesi sivuston kuvakoko-ohjeet, merkitse muistiin, kuinka laajalla sivulla kuva näkyy.
Kuva on otettu räikeästi
• taustakuvat
taustakuvien ihannekoko on 1600x900px
• Täysleveät kuvat
niiden tulee olla vähintään 1400 pikseliä leveitä, jotta saadaan paras tulos. Verkkosivuston kuvakokoohjeiden mukaan
• Puolileveyden kuvien
Puolileveyden kuvien tulisi olla vähintään 700px leveitä parhaan laadun saavuttamiseksi.
• ⅓ leveyskuvien
kuvien tulee olla vähintään 480px leveitä, jotta 1/3-levyinen kuva olisi laadultaan paras.
• ¼ – levyistä kuvaa
parhaimman laatuisissa 1/4-levyisissä kuvissa niiden tulee olla vähintään 360 pikseliä leveitä.
• Pienet kuvakkeet ja logot
niiden tulee olla vähintään 100 pikseliä leveitä.
• Galleriakuvat
mikä tahansa koko sopii galleriakuville! Gallerian kuvat avautuvat valolaatikkoon verkkosivujesi päälle.
minkä kokoinen kuva tarvitaan sivustoosi?
kuvien tulee olla niin suuria kuin on tarpeen, jotta ne mahtuvat ”säilytysastioihinsa” verkkosivuston maksimaalisen suorituskyvyn saavuttamiseksi, riippuen sivun asettelusta. Esimerkiksi diaesityskuvat ovat usein suurempia; blogikuvat ovat keskikokoisia (sivun leveys miinus sivupalkki); pikkukuvat ovat pienempiä ja niin edelleen.
verkkosivuston kuvakokoohjeiden mukaan on tärkeää selvittää ensin kuvan mitat, jotta voidaan laskea sivustosi sisältöalueen leveys. Voit käyttää” page ruler ”-selainlaajennusta apuna toimenpiteiden toteuttamisessa, tai voit käyttää verkkoselaimeesi integroituja kehittäjätyökaluja, jos sinulla on kokemusta: napsauta hiiren kakkospainikkeella mitä tahansa sivuelementtiä ja valitse” tarkasta ” pudotusvalikosta.
Kuva on otettu hätkähdyttävästi
sitten työkalupalkin elementtivalintatyökalulla voit siirtää kuvan tai sisällön osiota, josta olet kiinnostunut:
Kuva on otettu räikeästi
Kuva on otettu räikeästi
tässä tapauksessa yllä oleva sarake vaatii kuvan, jonka leveys on vähintään 525 pikseliä.
sanomme ”ainakin”, koska uudempien älypuhelinten kuvien, joissa on tiheät ”retina”-näytöt, täytyy olla tätä suurempia, jotta ne näyttäisivät mahdollisimman teräviltä.
harkitse seuraavia skenaarioita:
A. Kokoleveyden diaesitys Web-kuvan koko
verkkosivun kuvan kokoohjeissa suositellaan 2560 pikselin leveyttä kokoleveyden diaesityksissä (jotka ulottuvat automaattisesti selaimen kokoiseen kokoon). Tämä on tavallinen resoluutio leveys 27″ ja 30″ näytöt.
kuvat voivat olla niin pitkiä kuin haluat niiden olevan saavuttaaksesi valitsemasi kuvasuhteen. Koko sivun diaesitykset, jotka ovat yleisiä esimerkiksi hääkuvaussivustoilla, säilyttävät kuvien alkuperäisen kuvasuhteen. Muut sivustot käyttävät diaesitystä, joka ulottuu koko sivun leveydelle, mutta on vähemmän korkea (jolloin kuvasuhde on noin 3:1).
Seuraavassa on esimerkki ”panoraama” – kuvaesityksistä valokuvasivustoilta:
Kuva on otettu silmiinpistävän usre: n verkkosivuilta
kuvien tulee olla 2560 pikselin kokoisia (pyöristettynä 2500px: ään) ja minkä tahansa valitsemasi korkeuden kuvia varten, jotka kattavat koko selaimen leveyden (riippuen siitä, haluatko säilyttää kuviesi alkuperäisen kuvasuhteen vai tehdä panoraamakuvauksen).
tämä ei ole tapaus, jossa meidän pitäisi kaksinkertaistaa retina-näyttöjen kuvakoko, koska se johtaisi massiivisiin 5000px-kuviin (ei lisätä kuvavarkauksien vaaroja, joilla on suuri tiedostokoko).
Säädä vaadittu kuvakoko pienempiin diaesityksiin, jotka eivät vie koko sivun leveyttä, vaan vain osan siitä (ehkä 2000px tai 1800px jne.)
Kuva on otettu räikeästi usre: n verkkosivuilta
B. kuvakoot gallerioissa (ja Valolaatikkonäkymässä suurenevat pikkukuvat)
pikkukuvat ovat ainutlaatuisia tilanteita, joissa näytekuvien kokoa ei huomioida sen varmistamiseksi, että kuvat ovat riittävän suuria suurennettuina.
näytekuvien ruudukkoa, joka aukeaa kokoruudun diaesityksenä (jonka alla on yleensä puoliläpäisevä peitto), kutsutaan ”lightbox-näkymäksi”:
koska nämä valokuvat avautuvat kokoruudun tilassa, verkkosivuston kuvakoko-ohjeissa suositellaan niiden levittämistä vähintään 1500 pikselin levyisiksi (pisimmällä reunalla), jotta ne näyttäisivät hyvältä pöytätietokoneissa ja tableteissa.
voit mennä jopa 2000 pikseliin, jos haluat lisätä jotain ylimääräistä ”wow-tekijää”, vaikka näin ei yleensä ole.
kuvia säädetään selaimella mobiililaitteissa muutenkin, ja 1500px on tarpeeksi suuri näyttääkseen terävältä älypuhelimissa, joissa on korkean PPI: n ”retina”-näytöt.
pysty – / muotokuvat, joiden maksimikorkeus on 1200 pikseliä (kuten 800×1200 pikseliä 2:3 pystysuorassa kuvassa tai 900×1200 pikseliä 3:4 pystysuorassa kuvassa) voivat olla vieläkin pienempiä.
jos diaesitys sallii kuvien selaamisen sivunuolilla, luodeilla, pyyhkäisemällä mobiililaitteella tai näppäimistönuolilla työpöydällä, rajoittamalla Kuvan mitat näin, Tiedoston koko pysyy kohtuullisen lyhyenä, mikä johtaa nopeampaan kuvan kuormitukseen:
C. suositellut kuvakoot blogikirjoituksiin ja muihin staattisiin kuviin sivun asettelussa
jos blogikuvasi eivät vaadi Suurenna napsautusta (tai ”lightbox”)-ominaisuutta, ne on mitoitettava sarakkeen tai sisällön mukaan alueen leveys.
ota seuraava esimerkki yhdestä blogikirjoituksesta:
Kuva on otettu silmiinpistävän usren sivuilta
voit selvittää sisältöalueen todellisen leveyden mittaamalla minkä tahansa tekstin kappaleen yllä kuvatuilla menetelmillä, esim.:
Kuva on otettu häkellyttävän usren sivuilta
Vaihtoehtoisesti, jos sinulla on jo kuvia, voit katsoa, minkä kokoiseksi selain niitä muuttaa.
samojen tietojen saamiseksi voit käyttää selainliitännäistä, kuten View Image Info (ominaisuudet).
näillä tiedoilla (esimerkiksi 825 pikseliä) voit nyt kaksinkertaistaa retina-näyttöjen koon (eli 1650 pikseliä leveyttä).
riippuen sivustosi teemasta ja kuvavarkauksien riskinsietokyvystä, voit pienentää tätä määrää järkevämpään 1200 pikseliin pisimmällä reunalla (joten vaakasuuntaisten kuvien tulee olla 1200px leveitä ja pystysuuntaisten kuvien 1200px korkeita säilyttäen alkuperäisen kuvasuhteen).
pikkukuvina käytettävät pienemmät valokuvat (joita ei tarvitse laajentaa) ovat saman päätöksenteon kohteena.
johtopäätös
nämä verkkosivuston kuvakoko-ohjeet eivät oikeastaan päde valokuvien arkistointipalveluihin, kuten PhotoShelter tai SmugMug (joissa on sisäänrakennetut turvatoimet ja jotka luovat matalan resoluution näytekuvia alkuperäisistä korkean resoluution tiedostoistasi sivuston tarpeen mukaan), tai kun myyt näitä kuvia latauksina tai tulosteina, kuten alussa mainittiin.
näiden verkkosivujen kuvakokoohjeiden noudattaminen on välttämätöntä, jos sinulla on itse isännöimäsi sivusto ja sinun tarvitsee vain esittää valokuviasi verkossa.
oikeiden kuvien valinta on tärkeä osa visuaalisesti houkuttelevan ja nopeasti latautuvan verkkosivuston luomista. Oppimiskäyrä on epäilemättä olemassa. Kuitenkin, on olemassa muita etuja on ollut, ja se on kaikki osa jännitystä luoda ja ylläpitää verkkosivuilla!