Nezo96-39273050's avatar

Otimize background image loading ?

Hello guys, i want to ask if it is possible to load background img faster or smoother (example lower) ? Or you would add some additional bg color to display behind img to make it more pleasant to user eye ? Basicaly i want to eliminate white bg on first load of website. I use tailwind and bg image is hosted on my site.

bg-[url('../../storage/app/public/images/voicu-apostol-93F3aiv_ioM-unsplash_bg.jpg')]

background image loading gif

0 likes
2 replies
Snapey's avatar

It should not be possible to access images inside the storage/app/public folder since this is private to your app

You should run the artisan storage:link command and access images at public/storage

If you want to force a color on an image element before the image is loaded, you could put a style tag on the image so that it appears with style immediately on page load

martinbean's avatar
Level 80

@nezo96-39273050 Yes, you could find the average colour of the image and use that as a placeholder background colour whilst the image is loaded.

Unfortunately, there’s no way to make images load faster without optimising them/compressing them, otherwise everyone would just do that in the first place.

Please or to participate in this conversation.