U kent responsieve afbeeldingen. Het gaat om de afbeeldingssyntaxis in HTML. Als je hem de juiste informatie in de juiste syntaxis geeft, kun je de browser precies de juiste afbeelding laten downloaden die hij nodig heeft, zonder hem te veel of te weinig afbeeldingsgegevens te geven. Het is fantastisch voor prestaties.
U weet dat u om het meeste uit responsieve afbeeldingen te halen, deze moet polyfill met Picturefill. U downloadt het, u neemt het op uw pagina op.
Je hebt een plan. U weet wat u wilt dat uw pagina leuk vindt op bepaalde breekpunten van mediaquery's. Je hebt het allemaal uitgetekend in Sketch of Photoshop.
U weet hoe de syntaxis voor responsieve afbeeldingen is. Je hebt zoiets als de syntaxis srcset / maten nodig om je situatie te beschrijven.
Deze screencast gaat over al die dingen. Het gaat erom alles samen te binden. Het gaat om het verbinden van de ontwerpworkflow en de software die daar wordt gebruikt met de front-endworkflow en de syntaxis die daar wordt gebruikt. U moet weten hoe u de afbeeldingen uitvoert in de formaten en formaten die u nodig hebt. U moet weten wanneer u kwaliteitsuitvoer krijgt en wanneer niet. U moet weten hoe u die afbeeldingen moet meten en waar u de juiste cijfers moet gebruiken. U moet weten hoe u uw lay-outkeuzes en mediaquery's met die cijfers kunt verbinden. Het zit hier allemaal in.
Zie de pendemo voor screencast over het verkrijgen van de cijfers voor responsieve afbeeldingen door Chris Coyier (@chriscoyier) op CodePen.