Osim teksta, web stranice prikazuju i slike. Za umetanje slike koristimo html element <img />. Bitno je naglasiti kako za prikazivanje slike na web stranici, moramo svojstvu src dodijeliti vrijednost. Vrijednost svojstva src sadrži putanju i naziv slike koja će biti prikazana na web stranici. Također moramo dodijeliti vrijednost svojstvu alt za slijepe i slabovidne osobe.
svojstvo altTekst koji navedemo kao vrijednost svojstva alt, računalo će pročitati slijepim i slabovidnim osobama, budući da one ne mogu vidjeti sliku. Stavimo se u situaciju tih osoba i dobro razmotrimo koju vrijednost ćemo dodijeliti svojstvu alt.
U sljedećim primjerima koristit ćemo sliku bartol.png. Možete je preuzeti na donjoj poveznici. Slika je veličine 1250px puta 540px.
Mjesto pohrane slike u odnosu na html dokument može biti:
U istoj mapi kao i html dokument.
Relativno u odnosu na html dokument.
Relativno u odnosu na korijenski (engl. root) direktorij.
Bilo gdje na Internetu.
Slijedeća web stranica prikazuje sliku bartol.png. Slika treba biti pohranjena u istoj mapi kao i html datoteka.
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Slika u istoj mapi</title>
</head>
<body>
<h1>Slika bartol.png je u istoj mapi</h1>
<img src="bartol.png" alt="Bartol plus" />
</body>
</html>Kada web sjedište ima mnoštvo slika, dobra je praksa, slike razmjestiti po mapama. Načinite najmanje jednu mapu i u nju pohranite slike. Mapu sa slikama možete smjestiti i u korijenski (engl. root) direktorij.
Sljedeći primjer prikazuje sliku bartol.png koja se nalazi u mapi slike.
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Slika u mapi slike</title>
</head>
<body>
<h1>Slika bartol.png je u mapi slike</h1>
<img src="slike/bartol.png" alt="Bartol plus" />
</body>
</html>Ako gornji kôd ne prikazuje sliku, to znači da niste načinili mapu slike u mapi u kojoj je pohranjen vaš html dokument ili da se u njoj ne nalazi slika bartol.png. Treća je mogućnost da unutar imena slike niste stavili nastavak (vrstu slike: .jpg, .png...)
Putanja može biti relativna i u odnosu na korijensku (engl. root) mapu. Više o tome možete naći u članku:
Koristimo ga kada je slika smještena na Internetu i dohvaćamo je pomoću URL (engl. Uniform Resource Location) adrese:
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Slika u na Webu</title>
</head>
<body>
<h1>Slika bartol.png je u mapi smještena na webu</h1>
<img src="https://bartol.plus/bartol.png" alt="Bartol plus" />
</body>
</html>U starijim html inačicama, za promjenu širine i visine prikaza slike u web pregledniku, koristila su se html svojstva width i height. U html5 standardu umjesto ovih svojstava treba koristiti css svojstva width i height. Tako sada imamo:
<img src="bartol.png" style="width:1250px; height:540px;" alt="Bartol plus" / >Vrijednost css svojstava width i height treba biti u pikselima ili postotcima.
dodjeljivanje širine i visineUvijek dodijelite vrijednosti širine i visine slike. Ako su visina i širina određeni, prostor na web stranici potreban za sliku, bit će određen za vrijeme njezinog učitavanja. Bez tih vrijednosti, web preglednik ne zna veličinu slike i ne može zauzeti odgovarajući prostor na zaslonu za nju. Tada će se izgled web stranice mijenjati tijekom učitavanja web stranice (dok se ne učitaju sve slike).
Ne postoji naredba u web pregledniku koja mijenja stvarnu veličinu slike. Css svojstva height i width mijenjaju samo veličinu prikaza slike na zaslonu.
Recimo da imate veliku sliku, a želite je prikazati kao malu ikonu. Web preglednik će morati učitati veliku sliku, neovisno o tome što će biti prikazana mala ikona. Tako se usporava učitavanje web stranice.
proporcionalno smanjenjeKada želite proporcionalno smanjiti veličinu prikaza slike, promijenite širinu ILI visinu slike, a svojstvo koje niste zadali će se proporcionalno smanjiti.
Uzmimo da je slika veličine 1250px s 540px. Želimo li je smanjiti na 50% stvarne veličine, vrijednost možemo umetnuti kao postotak ili odgovarajuću vrijednost u pikselima:
<img src="bartol.png" style="width:50%;" alt="Bartol plus" / ><img src="bartol.png" style="width:625px;" alt="Bartol plus" / >Primjer korištenja postotka za promjenu veličine slike:
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Slika je smanjena</title>
</head>
<body>
<h1>Slika bartol.png je smanjena</h1>
<img src="bartol.png" style="width:50%;" alt="Bartol plus" />
</body>
</html>CDN pohrana slika i videa.
AI povećanje slika.
Pretvorba formata slika: webp...
25Gb podataka.
Zašto ne sada?
