rezumat

Dacă încărcați imagini foarte mari pe site-ul dvs., site-ul dvs. web va încetini atunci când aceste imagini sunt vizualizate de vizitatorii dvs.

Soluția este să învățați cum să optimizați (tăiați imaginile până la dimensiune) înainte de a le încărca.

Acest articol explică cei doi factori care controlează cât de mari sunt fișierele dvs. de imagine și oferă linkuri către câteva instrumente gratuite/cu cost redus pe care le puteți utiliza pentru a vă optimiza imaginile.

Dimensiuni fișier și dimensiune fișier

  • dimensiunile fișierului (lățime și înălțime, în pixeli) și
  • mărime fișier (Kilobyte KB sau Megabytes MB).

Vă puteți gândi la acestea ca mărime și „greutate”, dacă doriți.

  • Imaginea miniatură pe care o vedeți mai jos are 360 ​​de pixeli (px) lățime și 240 px înălțime și „cântărește” 20 KB.
  • Faceți clic pe imaginea miniatură pentru a vedea versiunea mai mare într-o casetă lightbox - veți vedea versiunea lată de 800 px care „cântărește” 80 KB.

fișierelor

Mărirea imaginilor la lățimea de 1.280 px este o țintă bună pentru multe site-uri web. Cu toate acestea, ați putea viza monitoare mai largi, în funcție de publicul dvs.

Iată câteva statistici cu privire la lățimile minime ale ecranului din ianuarie 2017 (consultați w3schools.com pentru cele mai recente informații):

  • 1024 px lățime: 96%
  • 128x lățime: 93%
  • 1366 px lățime: 84%
  • 1920px lățime: 49%
  • 2560 px lățime: 8%

Deci, statistic, dacă vă dimensionați imaginile la 1280 px lățime, în 93% din cazuri imaginile vor fi suficient de mari pentru a umple browserul vizitatorului. Oricare ar fi mai mare și imaginea va fi oricum strânsă în lățime. Dacă doriți să completați lățimea browserului pentru 84% dintre vizitatori, va ajunge acolo 1.366 px. Dacă utilizați 2.560 px lățime, veți putea afișa pe afișaje mari iMac la lățime maximă.

Faceți clic pe miniatura pentru următoarea imagine și veți privi o imagine cu o lățime de 2.000 px care „cântărește” 120Kb. Pentru aproximativ 92% dintre voi, va trebui să se micșoreze pentru a se potrivi monitorului.

Asigurați-vă că vă maximizați browserul înainte de a face clic pe miniatură:

Imaginile de pe camerele digitale sau din bibliotecile foto pot fi foarte mari, atât ca dimensiuni, cât și ca „greutate”. 4.000 px lățime nu este neobișnuit, iar dimensiunea fișierului poate fi de la 4Mb la 10Mb și mai mult.

Este clar că aceste imagini sunt mult mai largi decât pot afișa majoritatea monitoarelor, iar „greutatea” ar cauza întârzieri în timp ce fișierele mari se descarcă.

Aceste probleme pot fi evitate dacă vă pregătiți imaginile pentru a vă asigura că dimensiunile nu sunt mai mari decât cele necesare, iar dimensiunile fișierelor sunt rezonabile pentru scopurile dvs. După cum puteți vedea din exemplele de mai sus, alegerile dvs. sunt destul de largi.

Pregătirea imaginilor implică reducerea dimensiunii fizice și a fișierului, în timp ce lăsând în continuare imaginile arătând bine. Nimeni nu dorește imagini mici și granuloase pe un site web și nu este necesar.

Verificarea dimensiunii imaginilor

Pentru a vedea cât de mari sunt fișierele dvs. imagine, utilizați Windows Explorer sau Mac Finder și inspectați fișierul. Pe un Mac, puteți vizualiza direct în Finder:

Din acest panou de informații puteți vedea fișierul imagine (grapes-file-information.png) are o lățime de 2.000 px și o înălțime de 501px și 120KB

Dimensiuni - Mărime fizică

Pentru majoritatea site-urilor web, asigurați-vă că fișierul dvs. nu este mai lat decât lățimea paginii dvs. web.

Dacă intenționați să afișați imagini în modul ecran complet (cum ar fi imaginea largă prezentată mai sus), vă recomandăm să planificați ca imaginile dvs. la dimensiune completă să fie de 1.280 px, 1.920 px sau chiar mai largi. Tema dvs. WordPress asigură în mod normal că imaginile mai mari vor fi redimensionate automat în jos pentru a le încadra în rezoluția monitorului fiecărui vizitator.

