Adaptive Images et Responsive Web Design - commentaires <i lang="en">Adaptive Images</i> et Responsive Web Design 2014-09-24T12:07:18Z https://www.nursit.com/Adaptive-Images-et-Responsive-Web#comment421 2014-09-24T12:07:18Z <p>Merci Bruno, c'est corrigé</p> <i lang="en">Adaptive Images</i> et Responsive Web Design 2014-09-24T11:39:03Z https://www.nursit.com/Adaptive-Images-et-Responsive-Web#comment420 2014-09-24T11:39:03Z <p>Juste pour signaler quelques fautes de frappe<small class="fine d-inline"> </small>;)</p> <blockquote class="spip"> <p>et la fragmentation de version de périphériques iOS étant rédui<strong>re</strong></p> </blockquote><blockquote class="spip"> <p>il mentionne d'abord qu'Andro<strong>ï</strong>d 2</p> </blockquote><blockquote class="spip"> <p>ce qui évite <i>à</i> Android 2 de charger les images</p> </blockquote> <p>Bises ++</p> <i lang="en">Adaptive Images</i> et Responsive Web Design 2014-01-20T08:38:11Z https://www.nursit.com/Adaptive-Images-et-Responsive-Web#comment310 2014-01-20T08:38:11Z <p>Sérieusement... C'est quoi ce truc de fou<small class="fine d-inline"> </small>! 1841222306 - dsc00037-2-r90-4c4b5 - 6dff337b451810af4be6b07176daed06 - tu devrais choisir des noms de fichiers encore plus compliqué histoire de bien nous embrouiller. La simplicité c'est pas trop ton truc man<small class="fine d-inline"> </small>!</p> <i lang="en">Adaptive Images</i> et Responsive Web Design 2013-11-30T19:53:22Z https://www.nursit.com/Adaptive-Images-et-Responsive-Web#comment280 2013-11-30T19:53:22Z <p>Have a look to <a href="https://github.com/BBC-News/Imager.js" class="spip_url spip_out auto" rel="nofollow external">https://github.com/BBC-News/Imager.js</a><small class="fine d-inline"> </small>; which purpose is to load pictures in 1 network request, for the good DPi and resolution.</p> <i lang="en">Adaptive Images</i> et Responsive Web Design 2013-11-27T22:08:50Z https://www.nursit.com/Adaptive-Images-et-Responsive-Web#comment275 2013-11-27T22:08:50Z <p>Very interesting technique. The use of background images enables you to handle the «<small class="fine d-inline"> </small>JS enabled but broken<small class="fine d-inline"> </small>» case, which current polyfills such as picturefill fail at.</p> <p>A few comments : * Using background-images as the final image displayed has the downside of mixing content-images into the CSS, which can cause maintenance and caching issues. That's something that should be taken into consideration. The impact can be reduced by separating these background images into their own external CSS. * Bandwidth measurements are extremely inaccurate, and should be taken with a grain of salt. I completely agree that active BW measurements are actively harmful, but even passive ones are problematic, since you consider the results thinking that you know what the network's state is, and there's a good chance that you don't. Looking at the bandwidth measurement code, it seems rather racy. The value for responseEnd is not known before the HTML has finished downloading, so with large HTML files, you might miscalculate it. * Data URIing the low quality image can be beneficial (less requests), but can also have a negative impact, by adding non-blocking resources into the critical path. So it's probably a good idea to measure the impact of data URIs vs. external resources here, and in some cases, opt for external resources.</p> <i lang="en">Adaptive Images</i> et Responsive Web Design 2013-11-16T13:07:44Z https://www.nursit.com/Adaptive-Images-et-Responsive-Web#comment269 2013-11-16T13:07:44Z <p>Hello,</p> <p>Voila un tuto bienvenu pour optimiser les images en fonction des terminaux. La demande croissante en responsive design liée à l'explosion du trafic mobile nécessite d'inventer de nouvelles techniques, c'est passionnant.</p> <p>Mary, graphiste chez Sublimeo</p>