Keskustelu: Nettisivujen teko: Tarkkojen kuvien lataaminen vain tarvittaessa

Onko tässä järkevä tapa toteuttaa retina-tasoisten kuvien näyttäminen:

HTML:

<img src="//:0" data-1x="http://placehold.it/200x200" data-2x="http://placehold.it/400x400" style="height:200px;width:200px;">
<noscript><img src="http://placehold.it/200x200" style="height:200px;width:200px;"></noscript>

JS:

var retina = window.devicePixelRatio > 1;

$("img").each(function(){
	var attr_2x = $(this).attr("data-2x");
	var attr_1x = $(this).attr("data-1x");

	if(typeof attr_2x !== "undefined" && attr_2x !== false && typeof attr_1x !== "undefined" && attr_1x !== false){
		if(retina){
			$(this).attr("src", $(this).data("2x"));
		} else {
			$(this).attr("src", $(this).data("1x"));
		}
	}

});

"retina-tasoisten kuvien".... hrhrhrhrhrhrhrh *kylmiä väreitä*

Omaan silmään en ymmärrä, miksei tuota "noscript"-kuvan urlia voisi suoraan käyttää tuossa "oletuskuvassa" ja javascriptillä paukuttaa korkearesoluutiokuvien src:t tilalle?

Jos sitä käyttäisi suoraan, retina-näyttöinen laite joutuisi lataamaan ensin pienemmän kuvan ja sitten suuremman kuvan. Eli kaksi kuvaa. Sivulla saattaa olla vaikka 10 JPG-kuvaa, niin tällöin selain joutuukin lataamaan 20 kuvaa.

Olli kirjoitti:

Jos sitä käyttäisi suoraan, retina-näyttöinen laite joutuisi lataamaan ensin pienemmän kuvan ja sitten suuremman kuvan. Eli kaksi kuvaa. Sivulla saattaa olla vaikka 10 JPG-kuvaa, niin tällöin selain joutuukin lataamaan 20 kuvaa.

Olli: joutuuko, vai ajatko skriptisi jo domin latauduttuessa?

Ja etkö voisi sitten laittaa oletuksena vaikka puolikasta resoa ja valita sen perusteella otetaanko 1x vai 2x -kuvatarkkuus ;)

http://placehold.it/50x50

...
Jos et aja heti domin latauduttua, niin nythän se "retina-laite" lataa sitten aluksi 10 kpl 404-sivuja <img> -tägeihin.

//:0 ei ole 404-sivu, ks. http://stackoverflow.com/a/5775621/938851
Ja tuo koodi on $(document).ready(function(){}); sisällä

No eiks kannattais sit mieluummin sitä about:blankkiä mieluummin...

Edelleenkin heittäisin oikean urlin kuviin oletuksena

Niin ,mutta en tiedä auttaako jos lataa vain puoliresoluutioisen kuvan.

Jos vaikka lataat aina tuon 400px kuvan ja ihan sitten saatavilla olevan resoluution mukaan määräät, minkä kokoisena kuva näytetään? 400x400 kuitenkin kutistuu useimmissa selaimissa tosi nätisti 200x200 -pikselin kokoon, minkä voi havaita vaikka tästä testisivusta. Tosin tablettilaitteiden ja -selainten kyvyistä en voi kauheasti sanoa mitään, mutta ongelma tuskin on merkittävä noin pienien kuvien kanssa.

Tuo on ihan hyvä neuvo. Tosin QR-koodeilla testatessani QR-koodi ei pysynyt yhtä terävänä kun selaimen antoi hoitaa skaalauksen.

QR:n kanssa voinet tehdä poikkeuksen sikäli jos heikompi terävyys estää koodin luettavuuden. Tosin suosittelisin tutustumaan myös tähän hieman uudempaan CSS-ominaisuuteen:

https://developer.mozilla.org/en-US/docs/CSS/image-rendering

Tällöin voit tarjoilla pienemmän QR-kuvan, määrittää sille crisp-edges ja venyttää sen kaksinkertaiseksi, eikä siitä sitten tule pehmeää. Selaintuki on valitettavasti vielä heilahtelevaa.

Hieno ominaisuus, tosin kuten sanoitkin, niin vielä kokeellinen ja selaintuki vähäinen. Taidan käyttää tuota nykyistä omaani.

QR-koodi nettisivulla... käyttääkö niitä joku oikeasti myös monitorilta luettaessa.

Julisteissa ja julkisissa tiloissa ymmärrän, mutta monintorilta, ja varsinkin kun puhutaan retina-näytöistä, niin en.

Japanissa harrastavat sitä enemmänkin kun taas länsimaisilla nettisivuilla olen bongannut ehkä kerran aiemmin.

Mielestäni se on aika kätevää, saa helposti sivun kännykkään ilman että tarvetta näpytellä osoite.[Kun retina-näytöistä kyse, niin onpahan ainakin kuva terävä ja koodi skannautuu vaivattomammin ;)]