Cum să redimensionezi o imagine pentru web

Această postare explică cum să redimensionezi o imagine pentru web. În primul rând în pixeli, astfel încât imaginea să se potrivească corect pe pagina web. Apoi în kilobytes pentru a reduce dimensiunea fișierului fără a degrada prea mult imaginea.

De ce redimensionăm imaginile pentru web?

Dorim să facem imaginile să arate bine pe ecran și să le descarcăm rapid pentru vizitatorii site-ului.

Site-urile web cu imagini de încărcare rapidă se vor clasa mai sus pe motoarele de căutare.

Pentru că motoarele de căutare preferă să trimită utilizatorii către site-uri web care oferă o experiență bună.

Există doi pași către o imagine de încărcare rapidă:

• Primul pas este redimensionarea imaginii în pixeli – și ar trebui să fie primul.
  Aceasta este lățimea și înălțimea. Trebuie să aibă dimensiunea potrivită pentru locul său de pe site.
  Există câteva ciudățeni în dimensiunea imaginilor de la introducerea site-urilor web receptive.
  O imagine trebuie să aibă dimensiunea potrivită pentru un mobil, o tabletă, un desktop și un televizor despre care vom discuta mai târziu.
• Al doilea pas este reducerea dimensiunii imaginii în kiloocteți - cunoscută sub numele de compresie.
  Comprimarea reduce sau combină culorile dintr-o imagine, astfel încât dimensiunea în kiloocteți scade. Este posibil să faceți acest lucru fără a pierde prea multă calitate.

Efectuarea ambelor sarcini – redimensionarea și comprimarea – este cunoscută ca optimizarea unei imagini pentru web.

Vă voi arăta cele mai bune practici pentru redimensionarea unei imagini și cum să o faceți.

Complicațiile cu imaginile receptive

Să începem prin a ne uita la imaginile receptive – cele care se redimensionează pentru a arăta bine pe diferite dimensiuni de ecran.

Proiectăm mai întâi pentru mobil, așa că voi începe prin a face referire la versiunea mobilă a unui site web.

Pe site-urile mobile, imaginea se întinde de obicei pe toată lățimea ecranului. Imaginile se stivuiesc deasupra textului, iar utilizatorii sunt foarte obișnuiți să defileze rapid în paginile web lungi, prietenoase cu dispozitivele mobile.

Pentru un dispozitiv mobil, o lățime foarte bună pentru o imagine este de 640 pixeli. Înălțimea poate fi orice doriți.

Dar dimensiunea imaginii nu se termină aici. O singură mărime nu se potrivește tuturor.

Imagini pe diferite dispozitive

Să ne gândim la aceeași imagine pe un monitor foarte mare sau pe un ecran TV – da, site-urile web sunt acum accesibile prin intermediul televizorului tău inteligent.

Imaginea s-ar putea să se afle într-o coloană din stânga textului.

S-ar putea să se întindă pe lățimea ecranului, așa cum a făcut-o în versiunea mobilă. Numim aceste imagini de eroi.

Imaginează-ți cât de mare trebuie să fie acea imagine acum?

Pentru un televizor, o imagine perfectă în pixeli ar avea o lățime de 1920 de pixeli – sau mai mult.

Dacă ați redus deja imaginea cu 640 de pixeli pentru un mobil, va arăta groaznic dacă încercați să o măriți la 1920 de pixeli. L-ai întinde cu mai mult de 400%.

Creșterea imaginilor nu arată bine – pixelii se întind și imaginea pare neclară.

Nu rezolvă problema nici dacă se stabilește menținerea imaginilor la 1920 de pixeli. Acestea se descarcă atât de încet, mai ales pe conexiuni lente la internet.

Pentru a adăuga complicații: o imagine trebuie să aibă dimensiunea exactă a pixelilor pentru a fi utilizată pe pagină. Motoarelor de căutare le place să aibă o idee bună despre lățimea și înălțimea - cunoscute sub numele de dimensiuni.

Deci puteți vedea – nu există o dimensiune standard și totul devine destul de complicat. Tot ce putem face este tot ce putem.

Pluginuri WordPress pentru imagini adaptive

Există câteva pluginuri WordPress care ajută la furnizarea dimensiunii corecte a imaginii dispozitivului, numite imagini adaptive.

Practic, o imagine mică se descarcă mai întâi - indiferent dacă este în dimensiune sau rezoluție.

Dacă rezoluția ecranului este mare, pluginul oferă versiunea mai mare. Acest lucru accelerează timpul de așteptare al vizitatorului.

Aceasta este soluția dacă doriți să utilizați imagini cu eroi mari, dar vă preocupați timpul de descărcare.

Iată două pluginuri de imagine adaptive care îmi plac:

• Imagini adaptive pentru WordPress de la Nevma
  Pur și simplu trimite versiuni mai mici ale imaginilor către dispozitivele mobile, deci un plugin foarte simplu care face treaba odată ce setările au fost salvate după activare.
