Squarespace ia presupunerile din formatarea imaginilor pentru afișare pe web. Creăm șapte variante ale fiecărei imagini încărcate, pentru a asigura afișarea perfectă pe orice dimensiune a ecranului.
avem câteva recomandări despre cum să formatați imaginile înainte de a le încărca. Pentru cele mai bune rezultate, urmați sugestiile de mai jos.
sfat: vizitați seria noastră video Totul despre imagini pentru mai multe sfaturi și tutoriale pas cu pas despre adăugarea de imagini pe site-ul dvs.,
Uita-te la un video
Înainte de a începe
Pentru a găsi mărimea și dimensiunile din imaginea originală înainte de a-l transfera pe site-ul:
- PC – click Dreapta pe imagine și selectați Proprietăți.
- Mac-apăsați Opțiune în timp ce faceți clic pe fișierul imagine, apoi selectați Obțineți informații.
Glosar
iată câteva dintre terminologia pe care o veți vedea în acest ghid.
- raport de Aspect – raportul de aspect al unei imagini este raportul dintre lățime și înălțime exprimat ca număr, cum ar fi 3:4., Menținerea unui raport de aspect consistent împiedică distorsionarea imaginilor. De exemplu, dacă reduceți lățimea unei imagini la jumătate, trebuie să reduceți și înălțimea la jumătate.
- Image width – în acest ghid, dimensiunile imaginii se referă la numărul de pixeli de-a lungul lățimii și înălțimii imaginii. Imaginea dvs. poate fi afișată mai mare sau mai mică pe site-ul dvs., în funcție de dimensiunea containerului. Pentru a afla mai multe, vizitați redimensionarea unei imagini.
ce se întâmplă după ce încărc o imagine?
când încărcați o imagine, Squarespace creează până la șapte versiuni ale acelei imagini, fiecare cu o lățime diferită., Aceste lățimi sunt:
- 100 de pixeli
- 300 pixeli
- 500 pixeli
- 750 pixeli
- 1000 pixeli
- 1500 pixeli
- 2500 pixeli
inaltime se schimbă în funcție de lățimea pentru a păstra raportul de aspect al imaginii. Designul receptiv încorporat al Squarespace alege dimensiunea corespunzătoare a imaginii în funcție de ecranul vizitatorului.
notă: imaginile încărcate prin stilurile Site-ului, cum ar fi imaginile de fundal, se afișează întotdeauna la lățimea imaginii originale. Vă recomandăm să încărcați aceste imagini cu maximum 2500 de pixeli de-a lungul marginii lor cele mai lungi., Pentru mai multe sfaturi, consultați cele mai bune practici pentru imagine de mai jos.
cerințe imagine
când încărcați imagini pe site-ul dvs., urmați aceste instrucțiuni:
tipuri de fișiere
Salvați imaginile în .jpg, .gif, sau .numai în format png.
.pdf, .psd, .tff, și .fișierele doc nu sunt compatibile cu web.
Sfat: Puteți crea linkuri de descărcare pentru fișiere care nu sunt compatibile cu web.
Nume fișier
utilizați numai litere, numere, subliniere și cratime în numele fișierelor., Alte caractere (cum ar fi litere accentuate, semne de întrebare, semne de procente și ampersands) se pot încărca incorect sau pot provoca un comportament neașteptat în galerii.
rezoluție
există o limită de rezoluție a imaginii de 60 MP (megapixeli).
sfat: pentru a găsi MP pentru o imagine, înmulțiți dimensiunile și împărțiți cu un milion. De exemplu, o imagine cu dimensiunile de 1500px x 1650px este de 2.475 MP.
modul de culoare
Salvați imaginile în modul de culoare RGB. Modul de culoare CMYK este doar pentru materialele tipărite și nu va apărea corect în majoritatea browserelor., Dacă observați variații ale imaginilor, verificați fișierele de imagine pentru a vă asigura că sunt în modul de culoare RGB.
profil de culoare
Salvați imagini în profilul de culoare sRGB. Dacă imaginile nu arată bine pe dispozitivele mobile, este probabil pentru că nu au un profil de culoare sRGB.
Image best practices
File size
vă recomandăm să utilizați fișiere imagine mai mici de 500 KB pentru cele mai bune rezultate, deși limita pentru o încărcare individuală a imaginii este de 20 MB. Când vine vorba de dimensiunea imaginii, dimensiunea mai mare nu este întotdeauna mai bună, deoarece încărcarea mai multor imagini mari poate afecta performanța site-ului., Dacă adăugați mai multe imagini la o pagină, țineți cont de dimensiunea generală a paginii.
lățimea imaginii
dimensiunile imaginii originale pe care o încărcați pe site-ul dvs. pot avea un impact mare asupra modului în care se afișează. Vă recomandăm să utilizați imagini cu o lățime cuprinsă între 1500 și 2500 de pixeli.
- imaginile mai mici de 1500 de pixeli pot apărea neclare sau pixelate atunci când se întind pentru a umple containere, cum ar fi bannere. Pentru a afla cum redimensionează bannerele pe diferite dispozitive și lățimi de ecran, vizitează Responsive design.,
- în majoritatea cazurilor, Squarespace va reformata imagini mari la o lățime maximă de 2500 pixeli. Cu toate acestea, imaginile adăugate prin stilurile Site-ului (imagini de fundal și imagini banner la nivel de site) se încarcă la dimensiunile originale. Acest lucru poate cauza probleme de încărcare a paginii dacă imaginea are peste 2500 de pixeli de-a lungul marginii sale cele mai lungi.puteți utiliza software terță parte pentru a reduce dimensiunile unei imagini. Nu vă recomandăm să măriți o imagine mai mică, deoarece acest lucru o poate face să pară pixelată. În schimb, începeți cu o imagine cu o lățime de cel puțin 1500 de pixeli., De asemenea, puteți căuta și adăuga imagini de stoc de înaltă calitate direct de pe site-ul dvs.
Sfat: Dacă observați probleme de încărcare, cum ar fi o imagine de fundal care nu se încarcă pe mobil, încercați să reduceți marginea cea mai lungă a tuturor imaginilor la 1500 de pixeli. Aceasta este cea mai sigură combinație de calitate a imaginii și viteză de încărcare pentru vizitatorii dvs.
decuparea imaginilor
browserele încarcă imaginea completă pentru imaginile decupate de site-ul dvs., cum ar fi cele decupate cu mânerul de decupare sau cu modificările raportului de aspect al stilurilor site-ului., Pentru a reduce dimensiunea fișierului imaginilor mari, este mai bine să le decupați mai întâi aproape de dimensiunea dorită manual cu ajutorul software-ului terț sau al editorului de imagini încorporat.ori de câte ori este posibil, vă recomandăm să adăugați text ca suprapunere în loc să îl includeți în imagine. Acest lucru face ca textul să poată fi căutat și îl păstrează vizibil dacă imaginea se recoltează pe dispozitive mai mici. Consultați sfaturile noastre pentru adăugarea textului suprapus la blocuri de imagini, bannere, pagini de galerie și blocuri de galerii.dacă imaginea dvs. conține text, cel mai bine este să o salvați ca .fișier png. Text într-un .,fișierul jpg devine adesea neclar atunci când imaginea este comprimată. A.fișierul png își păstrează de obicei claritatea, mai ales dacă imaginea se afișează la dimensiunea inițială.
Nume Imagini
numele unei imagini acționează ca text alt dacă nu este furnizat alt text. De asemenea, spune motoarelor de căutare despre ce este imaginea, ceea ce face mai probabil să apară în căutările de imagini.când creați imagini, țineți cont de cele mai bune practici ale textului alternativ.
sfat: pentru a schimba numele fișierului pentru majoritatea imaginilor, reîncărcați imaginea cu noul nume., În blocurile de imagini, puteți schimba câmpul Nume fișier din fila Conținut.
raport de Aspect
ajută pentru a se asigura fiecare imagine pe care îl utilizați are același raport de aspect (înălțime:lățime) înainte de încărcarea, ca imaginile sunt de obicei recoltate pe baza lor, lățime și înălțime. Dacă toate imaginile dvs. au același raport de aspect, va fi mai ușor să anticipați modul în care vor decupa. Pentru a afla mai multe, vizitați înțelegerea raporturilor de aspect.
orientare
asigurați-vă că imaginea dvs. este în orientarea corectă înainte de a o încărca., Dacă imaginea dvs. este salvată cu susul în jos, rotiți imaginea cu software de editare a imaginilor înainte de a o încărca pe site-ul dvs.dacă ați adăugat deja imaginea pe site-ul dvs., puteți roti imaginea utilizând editorul de imagini încorporat.
DPI și PPI
Dacă sunteți preocupat de rezoluția imaginii, concentrați-vă pe dimensiunile imaginii și păstrați dimensiunile fișierelor sub 500 KB, în loc de DPI (puncte pe inch) sau PPI (pixeli pe inch). DPI și PPI afectează calitatea de imprimare a unei imagini, dar nu și afișarea web a acesteia.,
dimensiunea paginii
chiar dacă toate fotografiile sunt sub 500 KB, dacă aveți un număr mare de imagini pe o pagină, aceasta poate cauza probleme, cum ar fi viteze de încărcare lente. Verificați conținutul paginii pentru a vă asigura că dimensiunea paginii dvs. este de 5 MB sau mai mică.
Logos
examinați cerințele noastre de imagine înainte de a adăuga un logo. Formatați imaginea astfel încât să fie similară în înălțime cu modul în care doriți să fie afișată. Nu avem nevoie de o dimensiune specifică pentru logo-ul dvs., dar cel mai bine este să începeți cu o imagine mai mare. Când imaginea dvs. este prea mică pentru a începe, poate Pixela la redimensionare. Puteți modifica dimensiunea după ce încărcați logo-ul.,dacă site-ul dvs. este pe versiunea 7.0, modul în care redimensionați un logo depinde de șablonul dvs.când adăugați un favicon pe site-ul dvs., asigurați-vă că imaginea este salvată ca .ico sau a .fișier png.dimensiunile recomandate pentru un favicon sunt de 100px × 100px până la 300px × 300px. Favicons va afișa în browsere ca 16px × 16px.
notă: Internet Explorer nu se poate afișa .PNG – uri ca favicons.
animat .GIF-uri
animate .GIF-urile sunt o excepție de la regula noastră de 1500-2500 pixeli, în special .GIF-uri în blocuri de imagini., O lățime de 1500 pixeli .gif va fi probabil foarte mare, ceea ce ar putea încetini site-ul dvs. Vă recomandăm formatarea animate .GIF-uri în orice dimensiune doriți să le afișați pe site-ul dvs.
mai mult ajutor
- editor de imagini încorporat-vizitați editarea imaginilor pe site-ul dvs.
- imagini stoc – înainte de a adăuga o imagine stoc pe site-ul dvs., consultați cele mai bune practici.
- afișaje de înaltă densitate și retină-vizitați designul receptiv.
- Imagini produs-vizitați tipuri de pagini Magazin.
- blocuri de imagini-vizitați blocuri de imagini.,
- secțiuni Galerie-vizitați secțiuni galerie în versiunea 7.1.
- Gallery Blocks-vizitați Galeria blocuri.
- pagini Galerie-vizitați pagini Galerie.
- metadate imagine-vizitați importul de metadate imagine.