5 moduri de a optimiza imaginile pe site-ul trupei tale

În zilele noastre, site-urile web pot apărea pe sute de dimensiuni diferite de ecran, chiar și în orientări diferite pe același dispozitiv (peisaj sau portret). Ecranele pe care oamenii văd site-ul dvs. pot avea doar câteva sute de pixeli lățime pe mobil, până la mii de pixeli în lățime pe monitoare cu ecran lat de înaltă definiție mai noi.

Deoarece noile tehnologii au oferit o gamă de dimensiuni de ecran cu care oamenii pot vedea site-ul dvs., a necesitat, de asemenea, un nou mod de a gândi designul site-ului, care să asigure ca site-urile să arate grozav pe orice ecran - mare sau mic, înalt sau lat.

Aici intervine conceptul de design de site web „responsive”!

Cum funcționează responsive design

Un site web receptiv este construit astfel încât poziționarea și dimensiunea să fie „relative” cu spațiul în care sunt vizualizate. Când site-ul dvs. este vizualizat pe diferite afișaje, acesta se va adapta prin întindere sau micșorare; deplasându-se pentru a se încadra în spațiul disponibil.

Orice fotografie pe care o încărcați pe site-ul dvs. Bandzoogle se va întinde și se va scala în funcție de cât de mare este „spațiul” în care este imaginea.

În cazul imaginilor de antet, acest lucru este deosebit de important deoarece imaginile receptive se vor „potri” cât mai bine cu cadru. Mai puțină muncă decupând o grămadă de imagini înseamnă mai mult timp, ei bine, redarea muzicii, nu?

Să ne uităm la cinci moduri de a optimiza imaginile de pe site-ul web al trupei tale pentru a-ți obține designul corect.

1. Alegeți imaginea potrivită

Designul receptiv scalează elementele paginii, cum ar fi imaginile antet, „proporțional” cu dimensiunea originală a fișierului imagine pe care îl utilizați și va face acest lucru „relativ” cu spațiul în care este setată imaginea pe pagină.

Aceasta înseamnă că proporțiile imaginii sunt menținute pe toate dispozitivele, iar imaginile vor încerca întotdeauna să „umple” spațiul în care se află cât mai bine. Acest lucru poate duce la imaginile de antet care au părți ale imaginii „decupate” - acest lucru este inevitabil în designul receptiv, dar alegerea unei imagini care se decupează bine pentru a se potrivi va ajuta.

Artist: Tragedy Ann

Desktop și ecran lat

Pe un laptop, imaginile de antet vor fi scalate în raport cu lățimea ecranului. Pe un dispozitiv mobil, imaginea s-ar scala în funcție de înălțimea ecranului.

Cu alte cuvinte, imaginea ta se va scala întotdeauna în raport cu cea mai lungă parte a spațiului.

Acum, imaginați-vă acest lucru pe un ecran cu o lățime de 1.000 de pixeli - ecranele desktop/laptop sunt mai largi decât înalte și să presupunem că același ecran are și 570 de pixeli înălțime (aproximativ raportul de 16:9 pentru o mulțime de afișaje).

În acest scenariu, imaginea noastră are o lățime de 1.000 de pixeli pe acest afișaj, dar a fost scalată la 900 de pixeli înălțime, ceea ce înseamnă că, într-un spațiu care are doar 570 de pixeli înălțime, se va tăia peste 300 de pixeli în partea de sus și de jos a fotografia. Poze fără cap, da!

Orientare mobil și portret

Faceți aceleași calcule cu exemplul de ecran mobil care are 600 de pixeli înălțime - să spunem că același afișaj are doar aproximativ 320 de pixeli lățime. Când imaginea se adaptează la acest afișaj, peste jumătate din imagine va fi tăiată de fiecare parte (rețineți că imaginea este redusă la 667 de pixeli lățime pe un ecran portret de 600 de pixeli).

Aceasta este o modalitate bună de a enerva toboșarul de la marginea fotografiei trupei tale, ceea ce poate fi distractiv! Dar inca...

Optimizați, apoi încărcați fișierele

O metaforă bună pe care o puteți folosi este să vă imaginați că vă aflați într-o galerie de artă încadrând imagini - dacă puneți peisajul lui Monet într-un cadru portret „Mama lui Whistler”, acel cadru va tăia o mulțime de nuferi foarte drăguți de pe marginea acestuia. tabloul tău.

Aici poate deveni dificil - constructorii de site-uri nu pot anticipa imaginile pe care doriți să le utilizați (sau ceea ce se afișează în ele), dar a fi selectiv cu ce imagini să adăugați este un prim pas bun.

Câteva sfaturi simple pentru a selecta imaginea potrivită pentru antetul dvs.:

• Evitați să utilizați imagini care au fost „decupate aproape” - cu cât aveți mai mult spațiu sau umplutură în jurul „focalizării” imaginii, cu atât este mai puțin probabil ca focalizarea să fie întreruptă pe diferite afișaje.
  
• Utilizați imagini mari - 2000 x 1800 la dimensiunea de 72 dpi, de obicei, funcționează bine pentru majoritatea temelor Bandzoogle și vă ajută să vă asigurați că imaginile dvs. arată grozav pe fiecare afișaj.
  
• Încercați să utilizați imagini care sunt aproape de „pătrat” în orientare - Nu trebuie să fie o imagine pătrată perfectă, dar cât de aproape puteți ajunge la înălțimea și lățimea egale în imaginea dvs., de obicei, va funcționa grozav pe orice afișaj. Acest spațiu suplimentar vă oferă spațiu de respirație indiferent de orientarea în care este vizualizat site-ul dvs.
  
