Tip: Explicitly set size of Embedded object for images via ThemeResource.

I am using
in an
object to show images in my Vaadin layouts. I do so because the web browser loads those directly from the web server, as a static file fetch, outside of the Vaadin framework. The “VAADIN/themes/mytheme/images” folder is available to the web server for direct serving. No need to store copies of those images in memory on the server in my Vaadin app sessions.

This approach works well except for one thing: A visual anomaly. The first time the user loads my layout, Vaadin quickly draws the layout. But Vaadin & the browser do not know the size of the image yet to be loaded, so no room is allocated on screen. A moment later the browser loads the static image from the web server, and determines its size. The browser then juggles the rendering of my Vaadin layout to make room for the image. This happens quickly, split-second, but the user has enough time to see my layout bouncing around erratically. While users may be used to that with many other web pages, there is a simple fix in Vaadin.

This fix is the same fix used in simple HTML web pages: Explicitly specify the size of the image to be loaded. Rather than let the browser load the image and determine the size, tell the browser the size ahead of time. When the Vaadin layout is first rendered in the browser, the pixels are assigned immediately to make room for the image not yet loaded. When the image loads a moment later, the user does not really notice as the layout is no longer bouncing around to changing its arrangement.

Like this in Vaadin:

Embedded reindeerImage = new Embedded( null, new ThemeResource( "images/reindeer.png" ) );
reindeerImage.setWidth( "240px" ); 
reindeerImage.setHeight( "180px" );

The fix is easy. But of course maintenance is an issue: If you change the image, then you will need to update your Vaadin source code to match.

good tip! I experienced the same. Same holds for icons in buttons.

how to add icon in grid column through container property