I am using VueJS for developing a website. The website uses an image as a global background, which I set up in the styling section of my App.vue like the following:
<style lang="scss">
...
// Mobile version
@media only screen and (max-width: 600px) {
#app {
background: url("assets/bg-mobile.png") no-repeat fixed;
background-size: 100%;
}
}
// Desktop version
@media only screen and (min-width: 600px) {
#app {
background: url("assets/bg-desktop.png") no-repeat center center
fixed;
background-size: 100%;
padding: 0;
}
}
...
</style>
This works well, but in production, the background loads very slowly, "stripe by stripe", especially for the desktop version. It is 2500 by 1667 px, for a size of 5.41MB. It sounds a lot but I would like the website background not to look pixellated.
Is there any thing I can do? Playing on the color resolution? At least, can I prevent the page from rendering while the background isn't ready?
I am using an Amazon S3 bucket to deploy my app.
5.14MB is quite a large resource that the user has to download. You can probably prevent the page from loading before the background is ready, but that will really hurt SEO (not sure if that matters to you) and for users with a slow connection the page will take a very long time to load. So I wouldn't use this approach.
You should try and optimise the image as much as you can to reduce it's size. Try to make it no bigger than it needs to be.
If it's a jpeg then you could look into using progressive jpeg:
https://www.thewebmaster.com/dev/2016/feb/10/how-progressive-jpegs-can-speed-up-your-website/
Another option might be to show a default background (just a colour similar to the image), and display the image once it's fully loaded. This way the page load is not blocked by the image. And then the imaged will be cached by the browser, so on future page requests it will be much faster.
This is just my take on it though.