Have you ever faced the situation where the layout of your beautifully crafted interface "breaks" if the image (depeding on the quality of your user's connections) takes some time to load? Something like the example below:
This happens because the browser has no clue about the dimensions of the image you want to display on your content beforehand.
The easiest way to solve this issue is using the
aspect-ratio property to tell the browser how much space (based on the user's size display) it should reserve before the image is loaded. Check the difference:
So, it solves the sudden layout change, but we can do even better do better adding an animated background.
Displaying an animated background
You can give a hint for the user that the blank space on your app should be filled with something by adding a background color or animating the transition between two o more colors, like in the example below:
And our code will look like this:
And this is the result (check the code on CodePen):
Yet, this can be even better by displaying a colorful background that matches the image colors.
Displaying colorful image placeholders
BlurHash is a compact representation of a placeholder for a image. You use it to process your image before sending it to the browser and you'll get a string of 20-30 characters that the algorithm can turn into a blurred image that you can show to your user before the actual image is downloaded. Check how it looks like:
I have implemented that last effect in React for the sake of simplicity and time, but you can re-implement it in whatever framework you like. Just pay attention to the
onLoad event that changes the opacity of the image.