Utiliser des images de maquettage
Le site placeholder.com génère automatiquement les images présentées sur cette page (mis à part l'icône Font Awesome présentée plus bas). Pour l'image d'entête il a juste été nécessaire de mentionner l'url suivante en source : http://via.placeholder.com/1200x900. Pour l'image placée dans le corps de l'article l'url en source est la suivante : http://via.placeholder.com/450x600.
Les images proposées se composent d'un fond gris sur lequel est mentionné la dimension de l'image (en pixels). La détermination de la taille des images doit prendre en compte leur affichage sur des écrans de différentes dimensions et résolutions. En faisant varier la dimension de la fenêtre de votre navigateur vous pouvez observer le comportement des images importées. Celles-ci s'adaptent à la largeur de la fenêtre en fonction du code dont elles dépendent
Initialement, le comportement de l'image situé à droite de ce paragraphe (sur un écran desktop et une large fenêtre de navigation) était différent. Lorsque vous réduisiez la largeur de la fenêtre de navigation, il arrivait un moment où la partie droite de l'image était masquée. Si vous réduisiez encore la fenêtre, l'image se positionnait à un moment donné sous le texte. Elle était alors de nouveau visible dans sa totalité. Vous pouvez constater ce comportement en supprimant la classe “w3-image” attribué à l'image en question.