Upute u nastavku provode korisnike kroz to kako zadržati izvornu veličinu datoteke slike (u KB ili MB) dok mijenjaju veličinu prikaza slike pomoću HTML-a.
Iako je to moguće, preporučujemo da upotrijebite uređivač slika za smanjenje veličine slike kako biste smanjili veličinu datoteke i vrijeme preuzimanja.
Čak i ako se veličina slike promijeni dolje navedenim metodama, veća slika se i dalje mora učitati, iako u pregledniku izgleda manja.
Promijenite veličinu pomoću HTML-a
Kao što je prikazano u donjem primjeru, navedite širinu i visinu u vašoj IMG SRC HTML oznaci.
<img src="https://www.example.com/image.jpg" width="500" height="200" alt="MLLapan">Promijenite veličinu pomoću CSS -a
CSS se također može koristiti za promjenu veličine slike, kao što je prikazano u donjim uzorcima.
img.resize {
width:500px;
height:200px;
}img.resize {
max-width:70%;
max-height:30%;
}Tačna veličina u pikselima navedena je za širinu i visinu u prvom primjeru.
Ova opcija ograničava broj slika koje koriste taj CSS.
Budući da pruža širinu i visinu, ako slika nema sličan omjer, ova tehnika može rezultirati deformiranim vizualom.
Umjesto navođenja veličine u pikselima, drugi primjer daje % originalne veličine slike, uključujući širinu i visinu.
Ova vam opcija omogućuje korištenje većeg broja slika.
Budući da preglednik ima proporciju širine i visine slike, može promijeniti veličinu gotovo bilo koje slike, zadržavajući omjer slike.
Izveli biste sljedeće za dodavanje CSS -a u IMG SRC HTML element.
<img class="resize" src="https://www.example.com/image.jpg" alt="MLLapan">Samo trebate dati naziv klase u oznaci da biste aktivirali CSS kod za tu sliku, upotrebom CSS rezultata dobijate kraće IMG SRC oznake.