Responsive Web Design (RWD) - Gestion des images fluide

Source http://thesassway.com/intermediate/responsive-web-design-part-1

Les images s'ajustent en fonction de leur container avec RWD.

img {
  max-width: 100%;
}

@mixin scale-image-ie($image) {
  background: none;
  filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(
    src="#{image_url($image, true, false)}",
    sizingMethod="scale"
  );
}

background-size - CSS3 (IE 9 et +)

Si l'on a une image de fond qui doit s'adapter au container,  la propriété CSS3 background-size est utile (à partir de IE 9, Firefow 3.6, ).
Contain et cover : contain peux laisser une marge, cover élargira l'image pour remplir - masque souvent une partie de l'image. Voir sa démo

Il existe aussi un mixin compass background-size Voir http://compass-style.org/reference/compass/css3/background_size/

img.cover {
  @include background-size(cover);
}

Format des images

Eviter les .png car certains devices ne les supportent pas => JPEG ou GIF

Sur le web

• https://html.spec.whatwg.org/multipage/embedded-content.html#embedded-content
• http://responsiveimages.org/
• http://thinkshout.com/blog/2014/07/responsive-images-in-drupal-with-the-picture-module/
  drupal 8 utilise dans le core un nouveau module, Picture, qui a été porté pour drupal 7 (cf drupal.org/project/picture). Il y décrit, avec breakpoints comment gérer les images responsive sous drupal 7.
  voir la démo picture 7 : http://picture7d.h011.attiks.com
  J'ai trouvé (et pris des notes) un article en FR, qui part de cet article et va plus loin (source: stephanemartinw.com) - son module.

sur ce site: art direction et l’élément picture (et srcset)