Upute za obradu i pripremu slika za web stranice

Odabir formata slike:

• JPEG/JPG: Idealno za fotografije i slike sa mnogo boja i detalja. Omogućuje dobar omjer kvalitete i veličine datoteke.
• PNG: Idealno za slike koje zahtijevaju transparentnost (poput logotipa ili ikona). Slike u PNG formatu mogu biti veće u veličini od JPEG-a.
• WebP: Nova slika kompresijskog formata koju podržava većina modernih preglednika. Nudi visoku kvalitetu uz manju veličinu datoteke od JPEG-a i PNG-a. Preporuča se kao najbolja opcija za web.
• SVG: Idealno za vektorske slike poput ikona ili logotipa. Zbog toga što se temelji na matematičkim izrazima, ostaje oštra bez obzira na veličinu.

Optimizacija slika:

• Kompresija: Prije uploadanja na web, sliku je potrebno komprimirati kako bi se smanjila njena veličina, što doprinosi bržem učitavanju stranice. Za ovo možete koristiti alate poput:
  • TinyPNG ili TinyJPG (besplatni online alati za kompresiju PNG i JPEG slika).
  • ImageOptim (za Mac).
  • Kraken.io (za naprednu kompresiju).
  • Squoosh.app (od Google-a, vrlo jednostavan za korištenje).
• Kvaliteta vs. Veličina: Odlučite se za najbolji omjer između kvalitete i veličine. Idealna kvaliteta ovisi o vrsti slike i njenoj upotrebi, ali ciljate na veličinu od 100 KB do 500 KB po slici za većinu slika na webu.

Prilagodba veličine slike:

• Prilagodba dimenzija: Prije nego što učitate sliku na web, smanjite je na odgovarajuće dimenzije. Nemojte učitavati slike u punoj veličini (npr., slike visoke rezolucije od 4000px), jer to nepotrebno povećava vrijeme učitavanja stranice. Koristite slike veličine koja je optimalna za vaše potrebe:
  • Za pozadinske slike: Obično su dimenzije 1920×1080 px ili 2560×1440 px.
  • Za slike proizvoda ili galerije: Idealno između 800×600 px i 1200×900 px, ovisno o dizajnu stranice.
  • Za ikone: Idealne dimenzije su 32×32 px ili 64×64 px, ovisno o uređaju i namjeni.

Napomena: najbolje bi bilo da se kod određenog tipa slika odredi “omjer” tj. aspect-ratio (najčešće se koriste 16:9, 4:3, 3:2 i sl.)

Alt tekst i SEO:

• Alt tekst: Svaka slika na vašoj web stranici treba imati alt tekst koji opisuje sadržaj slike. To poboljšava SEO i pristupačnost za korisnike s invaliditetom (npr., one koji koriste čitače ekrana).
  • Alt tekst treba biti jasan, opisivan i relevantan za sadržaj stranice.
• Naziv datoteke: Također, naziv datoteke slike treba biti smislen i uključivati ključne riječi (npr., logo-webshop.jpg, sjekira-za-drva.jpg i sl.).

Različite veličine za različite ekrane: Koristite više veličina slika za različite rezolucije ekrana. To možete postići korištenjem HTML atributa srcset, koji omogućava učitavanje različitih slika ovisno o širini uređaja korisnika. Na primjer:

<img src="image-small.jpg" 
     srcset="image-medium.jpg 600w, image-large.jpg 1200w"
     sizes="(max-width: 600px) 100vw, 50vw"
     alt="Opis slike">

Zaključak:

Optimizacija slika za web je ključna za poboljšanje brzine učitavanja stranice i SEO performansi. Pravilno odabrani formati, kompresija i prilagodba dimenzija mogu značajno smanjiti vrijeme učitavanja, a time i poboljšati korisničko iskustvo. Redovito pratite novosti u optimizaciji slika jer se alati i preporuke stalno razvijaju.