Vjerujte nam, ne želite da Google mrzi vašu web stranicu. Srećom, možete smanjiti veličine datoteka svoje slike kako biste poboljšali performanse svoje web stranice. Jedan od problema s njihovim formatiranjem jest taj što izmjene često smanjuju njihovu kvalitetu (što bi zauzvrat moglo natjerati posjetitelje da mrze vašu web stranicu). To nije loše sve dok ih ne učinite ružnima. Postoje neki trikovi i tehnike koji vam omogućavaju da smanjite veličinu datoteke slike i pritom ih držite dovoljno lijepima da ih s ponosom prikažete na svojoj web stranici. Pa pogledajmo kako formatirati slike, a da ih ne učinite ružnima, kao i kako optimizirati slike za web i performanse.

Što znači optimizirati slike?

Velike slike usporavaju vaše web stranice što stvara manje od optimalnog korisničkog iskustva. Optimizacija slika postupak je smanjenja njihove veličine pomoću dodatka ili skripte, što zauzvrat ubrzava vrijeme učitavanja stranice. Kompresija bez gubitaka i gubitka dvije su uobičajene metode.

Prvo, zašto trebate formatirati slike? Koje su prednosti? Brojne su prednosti optimizacije vaših slika radi izvedbe. Prema arhivi HTTP, od studenoga 2018. godine, slike u prosjeku čine 21% ukupne težine web stranice. Dakle, što se tiče optimizacije vaše WordPress stranice, slike su nakon video sadržaja daleko prvo mjesto koje biste trebali započeti!

Važnije je od skripti i fontova. Ironično je da je dobar tijek optimizacije slike jedna od najlakših stvari za implementiranje, no mnogi vlasnici web stranica to previđaju.

Prednosti oblikovanja slika

Evo pogleda na glavne prednosti.

• Poboljšat će brzinu učitavanja vaše stranice (pogledajte našu donju studiju slučaja koliko utječe na vašu brzinu). Ako se vaša stranica predugo učitava, posjetitelji se mogu umoriti od čekanja i prijeći na nešto drugo. Za više informacija o optimizaciji vremena učitavanja stranice pogledajte naš detaljni vodič za optimizaciju brzine stranice.

• U kombinaciji s izvrsnim dodatkom za SEO WordPress poboljšava vaš SEO. Vaša će se web lokacija rangirati više u rezultatima tražilice. Velike datoteke usporavaju vašu web lokaciju, a tražilice mrze spore web stranice. Google će također vjerojatno brže indeksirati i indeksirati vaše slike za Google pretraživanje slika. Zanima vas koliki postotak vašeg prometa dolazi od Google pretraživanja slika? Možete koristiti dodatak ili segment Google Analytics WordPress za provjeru prometa pretraživanja Googleovih slika.

• Stvaranje sigurnosnih kopija bit će brže.

• Manje veličine slikovnih datoteka koriste manju širinu pojasa. Mreže i preglednici to će cijeniti.

• Zahtijeva manje prostora za pohranu na vašem poslužitelju (to ovisi o tome koliko minijatura optimizirate)

Slike u prosjeku čine 21% ukupne težine web stranice. Optimizirajte ih!

Kako optimizirati slike za web i performanse

Primarni cilj formatiranja slika je pronaći ravnotežu između najmanje veličine datoteke i prihvatljive kvalitete. Postoji više načina za izvođenje gotovo svih ovih optimizacija. Jedan od najpopularnijih načina je jednostavno komprimiranje prije slanja na WordPress. To se obično može učiniti pomoću alata poput Adobe Photoshop ili Affinity Photo. Neki od ovih zadataka mogu se izvoditi i pomoću dodataka, o čemu ćemo više u nastavku.

Dvije osnovne stvari koje treba uzeti u obzir su format datoteke i vrsta kompresije koju koristite. Odabirom prave kombinacije formata datoteke i vrste kompresije možete smanjiti veličinu slike čak 5 puta. Morat ćete eksperimentirati sa svakom slikom ili formatom datoteke da biste vidjeli što najbolje funkcionira.

Promijenite WordPress domaćina kako biste optimizirali slike i vidjeli povećanje brzine učitavanja stranice od preko 45%.

Odaberite pravi format datoteke

Prije nego što počnete mijenjati slike, provjerite jeste li odabrali najbolju vrstu datoteke. Postoji nekoliko vrsta datoteka koje možete koristiti:

• PNG – stvara slike višeg kvaliteta, ali ima i veću veličinu datoteke. Stvoren je kao format slike bez gubitaka, iako može biti i gubitak.
• JPEG – koristi optimizaciju bez gubitaka i gubitaka. Možete prilagoditi razinu kvalitete za dobru ravnotežu kvalitete i veličine datoteke.
• GIF – koristi samo 256 boja. Najbolji je izbor za animirane slike. Koristi samo kompresiju bez gubitaka.

Postoji nekoliko drugih, poput JPEG XR i WebP, ali nisu svi preglednici univerzalno podržani. U idealnom slučaju, trebali biste koristiti JPEG ili JPG za slike s puno boja i PNG za jednostavne slike.

Lossy vs Lossless Optimizacija

