Establecer el tamaño de la imagen en `ImageView` en el botón donde la imagen se establece usando css

He utilizado fitWidthy preserveRatioel tamaño de la ImageViewde la FXML, pero la imagen no se adapta a él, sino que muestra su tamaño completo (demasiado grande en mi caso). ¿Cómo configuro el tamaño de la imagen usando FXML o css?

FXML

<Button
        fx:id="buttonUp"
        GridPane.columnIndex="0"
        GridPane.rowIndex="0"
        onAction="#buttonUp">
    <graphic>
        <ImageView fitWidth="10.0" pickOnBounds="true" preserveRatio="true">
        </ImageView>
    </graphic>
</Button>

CSS

#buttonUp {
    -fx-graphic: url('up.png');
}

#buttonUp:pressed {
    -fx-graphic: url("up_pressed.png");
}

No quiero una solución de código JavaFX porque quiero mantener mi estilo en fxml y css.

Si esto realmente no es posible en FXML o css, entonces concedería hacerlo con Java, en ese caso, simplemente deje un comentario.

Imagen en FXML

Cuando lo intento

<ImageView id="buttonDownImage" fitHeight="40.0" fitWidth="40.0" pickOnBounds="true" preserveRatio="true">
    <image>
        <Image url="resources/down.png" />
    </image>
</ImageView>

Luego sigue un java.lang.IllegalArgumentException: Invalid URL: Invalid URL or resource not foundtiempo, estoy seguro de que el archivo está allí (el css podría encontrarlo) y el autocompletado de IntellJ incluso sugirió comenzar con resourcesla URL.