1481 sujets

Web Mobile et responsive web design

Bonjour à tous Smiley smile

Si j'écris aujourd'hui c'est pour vous demander conseil (vous vous en doutez).
Je suis en train de refondre le site web de mon domaine viticole, pour le rendre plus moderne et plus agréable (l'ancien étant de 2005 et à base de tableaux Smiley decu ).

Je fais donc un slider, mais j'ai des soucis pour rendre les images dynamiques.

En vérité je n'avait jamais fait de slider avant celui-ci. Avant tout un lien :

http://coupe-roses.com/index_.html

Les images ne correspondent pas au final évidemment, ni les boutons sociaux et de langues.

J'aimerais savoir comment faire pour que mes images se redimensionnent selon la résolution de l'écran. De ce que j'ai pu voir sur d'autres sites semblables, les images ont une taille assez grande de base, et plus on agrandit la page, plus on en voit (je ne sais pas si c'est très clair).

Ce qui m'embête dans cette solution c'est surtout l'optimisation. 4 images en 1080 ou même 1440p, et même en jpg, ça pèse entre 600 et 800ko. L'optimisation, dont je suis friand, sera difficile.

Savez-vous ce qui se fait généralement dans ces cas ?
Je précise que s'il est possible d'éviter l'utilisation de JS ça m'arrange, je fais très attention à mon pagespeed et Yslow.

Par exemple uploader plusieurs images de taille différente et changer la source selon la réso ?

Merci par avance Smiley smile
Hello,

Tu as plusieurs solutions en CSS3 mais celles ci ne sont pas encore bien implémentés. Tu as par exemple l'attribut srcset qui n'est que sur quelques navigateurs récents, voici un article de Geoffrey sur Alsacréations.

Sinon, ça dépend si tes images sont juste décoratives, mais tu peux aussi les mettre en background et ainsi avoir des images différentes en fonction de tes breackpoints (en utilisant les mediasqueries), tu peux aussi faire du lazy load en js pour les charger à la demande.

J'espère que ça va t'aider ^^