Image en background sous l'en tête (logo, menu ...)

HDcms a écrit :
Quelle serait la taille largeur optimale physique pour que cela passe sur tout type d'écran (voir ajuster par css) ?

Vous pouvez utiliser une image la plus large possible pour être en bonne qualité, et de manière optimisée utiliser plusieurs images choisies selon la largeur de l'écran. Par exemple :

@media screen and (max-width: 36.01rem) {
  .image-article {
    background-image: url(/img-1000x342.jpg);
  }
}

@media screen and (min-width: 36.01rem) and (max-width: 65.01rem) {
  .image-article {
    background-image: url(/img-1500x513.jpg);
  }
}

@media screen and (min-width: 65.01rem) {
  .image-article {
    background-image: url(/img-2000x684.jpg);
  }
}

Modifié par Olivier C (15 Aug 2023 - 16:16)

Bonsoir

Olivier C a écrit :

Vous pouvez utiliser une image la plus large possible pour être en bonne qualité, et de manière optimisée utiliser plusieurs images choisies selon la largeur de l'écran. Par exemple :

@media screen and (max-width: 36.01rem) {
  .image-article {
    background-image: url(/img-1000x342.jpg);
  }
}

@media screen and (min-width: 36.01rem) and (max-width: 65.01rem) {
  .image-article {
    background-image: url(/img-1500x513.jpg);
  }
}

@media screen and (min-width: 65.01rem) {
  .image-article {
    background-image: url(/img-2000x684.jpg);
  }
}

Si je comprends bien je dois prendre cela comme exemple pour que cela passe sur tout type d'écran responsive) en conservant mes autres réglages

background-repeat: no-repeat;
background-size: cover;

sans en ajouter
mais si je change les valeurs, par ex :img-1000x342.jpg
comment je trouve la valeur en rem ?

J'ai fais ça au pif, avec un vieux code qui traînait sous le coude...

Mais on peut considérer que 1rem équivaut à 16px. Après on jonglera avec les tailles d'images que l'on possède éventuellement déjà - comme c'est le cas pour moi ici - sachant que, d'une part, il existe des écrans retina et que, d'autre part, une image en background n'a pas forcément besoin d'être hyper précise.
Modifié par Olivier C (15 Aug 2023 - 23:25)

Bonsoir
Merci j'ai un doute énorme, je trouve des valeurs rem, mais est-ce que je fais le bon calcul
J'ai pris une image haute définition que j'ai retaillée mais l'image est un peu flou sur grand écran et cela devient de pire en pire vers le mobile
Qu'ai je fais comme erreur ?

@media screen and (max-width: 30rem) {
  section#hs-1529472563843{
background-image: url("/0,medias/img/cordistes_toit_360-46.jpg");
background-repeat: no-repeat;
background-size: cover;
}
}

@media screen and (min-width: 30rem) and (max-width: 120rem) {
  section#hs-1529472563843{
background-image: url("/0,medias/img/cordistes_toit_1366-177.jpg");
background-repeat: no-repeat;
background-size: cover;
}
}

@media screen and (min-width: 120.01rem) {
 section#hs-1529472563843{
background-image: url("/0,medias/img/cordistes_toit_1920-250.jpg");
background-repeat: no-repeat;
background-size: cover;
}
}

En fait c'est surtout des maths :

#hs-1529472563843 { /* on met ici ce que l'on ne répétera pas */
  background-repeat: no-repeat;
  background-size: cover;
}

@media screen and (max-width: 30rem) { /* 30rem X16 = 480px minimum */
  #hs-1529472563843 {
    background-image: url("/0,medias/img/cordistes_toit_360-46.jpg");
  }
}

@media screen and (min-width: 30rem) and (max-width: 120rem) { /* 30rem X16 = 1920px minimum */
  #hs-1529472563843{
    background-image: url("/0,medias/img/cordistes_toit_1366-177.jpg");
  }
}

@media screen and (min-width: 120.01rem) { /* 2500px par exemple */
  #hs-1529472563843{
    background-image: url("/0,medias/img/cordistes_toit_1920-250.jpg");
  }
}

Re
Désolé normalement je ne suis pas trop mauvais en math, mais là, je dois être fatigué + problème de compréhension.

On part sur le fait que j'ai besoin de 3 images pour couvrir à peu près un spectre large (ordi à smartphone) sans multiplier les tests avec tous les risques d'erreurs avec les largeurs suivantes
1920px /16= 120rem (pas plus grand )
1366px /16= 85,375rem
360px /16= 22,5rem