• Încercați să evitați să utilizați imagini cu text sau logo-uri în imagine în sine - cu siguranță nu doriți ca textul important sau brandingul dvs. să fie tăiat pentru vizitatori!
  
• Adaugă-ți logo-ul în schimb sub opțiunea „titlu/sigla” a editorului tău de teme Bandzoogle. Apoi adăugați orice text dorit în antet la funcția de antet „Îndemn la acțiune”. În acest fel, mesajele dvs. importante nu vor fi întrerupte de marginea afișajului.

Artist: Martin și James

2. Decupați pentru a se potrivi cu tema dvs

Dacă aveți imagini deja încărcate, Bandzoogle vine cu câteva instrumente grozave pentru a le face să se afișeze și mai bine!

Unele dintre modelele noastre de șabloane vor afișa „ecran complet” atunci când se încarcă, au înălțimi de antet reglabile, pot afișa imagini de antet într-un spațiu limitat, în diferite forme (cum ar fi șablonul Spotlight) sau chiar setează imaginea antetului ca fundal la paginile dvs. (Slice, de exemplu).

Este ușor să încercați diferite teme cu diferite opțiuni de antet - puteți modifica designul temei prin „editați tema” > „vezi teme”, selectați tema dorită, personalizați acea temă în editorul de design, faceți clic pe „salvați” și publicați schimbări.

Cu condiția ca tema să nu seteze antetul ca imagine de fundal pe întreaga pagină, puteți, de asemenea, să ajustați zoomul relativ și poziționarea imaginilor pe care le adăugați.

În „editați conținut”, faceți clic pe imaginea antetului din fila de editare a conținutului, apoi, în editorul antetului, faceți clic pe linkul „decupați” de sub miniatura imaginii antetului.

Apoi puteți ajusta zoom-ul cu glisorul de zoom și faceți clic/trageți imaginea într-o poziție relativă.

3. Stabiliți un punct focal

Când tăiați imaginea antet în editorul antetului, este posibil să observați și un mic punct albastru deasupra imaginii - acesta este pentru a seta „punctul focal”. Ceea ce face aceasta este să se asigure că, oriunde este poziționat acest punct pe imagine, va fi întotdeauna „focalizat”, indiferent de dimensiunea sau orientarea imaginii tale.

Acest lucru poate fi foarte util pentru imaginile în care „focalizarea” imaginii încărcate nu este total centrată - faceți clic / trageți punctul focal peste focalizarea imaginii se va asigura că, indiferent de ceea ce este tăiat pe diferite ecrane, focalizarea este în față și în centru .

După ce ați setat decuparea, mărirea și punctele focale, faceți clic pe „Salvați” pentru a aplica decuparea, apoi faceți clic din nou pe „Salvați” în editorul de antet pentru a aplica modificările.

Artista: Anna Bassy

4. Personalizați înălțimea antetului mobil

Limita dintre ecranul mobil și ecranul non-mobil este încețoșată tot timpul - luăm, de exemplu, o tabletă. Nu suficient de mare pentru a fi un „desktop”, dar nu destul de mic pentru un ecran mobil.

Când vizualizați site-uri pe o mulțime de tablete în „peisaj”, site-ul poate apărea la fel ca pe un ecran de desktop sau laptop. Întoarceți tableta în lateral, ca un „portret”, și totul se poate schimba - reducerea lățimii ecranului poate prezenta mai multe elemente „mobile” mai apropiate de ceea ce puteți vedea pe un telefon.

Majoritatea temelor Bandzoogle sunt setate în mod implicit pentru a afișa un antet „înălțime completă” în ecranele orientate spre portret - acest lucru poate fi problematic dacă imaginea antetului conține focalizare către părțile stânga și dreapta.

Pentru aceasta, cu condiția ca tema să nu vă seteze antetul ca imagine de fundal pentru paginile dvs., puteți activa opțiunea „înălțime antet mobil personalizată” în setările „antet” prin fila „editați tema”.

Odată activat, faceți clic pe pictograma „previzualizare mobil” din editorul de teme și ajustați glisorul „înălțime antet (mobil)” - acest lucru vă poate ajuta să ajustați spațiul în care se află imaginea pentru a se potrivi mai bine cu proporțiile imaginii și pentru a afișa mai multe imagine. Doar faceți clic pe „Salvați” după ce setați acest lucru!

5. Adăugați filtre

În cele din urmă, puteți adăuga câteva vibrații cu adevărat uimitoare imaginilor dvs. de antet setând un filtru. Scoateți în evidență blues-ul, dați imaginii tale un aspect mai de film din anii 70 sau alegeți alb-negru vintage. Există o mulțime de opțiuni aici!

Doar faceți clic pe fila „editați tema” din panoul de control Bandzoogle, iar sub opțiunile „antet”, puteți selecta un filtru prefabricat sau puteți crea propriul stil de filtru personalizat.

Artist: Carleen Williams

Deși uneori poate fi puțin să vă înțelegeți, consensul general cu designerii web este că responsive este calea mai bună în ceea ce privește site-ul dvs.

Vă garantează că site-ul dvs. va arăta grozav și va fi lizibil pe fiecare ecran disponibil acum, precum și în viitor, iar site-urile precum Google vă vor clasa mai bine dacă site-ul dvs. folosește practici bune de receptivitate.

Pe termen lung, este, de asemenea, o economie excelentă de timp pentru cei dintre voi care vă gestionează propriile site-uri - cunoașterea celui mai bun mod de a vă optimiza imaginile și conținutul este primul pas, iar Bandzoogle se ocupă de restul!

Creați un site web de muzică cu imagini receptive în doar câteva clicuri. Construiește-ți site-ul web cu Bandzoogle astăzi!