Obrázky pro mobilní zařízení rubrika: Kódování: HTML

2 pepa.vondrak
položil/-a 14.10.2013
 
upravil/-a 17.10.2013

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)

  1. CSS: stahují se zbytečně velké obrázky
  2. picturefill.js: je dobrý, ale pomalejší
  3. mobiledetect.php: nemohu použít, protože dle zadání musím úpravu obrázků řešit na straně klienta
  4. 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.

Komentáře

  • JackuB : V jaké situaci je picturefill.js pomalý? 25.10.2013
  • pepa.vondrak : Protože vezme všechny spany na celé stránce a hledá jestli mají správné atributy a podle toho vykresluje správný obrázek, nemýlím-li se. Používá to třeba Global news http://globalnews.ca/ 26.10.2013
odkaz
9 ic
odpověděl/-a 14.10.2013

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:

Rychlé přihlášení přes sociální sítě:

Nebo se přihlaste jménem a heslem:

Zadejte prosím svou e-mailovou adresu.
Zadejte své heslo.