// Woups, je viens de me rendre compte que je me suis trompé de section. Un membre du staff peut le déplacer dans la séction JavaScript ? Merci !

Hello,

Je me posais une petite question : est-il possible de générer, puis charger des images dans une page web en fonction de la taille de l'écran ?

Actuellement je procède comme ça : 3 versions pour toutes les images (1920px, 1280px, 720px) qui sont chargées dans mon code css en fonction de la taille de l'écran. Cela me permet de diminuer le poid de l'image en fonction des devices. 

exemple : Je n'aurai pas besoin de charger une image de 1920px sur un iPhone de 320px. En chargeant la version en 720px, j'économise du temps de chargement puisqu'elle pèse évidemment moins lourd.

Cependant, je voulais savoir si il était possible en JavaScript ou autre de procéder de cette façon :

1 - Je détecte la taille d'écran du visiteur.

2 - A partir de mes images en 1920px éxistantes, je créer des versions de la taille de l'écran du visiteur. 

3 - Je charge ces images-là dans la page web.

Ainsi, ça permettrait un temps de chargement optimal.

Est-ce possible ? Auriez-vous des pistes ?

Cordialement,

Serelio

-
Edité par Serelio 15 décembre 2017 à 19:12:19

Hello

Je n'ai jamais testé mais voici un lien utile

Hello Tûrwaithion, 

J'ai découvert et lu cet article il y a moins d'une heure !

Cette propriété est très utile mais ne me convient pas, puisqu'elle nécessite également de créer plusieurs versions de fichiers.

Bonjour,

> elle nécessite également de créer plusieurs versions de fichiers.

c'est pourtant la meilleure méthode, car JS se charge souvent après les images. Donc ce serait double peine pour les mobiles : image énorme chargée, *puis* petite image chargée pour remplacer. À moins de faire l'inverse : par défaut il y aurait uniquement les petites images, remplacées par des grandes dès la détection de la taille de fenêtre faite. Mais c'est quand même mieux d'utiliser srcset.