Teie veebisaidil 8 pildivigu, mida tuleb vältida
Suured pildid, galeriid ja raskekujulised kujundused on veebidisaini suur trend. Selle esteetika maksimaalseks kasutamiseks peate veenduma, et iga teie veebisaidi pilt sobib kuvariga ja esindab teie brändi hästi.
Disainerite poolt on tehtud palju vigu, alates tehnilistest teemadest kuni pildikvaliteedini. Kuid te ei pea veebisaitide piltidega töötades ühte neist lõksudest langema. Siin vaatleme pilti vigu ja kuidas neid parandada või vältida. (Selle postituse boonusena on meil esitatud lõbusate ja toredate piltide kollektsioon surmast kuni Stock Photoi hiljutiste objektide kollektsioonini.)
Viga: tohutute failide üleslaadimine
Täissuuruses pildid on prinditööde puhul ilusad (ja vajalikud), kuid võivad veebi kasutamisel tekkida probleeme. Suured pildid laaditakse aeglaselt; aeglased laadimisajad panevad kasutajad teie saidi hülgama.
Kahjuks on kerge lõksu langeda. Paljud taustprogrammid võimaldavad suurte piltide üleslaadimist ja kui te just sellele tähelepanu ei pööra, ei pruugi te isegi teada, et faile laaditakse üles uskumatult suuruses. Erinevad pildid erinevatel kasutusviisidel nõuavad erinevaid pildi spetsifikatsioone. Vaadake oma brändi või veebisaidi juhendeid, et saaksite teada, millised on teie saidi levinumate pildialade mõõtmed.
Kujutistele mõeldes on oluline ka failitüüp. Ärge kasutage veebi jaoks tiff-i. Kõige tavalisemad ja kasutatavad failivormingud on PNG (arvuti loodud pildid, näiteks diagrammid või logod või kui läbipaistvus on vajalik), JPG (fotod) või GIF (animatsioonid).
Lahendus: lihtne lahendus on pildi suuruse määramine raami mõõtmetele, kus see kuvatakse õige veebi eraldusvõime korral. Kuid selles on veel natuke. Salvestage iga pilt saidil optimaalseks kasutamiseks ja sotsiaalseks jagamiseks. (Näiteks Pinteresti pildi laius on 600 pikslit; kui soovite, et pilt oleks jagatav, peaks see olema selle suurus.)
Viga: unustamine kärpida
Hiiglaslike failide kasutamine võib saidi rabada, seega saab kasutada ekraanil peidetud täiskaadrilisi pilte. Kärpimine aitab teil näidata visuaale, mida kasutajad soovivad näha, luues määratletud fookuspunkti, mida täiskaadrilise pildi korral ei pruugi seal olla.
Kujutiste kärpimise puudumine võib tekitada ka dünaamilisest visuaalidest koosneva virna, millel kõigil on ühesugused kujundid ja kuvasuhted. Mitme põllukultuuri ja huvitavate kujundite kasutamine piltide jaoks võib lisada veebisaidile visuaalse intrigeerimise.
Lahendus .: kärpige enne üleslaadimist pilte sobivasse suurusesse või mõõtu, nii et iga pilt renderdaks vastavalt soovile.
Viga: pisipiltide unustamine
Pisipiltide suuruse muutmist ja suuruse muutmist saab käsitleda mitmel viisil. (Paljud neist sõltuvad teie taustaprogrammi võimalustest, nii et me ei vaielda kummagi eeliste üle.) Kuid peate meeles pidama, et värskendate ja pöörate tähelepanu saidi väikseimatele piltidele.
Liiga sageli unustavad disainerid, et pisipilte, piltide eelvaateid ja reklaamfotosid tuleb värskendada koos veebisaidi sisu muudatustega.
Teine suurem viga? Halva pildi kasutamine pisipildil, kuna see on nii suur kui võimalik. Kui pilt on halb, siis ärge seda kasutage. Ükski pilt pole parem kui halb pilt.
Lahendus .: eemaldage kindlasti vanad pisipildid või eelvaated, kui pildid muutuvad ja favicon on praegune.
Viga: otsimata nimed ja metaandmed
Digitaalkaamerad salvestavad mitmesugustel metaväljadel palju teavet, mida ei tõlgita veebi. Võtke see teave piltidelt lahti ja vahetage see kasutatavate andmete jaoks välja. Otsimootorid ei saa piltide sisu lugeda, seetõttu peavad piltide otsimiseks need sisaldama pealkirjas kirjeldavaid sõnu, silte ja ümbritsevat sisu.
Näited kehvadest pildinimedest:
- pilt1.jpg
- DSCN00023.jpg
- prillid% ja% watch.jpg
Palju parem pildinimi sisaldab mõnda kirjeldavat sõna, näiteks klaasid-ja-vaata-ja-taim.jpg. Kujutise sildi viide peaks sisaldama sarnast kirjeldust, näiteks „esemed vastuklaasidel, käekellal ja taimel”. (Ja veenduge, et sõnad kirjutatakse õigesti.)
Lahendus .: kasutage kõigi veebisaidi piltide jaoks tugevaid nimetamismeetodeid ja paaritage kujutisi sisuga, mis on seotud iga visuaaliga. Pildinimed peaksid sisaldama sidekriipsudega eraldatud kirjeldavaid sõnu.
Viga: ebaõige mastaapimine või venitamine
Miski tundub kummalisem, kui inimene, kellel on venitatud nägu või pilt on valesti skaleeritud. Piltide venitamine või mitteproportsionaalne skaleerimine (mis võib olla eriti tavaline, kui toimub teema või tagaosa vahetus) on ei-ei. Iga pilti tuleb muuta vertikaalselt ja horisontaalselt suhtega 1: 1. Kõik muu kahjustab foto terviklikkust.
Lahendus .: jälgige tähelepanelikult kõiki skaleerimise proportsioone ja kontrollige oma saiti perioodiliselt.
Viga: mitmete seadme suuruste kavandamine pole plaanitud
Vastuvõtlikel kujundusraamistikel on piltide jaoks teatud mõju. Kuju või suuruse muutus seadmelt seadmele või orientatsiooni järgi muudab oluliseks dikteerida, kuidas pildid eri seadmetes muutuvad.
Üks levinumaid tavasid on meediumipäringute kasutamine muudatuste kavandamiseks seadme kaupa. CSS võimaldab piltide jaoks rakendada konkreetseid stiile, lähtudes ekraani mõõtmetest, ning aitab piltidel hästi kaadrit rentida, ilma et kujundust puruneks.
Lahendus .: kasutage meediumipäringuid reageerivate raamistike jaoks ja testige piltide renderdamist paljudes seadmetes.
Viga: võrkkesta ekraanide eiramine
Aeg ei olnud sugugi nii kaua aega tagasi, kus 600 piksli laiust 72 ppi laiuses tavaline pilt oli kõik, mida veebisaidi jaoks vaja läks. Kuid ekraanid paranevad kiirusega, kus see enam nii pole.
Sõltuvalt teie raamistikust võib iga pilt sisaldada mitu pilti, mis on salvestatud erineva ekraanisuuruse ja eraldusvõimega, sealhulgas võrkkesta ekraanid. (Võrkkesta ekraanide eraldusvõime võib seadmest erineda, kuid on tavalistest ekraanidest oluliselt kõrgem.)
Lahendus .: kaasake failid ja meediumipäringud, mis on mõeldud spetsiaalselt võrkkesta kuvamiseks. (CSS-trikid võivad aidata.)
Viga: ülekasutatud või üldine kunst
Stock-fotograafia võib olla suurepärane kiire lahendus, kuid võib põhjustada soovimatuid tagajärgi. Fotod, mida kasutatakse liiga paljudel veebisaitidel või millel on nende jaoks lihtsalt üldine ilme, ei loo visuaali, mis loob ühenduse kasutajatega. (Kas te ei soovi, et teie veebisait näeks välja nagu iga teine, mida te seal näete?)
Kui plaanite kasutada fotofotograafiat, kaaluge pilte, mida saate huvitavatel viisidel redigeerida või nendega töödelda. Vältige pilte, mis näevad välja nagu asjad, mida olete mujal näinud (vaadake kõigi konkurentide või sarnaste saitide pilte).
Lahendus: kaaluge fotograafi palkamist oma veebisaidile iseloomuliku suurepärase pildifaili loomiseks. Kaasa visuaale, mis on seotud teie ettevõtte või kaubamärgiga ja kajastavad teie saiti õigesti.
Järeldus
Veebisaidi projekti jaoks piltide valimine ja loomine võib olla üks disainiprotsessi lõbusamaid osi. Hoolige igat pilti ja pikslit kasutades, et teie sait toimiks hästi ja sisaldaks pilte, mis köidavad kasutajaid.
Kas teil on näpunäiteid või näpunäiteid piltide kasutamisel veebiprojektide jaoks? Meile meeldiks teada, mis nad on. Jagage neid kommentaarides.
