Discussion :

[abc.xyz]

Bonjour à tous, j'ai un petit problème et je me demande vraiment si j'adopte le bon raisonnement pour le résoudre.
Voilà j'ai une image faisant 3270 pixels par 2000 pixels en background url d'une div( div qui fait 100% de la page en width et 100% de la page en height).
Lorsque je teste le site en local et en ligne aussi d'ailleurs cette image de fond mets beaucoup de temps à s'afficher et c'est donc très gênant.C'est dû a sa taille en pixels je pense qui est très grande.
Alors je me suis dit que puisque elle est trop grande la solution c'est,à l'aide de light image resizer (un logiciel), de reduire sa taille en pixels.(Ce logiciel modifie la taille tout en conservant les proportions de l'image)
Et je pense que pour choisir la nouvelle taille en pixels il suffit de se renseigner sur la width en pixels de l'écran d'ordinateur la plus grande.Ex: si on me dit que pour les larges desktops la width de l'écran est 1970 pixels alors je la resize avec une width de 1970 pixels.
Est ce que je fais fausse route?

Merci pour votre aide.

[saymoneu]

Bonjour,

C'est sur, une image si grande prend du temps à se charger.
A votre place je la redimensionnerai pour qu'elle fasse 1920px de large, c'est standard.
Vous pouvez aussi augmenter le taux de compression de l'image avec des logiciels comme photoshop ou Gimp.
De plus, si votre image est un png, essayez de la passer en jpeg si c'est possible, ce sera surement plus léger.

[abc.xyz]

Merci de votre réponse, cependant si je vous écoute et que je la resize à 1920 pixels de width, il va y avoir un problème d'affichage pour les clients avec une résolution supérieure à 1920 pixels, non?

[saymoneu]

Vous mettez un background-size:cover; et le problème est réglé.
Cela risque d'arriver assez peu souvent une résolution supérieure. Si cela arrive, l'image prendra toute la largeur, sera un peu déformée mais ce sera a peine visible. De toutes façons une image plus grande que ça de qualité maximale c'est juste impossible. Je ne sais pas quelle est le poids de l'image de base mais à mon avis ca doit peser lourd.

Sinon, autre solution si vous voulez conserver votre image de base, un lazy loader, mais dans tous les cas les personnes avec un débit faible vont avoir le temps de se faire un café avant que votre image n'apparaisse.

[abc.xyz]

Ok je vais la dimensionner comme vous m'avez dit et en plus je vais la faire passer du format png à jpeg, pour ça il suffit d'ouvrir le png sous paint et de l' "enregistrer sous" en jpeg je pense, c'est ce que je vais faire

Au fait comme nous sommes dans les histoires de résolution, j ai décidé pour la max width de ma media queries responsive visant les ordinateurs portables de la fixer à 1300 pixels, cependant il y a un petit problème je pense, cela ne va pas fonctionner pour les ordinateurs portables ayant une taille d'écran supérieure, donc ma question est simple, comment inclure toutes les résolutions d'ordinateurs portables?On met la max width à combien?