Les images dans le Responsive Web Design

Développeurs front-end, UX Designers, Graphistes Web, Chefs de projet Web

• Appréhender les tenants et aboutissants de la gestion des images dans les projets Responsive Web Design,
• Intégrer dans leurs projets Responsive Web Design les bonnes techniques de gestion des images.

État des lieux du Web mobile

• Usage de devices différents selon le contexte, le moment de la journée
• Activité séquentielle d'un device à l'autre
• Statistiques par navigateurs et plateformes
• Rapprochement mobile – desktop : un seul développement

Rappel de la définition du Responsive Web Design

• La définition d'origine
• Les grands principes pour les images
• Parcours de quelques sites pour visualiser les pratiques courantes pour les images en
• Responsive Web Design

Les formats d'images

• Les images matricielles (bitmap) : GIF, PNG, JPEG
• Les images vectorielles : fontes d'icônes, SVG
• La gestion des sprites

Gérer les images de décoration dans la CSS

• Gérer les densités variables (« Retina »)
• Gérer les largeurs variables, fluides
• Combiner les deux

Gérer les images de contenu dans le HTML

• Gérer les densités variables (« Retina »)
  • L'astuce « Compressive Images »
  • srcset-x
• Gérer les largeurs variables, fluides
  • srcset-w
  • sizes
• La Direction Artistique
  • picture / source

Solutions actuelles pour une mise en œuvre tous navigateurs

• Le polyfill picturefill v3
• La gestion des fallbacks

Les solutions du futur

• Les Client Hints

Une attestation de participation sera transmise aux participants