Astăzi, mai mulți oameni navighează pe internet de pe dispozitive mobile decât de pe computere desktop. Cu varietatea de dimensiuni de ecran disponibile, trebuie să alegi dimensiunile optime pentru imagini atunci când construiești site-ul tău, astfel încât toți vizitatorii să beneficieze de o experiență plăcută, indiferent de dispozitivul folosit.
Dacă nu optimizezi imaginile, vizitatorii site-ului tău ar putea vedea imagini prea mici și neclare sau prea mari, ceea ce crește timpul de încărcare și îi obligă să deruleze și să mărească imaginea inutil.
Vestea bună este că poți face cu ușurință imaginile compatibile cu multiple dispozitive. Alegând dimensiunile potrivite, menținând dimensiunile fișierelor la minim și folosind un design responsive, poți oferi o experiență de navigare excelentă.
Urmează tutorialul de mai jos pentru a optimiza imaginile pentru dispozitive mobile și desktop.
Cele mai bune dimensiuni de imagini pentru site-uri web
Lățime în pixeli: Depinde de zona de afișare, dar recomandările generale sugerează 1920px pentru bannere, 1200px pentru conținutul principal și 400-800px pentru miniaturi. Imaginile comprimate în formatul WebP sunt ideale pentru menținerea vitezei de încărcare rapide.
Dimensiunea imaginii: Dimensiunea optimă (în pixeli) a imaginilor depinde de modul în care le folosești, de exemplu, imaginile de fundal trebuie să fie mai mari decât imaginile dintr-un articol de blog.
Dimensiunea fișierului: Orice fișier mai mare de 20 de megaocteți poate afecta dramatic viteza site-ului. Imaginile mai mici (până la două megaocteți, dar de preferință în jur de 500 de kiloocteți) sunt mai potrivite în majoritatea cazurilor.
Atributul imaginii: Atributele imaginilor (textul alternativ sau eticheta alt) sunt bazate pe text și nu afectează performanța site-ului. Totuși, sunt folosite pentru interpretarea imaginilor prin software-ul de citire a ecranului și reprezintă un element esențial al accesibilității web. Cea mai bună practică este să menții textul alternativ sub 100 de caractere, incluzând spațiile.
Cele mai bune dimensiuni de imagini pentru desktop și dispozitive mobile
Tabelul de mai jos oferă dimensiunile recomandate pentru imagini pe site-uri web desktop și mobile:
| Tipul imaginii pe site | Dimensiuni imagine desktop (L x Î) | Dimensiuni imagine mobil (L x Î) | Raport de aspect recomandat |
|---|---|---|---|
| Imagine de fundal | 2560 x 1400 pixeli | 360 x 640 pixeli | 16:9 |
| Imagine hero | 1280 x 720 pixeli | 360 x 200 pixeli | 16:9 |
| Banner site | 1200 x 400 pixeli | 360 x 120 pixeli | 3:1 |
| Imagine blog | 1200 x 800 pixeli | 360 x 240 pixeli | 3:2 |
| Logo (dreptunghi) | 400 x 100 pixeli | 160 x 40 pixeli | 4:1 |
| Logo (pătrat) | 100 x 100 pixeli | 60 x 60 pixeli | 1:1 |
| Favicon | 16 x 16 pixeli | 16 x 16 pixeli | 1:1 |
| Iconițe social media | 32 x 32 pixeli | 48 x 48 pixeli | 1:1 |
| Imagini lightbox (ecran complet) | 1920 x 1080 pixeli | 360 x 640 pixeli | 16:9 |
| Miniatură | 300 x 300 pixeli | 90 x 90 pixeli | 1:1 |
| Miniaturi produse | 150–300 px | 150–300 px | 1:1 (pătrat) |
Acestea sunt dimensiuni sugerate, care pot necesita ajustări în funcție de utilizarea unui design responsive.
Este aproape întotdeauna o idee bună ca dimensiunea de afișare a imaginilor să fie mai mică decât dimensiunea de încărcare.
Ghid pentru dimensiunile imaginilor pe site
Există cinci tipuri principale de imagini pe care le vei întâlni pe un site web:
- Dimensiuni imagini de fundal
- Dimensiuni imagini hero
- Dimensiuni imagini banner
- Dimensiuni imagini blog
- Dimensiuni logo
Fiecare tip de imagine web are cerințe diferite de dimensiune. Să analizăm dimensiunile optime pentru tipurile comune de imagini de pe site-uri web.
Dimensiuni imagini de fundal
Imaginile de fundal sunt în general cele mai mari imagini de pe un site web. Imaginea servește drept fundal pentru pagina de start sau pentru alte pagini de destinație.
De exemplu, retailerul de biciclete Cowboy pune produsul în prim-plan folosindu-l ca fundal pe pagina de start. Acesta umple ecranul, indiferent de dispozitivul pe care este vizualizat.
Lățime recomandată: 2560 pixeli
Înălțime recomandată: 1400 pixeli
Raport aspect: 16:9
Dimensiune fișier recomandată: 20 MB
Dimensiuni imagini hero
Imaginile hero sunt similare cu imaginile de fundal, dar tind să fie mai mici în înălțime, aproximativ jumătate din dimensiune. O imagine hero este o opțiune excelentă dacă trebuie să incluzi mai mult text pe ecran fără a-i obliga pe utilizatori să deruleze pentru a-l vedea.
În exemplul de mai sus, BLK & Bold folosește o imagine hero cu un raport de aspect îngust pentru a umple ecranul, lăsând totuși spațiu pentru conținut dedesubt.
Lățime recomandată: Între 1280 pixeli și 2500 pixeli
Înălțime recomandată: Între 720 pixeli și 900 pixeli
Raport aspect: 16:9
Dimensiune fișier recomandată: 10 MB
Dimensiuni imagini banner
Imaginile banner pot avea dimensiuni și forme diferite, în funcție de locația lor și de ceea ce vrei să arăți vizitatorilor. Cel mai tipic banner de pe site este bannerul publicitar. Unul dintre cele mai populare servicii pentru promovarea bannerelor publicitare este Google Ads.
Dacă te gândești la o imagine banner care nu este un anunț publicitar, opțiunile dreptunghiulare (de exemplu, 300 x 200 pixeli sau 970 x 90 pixeli) sunt în general mai potrivite.
Lățime recomandată: Verifică cu platforma de publicitate
Înălțime recomandată: Verifică cu platforma de publicitate
Raport aspect: Variabil
Dimensiune fișier recomandată: 150 KB (Verifică cu platforma de publicitate)
Dimensiuni imagini blog
Imaginile de blog pot varia ca tip și dimensiune. Postarea de mai sus provine de la platforma de business intelligence pentru marketing, Whatagraph, și deși dimensiunea de încărcare a imaginii principale este de 1880 x 1058 pixeli, dimensiunea de afișare este mai mică, la 589 × 331 pixeli.
Stabilirea unei dimensiuni de afișare pentru paginile web ajută la rafinarea designului și menține fișierele mici (imaginea din postarea Kulala are doar 37,5 KB).
Când vine vorba de imaginile principale de antet ale articolelor de blog (cele de la începutul paginii), acestea ar trebui să aibă dimensiuni uniforme pe tot blogul.
Lățime recomandată: 1200 pixeli
Înălțime recomandată: 800 pixeli
Raport aspect: 3:2
Dimensiune fișier recomandată: 3 MB
Dimensiuni logo
Logoul tău va fi probabil una dintre cele mai mici imagini de pe site (cu excepția faviconului din bara de file). În funcție de designul logoului, ar trebui să optezi fie pentru un raport de aspect dreptunghiular, fie pătrat.
Majoritatea logourilor se pretează la un raport pătrat de 1:1, pe care îl poți vedea în colțul din stânga jos al exemplului Kulala de mai sus.
Rapoartele dreptunghiulare funcționează bine pentru nume de brand mai lungi sau când logoul constă din cuvinte mai degrabă decât dintr-un grafic. Logoul propriu al site-ului Shopify folosește un raport mai lung de 4:1.
Lățime recomandată: 100 pixeli
Înălțime recomandată: 100 pixeli
Raport aspect: 1:1, 2:3, 4:1
Dimensiune fișier recomandată: 1 MB
Recomandări pentru dimensiunile imaginilor pe mobil
Alege dimensiunile potrivite pentru imagini
Pe ecranele mobile mai mici, mulți utilizatori apreciază posibilitatea de a mări o imagine. Așadar, încearcă să găsești un echilibru între dimensiunea imaginii și dimensiunea fișierului.
Imaginile de înaltă rezoluție conferă site-ului tău un aspect profesional și complet, cu capacități excelente de zoom. Menține raportul de aspect al imaginilor similare pentru a păstra un design uniform pe diferite tipuri de pagini.
De exemplu, poți face toate imaginile de produse dintr-un magazin online pătrate. Imaginile pătrate sunt mai ușor de repoziționat pe ecrane mai mici. În plus, imaginile pătrate și verticale se potrivesc bine pe ecranele mobile, permițând vizitatorilor să vadă mai multe imagini fără a fi nevoie să deruleze.
💡 Pe Shopify, poți încărca imagini de până la 5000 x 5000 pixeli cu o dimensiune de fișier de până la 20 MB.
Pentru imaginile pătrate de produse, se recomandă o dimensiune de 2048 x 2048 pixeli.
Reține că pentru ca funcționalitatea de zoom să funcționeze, imaginile trebuie să fie mai mari de 800 x 800 pixeli.
Ține cont de dimensiunea fișierului
Imaginile cu dimensiuni mai mari ale fișierului pot afecta viteza site-ului, mai ales când vizitatorii folosesc un smartphone. Multe platforme de creare site-uri au, de asemenea, restricții privind dimensiunea maximă a fișierelor încărcate. De exemplu, Shopify folosește o dimensiune maximă de fișier de 20 MB.
Dacă trebuie să comprimi imaginile pentru a reduce dimensiunea lor, există instrumente online de redimensionare a imaginilor care pot ajuta. Cu aceste instrumente, poți reformata fișiere mari de imagini în noi dimensiuni sau tipuri de fișiere.
În cea mai mare parte, vei dori ca imaginile de fundal din antet să fie sub 10 MB, în timp ce fotografiile de produse ar trebui să fie mult mai mici, în jur de 300 KB.
Redimensionează fotografiile pentru dimensiunile ecranelor mobile
Shopify redimensionează automat imaginile pentru a se potrivi pe ecrane mai mici. Dar pe alte platforme, imaginile pot necesita editare manuală pentru a fi pregătite pentru mobil. Reține că ecranele desktop și mobile au orientări opuse.
Din nou, amintește-ți că fișierele mari încetinesc timpul de încărcare al site-ului. Deși compresia fără pierderi poate oferi imaginea de cea mai înaltă calitate, adesea creează fișiere mari care pot dura o veșnicie pentru a se încărca pe site. Ia în considerare utilizarea celor mai mici fișiere de imagine cu cea mai bună rezoluție.
Deși designurile responsive și algoritmii Shopify sunt eficiente în redimensionarea și afișarea imaginilor pe diferite dispozitive, oferindu-le o mână de ajutor prin dimensionarea atentă a fișierelor poate crea o experiență de cumpărare mai fluidă.
De ce este importantă dimensiunea imaginilor pentru site-uri web?
Pentru site-uri web, dimensiunea imaginilor este importantă din trei motive principale:
- Creează o experiență mai bună pentru utilizatori.
- Îmbunătățește viteza de încărcare a paginilor.
- Ajută la clasarea site-ului în motoarele de căutare.
Creează o experiență mai bună pentru utilizatori
Imaginile dimensionate corect pentru fiecare caz de utilizare de pe site ajută la îmbunătățirea experienței utilizatorului. Vizitatorii pot accesa un nivel adecvat de detaliu și nu vor trebui să deruleze pentru a vedea întreaga imagine.
Când imaginile sunt de calitate scăzută, pixelate sau prea mici, pot afecta calitatea percepută a conținutului tău. Pentru un site de comerț electronic, acest lucru ar putea determina clienții să pună la îndoială calitatea afacerii sau a produselor tale.
Dimpotrivă, imaginile de înaltă calitate, dimensionate corect, sporesc valoarea percepută a produselor tale și oferă mai multe informații vizuale potențialilor clienți.
De exemplu, vezi cum imaginile de mai jos de la brandul de încălțăminte sustenabilă Allbirds îmbunătățesc experiența utilizatorului prin evidențierea clară a diferitelor caracteristici ale produsului.
Îmbunătățește viteza de încărcare a paginilor
Când încarci imagini mari pe site, serverul are nevoie de mai mult timp pentru a încărca pagina. Imaginile mai mici (atât ca dimensiuni, cât și ca dimensiune de fișier) tind să se încarce mai rapid pe toate dispozitivele.
Viteza de încărcare a imaginilor este adesea numită „contentful paint". Poți verifica contentful paintul paginii tale web și alte valori de viteză folosind PageSpeed Insights de la Google.
În general, optimizează vitezele paginilor pentru a evita o rată de respingere ridicată.
Ajută la clasarea site-ului
Clasarea site-ului se referă la poziția site-ului tău în paginile cu rezultate ale motoarelor de căutare (SERP). Site-urile optimizate pentru căutare se clasează sus în SERP pentru interogările relevante ale utilizatorilor (cunoscute sub numele de cuvinte-cheie).
Google folosește o multitudine de valori pentru a determina care pagini web se clasează în partea de sus a rezultatelor căutării. Calitatea imaginilor (sau, mai precis, experiența îmbunătățită a utilizatorului pe care o generează) este probabil un factor în algoritmul Google.
Care este cel mai bun tip de fișier imagine?
Tipul potrivit de fișier imagine asigură imagini de înaltă calitate, menținând în același timp dimensiunea fișierului la un nivel gestionabil pentru performanța mai bună a site-ului. Iată cele mai utilizate formate de fișiere imagine și cele mai bune cazuri de utilizare:
WebP
WebP este un format de imagine dezvoltat de Google. Oferă compresie fără pierderi pentru imaginile de pe web, reducând adesea dimensiunea fișierului cu peste 30% comparativ cu JPEG sau PNG.
Acest lucru poate îmbunătăți semnificativ timpii de încărcare ai site-ului, dar merită menționat că WebP nu este încă suportat universal de toate browserele.
JPEG
JPEG (sau JPG) este unul dintre cele mai utilizate formate de fișiere imagine digitale, deoarece oferă un echilibru între dimensiunea fișierului și calitatea imaginii. Este o alegere populară pentru afișarea fotografiilor și a imaginilor complexe cu multe culori.
Totuși, JPEG folosește compresie cu pierderi, ceea ce înseamnă că o parte din calitatea imaginii se pierde când imaginea este comprimată.
PNG
PNG este un format de compresie fără pierderi, ceea ce înseamnă că reduce dimensiunea fișierului fără a sacrifica calitatea imaginii. Suportă transparența, făcându-l o alegere bună pentru imagini care necesită un fundal transparent.
Deși fișierele PNG au adesea dimensiuni mai mari decât JPEG, capacitatea lor de a-și păstra claritatea le face potrivite pentru grafice detaliate și logouri.
SVG
SVG (grafică vectorială scalabilă) este un format de imagine vectorială, ceea ce înseamnă că folosește ecuații matematice pentru a reda o imagine. Acest lucru permite imaginilor SVG să fie scalate la orice dimensiune fără pierderea calității.
SVG este un format ideal pentru logouri, iconițe și alte grafice care trebuie folosite în mai multe locații. SVG-urile sunt, de asemenea, de obicei mai mici ca dimensiune de fișier decât alte formate, ajutând la îmbunătățirea timpilor de încărcare.
AVIF
AVIF (AV1 Image File Format) este un format modern de imagine conceput pentru web.
Oferă compresie superioară, care creează dimensiuni de fișier extrem de mici, menținând în același timp o calitate vizuală ridicată. Fișierele AVIF sunt adesea mult mai mici decât echivalentele lor WebP sau JPEG.
Folosește-l pentru orice imagine web în care performanța cât mai rapidă posibilă și cea mai mică dimensiune de fișier sunt obiectivele principale. Principala sa limitare este că este un format mai nou și nu este încă suportat de toate browserele mai vechi.
GIF
GIF este un format de imagine bitmap cunoscut pentru capacitatea sa de a suporta animații simple. Folosește compresie fără pierderi și reduce imaginile la maximum 256 de culori, rezultând dimensiuni mai mici ale fișierelor.
Deși GIF a fost în mare parte înlocuit de PNG pentru imaginile statice, rămâne o alegere optimă pentru animații scurte în buclă și este recunoscut universal de browsere.
Cum afli dimensiunile imaginilor de pe un site
Cea mai rapidă modalitate de a verifica dimensiunea unei imagini de pe orice pagină web (fără a descărca imaginea) este să folosești instrumentul „Inspect” al browserului.
Această metodă funcționează pe Mac și Windows, cu browserele Safari, Chrome sau Firefox.
Accesează pagina web și plasează cursorul peste imaginea despre care vrei informații. Dă click dreapta cu mouse-ul pentru a afișa meniul de opțiuni și caută „Inspect”.
Dând click pe „Inspect” vei deschide codul HTML al paginii (poate părea intimidant, dar nu-ți face griji).
În panoul de inspecție, informațiile despre imaginea pe care ai dat click ar trebui să fie evidențiate. Când treci cu mouse-ul peste codul relevant, imaginea va fi, de asemenea, evidențiată.
În acest caz, browserul îți spune câți pixeli folosește imaginea. Dacă redimensionezi pagina web, acea cifră se va schimba în consecință.
Dacă cauți proprietățile originale de încărcare ale imaginii, treci cu mouse-ul peste linkul de stocare a imaginii.
Pentru a ieși din panoul de inspecție, dă clic pe X din colțul din dreapta sus.
Instrumente de optimizare a imaginilor
Instrumentele online de optimizare a imaginilor sunt o modalitate simplă, rapidă (și de obicei gratuită) de a redimensiona imaginile site-ului tău. Iată trei instrumente de optimizare a imaginilor:
Image Resizer
Instrumentul de redimensionare al imaginilor de la Shopify.Instrumentul gratuit online de redimensionare a imaginilor de la Shopify este o modalitate convenabilă de a ajusta imaginile pentru utilizare pe canalele de marketing și rețelele sociale.
Poți alege dintr-o varietate de dimensiuni corecte oficiale pentru postări și stories Instagram, miniaturi YouTube și alte tipuri de conținut social.
Image Optimizer de la Squirai
Instrumentul de optimizare a imaginilor de la Squirai este testat pentru viteză pentru a asigura că imaginile tale sunt pregătite pentru SEO. Optimizează automat toate imaginile de pe site-ul tău, inclusiv pe cele noi pe care le adaugi ulterior.
În plus, poți personaliza și aplica un filigran pentru a-ți proteja fotografiile de produse fără a fi nevoie să cunoști cod.
LoyaltyHarbour Image Optimizer
LoyaltyHarbour Image Optimizer funcționează similar cu instrumentul de la Squirai, comprimând automat imaginile de pe site-ul tău.
În plus, tabloul de bord îți permite să setezi automat textul alternativ al imaginilor și să convertești la cel mai bun tip de fișier imagine pentru o viteză mai bună a paginii.
Alternativ, dacă ai posibilitatea, poți folosi și Photoshop pentru a reduce dimensiunea fișierului. Dar acesta poate fi un proces mai complicat decât instrumentele de mai sus.
Depanare: probleme de formatare a imaginilor
Pe măsură ce gestionezi site-ul, probabil vei întâmpina la un moment dat probleme de formatare a imaginilor. Problemele cu imaginile pot varia de la dimensionare incorectă la linkuri întrerupte.
Să analizăm soluții pentru câteva probleme cu imaginile de pe site-uri web.
Dimensiune incorectă a imaginii
Problema: Imaginile apar prea mari sau prea mici și pot strica aspectul unei pagini web, rezultând o experiență compromisă pentru utilizator.
Soluție: Dacă folosești o temă sau șablon de site, caută resurse despre dimensiunile corecte ale imaginilor pentru designul tău. În constructorul de site-uri, asigură-te că selectezi dimensiuni de afișare pentru fiecare imagine, astfel încât imaginile să nu se afișeze în dimensiunea lor completă, originală.
Timpi lenți de încărcare
Problema: Imaginile se încarcă mai lent decât restul paginii web sau deloc.
Soluție: Formatul greșit de fișier poate duce la dimensiuni de fișier inutil de mari care afectează timpii de încărcare. Folosește un instrument de editare sau conversie a imaginilor pentru a schimba formatul fișierelor tale de imagini. Pentru grafice sau logouri, ia în considerare utilizarea SVG pentru scalabilitate fără pierderea calității. Pentru alte imagini, ia în considerare conversia la WebP pentru a comprima fișiere mari.
Calitate slabă a imaginii
Problema: Imaginile apar pixelate sau neclare.
Soluție: Dacă imaginile tale apar pixelate sau neclare, încearcă să găsești o versiune cu rezoluție mai mare. Reține că rezoluția imaginii diferă de dimensiunea imaginii. Rezoluția se referă la cantitatea de detalii pe care o conține o imagine, adesea măsurată în pixeli pe inch (PPI). O rezoluție mai mare înseamnă o imagine mai clară, indiferent de dimensiune.
Dacă calitatea imaginii este redusă de compresie, ajustează setările de compresie sau treci la un format de compresie fără pierderi, cum ar fi PNG.
Imaginile nu se afișează deloc
Problema: Linkuri de imagine întrerupte care duc la neafișarea imaginii.
Soluție: Verifică URL-ul sursă al imaginilor tale. Acest URL ar trebui să conducă direct la locația fișierului tău de imagine. Compară numele fișierului imagine din URL cu numele real al fișierului tău de imagine. Acestea ar trebui să se potrivească exact, inclusiv extensia fișierului (.jpg, .png, .svg).
Optimizează imaginile site-ului pentru succes
Adăugarea de imagini pe site nu înseamnă doar să faci lucrurile să arate bine, este un factor esențial pentru îmbunătățirea experienței utilizatorului și creșterea clasamentului în motoarele de căutare.
Dimensiunea imaginilor tale afectează ambele aceste elemente. Prea mari, și paginile web se pot încărca lent. Prea mici, și imaginile pot apărea pixelate sau neclare.
Asigură-te că înțelegi cerințele de dimensiune ale imaginilor pentru designul site-ului tău și alege formatul potrivit de fișier pentru a echilibra rezoluția imaginii și dimensiunea fișierului.
De la vânzători începători la retaileri globali, Shopify funcționează pentru toată lumea. Vez planurile și prețurile.
Întrebări frecvente despre dimensiunea optimă a imaginilor pentru site-uri
Care este cea mai bună dimensiune de imagine pentru un site web?
Imaginile pe ecran complet ar trebui să aibă o lățime minimă de 2500 pixeli. Cea mai bună dimensiune de imagine pentru un site web depinde de scopul imaginii și de dimensiunea de afișare, precum și de efectul dimensiunii fișierului imagine asupra timpului de încărcare a paginii.
Care este cel mai bun format de imagine pentru un site web?
WebP este un format de imagine pentru site-uri web pentru a asigura performanță rapidă. Dezvoltat de Google, WebP oferă compresie fără pierderi pentru imaginile de pe web, reducând dimensiunea fișierului cu până la 30% comparativ cu JPEG și PNG. Totuși, merită menționat că WebP nu este suportat universal de toate browserele.
Care este diferența dintre dimensiunea imaginii și rezoluție?
Dimensiunea imaginii se referă la dimensiunile unei imagini, de obicei măsurate prin lățimea și înălțimea sa în pixeli. Rezoluția imaginii se referă la cantitatea de detalii pe care o conține o imagine, adesea măsurată în pixeli pe inch (PPI). O rezoluție mai mare înseamnă mai multe detalii și o imagine mai clară, indiferent de dimensiunea sa.
Cum afectează dimensiunea imaginii timpul de încărcare al site-ului?
Cu cât dimensiunea fișierului unei imagini este mai mare, cu atât durează mai mult pentru ca imaginea să se descarce și să se afișeze pe ecranul utilizatorului. Acest lucru poate încetini timpul de încărcare al paginilor web, ceea ce poate afecta negativ experiența utilizatorului și performanța în motoarele de căutare. Prin urmare, este important să optimizezi imaginile prin echilibrarea calității și dimensiunii fișierului.
Cum pot reduce dimensiunea fișierului imaginilor fără a pierde calitatea?
Poți reduce dimensiunea fișierului imaginilor fără a pierde calitatea folosind compresie fără pierderi, care elimină datele inutile din fișierul imagine fără a afecta aspectul imaginii. Instrumente precum Adobe Photoshop sau optimizatoare de imagini online oferă opțiuni pentru compresie fără pierderi.
