Image en 100%

Bonjour,

J'ai une petite question de mise en forme CSS d'un site, sur les images en particuliers. J'ai effectué une recherche sur le forum avant de poster, j'espère ne rien avoir loupé.

En gros voici le site que je suis en train de mettre en place : http://dev.exelinfo.ch/

L'image du haut doit être à 100% en largeur et environ 100 px de haut, alors que les nuages doivent prendre le reste de la hauteur, toujours en 100%. Je pourrais faire du background repeat en CSS, mais le but est que les images, en tout cas celle du haut ne soient pas déformées, et qu'elles s'adaptent à la résolution d'écran.

Pour l'instant j'ai simplement 2 div, dans lesquels je mets les images (pas en background mais bien en <div><img... /></div>). Mais ces images sont évidemment énormes, et elles sont resizées automatiquement d'après la taille du div, ce qui n'est pas génial pour le temps de chargement de page..

Je ne sais tout simplement pas comment faire au mieux, pour que le chargement soit correct, et que ces 2 images prennent tout l'écran. Dois-je récupérer la résolution d'écran en JS, et créer des images pour toutes les résolutions ? Ou y a-t-il une solution plus simple ?

Merci d'avance pour vos réponses, même une petite piste m'aiderait bien.

Bonjour,

Quand on re-dimensione la fenêtre du navigateur ça ne recharge pas l'image. Par contre le navigateur doit faire l'effort d'afficher l'image à une taille différente (c'est lui qui refait le calcul). La tâche est d'autant plus ardue pour lui si les fichiers pèsent un âne mort :
Comme pour tes images :
haut.jpg : 4000px par 412px - poids : 349k
nuages.jpg : 1984px par 1228px - poids : 268k
total des deux images : 617k (elles sont plus lourdes à elles seules que la plupart des pages web au grand complet)

D'accord, vu la taille des images, c'est bien optimisé mais ça reste hénaurme !

Bonjour,

Merci pour votre réponse.

Effectivement, je suis bien conscient que mes images ont une résolution et un poids beaucoup trop important. Pour l'instant le site mis en lien est la seule idée que j'ai trouvé, et elle n'est pas correcte, en tout cas pas assez fonctionnelle.

Je recherche donc une solution, une piste sur laquelle me lancer, pour pouvoir avoir ce site avec des images en plein écran, non redimensionnées (coupées si nécessaires suivant la résolution, mais pas resizées).

Je me demande tout compte fait, si c'est vraiment faisable

Merci d'avance

Salut,

Et une image en background, centrée, dont les parties latérales disparaitrait lorsque la fenètre du navigateur diminue, ca ne te conviendrait pas ? Je ne pense pas que tes visiteurs se préoccupent de savoir si le bandeau du site laisse apparaître 1 arbre de plus ou un morceau de colline en moins.

A ce moment là tu peux te permettre d'avoir une image à 1600pixels de large maximum, sachant qu'à cette résolution le nombre d'utilisateurs ne doit pas être très élevé, et au dessus encore moins. 4000 pixels c'est bien trop. Peut être même estomper les bord pour les grandes résolutions, les résolutions les plus utilisées ayant quand à elle une image pleine largeur.