JavaFX Scene Builder, multiple ImageViews with the same image - performance

Question

I have placed a few image views to the scene, all pointing to the same image with different
viewports.
generated fxml:
<AnchorPane maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="400.0" prefWidth="600.0" xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1">
<children>
<ImageView fitHeight="150.0" fitWidth="200.0" layoutX="80.0" layoutY="91.0" pickOnBounds="true" preserveRatio="true">
<image>
<Image url="#../../../../../Pictures/sas.png" />
</image>
<viewport>
<Rectangle2D height="50.0" minY="50.0" width="50.0" />
</viewport>
</ImageView>
<ImageView fitHeight="150.0" fitWidth="200.0" layoutX="308.0" layoutY="91.0" pickOnBounds="true" preserveRatio="true">
<viewport>
<Rectangle2D height="50.0" minX="50.0" minY="50.0" width="50.0" />
</viewport>
<image>
<Image url="#../../../../../Pictures/sas.png" />
</image>
</ImageView>
<ImageView layoutX="225.0" layoutY="250.0">
<image>
<Image url="#../../../../../Pictures/sas.png" />
</image>
</ImageView>
</children>
Question is, will this create 3 instances of the same image in memory?
If yes, then what is the best ways to avoid it, url("") in style attribute, css class? I would like to avoid creating css class for each individual icon!
Is it even worth using single large croped image for multiple icons & UI elements instead of small image for each at this day & age?

Answer 1

A quick test shows that the ImageViews do not reference the same Image in memory.
To do so, you can either used css as you described, or you can define the Image once in the FXML with an <fx:define> block and reference it via its fx:id attribute:
<fx:define>
<Image url="#../../../../../Pictures/sas.png" fx:id="sasImage" />
</fx:define>
<ImageView image="$sasImage" fitHeight="150.0" fitWidth="200.0" layoutX="80.0" layoutY="91.0" pickOnBounds="true" preserveRatio="true">
<viewport>
<Rectangle2D height="50.0" minY="50.0" width="50.0" />
</viewport>
</ImageView>
<ImageView image="$sasImage" fitHeight="150.0" fitWidth="200.0" layoutX="308.0" layoutY="91.0" pickOnBounds="true" preserveRatio="true">
<viewport>
<Rectangle2D height="50.0" minX="50.0" minY="50.0" width="50.0" />
</viewport>
</ImageView>
<ImageView image="$sasImage" layoutX="225.0" layoutY="250.0">
</ImageView>