1486 sujets

Web Mobile et responsive web design

Bonjour.
je voudrais passer mes sites en responsive design, je suis en train de regarder le pb des images
Sur le tuto d'alsacréation ils parlent de iphone 3 et de 320 pixels de lage. Mes images sont en général de 500 pixels de large.
Donc ma question : est ce que 500 pixels de large c'est pas trop pour les smartphones de maintenat? cela éviterai d'utiliser srcset
merci de vos réponses Smiley smile
Modifié par edgard03 (23 May 2021 - 15:02)
Bonjour.
sur les tuto d'alsacréation, j'ai vu qu'il y a des outils dans les navigateurs, pour voir le rendu et comment utiliser srcset.
merci
edgard03 a écrit :
Bonjour.
je voudrais passer mes sites en responsive design, je suis en train de regarder le pb des images
Sur le tuto d'alsacréation ils parlent de iphone 3 et de 320 pixels de lage. Mes images sont en général de 500 pixels de large.
Donc ma question : est ce que 500 pixels de large c'est pas trop pour les smartphones de maintenat? cela éviterai d'utiliser srcset
merci de vos réponses Smiley smile


En fait 500px de large c'est même pas assez pour les smartphones actuels qui ont des écrans haute résolution.
A partir de l'iphone 4 (2010 !), l'écran est 'retina' avec une largeur logique de 320px mais une définition réelle de 640px de large.
Je pense qu'il convient donc d'avoir une image de 640px de large au minimum pour une pleine largeur et demander son affichage en 320px de large... ou mieux, pour du responsive, en 100vw de large.
Toutefois cette image paraitra pixelisée sur un écran d'ordi (1920px de large pour un simple FullHD). Donc soit tu prends des grandes images et ça ne va pas plaire à Google parce que ce n'est pas mobile-friendly, soit tu passes au srcset...
edgard03 a écrit :
Bonjour.
sur les tuto d'alsacréation, j'ai vu qu'il y a des outils dans les navigateurs, pour voir le rendu et comment utiliser srcset.
merci


Pour voir le rendu dans différentes taille d'écran, tu as dans Firefox : Outils > Développement web > Vue adaptative. Sinon tu peux simplement faire varier la taille de ta fenêtre.