Adaptation d'une Image background à la largeur d'écran

Résolu/Fermé
heliconius Messages postés 545 Date d'inscription mardi 1 juillet 2008 Statut Membre Dernière intervention 23 juin 2023 - 16 juil. 2022 à 14:51
heliconius Messages postés 545 Date d'inscription mardi 1 juillet 2008 Statut Membre Dernière intervention 23 juin 2023 - 18 août 2022 à 15:40

Bonjour,

J'ai une image de 4032 x 2268 px que je place en arrière plan d'une page web. Elle occupe de manière fixe la largeur de l'écran. Sur PC, tout va bien, aussi bien sur un 13" que sur un 32".

voici le CSS mis en place :

body {
    font-size:1em;
    background-image:url(/img/background.jpg);
    background-size:cover;
    background-attachment:fixed;
}

Cependant sous smartphone, en mode portrait je ne vois environ que le quart gauche de l'image alors qu'en mode paysage, l'image est complète

Ma question : Y a-t-il un moyen (CSS ou autre), en conservant le ratio, d'adapter l'image à la largeur d'écran pour les smartphones lorsqu'ils sont positionnés en mode portrait ?

La page charge d'abord le fichier de styles et ensuite, à tout hasard, j'ai rajouté dans la page le code suivant :

@media (max-width:640px) {
    * { box-sizing:border-box; }
    body { width:auto; margin:0; padding:0; }
}

Ça ne change rien du tout. Qui aurait une idée ?

Merci pour votre aide et vos conseils.


Windows / Firefox 102.0


A voir également:

1 réponse

Salut,

ce n'est pas la taille de l'écran qui compte (32 ou 13 pouces ou 7 centimètres) mais la résolution de l'écran l'important(le rapport entre pixels largeur X hauteur ex: 1920X1080 pixels).

Je ne sais pas ce qui va pas dans votre CSS pour qu'il ne s'adapte pas mais une chose est sûre votre image est beaucoup trop grande et cela peut poser des problèmes. Je ne connait pas la résolution de votre image en pixels par pouce(72 c'est pour le web au dessus comme 180 ppp ou plus c'est beaucoup trop) mais une chose est sûre votre image doit avoir un poids nettement supérieur à 2Mo.

Ce qui veut dire que le temps de chargement est de l'ordre de 100 fois (à 1000 fois) plus élevé pour charger votre image de fond que l'ensemble du reste de la page(je parle des contenus textes qui font autour de 120ko si vous en avez beaucoup).

Sur un appareil mobile la RAM(mémoire vive) est beaucoup plus limité que sur un ordinateur de bureau et par défaut celle ci va éviter de charger des trucs lourds.

Quant à avoir une image qui 4032 x 2268 pixels pour l'afficher sur un écran (résolution) qui à une résolution moyenne de 1280 X 720(HD) c'est simplement contre productif....imaginez sur un écran de mobile qui a 315 X 820 pixels(IPad 11) ou nettement moins.

En plus de n'avoir aucune utilité(puisque votre taille d'image à qualité élevée sera redimensionnée en une qualité au moins 3 fois plus faible au niveau de l'affichage) la poids du fichier ralentira considérablement le chargement de la page et risque facilement de saturer la RAM.

Donc évitez surtout pour un fond qui est censé être de la décoration et non le contenu en lui même.

Solutions:

_utilisez une image plus petite redimensionné en l'appliquant en fond sur seulement une zone de la page et non body qui contient toute la page.

_pour un fond sur toutes la page vous pouvez utiliser une texture à partir d'un carré de 20 à 30 pixels qui se répète(les bords sont identiques voir le CSS background-repeat) et pésera autourt de 15/20 octets donc un temps de chargement négligeable.

exemple: https://www.w3schools.com/CSSref/tryit.asp?filename=trycss_background-repeaty

Voilà en espérant que mes explications vous ai aidé à comprendre pourquoi avec un code théoriquement juste le problème se situe au niveau des limitations techniques et logique. Par exemple il est simplement illogique de charger une image de fond en mode paysage(largeur > hauteur) si l'appareil qui affiche celle ci est en mode portrait(hauteur > largeur).

D'ailleurs votre code @media ne concerne absolument pas la manière dont est chargée l'image de fond...à quoi sert il au juste. Si vous voulez corriger ou garder en l'état il serait judicieux de remplacer le CSS par le chargement d'une image en qualité nettement plus basse(et poids) pour la rendre accessible par un appareil avec une résolution d'écran moindre et moins de RAM+vitesse de connexion nettement moins élevée.

Une image dans la page devrait peser au maximum 1.5Mo surtout s'il y en a plusieurs.

Pas tout le monde a la fibre et beaucoup de gens utilisent le wifi ou la 2,3, 4 G qui a des débits bien plus faibles. Il est inimaginable que l'utilisateur ait à attendre pour afficher une page, dans la plupart des cas il va pas rester sur le site avant qu'il ai chargé ou simplement pas revenir dessus.

==> oubliez les images en hautes qualités et grande tailles. Pour le web c'est du 72ppi et des petits formats. Si vous voulez afficher une image de qualité il faut la mettre à part(téléchargement ou page dédiée) et éventuellement proposer une version miniature d'aperçu pour éviter un temps de chargement trop important.

Mais bon ici c'est une image de fond donc pas un contenu principal mais une décoration, dommage qu'une telle décoration rende votre site difficile à consulter(surtout s'il y a des images considéré comme des images <img> le poids va s'ajouter et votre site mettra des plombes à s'afficher).

0
heliconius Messages postés 545 Date d'inscription mardi 1 juillet 2008 Statut Membre Dernière intervention 23 juin 2023 138
18 août 2022 à 15:40

merci pour cette longue et très utile réponse dans laquelle vous vous êtes impliqué.

Désolé pour la mienne, tardive, mais je suis en congé et donc loin du net. En tout cas je retiens les bons conseils. Merci.

0