nu sunteți sigur de ce site-ul dvs. nu se clasează bine pe Google sau de ce consumatorii nu se angajează cu acesta? Dimensiunile imaginilor pentru site-uri web și viteza site-ului web și problemele SEO sunt adesea văzute afectând ratele de respingere și clasamentele.
pentru mulți oameni, Salvarea imaginilor pentru web a fost întotdeauna un mister. Imaginile grele (dimensiunile originale ale imaginii la lățimea de 5000px, imaginile neoptimizate) nu numai că vor degrada experiența utilizatorului pe site-ul dvs., dar vor avea și un impact negativ asupra strategiei dvs.).
să descompunem lista de linii directoare privind dimensiunea imaginii site-ului web.
de ce sunt importante dimensiunile imaginii și performanța site-ului web?
Site-urile web au nevoie de mai mult timp pentru a se încărca atunci când grafica nu este optimizată. Site-urile lente au ca rezultat o experiență slabă a utilizatorilor, o probabilitate mai mică de clasare în căutările Google și, ca urmare, mai puține interogări și consumatori.
liniile directoare privind dimensiunea imaginii site-ului menționează că salvarea fotografiilor în proporțiile potrivite și optimizarea acestora pentru web pot ajuta cu o varietate de lucruri, inclusiv:
• viteza
potrivit cercetării Google, dacă o pagină web durează mai mult de 5 secunde pentru a se încărca, probabilitatea ca un vizitator mobil să abandoneze pagina crește cu 90%. Puteți accelera paginile site-ului dvs. prin micșorarea și scăderea dimensiunilor imaginii.
• experiența utilizatorului
vizitatorii vor avea o experiență mai interesantă atunci când navighează pe site-ul dvs. dacă utilizați imagini de înaltă calitate și convingătoare. Oferiți o experiență perfectă și lină vizitatorilor dvs., păstrând aceste fotografii optimizate și încărcându-le rapid, ceea ce îi încurajează să petreacă mai mult timp pe site-ul dvs. și să vă exploreze conținutul.
• SEO Ranking
cu cât site-ul dvs. se încarcă mai repede, cu atât vă puteți clasifica mai sus. Atât pe desktop, cât și pe dispozitive mobile, paginile web cu grafică optimizată se încarcă substanțial mai rapid.
• vânzări
viteze de încărcare mai rapide și SEO îmbunătățit pot ajuta la atragerea mai multor vizitatori pe site-ul dvs., crescând șansele de a fi contactat și rezervat.
care sunt cele mai potrivite dimensiuni de imagine pentru site-uri web?
Strikingly este construit pentru a lucra cu o gamă largă de dimensiuni de imagine pentru diferite dimensiuni de ecran, secțiuni, stiluri și modele. Cu toate acestea, ocazional este util să aveți un concept aproximativ despre ce dimensiuni să încărcați.
iată câteva linii directoare generale pentru dimensiunea imaginii site-ului web de urmat!
imaginea este preluată de la izbitor
1. Imagini pentru fundal
fotografiile de fundal de la izbitor sunt concepute pentru a se potrivi o gamă largă de dimensiuni de ecran, de la monitor la tabletă la telefon. Pentru a vă asigura că fundalul dvs. arată excelent pe toate ecranele, vă recomandăm o dimensiune de 1600 pixeli lățime cu 900 pixeli înălțime. Includeți fotografii non-fundal de persoane, branduri, și alte informații cu precauție!
2. Setări pentru fundal
pentru a dimensiona/alinia fundalul, aveți câteva alternative.
Stretch/Cover default: această opțiune întinde imaginea dvs. pentru a umple întregul ecran, atât în înălțime, cât și în lățime. Deoarece imaginea va funcționa ca fundal pe orice dimensiune a ecranului, aceasta este de obicei cea mai bună soluție. Cu toate acestea, dacă imaginea dvs. are conținut pe laturi (în special stânga și dreapta), este posibil să nu fie vizibilă pe telefoanele mobile.
Contain: Contain va afișa imaginea completă, asigurându-se că nicio parte a acesteia nu este tăiată. Pe unele dispozitive, totuși, acest lucru poate duce la un spațiu alb.
centru: imaginea va fi afișată în centrul secțiunii și nu va fi scalată dacă alegeți centrul. Pe de altă parte, fundalul va arăta spațiu alb în jurul marginilor imaginii este prea mic. Unele elemente ale imaginii pot fi tăiate dacă sunt prea mari, în special pe afișaje mai mici.
Tile: Tile va centra și apoi va repeta o imagine, care este utilă pentru crearea modelelor.
pentru a începe liniile directoare privind dimensiunea imaginii site-ului web, notați cât de largă apare imaginea pe pagină.
imaginea este preluată de la izbitor
• imagini de fundal
dimensiunea ideală a imaginilor de fundal este de 1600x900px
• imagini cu lățime completă
ar trebui să aibă o lățime de cel puțin 1400 pixeli pentru cele mai bune rezultate. Conform regulilor privind dimensiunea imaginii site-ului web
• imaginile cu jumătate de lățime
imaginile cu jumătate de lățime ar trebui să aibă cel puțin 700px lățime pentru cea mai bună calitate.
• imagini cu lățimea de unqq
imaginile trebuie să aibă o lățime de cel puțin 480px pentru imagini cu lățimea de 1/3 de cea mai bună calitate.
• imagini cu lățimea de unqq
pentru imagini cu lățimea de 1/4 de cea mai bună calitate, acestea trebuie să aibă o lățime de cel puțin 360 pixeli.
• Icoane mici și logo-uri
acestea ar trebui să aibă o lățime de cel puțin 100 de pixeli.
• galerie imagini
orice dimensiune este bine pentru galerie imagini! Imaginile din galerie se vor deschide într-un lightbox în partea de sus a site-ului dvs. web.
ce dimensiune de imagine este necesară pentru site-ul dvs. web?
imaginile trebuie să fie cât mai mari pentru a se potrivi „containerelor” lor pentru o performanță maximă a site-ului web, în funcție de aspectul paginii dvs. Fotografiile de prezentare, de exemplu, sunt adesea mai mari; imaginile blogului sunt de dimensiuni medii (la o lățime egală cu lățimea paginii minus bara laterală); miniaturile sunt mai mici și așa mai departe.
conform instrucțiunilor privind dimensiunea imaginii site-ului web, este esențial să stabiliți mai întâi dimensiunile imaginii pentru a calcula lățimea zonei de conținut a site-ului dvs. Puteți utiliza un plugin de browser „page ruler „pentru a vă ajuta să luați măsurile sau puteți utiliza instrumentele de dezvoltare integrate în browserul dvs. web dacă aveți experiență: Faceți clic dreapta pe orice element de pagină și selectați” inspectați ” din meniul derulant.
imaginea este preluată din izbitor
apoi, în bara de instrumente, utilizați instrumentul selector de elemente pentru a trece cu mouse – ul peste secțiunea imagine sau conținut care vă interesează:
imaginea este luată de la izbitor
imaginea este preluată din izbitor
în acest caz, coloana de mai sus necesită o imagine cu o lățime de cel puțin 525 pixeli.
spunem „cel puțin”, deoarece imaginile din smartphone-urile mai noi cu ecrane „retina” de înaltă densitate trebuie să fie mai mari decât acestea pentru a arăta cât mai clare posibil.
luați în considerare următoarele scenarii:
A. Slideshow cu lățime completă dimensiunea imaginii Web
liniile directoare privind dimensiunea imaginii site-ului Web recomandă o lățime de 2560 pixeli pentru prezentări de diapozitive cu lățime completă (care se extind automat la dimensiunea completă a browserului). Aceasta este lățimea obișnuită a rezoluției pentru monitoarele de 27″ și 30″.
Imaginile pot fi la fel de înalte pe cât doriți să fie pentru a obține raportul de aspect pe care îl alegeți. Slideshow-uri Full-page, de exemplu, care sunt comune pe site-urile de fotografie de nunta, menține raportul de aspect original al fotografiilor. Alte site-uri web folosesc o prezentare de diapozitive care se întinde pe întreaga lățime a paginii, dar are o înălțime mai mică (ceea ce duce la un raport de aspect de aproximativ 3:1).
Următorul este un exemplu de prezentări de diapozitive” panoramice ” de pe site-urile fotografice:
imaginea este preluată de pe site-ul izbitor usre
imaginile ar trebui să aibă o lățime de 2560 (rotunjiți la 2500px) pixeli și orice înălțime pe care o alegeți pentru imagini care se întind pe întreaga lățime a browserului (în funcție de dacă doriți să păstrați raportul de aspect nativ al imaginilor dvs. sau să alegeți o reducere mai panoramică).
acesta nu este un caz în care trebuie să dublăm dimensiunea imaginii pentru afișajele retina, deoarece acest lucru ar duce la imagini masive de 5000px (pentru a nu adăuga pericolele furtului de imagini, cu dimensiuni mari de fișiere).
Reglați dimensiunea necesară a imaginii pentru prezentări de diapozitive mai mici care nu ocupă întreaga lățime a paginii, ci doar o parte din ea (poate 2000px sau 1800px etc.)
imaginea este preluată de pe site-ul izbitor usre
B. dimensiunile imaginilor în galerii (și miniaturile care se măresc într-o vizualizare Lightbox)
galeriile de miniaturi sunt situații unice în care dimensiunea miniaturilor dvs. este ignorată în favoarea asigurării faptului că fotografiile sunt suficient de mari atunci când sunt mărite.
o grilă de fotografii în miniatură care, atunci când faceți clic pe, se deschid într-o prezentare de diapozitive pe ecran complet (de obicei cu o suprapunere semi-transparentă dedesubt) este denumită „vizualizare lightbox”:
deoarece aceste fotografii se vor deschide în modul ecran complet, liniile directoare privind dimensiunea imaginii site-ului Web recomandă realizarea lor cu o lățime de cel puțin 1500 pixeli (pe cea mai lungă margine) pentru a le face să arate bine pe desktop-uri și tablete.
puteți merge chiar și până la 2000 de pixeli dacă doriți să adăugați un „factor wow” suplimentar, deși de obicei nu este cazul.
imaginile sunt oricum ajustate de browser pe dispozitivele mobile, iar 1500px este suficient de mare pentru a arăta clar pe smartphone-urile cu ecrane „retina” de înaltă IPP.
imaginile verticale/portret cu o înălțime maximă de 1200 pixeli (cum ar fi 800×1200 pixeli pentru o imagine verticală 2:3 sau 900×1200 pixeli pentru o imagine verticală 3:4) pot fi chiar mai mici.
dacă prezentarea permite navigarea între fotografii folosind săgeți laterale, gloanțe, glisând pe mobil sau săgeți de tastatură pe desktop, limitarea dimensiunilor imaginii ca aceasta va menține Dimensiunea fișierului rezonabilă scurtă, rezultând încărcări mai rapide ale imaginii:
C. dimensiuni de imagine recomandate pentru postări de Blog și alte imagini statice în machete de pagină
dacă fotografiile dvs. de blog nu necesită o caracteristică click-to-enlarge (sau „lightbox”), acestea ar trebui să fie dimensionate în funcție de coloana sau lățimea zonei de conținut.
luați următorul exemplu de o singură postare pe blog:
imaginea este preluată de pe site-ul izbitor usre
puteți stabili lățimea reală a zonei de conținut măsurând orice paragraf de text folosind metodele prezentate mai sus, de exemplu:
imaginea este preluată de pe site-ul izbitor usre
alternativ, dacă aveți deja imagini, puteți vedea la ce dimensiune le redimensionează browserul.
pentru a obține aceleași informații, puteți utiliza un plugin pentru browser, cum ar fi View Image Info (proprietăți).
cu aceste informații (de exemplu, 825 pixeli), acum Puteți dubla dimensiunea pentru a ține cont de afișajele retina (deci 1650 pixeli în lățime).
în funcție de tema site-ului dvs. și de toleranța la risc pentru furtul de imagini, puteți reduce această cantitate la 1200 pixeli mai sensibili pe cea mai lungă margine (deci imaginile orizontale ar trebui să aibă o lățime de 1200px, iar imaginile verticale ar trebui să aibă o înălțime de 1200px, păstrând în același timp raportul de aspect original).
fotografiile mai mici utilizate ca miniaturi (care nu trebuie extinse) fac obiectul aceluiași proces decizional.
concluzie
aceste linii directoare privind dimensiunea imaginii site-ului web nu se aplică cu adevărat serviciilor de arhivare a fotografiilor, cum ar fi PhotoShelter sau SmugMug (care au măsuri de securitate încorporate și generează miniaturi cu rezoluție redusă din fișierele dvs. originale de înaltă rezoluție, după cum este necesar de către site) sau când vindeți acele imagini ca descărcări sau tipăriri, așa cum s-a menționat la început.
urmarea acestor practici privind dimensiunea imaginii site-ului web este o necesitate dacă aveți un site auto-găzduit și trebuie doar să vă prezentați fotografiile pe web.
alegerea imaginilor potrivite este un aspect important al creării unui site web atrăgător și cu încărcare rapidă. Există, fără îndoială, o curbă de învățare. Cu toate acestea, există și alte avantaje care trebuie obținute și totul face parte din entuziasmul creării și menținerii unui site web!