Optimizirajte svoje slike s unaprijed definiranim veličinama slike [WordPress tip]

Optimiziranje slika na web-lokaciji zastrašujući je zadatak. Možete odabrati manje slika, komprimiranih slika, duhova ili svg; popis se nastavlja. Jedno mjesto na kojem se mnoga WordPress web-mjesta spotiču je u definiranju veličina slika, što je ključni aspekt optimiziranja sadržaja koji su teški.

Veličine slika su od vitalnog značaja jer se slike automatski stvaraju prema veličinama koje se dobiju prilikom učitavanja slika. To osigurava da čak i ako imate 3000px široku izvornu sliku, ona se nikada ne koristi ako je slika od 600 piksela dovoljna. U idealnom slučaju široki prostor od 600 piksela trebao bi koristiti široku sliku od 600 piksela, umjesto da smanjuje veću sliku.

U ovom članku proći ću kroz vas koje su veličine slika i kako ih definirati.

Kako WordPress rukuje slikama

Ako ste ikada umetnuli sliku u WordPress članku, trebali ste doći odabirom veličine slike. To vam omogućuje umetanje malih, srednjih i velikih verzija slika. Stvarne veličine za njih može se mijenjati u postavkama programa WordPress.

Kad god prenesete sliku putem WordPressa, ona generira verzije tih slika i pohranjuje ih zasebno. Na primjer, ako prenesete sliku veličine 1200 × 800, WordPress može stvoriti verzije od 100 × 100, 600 × 400 i 900 × 600. Kada umetnete sliku i odaberete "medij", koristit će se stvarna verzija medija, za razliku od smanjene verzije izvornika.

To je izuzetno korisno zbog toga čuva propusnost na poslužitelju i vrijeme obrade na klijentskom računalu. Mislim da ne čudi da je preuzimanje slike 600 × 400 brže od preuzimanja slike od 1200 × 800.

Ako se koristi veća slika koja se treba smanjiti, preglednik mora voditi računa o izračunima da se to dogodi. Iako to neće potrajati satima, može biti vidljivo na web-lokacijama koje su teške za slike.

Prava slika na pravom mjestu

Krajnji cilj bi trebao biti uvijek koristite odgovarajuće veličine slika. Ako vam je potrebna slika od 440 × 380, onda uhvatite sliku s tom veličinom s poslužitelja. Postoje dva glavna mjesta na kojima ćete koristiti učitane slike: istaknute slike i slike u poruci - prvo bih vam preporučio da se usredotočite na istaknute slike.

U svim člancima osim onih s najviše vizualno usmjeravanja nije bitno je li slika u pošti široka 220px ili 245px. Koju god verziju imate na raspolaganju, bit će jednako upotrebljive. Istaknute slike se obično prikazuju uobičajenim veličinama. Za popise članaka možete koristiti 178 × 178 sličica, za zaglavlja članaka možete koristiti široku sliku veličine 1200 × 600.

Osim toga možete zadržati zasebnu sličicu / srednju / veliku veličinu kako je definirano u postavkama omogućuju vam jednostavan pristup određenim dimenzijama prilikom dodavanja slika u postove.

Dakle, što se sve svodi na ovo je: Zar ne bi bilo sjajno kad bismo imali dvije dodatne veličine slika koje bismo mogli koristiti za istaknute slike? Ove veličine slika kreirat će se uz ostatak kad se slika učita. Dobra vijest je da je WordPress pokrio s prilično jednostavna funkcija.

Stvaranje veličina slike

Koristeći add_image_size () funkcija možete odrediti sve veličine slika koje vaše web-lokacije trebaju. Izradimo dva gore navedena primjera. Postavite kôd ispod u datoteku functions.php ili u datoteku dodatka.

 add_image_size ('featured_thumbnail', 178, 178, true); add_image_size ('featured_wide', 1200, 600); 

Kao što možete vidjeti, ova funkcija ima četiri parametra. Prvi parametar vam omogućuje da postavite ime za veličinu. Drugi parametar je maksimalna širina, treća, maksimalna visina. Četvrti parametar postavlja teško izrezivanje. Ako je postavljeno na true, slika će biti izrađena na točnoj veličini koju navedete.

Kada se to doda vašoj temi ili dodatku, WordPress će stvoriti dvije nove verzije svake datoteke koju prenesete.

Pomoću veličina slike

Ove veličine slika mogu se koristiti u brojnim funkcijama koje se bave vraćanjem medija. Najprije ćemo pogledati istaknute slike. the_post_thumbnail () obično se koristi za prikazivanje istaknute slike posta. Sljedeći kôd može se postaviti u WordPress petlju:

 the_post_thumbnail ("featured_thumbnail"); 

Prvi parametar ove funkcije omogućuje vam da odredite veličinu slike koju ćete koristiti. Budući da sam naveo "featured_thumbnail", koristit će se 178 × 178 verzija ove datoteke.

Postoji niz drugih funkcija kao što su wp_get_attachment_image ()i wp_get_attachment_image_src () koji također koriste parametar veličine slike. Kad god koristite takvu funkciju, uvijek morate odrediti odgovarajuću veličinu slike.

Regeneriranje minijatura

Ako već imate web-lokaciju na mjestu, nećete moći retrospektivno optimizirati svoje članke samo određivanjem veličine slike. Veličine slika uzimaju se u obzir samo prilikom učitavanja nove slike pa se ne primjenjuju na slike koje su već u sustavu.

Ne bojte se, Plugin Regenerate Thumbnails će sve učiniti boljim! Ovaj dodatak može obnoviti sličice za sve vaše slike, uzimajući u obzir sve definirane veličine slika. Također može ciljati određenu sliku, što je korisno ako imate samo nekoliko, ili radite neko testiranje.

Kada se minijature obnove, trebali biste vidjeti optimizirane verzije učitane na vašoj web-lokaciji. Ovo možete provjeriti gledajući izvor slike. Ako ste učitali 'example.jpeg' i vidite 'example.jpeg' kao izvor vaše istaknute slike, nešto nije u redu. Ako vidiš “Primjer 178 ×-178.jpeg” onda je sve dobro; prikazana je optimizirana slika.

Odgovarajuće slike

Jedna od poteškoća u održavanju optimizirane stranice je odaziv. Kada pregledam članak na uređaju iPad, uvećana veličina postova će se smanjiti jer će maksimalna širina biti 786 px ili tako.

Najlakše rješenje je korištenje dodatka poput Hammyja. Hammy radi na temelju širine sadržaja vaše teme (za razliku od širine prozora preglednika) i na temelju toga može poslužiti optimizirane slike. To je osobito korisno za mobilne korisnike, gdje moć obrade i propusnost mogu biti problem.

Daljnja optimizacija slike

Kao što sam spomenuo u uvodu, postoji bezbroj načina za optimiziranje slika. Od spritesa do kompresije slike može se koristiti mnogo tehnika za smanjenje vremena učitavanja koje dolaze ruku pod ruku sa slikama. Ashutosh KS napisao je sjajan članak koji prikazuje 9 WordPress dodataka za poboljšanje performansi slike, predlažem da ga pročitate!

Također predlažem da pogledate slike bezvoljne prilagodljive slike koje vam pokazuju kako dodati podršku za element slike, a nešto želite upotrijebiti ako želite napisati vlastiti kôd.