Cum se reduce dimensiunea și rezoluția imaginilor web cu FastStone Resizer
În acest articol voi explica cum se optimizează imaginile pentru web. În ce constă? Ei bine, ajustând dimensiunea fiecărei imagini la cea a site-ului nostru web (acum vom vedea ce este asta) și reducând rezoluția sa la că imaginea „cântărește” mai puțin. Adică, reduceți dimensiunea acestuia în pixeli și în octeți. Acum, că avem clar, Să mergem la mizerie!
Dimensiunea imaginilor afectează viteza și poziționarea site-ului nostru web
Oricine a folosit instrumente de măsurare viteza de încărcare pe site-ul dvs. web, vei fi observat că imagini sunt responsabili pentru un procent foarte mare de timpul și dimensiunea de încărcare de pe site-ul nostru web. Este unul dintre primii factori pe care trebuie să-i optimizăm, deoarece Google penalizează timpii mari de încărcare.
În acest articol al prietenului meu Jesús AF puteți găsi instrumente și sfaturi care vă vor ajuta îmbunătățiți viteza site-ului dvs. web.
Timpul de încărcare al unei imagini depinde practic de doi factori:
- Dimensiunea imaginii în octeți. Această dimensiune este mai mare cu cât imaginea este mai mare (în pixeli) și rezoluția mai mare (în puncte per inch sau dpi) are.
- Dacă dimensiunea în pixeli (lățime și înălțime) se potrivește exact cu containerul de imagini
Primul lucru este să fie clar că dimensiunea în pixeli și rezoluția unei imagini sunt lucruri diferite. Dacă vrem să aprofundăm aici putem (în engleză).
LA efecte practice ceea ce ne interesează este să știm că trebuie reglați imaginea la dimensiunea containerului în care va fi inserată și asta rezoluția ar trebui redusă la 72 dpi pentru a găsi un echilibru între calitatea și dimensiunea imaginii pe site-ul nostru. Dacă nu o facem astfel, avem două efecte:
- marime mai mare în octeți face browserul durează mai mult descărcarea. Apoi vom vedea cifrele specifice despre care vorbim.
- Daca el dimensiunea în pixeli (lățime și înălțime) a imaginii nu se potrivește cu elementul care o conține, browserul utilizatorului (fie că este Internet Explorer, Mozilla Firefox, Google Chrome, Safari, Opera sau orice altceva) va trebui să facă calcule pentru a reduce dimensiunea imaginii și a o afișa corect. Acest lucru se traduce prin timpul procesului, care face ca site-ul nostru să dureze mai mult timp pentru a fi afișat.
Cum se optimizează o imagine pentru web
Putem folosi o multitudine de instrumente pentru a schimba dimensiunea și parametrii de rezoluție ai unei imagini, dar datorită unei conversații pe Facebook, am descoperit un instrument grozav numit FastStone Resizer.
Acest program simplu vă permite să optimizați imaginile pentru web într-un mod foarte simplu. Și, de asemenea, permite lucrul în serie, adică aplicarea acelorași setări la mai multe imagini în același timp.
Care este dimensiunea potrivită pentru imaginile de pe site-ul meu
Bine depinde de elementul care îl conține. Aici puteți afla mai multe despre eticheta „div”, care este cel mai general container pe care îl vom găsi, dar este un fapt tehnic pe care majoritatea utilizatorilor nici măcar nu trebuie să îl cunoască 😉
Să știi datele despre dimensiunea exactă Avem instrumente, unele mai generale și altele mai specifice, dar cel mai simplu mod este să folosim inspector de elemente folosit de aproape toate browserele importante de astăzi. Inspectorul de elemente ne ajută programatorii în anumite sarcini tehnice.
Va trebui să căutăm (sau să creăm de la zero) o imagine cu lățimea maximă care ne interesează pe site-ul nostru. În cazul meu, de obicei folosesc lățimea completă a coloanei articolului, care este de 795 pixeli, dar poate fi cazul în care dorim să includem o imagine mai mică, iar procesul va fi același.