Cum să optimizați imaginile pe care urmează să le utilizați pe site-ul dvs. web
Ajută la performanța site-ului dvs. web.
Îmbunătățește vizualizarea pentru utilizator.
Veți obține o viteză de încărcare mai bună.
Google te place mai mult.
După cum puteți vedea, toate sunt avantaje dacă optimizați imaginile pentru site-ul dvs. web. Nu pierzi nimic, ci doar petreci ceva timp pe el. Trebuie să faci la fel, același proces, ceva sistematic cu toate imaginile tale.
În cazul meu, odată ce am compilat toate fotografiile pe care le voi folosi într-un folder, le deschid cu instrumentul Photoshop și atunci încep primul meu pas pentru optimizare.
Pentru persoanele care nu folosesc Photoshop sau nu au acest instrument, voi vorbi despre alte alternative.
Ei bine, hai să ajungem la asta. Am inceput. 🚀
Format imagine pentru web
Cu siguranță știți deja, unele extensii precum jpeg, png, gif ... poate nu atât de mult dacă vorbim despre svg sau Wbmp.
Pentru a explica într-un mod simplu, primele trei sunt formate de imagine care utilizează pixel, (acele pătrate colorate) fiecare format folosește mai mult sau mai puțin pixel.
În cazul SVG, este un format vector, care folosește linii. Îmi place acest format pentru pictograme, separatoare și imagini liniare.
Este un format foarte curat și clar atunci când îl vizualizați, puteți mări orice doriți și nu își pierde calitatea ca în cazul imaginilor cu pixeli.
Și în ultima vreme este foarte la modă formatul Wbmp, care în photoshop vă permite deja să utilizați, dar care, după părerea mea și din propria mea experiență, există încă dispozitive și browsere care nu citesc acest format și nu afișează imaginea.
Problema optimizării imaginilor este să lucrăm într-un mod „curat”, să câștigăm viteză și, în cele din urmă, dacă optimizăm, va fi bine pentru utilizatorul nostru, pentru SEO și pentru noi înșine. Dar da, întregul proces pe care îl voi învăța într-o măsură corectă.
Trebuie să reduceți dimensiunea și spațiul imaginilor fără a pierde calitatea sau îngreunarea browserelor.
Pentru a o înțelege mai bine, vom învăța să facem ceva necesar, sunt pasionat de fotografie și când vine vorba de proiectarea în special a Webului, am văzut că munca mea nu poate fi predată așa cu calitatea pe care am făcut-o, De ce?
Ei bine, pentru că camera mea face fotografii la o dimensiune de 5200px, adică să văd acea fotografie împreună cu 5 ecrane de computer, astfel încât să mă înțelegeți.
Prin urmare, dacă îl încărc pe web, îl apăs și îl pun într-o casetă care are o limită, deoarece avem un contract de server limitat în majoritatea cazurilor și că o pagină web, care are o capacitate de 1 MB, ia aproximativ 3 secunde pentru a fi afișat.
Înțelegi mai bine așa?
De ce să încărcați o fotografie mare, dacă va fi vizualizată pe un site web cu o rezoluție maximă de 1200 px dacă ar fi o imagine pentru copertă, dacă este pentru o altă secțiune, 500 px sunt suficient de siguri.