Testirao sam promene inicijalne veličine ove sličice (slike koju uploadujemo) i uticaj na oštrinu. I video jedan problem. Problem je i u zumiranju ekrana na kome se gleda, u odnosu na inicijalnu rezoluciju ekrana.
Probao sam ovde sa slikama kojima sam podesio da imaju ceo deljiv broj kada se podeli inicijalna veličina slike sa skaliranom.
Probao sam sa inicijalnom 500x500px, sa 360x360px s tim da promenimo dimenziju sličice na mobilnom sa 35x35px (kako je sada) na 36x36px, i veličinu 720x720px da vidim da li bi skalirana slika na 45x45px bila oštrija, jer je 720/45 lepo deljivo.
Zaključak, ovo sve ima smisla za fotografije, ali za sitan tekst nema. Mora se koristiti SVG. A SVG je uz to najmanji fajl - samo 2,2kB. A oštar je uvek i svugde.
Pogledajte ovaj fajl na jednom monitoru pa na drugom, pa na telefonu. Na monitorima će biti različito šta je oštro šta nije. A na telefonu će što veća slika, to oštrije. Međutim ovde će sve slike biti oštre i praktično nema razlike među njima. Telefon jednostavno ima ogromnu rezoluciju ekrana.
Da vidimo da koristimo SVG za sličice. Mogu odlično da se optimizuju.
Skaliranje na 45x45px
OVAKO JE SADA: 500x500px 21,4kB
skalirano na 45x45px, 500/45=11,111111111
skalirano na 45x45px, 500/45=11,111111111
360x360px, 15,2kB:
360x360 skalirano na 45x45px - 360/45=8
360x360 skalirano na 45x45px - 360/45=8
720x720px, 32,5kB:
720x720 skalirano na 45x45px - 720x45=16
720x720 skalirano na 45x45px - 720x45=16
SVG 2,2kB
Skaliranje na 35x35px, odnosno 36x36px
OVAKO JE SADA: 500x500px 21,4kB:
500x500px skalirano na 35x35px - 500/35=14,28571
500x500px skalirano na 35x35px - 500/35=14,28571
360x360px, 15,2kB:360x360px skalirano na 36x36px - 360/45=10
360x360px skalirano na 36x36px - 360/45=10
720x720px, 32,5kB: 720x720px skalirano na 36x36px - 720/60=20
720x720px skalirano na 36x36px - 720/60=20
SVG 2,2kB: SVG
SVG
Skaliranje na 60x60px
OVAKO JE SADA: 500x500px 21,4kB:500x500px skalirano na 60x60px - 500/60=8,33333333
500x500px skalirano na 60x60px - 500/60=8,33333333
360x360px, 15,2kB:360x360px skalirano na 60x60px - 360/6=6
360x360px skalirano na 60x60px - 360/6=6
720x720px, 32,5kB: 720x720px skalirano na 60x60px - 720/60=12
720x720px skalirano na 60x60px - 720/60=12
SVG 2,2kB: SVG
SVG
A ovako bi bilo kada bi slike bile 1:1, tj da uopšte nema skaliranja, nego kako treba da se prikažu tako i da se inicijalno naprave. Ovo bi bilo idealno kada se monitori ne bi zumirali.
Ali, na laptopovima svi su praktično zumirani na 125%. Ovo će biti oštro na ekranu na kome niste zumirali sliku, a tamo gde je zumirano nije oštro.
Drugo, na mobilnim telefonima ovo je užasno i neupotrebljivo.
1:1
36x36
36x36
1:1
45x45
45x45
1:1
60x60
60x60
ZAKLJUČAK: SVG bi rešio sve muke sa ikonicama. I ovoj i svim ostalim.