Multimedijalni elementi, poput slika, infografika i video zapisa, igraju ključnu ulogu u razvoju. Međutim, dimenzije slika imaju direktan uticaj na sveukupne performanse aplikacije i njenu upotrebljivost.
HTML (Hypertext Markup Language) je temeljni jezik koji se koristi za struktuiranje i dizajniranje veb stranica. Kao programer, imate mogućnost da u HTML dokumente uključite slike proizvoda, logotipe i druge grafičke elemente kako biste poboljšali vizuelni doživljaj i privlačnost korisnika.
Za optimalno funkcionisanje aplikacije, neophodno je prilagoditi i optimizovati veličinu slika. U ovom tekstu, objasniću zašto je važno menjati dimenzije slika, razmotriti različite metode za to u HTML-u i pružiti najbolje prakse.
Zašto je bitno menjati veličinu slika u HTML-u?
Promena veličine slika podrazumeva njihovo uvećavanje ili smanjivanje. Slike se obično čuvaju u različitim formatima, i mogu se dobiti od fotografa, sa događaja, od dizajnera, ili preuzeti sa interneta.
Možda ćete doći u iskušenje da koristite slike u originalnom formatu. Međutim, u većini slučajeva to nije preporučljivo. Evo nekih od razloga zašto je potrebno menjati veličinu slika u HTML dokumentima:
- Brzina učitavanja stranice: Iako slike poboljšavaju korisničko iskustvo, velike slike mogu negativno uticati na brzinu učitavanja. Optimizacijom slika, osiguravate da se veb stranice brzo učitavaju.
- Prilagodljivost veb sajta: Tipičan veb sajt ili aplikacija privlači posetioce koji koriste različite uređaje. Prilagođavanjem veličine slika, obezbeđujete da je veb stranica kompatibilna sa mobilnim uređajima, desktop računarima i tabletima.
- Iskorišćenje propusnog opsega: Većina hosting provajdera ograničava propusni opseg u svojim paketima. Optimizacijom slika, oslobađate prostor za druge sadržaje na vašem veb sajtu.
- SEO optimizacija: Brzina učitavanja stranice je jedan od faktora koji pretraživači uzimaju u obzir pri rangiranju. Prilagođavanje veličine slika poboljšava brzinu učitavanja, što pozitivno utiče na SEO.
- Maksimizacija prostora za skladištenje: Veličina skladišnog prostora je važan faktor pri izboru veb hostinga. Otpremanje velikih slika i slika visoke rezolucije može zauzeti značajan prostor na serverima.
- Poboljšanje korisničkog iskustva: Korisnici veb sajta ne žele da čekaju dugo da se slike učitaju. Optimizacijom slika, one se učitavaju istovremeno sa ostatkom sadržaja.
Sledi pregled različitih metoda za promenu veličine slika u HTML-u:
Korišćenje HTML atributa
Možemo napraviti jednostavan primer kako bismo demonstrirali promenu veličine slika. Koristiću slike sa Pixabay za veb aplikaciju. Konkretno, koristiću ovu sliku. Možete je preuzeti i dodati u svoj projekat radi lakše demonstracije.
Ovo je osnovni HTML kod:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Opis vaše veb stranice">
<meta name="keywords" content="ključne, reči, ovde">
<meta name="author" content="Vaše Ime">
<title>Promena veličine HTML slika</title>
</head>
<body>
<h2>Moja Mačka</h2>
<img src="https://wilku.top/how-to-resize-image-in-html-and-scale-up-your-web-design/images/cat-2536662_1280.jpg" >
</body>
</html>
Kada renderujem originalnu sliku bez promene veličine, ona je prevelika i ne može se jasno videti.
Slici mačke možemo dodeliti visinu od 175 i širinu od 300 piksela.
Izmeniću kod u <img> tagu na sledeći način:
<img src="https://wilku.top/how-to-resize-image-in-html-and-scale-up-your-web-design/images/cat-2536662_1280.jpg" width="300" height="175">
Sada je slika vidljiva i optimizovana.
Korišćenje CSS stilova
Možemo kreirati zaseban stilski list, umesto da koristimo inline stil koji smo primenili u prethodnom koraku. Kreiraćemo stilski list i nazvati ga styles.css. Zatim ćemo postaviti <link> tag u <head> sekciju HTML dokumenta kako bismo povezali stilski list sa HTML dokumentom.
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Opis vaše veb stranice">
<meta name="keywords" content="ključne, reči, ovde">
<meta name="author" content="Vaše Ime">
<title>Promena veličine HTML slika</title>
<link rel="stylesheet" href="https://wilku.top/how-to-resize-image-in-html-and-scale-up-your-web-design/styles.css">
</head>
<body>
<h2>Moja Mačka</h2>
<img src="https://wilku.top/how-to-resize-image-in-html-and-scale-up-your-web-design/images/cat-2536662_1280.jpg" >
</body>
</html>
Možemo dodati stil slici preko styles.css lista. Ovo je odgovarajući kod:
img {
width:300px;
height:200px
}
Renderovana slika će izgledati ovako:
Koristili smo selektor <img> da identifikujemo sliku u HTML dokumentu. Slici smo dodelili širinu od 300 piksela i visinu od 200 piksela.
Korišćenje procenta
U prethodnom primeru koristili smo piksele (px) da promenimo veličinu slike. Takođe, možemo koristiti procente za optimizaciju slike. Na primer, možemo postaviti širinu i visinu slike na 65%.
Koristićemo prethodni HTML kod. Izbrišite sadržaj datoteke styles.css i dodajte sledeći kod:
img {
width:65%;
height:65%
}
Kada renderujete sliku, rezultat je sledeći:
Prilagođavanje veličine slika za responsivni dizajn
Dobra slika treba da bude prikazana ispravno na različitim veličinama ekrana. Možete optimizovati sliku tako da se prilagođava različitim veličinama ekrana. Koristeći isti HTML kod, možemo dodati sledeće u styles.css datoteku:
img {
max-width: 100%;
height: auto;
}
Svojstvo max-width: 100% osigurava da slika nikada ne pređe širinu svog kontejnera. Slika će se proporcionalno smanjivati na manjim ekranima.
Svojstvo height: auto osigurava da slika zadrži odnos širine i visine dok se povećava i smanjuje.
Održavanje odnosa širine i visine
U veb dizajnu, odnos širine i visine je proporcionalni odnos između visine i širine. Održavanje ovog odnosa prilikom promene veličine slika obezbeđuje vizuelnu doslednost; slike nisu izobličene i prilagođavaju se različitim veličinama ekrana.
Koristićemo isti HTML kod da demonstriramo kako održavati odnos širine i visine prilikom promene veličine slika.
Dodajte sledeći kod u datoteku styles.css:
img {
width: 300px;
height: auto;
}
Koristio sam selektor ‘img’ da lociram sliku u HTML dokumentu. Širinu smo postavili na 300px. Svojstvo height: auto omogućava pretraživačima da automatski izračunaju visinu slike, zadržavajući odnos širine i visine. To osigurava da se slike ne izdužuju ili sužavaju pri prikazivanju na različitim veličinama ekrana.
Promena veličine pozadinskih slika
Slike se mogu dodati elementima koji služe kao pozadinske slike. Prilagođavanje veličine pozadinske slike osigurava da se slika uklapa u svoj kontejner. Ovo je primer HTML dokumenta sa paragrafom i tekstom:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Opis vaše veb stranice">
<meta name="keywords" content="ključne, reči, ovde">
<meta name="author" content="Vaše Ime">
<title>Promena veličine HTML slika</title>
<link rel="stylesheet" href="https://wilku.top/how-to-resize-image-in-html-and-scale-up-your-web-design/styles.css">
</head>
<body>
<div class="container">
<div class="text">
<p>Ovo je slika naše mačke</p>
</div>
</div>
</body>
</html>
Pozadinsku sliku možemo dodati preko styles.css lista:
.container {
position: relative;
text-align: center;
color: #ffffff;
padding: 100px;
background-image: url("https://wilku.top/how-to-resize-image-in-html-and-scale-up-your-web-design/images/cat-2536662_1280.jpg");
background-position: center;
width: 75%;
}
.text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 24px;
color: orangered;
}
Pozadinska slika se može dodati isključivo putem CSS-a. Kreirao sam kontejner sa centriranim tekstom i pozadinskom slikom mačke.
Možete koristiti različite alate za promenu veličine i optimizaciju slika. Neki od tih alata pružaju samo funkciju promene veličine. Međutim, drugi vam omogućavaju da skladištite slike i koristite ih u HTML datoteci putem URL adrese.
Cloudinary je dobar primer alata koji menja veličinu slika na serveru pre isporuke korisnicima. Ovaj alat je dizajniran za automatsko prilagođavanje veličine slika bez uticaja na performanse veb sajta.
Najbolje prakse za promenu veličine slika u HTML-u
Iako smo razmotrili nekoliko načina za promenu veličine slika u HTML-u, važno je pridržavati se sledećih najboljih praksi za optimalne rezultate:
- Izbegavajte inline stil: Možda ćete biti u iskušenju da brzo stilizujete slike direktno iz HTML dokumenata. Međutim, ovaj pristup može negativno uticati na brzinu učitavanja stranice. Koristite zaseban CSS stilski list kako biste olakšali čitljivost i održavanje koda.
- Koristite atribute ‘width’ i ‘height’: Obavezno navedite širinu i visinu svojih slika. Na taj način, pretraživač automatski rezerviše prostor za sliku dok se ostatak sadržaja učitava.
- Koristite ispravne formate slika: Slike dolaze u različitim formatima, kao što su JPEG, PNG i SVG. Na primer, PNG je idealan za transparentne slike, dok je SVG dobar izbor za logotipe.
- Obezbedite responsivnost slika: Možda nećete znati koje uređaje koriste posetioci veb stranice. Uvek optimizujte slike za različite veličine ekrana i osigurajte konzistentan prikaz.
- Optimizujte veličine datoteka: Sirove slike visokog kvaliteta mogu zauzeti mnogo prostora. Takve slike mogu opteretiti server i usporiti učitavanje stranice. Možete smanjiti veličinu tih slika pomoću različitih alata bez smanjenja njihovog kvaliteta.
Zaključak
Prilagođavanje veličine slika u HTML-u poboljšava korisničko iskustvo, čini veb stranicu responzivnom i štedi prostor na serveru. Predstavili smo nekoliko načina za promenu veličine slika u HTML-u.
Iako su svi efikasni, preferiram upotrebu CSS svojstava u zasebnoj CSS datoteci za promenu veličine slika. Međutim, možete koristiti inline CSS ako je aplikacija mala i ima mali broj slika.
Preporučujem da pročitate i naš članak o CSS resursima za bolje razumevanje ovog stilskog jezika.