Aká je maximálna veľkosť obrázka, aby sa zobrazil správne v mobiloch aj vtedy, ak nie je responzívny?
Ak obrázok nie je responzívny (teda nemá v kóde nastavené max-width: 100%), kľúčovým číslom je šírka displeja najbežnejších smartfónov.
Zlaté pravidlo pre neresponzívne obrázky
Aby sa obrázok „nerozbil“ na väčšine moderných telefónov a nespôsobil horizontálne skrolovanie (posúvanie do strán), odporúčaná šírka je:
320 px až 350 px
Tu je podrobnejší rozpis, prečo je to tak:
320 px: Bezpečná zóna pre staršie alebo menšie iPhony (napr. SE prvej generácie).
360 px: Štandard pre väčšinu súčasných Androidov a moderných iPhonov v rámci ich logického rozlíšenia.
414 px: Horná hranica pre „Max“ a „Plus“ modely smartfónov.
Čo sa stane, ak to prekročíte?
Ak vložíte obrázok široký napríklad 600 px bez responzívneho nastavenia:
Na mobile uvidíte len ľavú polovicu obrázka.
Používateľ bude musieť prstom posúvať celú webstránku doprava, čo pôsobí amatérsky a kazí to používateľský zážitok (UX).
Rýchle porovnanie
| Šírka obrázka | Výsledok na mobile | Odporúčanie |
| do 320 px | Zobrazí sa celý na 99 % telefónov | Najbezpečnejšia voľba |
| 350 px | Zobrazí sa celý na väčšine moderných mobilov | Dobrý kompromis |
| nad 400 px | Na menších displejoch vytečie z obrazovky | Rizikové bez responzivity |
Malý tip na záver
Aj keď nemôžete zmeniť celý systém na responzívny, niekedy stačí do HTML kódu obrázka pridať tento drobný kúsok: <img src="obrazok.jpg" style="max-width: 100%; height: auto;">. To prinúti obrázok, aby sa sám zmenšil, ak je displej užší než on sám.