• Shortpixel Adaptive Image de ShortPixel
  Acest plugin este inteligent. Va începe să decupeze și să comprime imaginile pentru diferite ecrane de îndată ce este activat. Deși puteți avea un control mai mare dacă este necesar. Documentația ShortPixel este, de asemenea, cuprinzătoare. Puteți chiar să comparați o imagine înainte și după compresie cu testul lor de compresie a imaginii.
  

Deci, ceea ce aș face este să folosesc aceste pluginuri adaptive, dar să nu vă bazați pe deplin pe ele și să aruncați fotografii pe site-ul dvs. WordPress direct de pe o cameră. Păstrați-vă biblioteca media curată.

Redimensionați mai întâi imaginea și comprimați minim pentru a reduce KB. Odată ce îl încărcați pe WordPress, pluginul de imagine adaptivă se va ocupa de restul.

Să începem să redimensionăm o imagine pentru web.

Redimensionați o imagine pentru web – în pixeli

Având în vedere tot ceea ce am discutat, alegeți lățimea imaginii.

• Un fotograf ar avea nevoie de imagini de calitate excelentă. Pentru a le afișa la lățimea întregului ecran pe un monitor foarte mare, vor avea nevoie de o imagine destul de mare. Dimensiunea fotografiilor la cel puțin 1920 de pixeli.
• Oricine altcineva, sfătuiesc să opteze pentru 1200 de pixeli. Acesta este un echilibru bun. Oamenii de pe monitoare foarte mari vor vedea o pixelare pe imaginile cu lățime completă, dar este un compromis pentru o imagine cu încărcare rapidă.

Pentru propriul meu site web și blog folosesc imagini cu o lățime de maxim 1200 pixeli, majoritatea celor care sunt pe pagini sunt de 800. Iată de ce:

• Imaginile pe toată lățimea nu sunt niciodată folosite pe site-ul meu. Îmi place să țin totul cu adevărat rapid.
• Afacerea mea nu este deosebit de vizuală, oamenii nu au nevoie să-mi vadă fotografiile la o rezoluție atât de mare.
• Folosesc imagini separate, de dimensiune exactă pentru Open Graph și nu necesită nimic mai mare de 1200.
• Din Google Analytics știu că oamenii îmi vizitează site-ul folosesc un dispozitiv portabil sau un laptop. Informatii utile.

O las la latitudinea ta.

Software gratuit de editare a imaginilor

Există o mulțime de instrumente gratuite disponibile online, precum și programe de editare a imaginilor care pot fi descărcate.

Pentru fotografii, rămâneți în formatul de fișier JPEG și asta vom acoperi aici.

Pentru vectori, alegeți PNG sau SVG - și asta pentru un tutorial viitor.

Software de editare a imaginilor GIMP

„GIMP” (Programul de manipulare a imaginilor GNU) este un editor de imagini complet gratuit.

Descărcați versiunea actuală stabilă a GIMP de pe site.

GIMP oferă un tutorial despre schimbarea dimensiunii (dimensiunilor) unei imagini (scalei).

Editori de imagini online

O căutare rapidă pentru „imagine de redimensionare online” în Google vă va oferi o serie întreagă de opțiuni pentru a vă permite să încărcați, să redimensionați, să comprimați și să descărcați Jpeg.

Primul rezultat pe care l-am găsit a fost resizeimage.net. Foarte simplu de utilizat – decupează, redimensionează și comprimă o imagine.

Dacă doriți să decupați imaginea, utilizați opțiunea numărul 2, dar am ocolit asta și am trecut direct la opțiunea numărul 4, unde o pot redimensiona în pixeli.

Puneți 1200 în câmpul de lățime, Nan în înălțime și bifați caseta pentru a păstra raportul de aspect.

Formatul imaginii de ieșire va fi JPG.

Alegeți o opțiune de compresie.

Compresia progresivă va afișa o versiune pixelată a JPEG de îndată ce vizitatorul se află pe pagină. Restul informațiilor se vor descărca progresiv pentru a construi imaginea finală. Îmi place foarte mult această opțiune pentru că vizitatorul știe să aștepte.

Reduceți calitatea imaginii cu aproximativ 75%, din nou în funcție de cât de nemilos ați dori să fiți.

Redimensionarea unei imagini în KB – compresie

Comprimarea este foarte diferită de redimensionare. Toate imaginile ar trebui să fie comprimate înainte de încărcare, chiar dacă utilizați un plugin de imagine adaptiv.

Comprimarea reduce dimensiunea fișierului imaginii prin reducerea pixelilor, astfel încât se descarcă mai rapid.

În timpul etapei de compresie încercați să nu compromiteți prea mult calitatea imaginii.

Încercați să obțineți un echilibru între imaginea care arată bine și descărcarea rapidă.

Imaginile pot fi comprimate și folosind software-ul GIMP.

Tutorial GIMP despre schimbarea dimensiunii (FileSize) a unui Jpeg.