Prilikom izrade web stranice, optimizacija slike je ključna. Ako odaberete veličinu slike koja je premala, to dovodi do pikseliziranih slika i loše kvalitete prikaza.
Ali ako je razlučivost slike prevelika, vrijeme učitavanja stranice može natjerati korisnike da čekaju - osobito na mobilnim uređajima. Ignorirajte brzinu web stranice na vlastitu odgovornost!
Dobar programer web stranica to razumije i pronalazi pravu ravnotežu za svaku pojedinačnu sliku. Optimizirane slike pomažu ubrzati vrijeme učitavanja za korisnike čak i na mobilnim uređajima koji koriste 3G.
"Veličina slike" može imati različita značenja u digitalnom svijetu. Govorite li o veličini slike u bajtu ili veličini slike u pikselu?
Fizičke slike se mjere u inčima ili centimetrima, zar ne?
Međutim, u slučaju digitalnih slika veličina se mjeri u "broju piksela u širini" x "broju piksela u visini". Na primjer, 150 x 150 je tipična veličina male, kvadratne sličice.
Što je manji broj piksela, to će manja veličina datoteke. Ali ako prisilite manju sliku da se prikaže na zaslonu u veličini većoj od piksela na slici, korisnici bi mogli početi vidjeti izobličenje.
Jedna stvar koju treba imati na umu kada razgovarate o optimizaciji slike je omjer slike. Ako promijenite širinu ili visinu slike bez promjene potpuno istog omjera u odnosu na drugu, tada će se slike iskriviti.
Ne brinite, mnoštvo alata automatizira ovu promjenu, uključujući alat za optimizaciju na kraju ovog članka.
Samo zapamtite da uredite samo jednu - bilo širinu ili visinu - i pustite alat da automatizira drugu stranu kako bi zadržao točne dimenzije slika.
Ako već imate sliku na svojoj web stranici koju želite optimizirati, idite na web stranicu i zatim učinite sljedeće:
Prvo pitanje koje si trebate postaviti je: "Kako ćete koristiti sliku?"
Hoćeš li ikada ispisati sliku? Ako je tako, možda će vam trebati slika visoke rezolucije s velikim svojstvima širine x visine i 300 DPI (točaka po inču). Što je veći vaš ispis, potrebna vam je veća veličina piksela.
U tom slučaju preuzmite potrebnu veličinu i smanjite veličinu slike za svoju web stranicu (pogledajte korake u nastavku).
U suprotnom, nikad ne preuzimajte sliku širine veće od 2000 piksela jer je to veće od većine zaslona. Čak i ako je ista cijena kao na web-mjestu za fotografije, neće vam pomoći. Samo vam neće trebati tako velike digitalne slikovne datoteke i samo će zauzeti više prostora na vašem tvrdom disku.
Hoće li se koristiti kao slika heroja od ruba do ruba? Ili će slika biti samo mala grafika pored info okvira?
Ako će slika zauzeti cijeli zaslon, a želite da izgleda sjajno na gotovo svim zaslonima, mogli biste je povećati do širine od 1920 piksela.
Međutim, maksimalna širina od 1280 piksela dobra je smjernica za gotovo svaku upotrebu, čak i za glavnu sliku.
Kratak i sladak sažetak formata datoteka:
Izvorne JPG slike s vašeg telefona/fotoaparata su prekrasne - ali izvorni format datoteke je prevelik (obično mb ne kb) da bi se brzo učitao na web stranicama.
PNG formati datoteka podržavaju prozirne pozadine. JPG-ovi ne. Oboje su još uvijek preveliki.
Za web stranice koristite:
O ovome još nema riječi od gospodara WordPressa. Uredit ćemo ovu objavu čim objave. Ako su već najavili podršku za .avif slike i čuli ste za to, ostavite komentar!
Koji je najbolji format datoteke za slike web stranice?
Svaki od njih ima svoje prednosti i nedostatke:
Naša interna politika za sada: koristite MOZjpeg kada je to moguće kako biste omogućili korištenje slika u širem rasponu sustava i koristite .webp kada su potrebne prozirne pozadine.
