Bonjour,
je souhaite comprendre un petit truc à propos de bootstrap : j'ai des images qui font la taille max suivant les colonnes définies dans le design.
Ainsi, dans col-xs-12 col-sm-3 col-md-3, j'ai une image d'environ 800px de large qui est à 100% (la col xl fait environ 800px)
Lorsque je teste le site sur google speed test, j'ai un message comme qui il faut que j'optimise toute mes images avec une réduction de 80%... or mes images sont à la bonne taille pour répondre aux différentes tailles possibles de la colonne.
Y-a-t-il une solution ?

D'avance merci
p.s.
un exemple : https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fwww.opendesk.cc%2F&tab=desktop

3 réponses


Si tu veux charger tes images en fonction de la largeur d'écran, utilise srcset dans tes balises img

rafmix
Auteur

merci pour la réponse, je connais la balise srcset, mais je vois pas comment l'appliquer de manière générale. Imaginons 1col de 25% lorque l'ecran fait plus de 1200px, le tout dans un contenaire de 1600px max, l'image fera au max 400px de large. En desous de 1200px, un mediaquery change la largeur de la col à 50%, donc l'images fera au max 600px... donc à moins de calculer chaque configuration d'image, je ne vois pas comment procéder pour avoir un code générique....

Pour ce qui est ce qui est de google speed test, il semblerait qu'il fasse sont cacul suivant une résolution de 1280px... et il veut donc dans mon exemple, une image de 320px....

Si tu te bases sur bootstrap, il n'y a que 4 configurations à gérer (large, medium, small, extra-small)
Sinon tu peux déjà passer certaines images de png en jpg et tu gagneras pas mal sans perte