Dobar sajt pored modernog i atraktivnog dizajna odlikuje i brzina učitavanja. Brzina sajta je u direktnoj korespodenciji sa SEO optimizacijom, tojest sa pozicijom u pretraživaču koju će Google dodeliti vašem sajtu. Kako? Jednostavno, spore sajtove korisnici brzo napuštaju i šalju google-u signal da sajt nije dobar. Jedan od glavnih faktora koji utiču na brzinu sajta, pored dobrog hostinga, optimizovanog koda, jesu slike na našem sajtu.
U ovom tekstu otkrićemo vam alate i savete za kompresovanje slika, kao i najbolje prakse za optimizaciju slika za web sajtove.
Sadržaj
Zašto je važno kompresovanje slika za web sajt?
Dobro optimizovane slike koje ubacujete na vaš web sajt su ključne za brzinu sajta. Gore smo već napomenuli da je brzina sajta presudna, posebno u današnjem vremenu kada se sve radi brzo i sve želimo instant. Jednostavno, korisnici ne žele da čekaju da im se prikaže sadržaj vašeg sajta, i napustiće ga ukoliko se sporo učitava, a vi ćete izgubiti potencijalne klijente ili kupce.
Naravno da slike nisu jedini faktor koji utiče na brzinu sajta, ali možemo da kažemo da su sigurno u prva 3, i zato ih ne treba zanemariti. Zaista vam nije potrebna slika od 1MB ili više na sajtu, i zato ih bolje optimizujte pre nego što ih ubacite, jer ćete kasnije imati više posla.
Koje su najbolje prakse kada se slike ubacuju na sajt?
Pre nego što pređemo na konkretne savete, definisaćemo, prostim rečnikom, koje sve to osobine jedna slika ima:
1. Veličina slike
Pre svega se odnosi na dimenzije slike u pikselima. Ako slike nalazite na stock sajtovima kao što su Freepik, Unsplash i slični, verovatno ne obraćate pažnju i skidate najveću verziju, koja je često 6000x4000px ili sličnih dimenzija. Ovako velike slike sa sobom vuku i mnogo megabajta, i zaista nisu potrebne vašem sajtu.
Preporuka: Smanjite dimenzije slika, na one koje su vam zaista potrebne. Na primer slika koje se nalazi pored nekog teksta ne mora biti veća od 500 do 700px širine. Ne budite lenji, napravite posebne verzija slika za mobilnu verziju vašeg sajta. Slike za mobilni prikaz ne moraju biti šire od 400px.
Ako slike koristite kao pozadinske(background) za sekcije ili želite da budu full širine na desktop verziji sajta, standardna dimenzija jeste 1920x1080px za slike na primer u hero sekciji koja uzima 100% visine ekrana. Za sekcije manje visine, prilagodite visinu slike na željenu (npr. 1920x600px).
2. Težina slike
Po terminom ”težina slika” podrazumevamo veličinu fajla u megabajtima ili još bolje kilobajtima. Preporuka je da slike koje uploadujete na vaš sajt ne budu veće od 50kb. Kako kompresovati sliku ovoliko, ako je sa stock sajta skinete i ona ima 4MB?
Preporuka: Koristite novije file ekstenzije. Umesto standardnih JPEG, JPG ili PNG fajlova, konvertujte ih u WebP ili AVIF file. Kombinujući konvertovanje slika u ove novije ekstenzije i smanjujući dimenzije slika dobićete izuzetno male veličine fajlova, a kvalitet neće trpeti.
Napomena: Slike sa kojih se skidaju pozadine, na primer neka osoba ili predmet, koji su izdvojeni sa neke slike, treba ostati PNG file.
Alati za kompresovanje slika za web
Na ovoj listi ćete pronaći alate koji su se nama najbolje pokazali u praksi, besplatne, kao i one koji se plaćaju.
1. CloudConvert
Cloudconvert je veoma popularan sajt za konvertovaranje raznih fajlova. Podržava praktično sve moguće konverzije koje postoje, uključujući dokumente, slike i video formate. Ovaj alat je besplatan za 10 konverzija dnevno, posle toga se dokupljuju krediti, a cene možete pogledati na njihovoj stranici.
Prednosti: Podržava konverzije između praktično svih fajlova koji postoje. Takođe je veoma korisno što prilikom konvertovanja možete odmah i dimenzije smanjiti, i praktično odraditi dva posla istovremeno.
Mane: Osim malog broja konverzija u besplatnoj verziji, praktično da ih nema.
2. TinyPNG
TinyPNG je možda i najpopularniji alat za kompresovanje slika. Ovaj alat se razlikuje od drugih zato što on skuži baš za kompresiju slika. Dakle, uploadujete neki format, na primer JPG sliku, i on će je kompresovati maksimalno, bez gubitka kvaliteta. Od skoro, TinyPNG nudi i konverziju u moderne ekstenzije (WebP i AVIF), ali uz ograničenje na samo 3 slike dnevno. Inače, ovaj alat je besplatan za 20 kompresija po sesiji.
Prednosti: Verovatno najbolji alat što se tiče kvaliteta kompresovane slike.
Mane: Nema funkcionalnosti za menjanje dimenzija slike. Veoma skup za širu upotrebu.
3. WebP Converter
WebP Converter je potpuno besplatan alat koji vam nudi konvertovanje slika u WebP ekstenziju. Samim tim je veoma koristan i zahvalan.
Prednosti: Besplatan je potpuno za neograničenu upotrebu.
Mane: Nudi konverziju samo u WebP format i nema opcija za dimenzioniranje slika.
4. ShortPixel
ShortPixel je online alat za kompresovanje i konvertovanje slika, ali takođe i WordPress plugin. Ovaj alat vam nudi kompresovanje slika, konverizju u WebP ili AVIF format, pa čak i kropovanje dimenzija slika, kao i skidanje pozadine. Besplatan je, ali je ograničenje da slike ne koje uploadujete ne mogu biti veće od 10mb.
WordPress plugin je vrlo zahvalan ukoliko održvate ili pravite veliki broj sajtova, i praktično možete automatizovati proces optimizacije slika kada ih ubacujete na sajt, ne razmišljajući o pripremi pre dodavanja na sajt. Takođe i već postojeće sajtove, možete optimizovati u par klikova.
Prednosti: Nudi možda i najviše opcija, i daje izuzetne rezultate.
Mane: Ako izuzmemo cenu plugina, koja i nije skupa ako se profesionalno bavite izradom sajtova, praktično da ih i nema.
5. Bonus: Code Snippet za automatsku konverziju slika u WebP prilikom dodavanja na WordPress sajt
Evo jednog, pa možemo reći i cheat načina, za konverziju slika, a samim tim i kompresiju prilikom dodavanja na sajt. Sa ovim kodom možete automatski konvertovati slike u WebP format prilikom dodavanja na sajt, samim tim i smanjiti sebi posao sređivanja slika.
Kako? Dodajte code snippet koji je ispod ovog teksta u functions.php file. Ovo možete uraditi sa Code Snippets pluginom ili ako ste veštiji i sigurni, možete sami editovati functions.php. Napomena je, da ovaj kod neće optimizovati postojeće slike na sajtu, ali hoće svaku novu koju ubacite. Zato je najbolje da ovaj kod dodate pre nego što počnete da radite na novom sajtu.
add_filter('wp_handle_upload', 'wpturbo_handle_upload_convert_to_webp');
function wpturbo_handle_upload_convert_to_webp($upload) {
if ($upload['type'] == 'image/jpeg' || $upload['type'] == 'image/png' || $upload['type'] == 'image/gif') {
$file_path = $upload['file'];
// Check if ImageMagick or GD is available
if (extension_loaded('imagick') || extension_loaded('gd')) {
$image_editor = wp_get_image_editor($file_path);
if (!is_wp_error($image_editor)) {
$file_info = pathinfo($file_path);
$dirname = $file_info['dirname'];
$filename = $file_info['filename'];
// Create a unique file path for the WebP image
$def_filename = wp_unique_filename($dirname, $filename . '.webp');
$new_file_path = $dirname . '/' . $def_filename;
// Attempt to save the image in WebP format
$saved_image = $image_editor->save($new_file_path, 'image/webp');
if (!is_wp_error($saved_image) && file_exists($saved_image['path'])) {
// Success: replace the uploaded image with the WebP image
$upload['file'] = $saved_image['path'];
$upload['url'] = str_replace(basename($upload['url']), basename($saved_image['path']), $upload['url']);
$upload['type'] = 'image/webp';
// Optionally remove the original image
@unlink($file_path);
}
}
}
}
return $upload;
}Zaključak – Kompresovanje slika
Kompresovanje slika, kao i konverzija su veoma bitni segmenti prilikom izrade web sajtova. Nadamo se da smo sa ovim člankom pomogli da lakše odradite ovaj bitan korak. Često zanemarujemo optimizaciju slika za web, ali na kraju uvek dođe do trenutka kada se na tome mora raditi. Svi alati koje smo pomenuli jesu oni koje i mi koristimo, i preporuka je iz prve ruke.
Zašto nkl Design Solutions?
Mi smo digitalna agencija koja se bavi izradom sajtova u wordpressu preko 5 godina i specijalizovali smo se za ovu oblast. Za nas u wordpressu nema nepoznanica. Kontaktirajte nas i popunite upitnik za izradu web sajta, i personalizovana ponuda će ubrzo biti u vašem mail sandučetu.
SEO optimizacija je druga oblast u kojoj imamo iskustva, i pomogli smo mnogim malim firmama da povećaju svoje prisustvo na internetu i osete benefite od organskih poseta. Započnite digitalnu transformaciju svog brenda već danas.
