8 Greške u slikama koje treba izbjegavati na vašoj web lokaciji
Velike slike, galerije i foto-teški dizajni veliki su trend u web dizajnu. Da biste iskoristili sve od ovog estetskog, želite biti sigurni da svaka slika na vašoj web lokaciji odgovara zaslonu i dobro predstavlja vašu marku.
Dizajneri čine puno pogrešaka od tehničkih problema do kvalitete slike. Ali ne morate pasti u jednu od ovih zamki kada radite sa slikama web mjesta. Ovdje ćemo pogledati pogreške u slikama i kako ih ispraviti ili u potpunosti izbjeći. (Kao bonus u ovom postu nudimo kolekciju zabavnih i sjajnih slika od posljednje kolekcije objekata fotografije do fotografije fotografije.)
Pogreška: Prijenos ogromnih datoteka
Slike u punoj veličini lijepe su (i potrebne) kad se radi o poslovima ispisa, ali mogu stvarati probleme kada je riječ o webu. Velike slike polako se učitavaju; sporo vrijeme učitavanja uzrokuje da korisnici napuštaju vašu web lokaciju.
Nažalost, u to je lako upasti zamka. Mnogi pozadinski programi omogućuju prijenos velikih slika i, osim ako ne obraćate pažnju, možda niste ni znali da se datoteke prenose nevjerojatnim veličinama. Različite slike u različitoj uporabi zahtijevaju različite specifikacije slike. Pogledajte vodič za svoju marku ili web mjesto kako biste znali koje su dimenzije uobičajenih područja slike na vašoj web lokaciji.
Prilikom razmišljanja o slikama također je važna vrsta datoteke. Ne upotrebljavajte tiff za web. Najčešći i upotrebljivi formati datoteka su PNG (računalno generirane slike poput grafikona ili logotipa ili kada je potrebna transparentnost), JPG (fotografije) ili GIF (animacije).
Rješenje: Jednostavno rješenje je odrediti veličinu slika za dimenziju okvira tamo gdje će se pojaviti u odgovarajućoj web razlučivosti. Ali ima još malo toga. Spremite svaku sliku za optimalnu upotrebu na web mjestu i za zajedničko dijeljenje. (Širina Pinterest slike, na primjer, je 600 piksela; ako želite da slika bude dostupna za razmjenu, trebala bi biti te veličine.)
Pogreška: zaboraviti na obrezivanje
Dok koristite ogromne datoteke, možete oboriti neko mjesto, pa to možete koristiti i full-frame slike koje su skrivene na ekranu. Obrezivanje pomaže prikazati vizualne prikaze koje korisnici žele vidjeti stvaranjem definirane žarišne točke koja možda neće biti tamo sa slikom u cijelom kadru.
Nedostatak izrezivanja slika također može stvoriti manje dinamičan niz vizualnih prikaza koji svi imaju jednake omjere oblika i izgleda. Upotreba višestrukih usjeva i zanimljivih oblika za slike može dodati web vizualne spletke.
Rješenje: Prije slanja obrežite slike u odgovarajuću veličinu ili dimenziju tako da se svaka slika prikazuje po želji.
Pogreška: Zaboravljanje o umanjenim sličicama
Postoji nekoliko načina kako se rješava veličina i veličina sličica. (Mnoge od njih ovise o vašim backkend mogućnostima, tako da nećemo argumentirati njihove prednosti.) Ali morate upamtiti da ažurirate i obratite pažnju na najmanje slike na vašoj web lokaciji.
Prečesto dizajneri zaboravljaju da će se minijature, pretpregled slika i linkovi morati ažurirati promjenama sadržaja web mjesta.
Druga velika pogreška? Korištenje loše slike u veličini sličica, jer je toliko velika koliko može biti. Ako je slika loša, jednostavno je nemojte koristiti. Nijedna slika nije bolja od loše slike.
Rješenje: Obavezno uklonite stare sličice ili pregleda ako se slike promijene i da je vaš favicon trenutni.
Pogreška: Neistraživa imena i meta podaci
Digitalni fotoaparati štede puno informacija u raznim meta poljima koja se ne prenose na web. Izvucite ove podatke sa slika i zamijenite ih za upotrebljive podatke. Tražilice ne mogu čitati sadržaj slika, tako da bi ih slike pretraživale, moraju sadržavati opisne riječi u naslovu, oznake i okolni sadržaj.
Primjeri loših naziva slika:
- picture1.jpg
- DSCN00023.jpg
- naočale% i% watch.jpg
Puno bolje ime slike uključuje nekoliko opisnih riječi poput naočala-i-watch-and-plant.jpg. Oznaka oznake za sliku treba sadržavati sličan opis, poput "predmeta na šalteru, satu i biljci". (I obavezno ispravno zapišite riječi.)
Rješenje: koristite snažne konvencije o imenovanju za sve slike web mjesta i uparite slike sa sadržajem koji se odnosi na svaki vizual. Imena slika trebaju sadržavati opisne riječi odvojene crticama.
Pogreška: nepravilno skaliranje ili istezanje
Ništa čudnije ne izgleda kao da je osoba s istegnutim licem ili slikom koja se nepravilno skalira. Istezanje ili nerazmjerno skaliranje slika (što može biti osobito uobičajeno kada dođe do promjene teme ili stražnjeg kraja) nije. Svaku sliku treba smanjiti u omjeru 1 prema 1, okomito i vodoravno. Sve drugo narušava integritet fotografije.
Rješenje: pažljivo pratite sve proporcije skaliranja i povremeno pregledavajte web mjesto.
Pogreška: Ne planiranje više veličina uređaja
Odgovarajući okviri dizajna imaju neke posljedice na slike. Promjena oblika ili veličine od uređaja do uređaja ili orijentacije važno je odrediti kako će se slike prikazivati na uređajima.
Jedna od najčešćih praksi je korištenje medijskih upita za planiranje ovih promjena prema uređaju. CSS omogućuje primjenu specifičnih stilova na slike na temelju dimenzija zaslona i pomaže da se slike dobro oporave bez „probijanja“ dizajna.
Rješenje: koristite medijske upite za reaktivan okvir i testiranje prikazivanja slika na više uređaja.
Pogreška: Zanemarivanje ekrana mrežnice
Davno nije bilo vremena kada je standardna slika širine 600 piksela pri 72 ppi bila sve što je potrebno za web mjesto. Ali zasloni se poboljšavaju brzinom da to više nije slučaj.
Ovisno o vašem okviru, svaka slika može zapravo uključivati više slika spremljenih za različite veličine i rezolucije ekrana, uključujući retine. (Rezolucija zaslona mrežnice može se razlikovati ovisno o uređaju, ali značajno je veća od standardnih zaslona.)
Rješenje: Uključite datoteke i medijske upite koji su posebno za mrežnice. (CSS-trikovi mogu pomoći.)
Pogreška: Pretjerana ili opća umjetnost
Fotografiranje se može brzo popraviti, ali može dovesti do nekih nenamjernih posljedica. Fotografije koje se koriste na previše web mjesta ili koje imaju samo generički izgled i osjećaj prema njima neće stvoriti vizualni materijal koji uspostavlja vezu s korisnicima. (Ne želite da vaša web stranica izgleda kao svaka druga vani, zar ne?)
Ako planirate koristiti stock fotografije, razmislite o slikama koje možete urediti ili raditi na zanimljive načine. Izbjegavajte slike koje nalikuju stvarima koje ste vidjeli na drugim mjestima (pogledajte slike za sve natjecatelje ili slična web mjesta).
Rješenje: razmislite o angažiranju fotografa za stvaranje sjajne slikovne datoteke specifične za vaše web mjesto. Uključite vizualne sadržaje koji se odnose na vašu tvrtku ili marku i odražavaju vašu web lokaciju na pravi način.
Zaključak
Odabir i stvaranje slika za projekt web stranice može biti jedan od najzabavnijih dijelova procesa dizajna. Pazite na svaku sliku i piksel kako biste osigurali da vaša web lokacija dobro radi i sadrži slike koje će privući korisnike.
Imate li neke savjete ili trikove kada je u pitanju uporaba slika za web stranice? Voljeli bismo znati kakvi su. Podijelite ih u komentarima.
