L'attribut <code>sizes</code> associé à l'attribut <code>srcset</code> fournit des informations sur l'espace occupé par ces images dans la fenêtre (viewport) à différents points de rupture du navigateur, mais les rapports d'aspect doivent rester les mêmes pour tous ces points de rupture. Une fois que l'option pour les tailles est sélectionnée, il est possible d'indiquer au navigateur la taille de cette image par rapport à la mise en page du site, en utilisant le champ <em>Tailles</em>. Pour une hero image qui remplit toujours l'écran entier, il suffirait de saisir <code>100vw</code>, 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 (vewport), mais seulement 40 % de l'écran lorsque la fenêtre (viewport) est plus grande que 40em (généralement 640px), il faudrait saisir <code>"(min-width: 40em) 40vw, 90vw"</code> dans le champ <em>Tailles</em>. Le dernier élément de la liste séparée par des virgules est la taille à utiliser pour la fenêtre (viewport) la plus petite : les autres éléments de la liste séparée par des virgules doivent avoir une condition de média associée à une largeur d'image. <em>Une condition de média</em> est similaire à une requête de média (media query), souvent un min-width associé à une largeur de fenêtre (viewport) en utilisant les unités em ou px : par exemple, <code>(min-width: 640px)</code> ou <code>(min-width: 40em)</code>. Celle-ci est associée à la <em>largeur de l'image</em> pour cette taille de 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 au lieu d'un pourcentage, car le pourcentage se réfère toujours à la largeur de toute la fenêtre (viewport).