Bonjour Abeille,
Effectivement 5MO ça fait mal à la bande passante. Heureusement que tu as eu l'idée de n'en mettre qu'une.
Alors pour cette explication, tu auras besoin :
- une règle
- une équerre
- du papier millimétré
- un crayon
- Optimise ! (vire la règle, tu pourras tracer tes lignes avec l'équerre
)
Bon, donc pour la blague du jour c'est fait.
Tout ça pour dire qu'il te faut mesurer l'espace emprunté par ton image (suivant la résolution donc tes requêtes sur le media) et fournir au visiteur une version de l'image à une taille proche de l'encombrement que l'image va prendre.
A savoir,
Qu'il est recommandé d'enregistrer ses images au format Portable Network Graphic (PNG) avec une compression ajustée "à l’œil" (ni trop fort ni trop faible mais pas forcément à moitié ; je ne peux être plus précis, cela va dépendre de ton image) et entrelacée,
Leur densité doit être comprise entre 300 et 600dpi, 300 produisant un résultat très correct (sauf Retina), Edit : Faux ! voir commentaire de Raphael.
Qu'une image est extensible entre 20 et 25% de sa taille (à la réduction comme à l'agrandissement). J'ai constaté qu'à 25% des dégradations sont perceptibles à l’œil ; 20% est plus raisonnable.
Par exemple, si tu as :
@media all and (max-width: 300px) {
img { width: 100%; Margin: 0;}}
Considère l'image à charger comme devant mesurer 300px - 20% soit 240px car l'utilisateur dont l'écran mesure 300px de large affichera ton image sur 300px - (le cadre du navigateur + la largeur de l’ascenseur + émargements) donc pour une image à 240 le rendu sera nickel.
Ensuite c'est simple, tu calculs les différents paliers qui te sont nécessaires pour charger une image à +/- 20% de sa taille.
Côté intégration de ces images, je t'invite à suivre l'article
Images responsives: picture et srcset sur La Cascadeainsi tes images seront complètement responsives et leur poids adapté.
PS : Je ne sais pas si tu l'as vu mais j'ai ajouté un complément d'information à ta question dans la rubrique Css. Heu non, rubrique Web Mobile. Si ça peut aider.
Modifié par Greg_Lumiere (02 May 2016 - 17:58)
