Conosci le immagini reattive. Riguarda la sintassi dell'immagine in HTML. Se gli dai le giuste informazioni nella giusta sintassi, puoi fare in modo che il browser scarichi esattamente l'immagine giusta di cui ha bisogno, senza fornirgli troppi o troppo pochi dati dell'immagine. È fantastico per le prestazioni.
Sai che per ottenere il massimo dalle immagini reattive dovresti riempirlo con Picturefill. Lo scarichi, lo includi nella tua pagina.
Hai un piano. Sai cosa vuoi che piaccia alla tua pagina in determinati punti di interruzione delle media query. Hai tutto deriso in Sketch o Photoshop.
Sai qual è la sintassi per le immagini reattive. Avrai bisogno di qualcosa come la sintassi srcset / size per descrivere la tua situazione.
![Sunset]()
Questo screencast parla di tutte queste cose. Si tratta di legare tutto insieme. Si tratta di collegare insieme il flusso di lavoro di progettazione e il software utilizzato con il flusso di lavoro front-end e la sintassi utilizzata lì. Devi sapere come produrre le immagini nei formati e nelle dimensioni di cui hai bisogno. Devi sapere quando otterrai risultati di qualità e quando no. Devi sapere come misurare quelle immagini e usare i numeri giusti dove. Devi sapere come collegare le tue scelte di layout e le query multimediali con quei numeri. È tutto qui.
Guarda la demo della penna per lo screencast su come ottenere i numeri per le immagini reattive di Chris Coyier (@chriscoyier) su CodePen.