Također je važno razumjeti da postoje dvije vrste kompresije koje možete koristiti, s gubitkom i bez gubitaka.

Lossy – ovo je filtar koji uklanja neke podatke. To će pogoršati sliku, pa ćete morati pripaziti koliko ćete smanjiti sliku. Veličina datoteke može se znatno smanjiti. Za podešavanje postavki kvalitete slike možete koristiti alate kao što su Adobe Photoshop, Affinity Photo ili drugi uređivači slika. Primjer koji smo gore upotrijebili koristi kompresiju s gubicima.

Lossless – ovo je filtar koji komprimira podatke. To ne smanjuje kvalitetu, ali će slike trebati biti nekomprimirane prije nego što se prikažu. Kompresiju bez gubitaka možete izvršiti na radnoj površini pomoću alata kao što su Photoshop, FileOptimizer ili ImageOptim.

Najbolje je eksperimentirati sa svojim tehnikama kompresije kako biste vidjeli što najbolje odgovara svakoj slici ili formatu. Ako vaši alati imaju mogućnost, obavezno spremite sliku za web. Ovo je opcija u mnogim uređivačima slika i pružit će vam prilagodbe kvalitete kako biste mogli izvesti optimalnu kompresiju. Izgubit ćete dio kvalitete, pa eksperimentirajte kako biste pronašli najbolju ravnotežu bez da slike učinite ružnima.

Alati i programi za optimizaciju slike

Postoji puno alata i programa, premium i besplatnih, koje možete koristiti za optimizaciju slika. Neki vam daju alate za vlastite optimizacije, a drugi rade posao umjesto vas. Osobno smo veliki ljubitelji Affinity Photo jer je jeftin i pruža vam gotovo identične značajke kao i Adobe Photoshop.

Evo nekoliko dodatnih alata i programa koje možete provjeriti:

• Adobe Photoshop
• Gimp
• Paint.NET
• GIFsicle
• JPEGtran
• JPEG Mini
• OptiPNG
• pngquant
• FileOptimizer
• ImageOptim
• Trimage
• ImageResize.org

Promjena veličine slika na skaliranje

U prošlosti je bilo vrlo važno da slike prenosite u mjerilu i ne dopustite CSS-u da im promijeni veličinu. Međutim, ovo više nije toliko važno jer WordPress 4.4 sada podržava responzivne slike (koje CSS ne umanjuje). U osnovi, WordPress automatski stvara nekoliko veličina svake slike prenesene u medijateku. Uključujući dostupne veličine slike u atribut srcset, preglednici sada mogu odabrati preuzimanje najprikladnije veličine i zanemarivanje ostalih.

Dakle, sa sve više i više HiDPI zaslona danas, može biti dobro pronaći sretan medij. Recite 2x ili 3x veličinu stupca ili div stranice vašeg web mjesta, ali svejedno manju od izvorne veličine. Preglednik će prikazati ispravan na temelju razlučivosti uređaja.

Knjižnica medija WordPress stvara sličice na temelju vaših postavki. Međutim, izvornik je i dalje zadržan i netaknut. Ako želite promijeniti veličinu slika i uštedjeti prostor na disku ne spremajući original, možete koristiti besplatni dodatak poput Imsanity.

Nerazumnost vam omogućuje da postavite granicu zdravog razuma tako da će sve prenesene slike biti ograničene na razumnu veličinu koja je i dalje više nego dovoljna za potrebe tipičnog web mjesta.

Nerazumljivost se priključuje WordPressu odmah nakon prijenosa slike, ali prije nego što se dogodi obrada WordPressa. Dakle, WordPress se ponaša potpuno isto na sve načine, osim što će biti kao da je suradnik prije prijenosa svoju sliku prilagodio na razumnu veličinu.

Očistite svoju medijsku knjižnicu

Ako tražite alat za uštedu prostora, a istovremeno i čišćenje medijske biblioteke, Media Cleaner možete koristiti za pronalaženje neiskorištenih medijskih datoteka. Dodatak će skenirati sve vaše medijske datoteke i na nadzornoj ploči Media Cleaner popisati one neiskorištene kako biste ih mogli pregledavati i brisati.

Media Cleaner implementira pametni sustav za otpad: kada se datoteke izbrišu, premještaju se u direktorij za smeće. Na taj ćete način neko vrijeme moći testirati svoju web stranicu i provjeriti je li sve u redu. Ako datoteka ili zapis u mediju nedostaje, možete ga jednostavno vratiti klikom ili jednostavno isprazniti smeće ako vam sve izgleda dobro.

Poanta

Nakon što formatirate slike radi bolje izvedbe i slijedite najbolje primjere iz prakse, vaša će se web lokacija više svidjeti tražilicama, preglednicima i mrežama i brže će se učitavati za vaše čitatelje. Oh, i svakako pogledajte naš vodič o vrućim vezama kako biste spriječili ljude da kradu vaše slike i propusnost.

Jeste li formatirali svoje slike radi boljih performansi? Formatirate li ih ručno, koristite dodatak ili oboje? Postoji li drugi alat ili dodatak koji biste preporučili? Imate li što dodati? Javite nam o svojim tehnikama i najboljim praksama u komentarima ispod!