Une fois que l'option tailles est sélectionnée, vous pouvez laisser le navigateur connaître la taille de cette image par rapport à la mise en page, en utilisant le champ <em>Tailles</em>. Pour une hero image qui remplit toujours l'écran entier, vous pouvez simplement saisir 100vw, ce qui signifie 100% de la largeur de la fenêtre (viewport). Pour une image qui remplit 90% de l'écran pour les petites fenêtres (viewport), mais remplit uniquement 40% de l'écran lorsque la fenêtre (viewport) est plus grande que 40em (typiquement 640px), vous pouvez saisir "(min-width: 40em) 40vw, 90vw" dans le champ Tailles. Le dernier élément dans la liste d'éléments séparés par des virgules est la taille de fenêtre (viewport) la plus petite : les autres éléments dans la liste séparés par des virgules doivent avoir une condition de media associée avec une largeur d'image. <em>Les conditions de media</em> sont similaires à une requête de média (media query), souvent un min-width associé à une largeur de fenêtre (viewport) utilisant les unités em ou px : par ex. (min-width: 640px) ou (min-width: 40em). Cela est associé avec la <em>largeur d'image</em> à la taille de la fenêtre (viewport) en utilisant les unités px, em ou vw. L'unité vw est la largeur de la fenêtre (viewport) et est utilisée à la place d'un pourcentage car le pourcentage référence toujours la largeur de la fenêtre (viewport) complète.