Dimensiunea imaginilor în paginile web

Rare sunt site-urile fără fotografii și greu ne-am putea imaginea ce înseamnă web designul fără imagine. Rolul acesteia este de cele mai multe ori esențial. Dacă n-ai o fotografie nu ai ce să arăți, n-ai cum să explici… despre ce design am putea vorbi fără fotografii? Imaginile într-un site determină așadar percepția asupra acestuia, ele transmit informația, sunt parte componentă din întregul site. Deci suntem convinși că un site aproape nu se poate crea fără să conțină o imagine, un logo măcar. Dar imaginile mai determină și calitatea unui site, într-un mod indirect desigur, dar clar și indiscutabil.

Imaginile influențează funcționarea site-ului

Pare ridicol dar acesta este adevărul. Ce fel de imagini ai într-un site, ce format au și cât sunt de mari, toate determină funcționarea acestuia. Nu mai este vorba neapărat de design, dacă prin web design înțelegem partea estetică, deși noțiunea de design al unui site este de fapt un concept, nu degeaba se fac facultăți pentru asta. Web design-ul este un întreg proiect din care fac parte mai multe elemente decât fotografiile sau felul în care sunt dispuse culorile. Toate la un loc, inclusiv textele și formularele de poștă electronică, toate reunite înseamnă design-ul unui site. E ca la pantofi (poate puțin mai complicat) se proiectează talpa, fețele laterale, compoziția materialelor, etc. Păi chiar și un scaun are nevoie de un proiect… Unul din lucrurile pe care le determină la un site imaginea, nu are importanță conținutul acesteia, ne referim la imagine ca la un fișier, poate nu credeți dar este tocmai viteza de încărcare. Concret, ai o imagine mare site-ul se încarcă mai greu, ai un fișier mic se încarcă repede. Bun, ce înseamnă asta!? Înseamnă că dacă nu avem nevoie să privim o imagine pe ecran de 25 de țoli, nu trebuie să o facem atât de mare. Dacă noi o privim de pe display-ul unui telefon mobil atunci de ce să o punem pe site așa cum o descărcăm din aparatul de fotografiat? Exemplu: avem un blog realizat în wordpress și vrem să postăm o imagine de la un concert la care tocmai am participat. Descărcăm fotografia pe calculator și o punem direct în site? Greșit. De obicei, aparatele de fotografiat fac imagini la rezoluție de mai mulți MB, nu aveți nevoie de dimensiunea aceasta! Redimensionați fișierul, faceți-l mai mic! Nu-i mai puțin adevărat că platformele de wordpress, tocmai pentru a vă împiedica să faceți o astfel de greșeală au setate dimensiunile fișierului de maxim 1 MB. Este o regulă generală, dar nu se știe niciodată cum aveți setările, discuția este de principiu pentru toată teoria web designului.

Observație: Ca să vă faceți o idee dacă site-ul dvs are imagini ce se încarcă greu, adică au o dimensiune de fișier mare puteți să testați paginile acestuia la Google Page Speed Insights veți obține și alte informații importante despre viteza site-ului dvs.

Cât de mare să fie o imagine într-un blog

Variantele mai noi de wordpress sau temele pentru această platformă vin deja cu scripturi care redimensionează în mod automat imaginea dvs. atunci când o încărcați. Respectiv îi reduc dimensiunea și o taie (crop) astfel încât să se obțină mărimile necesare pentru diferite afișări ale site-ului, mă refer la diferite rezoluții, laptop, tabletă sau telefon mobil. Dimensiunea acestora nu se face decât după o formulă matematică și nu ține cont de absolut niciun format grafic, nu au o intenție estetică. Nu vă bazați pe aceste scripturi, acest lucru nu înseamnă web design, să lași o formulă să-ți taie fotografia după bunul ei plac, adică a programatorului care a făcut scriptul de wordpress, nu este decât foarte rar o soluție acceptabilă. Sugestia mea este ca să vă redimensionați imaginea (după ce o descărcați din aparatul de fotografiat sau de pe telefonul mobil sau poate că ați „împrumutat-o” de pe net…) la o dimensiune de maxim 1000 de pixeli latura mare, este suficient, nu aveți nevoie de mai mult. Atenție la rezoluția imaginii. Unele au 300 dpi, de exemplu. Redimensionați la 72 sau 96 dpi, standardele uzuale. Ochiul uman nu sesizează distincția între rezoluții diferite atunci când privește pe desktop o imagine. Cu atât mai mult pe un telefon mobil.

Formatul imaginilor dintr-un site web

În legătură cu formatul unei imagini, respectiv tipul de fișier, la asta mă refer, jpg, gif, png… acestea fiind cele mai uzuale, veți putea mai greu să greșiți. Asta pentru că vi se „pun piedici” din toate părțile, începând de la aparatul de fotografiat care nu știe alt format decât jpg și până la scripturile din wordpress care nu vor să accepte în ruptul capului decât formatele necesare. Nu se știe însă niciodată. Au fost suficient de mulți isteți care și-au bătut cuie-n cap doar pentru a strica mașina de tuns a frizerului… Din acest punct de vedere nici browserele nu vor arăta pagini web care conțin imagini cu alte formate decât cele pe care vi le-am enumerat (mai sunt câteva dar nu e cazul să mai vorbim și despre acestea). Deci, cred că nici nu trebuia să deschid subiectul… Rețineți totuși că, în tehnica aceasta a web designului, să folosiți totuși doar imaginile cu extensia de jpg, png sau gif.

Îți mulțumesc foarte mult pentru că ai citit aceasta postare a mea. Aștept comentariile tale 🙂