Când încărcați o imagine, WordPress nu doar încarcă imaginea originală, ci creează automat trei imagini redimensionate pentru dvs.:

  • o versiune mare (implicit 600 px)
  • o versiune medie (implicit 300px)
  • o miniatură (implicit 150 px)

Prin urmare, puteți alege întotdeauna să utilizați imaginea dvs. la dimensiune completă sau Mediu sau Miniatură.

Aceste dimensiuni implicite de fișiere în WordPress pot fi modificate în Tablou de bord, Setări, Media.

Mărime fișier

Aceasta este cea mai importantă parte a pregătirii unei imagini pentru site-ul dvs. web. Imaginile cu o dimensiune mare a fișierului durează mai mult timp pentru a fi descărcate în browserul vizitatorilor și încetinirea site-ului dvs. web.

Pentru majoritatea imaginilor web cu „pagină completă”, doriți ca imaginea să aibă cel mult 80Kb-100Kb. Dacă imaginea este doar o parte a unei pagini (de exemplu, jumătate din lățimea unei postări de blog), atunci 20Kb-30Kb este de obicei bine.

Scăderea calității imaginii la 30-50% din original, de obicei, nu face nicio diferență pe care o puteți alege cu ochiul liber. Încercați și vedeți.

Puteți scăpa imagini de 2-3Mb la 80kb-120kb și nu puteți vedea cu adevărat nicio modificare a calității vizibile.

Pentru a verifica dacă nu ați supra-optimizat imaginile, deschideți imaginea originală și imaginea optimizată și vizualizați-le una lângă alta. Căutați orice „jaggies” (zone pixelate). Dacă imaginea dvs. are zone de cer (sau zone care au o zonă largă de aceeași culoare) sau linii subțiri (cum ar fi liniile de alimentare) care traversează un fundal neutru, verificați-le cu atenție, deoarece acestea sunt adesea primele locuri în care veți observa pixelarea.

Instrumente de pregătire a imaginii

Dacă încărcați imagini pe computer și sunteți familiarizat cu micșorarea acestora înainte de a trimite prin e-mail, atunci o modalitate foarte rapidă de a optimiza imaginile poate fi doar să le trimiteți prin e-mail către dvs. înainte de a încărca pe WordPress.

Pregătirea automată

Dacă preferați automatizarea în locul optimizării manuale a fiecărei imagini, puteți instala fișierul ShortPixel plugin (utilizați acest link de afiliere pentru 100 de imagini gratuite/lună) și care va optimiza automat fiecare imagine pe care o încărcați. Utilizați setarea Lossless pentru a obține rezultate de cea mai înaltă calitate.

Pregătirea manuală

Puteți utiliza un program de editare a imaginilor pentru a decupa și redimensiona singur fișierele de imagine. Iată câteva opțiuni gratuite/entry level pe care le puteți încerca:

  • Mac: puteți utiliza aplicația Previzualizare pe Mac - utilizați Instrumente, Ajustare dimensiune și apoi Export pentru a salva ca JPG. De asemenea, Ribbet are un nou editor de imagini excelent, care vă permite să redimensionați JPG-urile - descărcați-le gratuit pe Mac. Există o versiune de browser web disponibilă, dar care necesită utilizarea Flash.
  • Mac/Windows: obțineți un abonament gratuit la Canva - acesta este un editor de imagini bazat pe browser
  • Windows: FastStone sau PIXresizer (ambele gratuite)

Dacă doriți să utilizați instrumente de editare mai avansate, Photoshop este regele dealului, dar rețineți că este exagerat dacă tot ce doriți să faceți este să redimensionați imaginile pentru web. Există opțiuni de abonament pentru Photoshop care costă în jur de 12 USD/lună (căutați abonamentul la Fotografie). Pentru a optimiza o imagine utilizând Photoshop, va trebui să aflați cum să utilizați funcția Dimensiune imagine și instrumentele Export.

În majoritatea cazurilor, programele de gestionare a imaginii vă vor permite să reduceți calitatea imaginii cu un procent. Dacă aveți de-a face cu imagini mari, de înaltă rezoluție, de obicei le puteți scădea la aproximativ 30% din calitatea originală și nu puteți vedea prea multe (dacă există) diferențe. Experimentează pentru tine.

Iată câteva capturi de ecran care prezintă ImageWell și Picturesque reducând dimensiunea fișierului la 30% din original.