Ultimate image responsive

Voilà la marche à suivre pour une utilisation optimale des images responsives avec sizes/srcset

by oilvier

HTML

<h1>Images responsive</h1>
<!-- <div style="background:firebrick; height:10px; width: calc(100vw - 20px);"></div> -->
<main>
	<section>
		<article>
			<h2>Image simple, sans changement de ratio</h2>
			<p>On commence par un cas simple, on souhaite juste changer les dimensions de l'image en fonction de la taille de l'écran.</p>
			<p>Notre image se trouve dans un conteneur limité à 1200px de largeur, avec un padding latéral de 20px au total (10px + 10px), et une sidebar de 280px de large + 10px de marge.</p>
			<p>Si l'écran a une largeur inférieure à celle de notre conteneur, on effectue le même calcul mais cette fois avec une base de 100vw plutôt que 1200px.</p>
			<p>Pour les écrans de moins de 800px, la sidebar passe sous le contenu principal, notre image doit donc être affichée à 100% de la largeur de l'écran, moins les 20px de padding latéral du conteneur.</p>
			<p></p>
		</article>
		<img sizes="(min-width:1201px) calc(1200px - (280px + 30px)),
				      (min-width:801px) calc(100vw - (280px + 30px)),
				      calc(100vw - 20px)"
		srcset="//placehold.it/300x169/ff0000/ffffff 300w,
				//placehold.it/490x276/ffcc00/ffffff 490w, 
				//placehold.it/590x332/00ff1a/ffffff 590w,
				//placehold.it/690x388/0099ff/ffffff 690w,
				//placehold.it/790x445/9900ff/ffffff 790w,
				//placehold.it/890x500/ff00b3/ffffff 890w" 
		alt="">	
	</section>
	<aside>
		<article>
			<h2>Image avec direction artistique</h2>
		<p>Sur les écrans supérieurs à 800px de large, notre image affiché dans notre sidebar avec largeur fixe de 280px. On utilise l'attribut <code>sizes</code> le plus simple possible car notre image n'a pas besoin de changer de dimensions.</p>
		<p>Dès que l'écran passe en dessous de 800px, la sidebar passe en full screen et notre image en mode paysage. <br>On peut donc reprendre les mêmes calculs que pour l'image principale.</p>
		</article>
		<picture>
			<!--[if IE 9]><video style="display: none;"><![endif]-->
			<source...

SCSS

body, h1, h2, h3, h4, h5, h6, p, blockquote, pre, dl, dt, dd, ol, ul, li, form, fieldset, legend, table, th, td, caption, hr {margin:0; padding:0;}

ol, ul {list-style:none;}

*, 
*:before, 
*:after {box-sizing: border-box;}

body {font-family:sans-serif;}

img {max-width:100%; height:auto; vertical-align:bottom;}

h1,
h2 {font-weight: bold;}

main {display:flex; margin:10px auto; padding:10px; max-width:1200px; background:lightgray;}

section {flex:1 1 0%; background:beige;}
aside {margin-left:10px; width:280px; background:lightyellow;}

article {padding:10px;}

@media only screen and (max-width:800px){
	main {display:block;}
	aside {margin:10px 0 0; width:100%; min-height:100px;}
}