D'autre part, je vois
@media screen and (max-width: 30rem) { /* 30rem X16 = 480px minimum */)
@media screen and (min-width: 30rem) and (max-width: 120rem) { /* 30rem X16 = 1920px minimum */

A part la place occupé sur le smartphone, j'avais l'impression que l'image unique précédente se réduisait bien mieux sans flou apparent, Ce qui n'est pas le cas avec plusieurs images.

Cela voudrait-il dire que je dois faire

#hs-1529472563843 { /* on met ici ce que l'on ne répétera pas */
  background-repeat: no-repeat;
  background-size: cover;
}

@media screen and (max-width: 23rem) { /* 23rem X16 = 368px minimum */
  #hs-1529472563843 {
    background-image: url("/0,medias/img/cordistes_toit_360-46.jpg");
  }
}

@media screen and (min-width: 23.01rem) and (max-width: 119.99rem) {
  #hs-1529472563843{
    background-image: url("/0,medias/img/cordistes_toit_1366-177.jpg");
  }
}

@media screen and (min-width: 120rem) { /* 1920px par exemple */
  #hs-1529472563843{
    background-image: url("/0,medias/img/cordistes_toit_1920-250.jpg");
  }
}

Modifié par HDcms (16 Aug 2023 - 17:17)

Il faut tester le rendu. En tâtonnant un peu de manière empirique on finit par trouver un compromis acceptable...
Modifié par Olivier C (16 Aug 2023 - 20:54)

Bonjour

Olivier C a écrit :
Il faut tester le rendu. En tâtonnant un peu de manière empirique, on finit par trouver un compromis acceptable...

Ma proposition n'est pas correcte?? je ne vois pas comment tâtonner plus!
D'autant que je vois sur le smartphone un petit sursaut qui fait que l'image s'agrandit en hauteur et devient franchement floue

HDcms a écrit :
je vois sur le smartphone un petit sursaut qui fait que l'image s'agrandit en hauteur et devient franchement floue

Effectivement, je n'ai pas parlé de la hauteur : l'image étant placée en "cover", donc en couverture complète de l'élément avec rognage de l'image, si le ratio de l'élément à recouvrir dépasse de trop le ratio de l'image, cette dernière s'adaptera bien en hauteur mais en pixellisant beaucoup. Il faut donc dans ce cas taper plus large pour l'image. Bref, il faut tester visuellement le rendu.
Modifié par Olivier C (17 Aug 2023 - 15:35)

Bonjour
Bon je suis passé en "contain", je ne sais compris si c'était plus générique et mieux pour aller sur tout les écrans.
C'est effectivement un peu mieux mais avec encore un léger flou sur le plein écran et un tout peu petit sur le smarphone.
Pourtant il me semble après synthèse vue sur le web que les tailles suivantes sont les meilleurs et stabilisées
1920px /16= 120rem (pas plus grand )
1366px /16= 85,375rem
360px /16= 22,5rem

a écrit :
Il faut donc dans ce cas taper plus large pour l'image. Bref, il faut tester visuellement le rendu.

J'ai un doute si je dois physiquement augmenter l'une ou l'autre des images ?
OU
modifier mes tests qui me semblaient corrects ?

Si les tests donnent un rendu correct visuellement il faut bien rester comme ça !

Re
Bon je disais plutôt "effectivement un peu mieux, mais avec encore un léger flou sur le plein écran et un tout peu petit sur le smarphone."

Je laisse ouvert si d'autres idées d'améliorations
Merci encore

HDcms a écrit :
J'ai un doute si je dois physiquement augmenter l'une ou l'autre des images ?

Je m'aperçois que j'étais passé à côté de cette dernière question...
Je n'ai pas évoqué un truc : les écrans peuvent avoir un ratio de pixels deux ou trois fois plus dense (retina, x2 ou X3), ce qui fait que sur smartphone les images peuvent apparaître crénelées, il suffit alors de mettre une image deux fois plus grande que prévue**.

Enfin, si l'on voulait vraiment être rigoureux on pourrait passer par une autre solution, différente pour le rendu mais plus précise : un image en ligne avec des attributs srcset. Voir :
- Responsive Images : comprendre srcset et sizes
- CodePen, Picture tag, srcset and sizes attributes
___
** Les écrans X3 pourrons s'en contenter car l'œil humain ne peut discerner la différence, tout cela n'est qu'un argument commercial sachant que les écran retina X3 ne sont X3 que pour la couleur verte...

Bonjour
Ok merci pour cette piste que je vais étudier avec attention, même si je pesne que celà va me demander des efforts en cette période.
Je me demandai dans quelle mesure si j'avais une image webp 1980px*120px et que le thème étant responsive, dans quelle mesure, cela ne pourrait pas convenir aux 3 types d'écrans évoqués ?