Obrázky pro mobilní zařízení rubrika: Kódování: HTML
Zdravím,
chci se zeptat jak řešíte optimalizaci obrázků pro mobilní zařízení. Řeším zobrazení v HTML tzn. potřebuji upravit tag img. Má to být použito u aktualit, které budou na úvodní stránce (cca 20 aktualit)
- CSS: stahují se zbytečně velké obrázky
- picturefill.js: je dobrý, ale pomalejší
- mobiledetect.php: nemohu použít, protože dle zadání musím úpravu obrázků řešit na straně klienta
- document.write: místo každého obrázku bude
document.write("<img src='img"+ res +"obrazek.jpg'>")
, kde res je proměnná, která se upravuje na onLoad v závislosti na šířce viewportu a tím přepíná složky, ve kterých jsou upravené velikosti obrázků. Toto mi vyšlo jako asi jako nej řešení, ale ten kód pak vypadá strašně.
Co na to říkáte? Díky za odpovědi.
Brzy půjde si vystačit jen s HTML5 a CSS3.
Pokud jde o obrázek umístěný na stránce tak takto pomocí HTML:
<picture> <source media="(min-width: 640px)" src="pes-velky.jpg"> <source media="(min-width: 320px)" src="pes-stredni.jpg"> <source src="pre-maly.jpg"> <img src="pes.jpg" alt="Tohle se zobrazí ve starších prohlížečích"> <p>Tohle se zobrazí v prohlížeči bez obrázků</p> </picture>
(Zatím ve stádiu návrhu http://www.w3.org/TR/html-picture-element/ - v Chrome to už funguje… ostatní jsem nezkoušel, ale přinejhorším vrátí img)
No a pokud jde o grafiku (třeba pozadí nějakého elementu) tak takto pomocí CSS:
#neco { background-image: url(bezna-velikost.jpg); } @media only screen and (max-width: 320px) { #neco { background-image: url(zmensenina-pro-mobily.jpg); } }
(Tohle už je podporované všemi, takže se dá klidně hned používat. Navíc se to dá rozepsat do více souborů se styly, aby se nestahovala css pravidla pro zařízení mimo rozsah nastavený pomocí width, či jiného pravidla)
Komentáře
- pepa.vondrak : Díky za odpověď. Řeším zobrazení obrázku přímo v HTML. Řešení přes picture je elegantní, ale zatím je nepoužitelné. Navíc jsem to zkoušel nasadit, ale nerozjel jsem to ani v Chromu, viz http://josefvondrak.cz/bootstrap/index.html Varianta s document.write je zde http://josefvondrak.cz/wall/indexlowjs.php Vidíte zde nějaký důvod proč to neudělat takto? — 15.10.2013
- ic : Skutečně nefunguje… divné. Nevím tedy kde jsem to testoval… možná k tomu byl nějaký javascript polyfill. To by pak ale vyšlo asi na stejno, jako řešení s document.write… funguje tam, kde je zapnutý javascript. — 20.10.2013
- ic : Tady… picture fill javascriptová knihovna, která by picture element dokázala zprovoznit: https://github.com/scottjehl/picturefill . Používá stejnou strukturu dat a atributů, ale místo picture a source elementů tam má divy, takže možná by to nějakou úpravu chtělo, ale možná je zvládne. — 25.11.2013
Pro zobrazení všech 7 odpovědí se prosím přihlaste:
Nebo se přihlaste jménem a heslem:
Komentáře