Responsive: multiples fonds = bonne pratique ?

Bonjour à tous,

A l'époque, j'avais pour habitude de créer l'arrière plan d'un site sous Photoshop, que j'exportais ensuite en PNG, et qui était référencé par une valeur de propriété CSS background-image.

Je me lance désormais dans la création de site adaptatif, et l'une des principales problématiques à mes yeux, c'est l'intégration de ce genre d'images avec des dimensions fixes, qui semble de fait peu compatible avec le responsive.

J'ai bien pensé à l'intéressant:

background-size: cover;

J'apprécie particulièrement l'aspect de fluidité lorsque l'on redimensionne manuellement le navigateur. Cependant, il semble posséder des inconvénients, en terme de qualité d'image qui peut vite se détériorer, ou encore en terme de bande passante consommée (lourde image chargée pour finalement en utiliser qu'un bout à l'écran).

Quitte à perdre la fluidité du "cover", l'idée pourrait alors d'avoir des medias queries qui charge un fond par grande catégorie de largeur (320, 480, ..., 1280, 1920, 3840), ce qui résout dans une certaine mesure les problématiques de qualité d'image et de bande passante consommée. Cependant, cela implique la création de fonds dans un certain nombre de résolutions "break-point"... elles mêmes relativement difficiles à définir.

Finalement, mes questions sont:
1) En responsive, doit-on purement éviter l'utilisation d'arrière plan ? Je parle bien entendu d'arrière plan traditionnel avec dimensions fixes, et non de dessins vectoriels.

2) Si on souhaite utiliser un arrière plan, est-ce une bonne pratique d'utiliser uniquement le "cover", ou est-il préférable de le combiner aux médias queries pour charger un fond différent par grande catégorie de résolution ?

Merci !

Bonsoir,

remi75 a écrit :
Quitte à perdre la fluidité du "cover", l'idée pourrait alors d'avoir des medias queries qui charge un fond par grande catégorie de largeur (320, 480, ..., 1280, 1920, 3840), ce qui résout dans une certaine mesure les problématiques de qualité d'image et de bande passante consommée.

Et bien non car quoi qu'il adviennent toutes les images sont chargées. Du coup cela répond à la question 1 : étant donné que les petites résolutions chargerons tout de même les plus grandes images, vous pouvez donc vous permettre de charger des images en background pour petites résolution. Mais peut être que la réponse à cette question est à rechercher ailleurs, vers d'autres approches.

remi75 a écrit :
Cependant, cela implique la création de fonds dans un certain nombre de résolutions "break-point"... elles mêmes relativement difficiles à définir.

Les break Points ne se définissent pas par rapport aux résolutions des terminaux des clients mais en fonction du design du site. Sachant que c'est la première chose à considérer quand on crée le thème d'un site ils ne sont donc pas dur à définir.

remi75 a écrit :
2) Si on souhaite utiliser un arrière plan, est-ce une bonne pratique d'utiliser uniquement le "cover", ou est-il préférable de le combiner aux médias queries pour charger un fond différent par grande catégorie de résolution ?

Mes préférences perso vont vers "cover"...

Olivier C a écrit :
Et bien non car quoi qu'il adviennent toutes les images sont chargées.

En fait non, seules les images concernés par la plage de media queries sont chargées.

Par exemple :

div {
 /* ici rien du tout pour les petits écrans */
}

@media (min-width: 480px) and (max-width: 767px) {
  div {
   /* uniquement chargé sur écrans de 480-767px */
  background-image: url(small.png);
  background-size: cover;
  }
}

@media (min-width: 768px)  {
  div {
   /* uniquement chargé sur écrans de 768px et plus */
  background-image: url(big.png);
  background-size: cover;
  }
}

L'autre solution, comme l'indique Olivier C, est de passer par image-set() : http://caniuse.com/#feat=css-image-set

Bonne journée,

Raphaël
Modifié par Raphael (23 Dec 2015 - 10:11)

Raphael a écrit :
En fait non, seules les images concernés par la plage de media queries sont chargées.

Et bien comme quoi ça vaut le coup de venir discuter sur le forum de temps à autre... Je crois que j'ai gardé cet apriori sur le responsive d'avant le mobile first.
Modifié par Olivier C (23 Dec 2015 - 15:52)

Bonsoir

on mélange les termes [ résolution et taille] des [images et des écrans et breakpoint ]


Ici on parle de sélecteurs ( identique ou pas ) contenant un lien vers une image . Le nom des ces sélecteurs pouvant être localisés dans plusieurs MQ range = 2 breakpoint peuvent se combiner !! (et donc l'ordre d apparition des MQ et nom des sélecteurs à une importance, utiliser un nom de sélecteur dans des MQ qui ont un range en commun se justifie t il ?


voici l explication du concept mobile first : le début du css doit contenir du code indépendant des MQ puis du code css pour MQ mobile et puis code css pour MQ desktop . Ainsi si on ouvre la page web avec un écran desktop toutes les images sont chargées ( css sans MQ , css desktop...mais je pensais aussi mobile ....maintenant je ne sais plus .... ) mais si on ouvre avec écran mobile alors seules les images du MQ pour mobile et css sans MQ sont chargées et pas les images du MQ pour desktop !!


Maintenant si on utilise un navigateur qui joue le rôle de mobile puis de desktop ( en resizant agrandissant son width ) comment se charge les images dans un sélecteur redéfini et non redéfinie au niveau du MQ desktop ? Les instructions du sélecteur mobile ayant été rendu , passer au MQ desktop efface t il tous le code rendu du MQ mobile ? oui

Quel est la logique des navigateurs avec les MQ concernant le preload ( téléchargement) et l'affichage , il y a une spécification ou que des recommandations .
Plusieurs cas
1 sont téléchargés et ne sont pas/plus affichés ( sel écrasé par même sélecteur présent dans MQ actif)
2 sont téléchargés et sont affichés (sélecteur unique nouveau , sel dans MQ actif )
3 ne sont pas téléchargés et ne sont pas affichés (sel dans MQ inactif )

Si j'ai trois MQ correspondant à 3 tailles d écran :mobile tablet desktop .Passer du MQ tablet au MQ desktop retire de mon écran toutes les instructions des sélecteurs présent dans le mode MQ tablet actif même si pas redéfini dans MQ desktop ?
oui


..a tester chevauchement de range entre MQ


Cordialement
Modifié par 75lionel (25 Dec 2015 - 23:19)