Aký je maximálny rozmer obrázka na webe, aby sa bezchybne zmestil na mobil aj vtedy, ak obrázok nie je responzívny?
Ak obrázok nie je responzívny (teda nemá nastavenú šírku na 100% a fixne drží svoje pixely), musíš sa orientovať podľa najmenších bežne používaných displejov.
„Zlaté pravidlo“ pre fixnú šírku
Ak chceš mať absolútnu istotu, že sa obrázok zmestí na 99 % dnešných smartfónov bez orezania:
Maximálna bezpečná šírka: 320 pixelov.
Prečo práve 320? Je to šírka starších iPhonov (SE prvej generácie) a základný bod (breakpoint), od ktorého sa odráža väčšina webdizajnérov. Hoci moderné telefóny majú 375px, 390px alebo 412px, pri 320px máš istotu, že „neprestrelíš“ ani na tých najužších zariadeniach.
Porovnanie šírok displejov
Tu je prehľad, ako sa tvoj obrázok bude správať na rôznych zariadeniach:
| Šírka obrázka | iPhone SE (starý) | iPhone 13/14/15 | Bežný Android |
| 320 px | Presne na hranu | Malá rezerva | Viditeľná rezerva |
| 350 px | Vyčnieva (scroll) | Takmer na hranu | Malá rezerva |
| 400 px | Vyčnieva (veľa) | Vyčnieva | Na hranu / Vyčnieva |
Pár tipov pre Eshop-rychle:
Pozor na „padding“ (vnútorné okraje): Aj keď má displej 320px, samotná šablóna e-shopu môže mať nastavené bočné okraje (napr. 15px z každej strany). V tom prípade sa ti aj 320px obrázok môže začať prekrývať. Ak chceš byť ultra-bezpečný, drž sa šírky 290 – 300 px.
Retina displeje: Pri 320px môže obrázok na moderných mobiloch vyzerať trochu neostro (rozmazane), pretože displeje majú vysokú hustotu pixelov. To je daň za to, že obrázok nie je responzívny.
Vertikálne usporiadanie: Ak dáš dva 320px obrázky vedľa seba, na mobile sa logicky nezmestia. Musia byť pod sebou.
Lepšie riešenie (Tip od profíka)
Aj keď tvoj obrázok nie je responzívny „od výroby“, skús sa pozrieť, či ti Eshop-rychle v editore (cez HTML kód < >) nedovolí pridať k obrázku jednoduchý parameter:
style="max-width: 100%; height: auto;"
Ak toto pridáš do kódu obrázka, môžeš nahrať kľudne aj 800px široký vizuál. Na počítači bude veľký a na mobile sa automaticky zmenší presne podľa šírky displeja.
Tento kód povie prehliadaču: "Zobraz obrázok v jeho plnej veľkosti, ale ak je obrazovka menšia ako obrázok, automaticky ho zmenši tak, aby presne vyplnil šírku a nedeformoval sa."