🔥 SvelteKit WebP Background Image with Fallback
A SvelteKit Next-Gen background image is not too difficult to generate. In this video we clarify what we are taking about by Next-Gen background images. Then we see how you can use the
vite-imagetools plugin automatically to generate WebP background images for you. These have the advantage of being smaller than less cutting-edge formats such as JPEG and PNG. The upshot is the page loads faster, users get a better experience and Google becomes more comfortable with ranking your site higher.
We are talking about an image that you set as the background of a DOM element using CSS. The trickiest part here is not creating the modern format image, but making sure a fallback JPEG is shown in browsers which don't yet support Next-Gen formats.
If you are looking for how to add responsive, Next-Gen images as
picture elements, then you should certainly check out the recent article which covers exactly that.
📹 SvelteKit Next-Gen Background Image: Video
svelte.config.js — click to expand code.
SvelteKit Next-Gen Background Image Svelte Code
src/routes/lazyload.svelte — click to expand code.
🔗 SvelteKit Next-Gen Background Image: Links
- How to set up a Progressive Web App (PWA) in SvelteKit,
- About WebP Images ,
- Core Web Vitals ,
- MDN Subresource Integrity Docs
🙏🏽 SvelteKit Next-Gen Background Image: Feedback
If you have found this video useful, see links below for further related content on this site. I do hope you learned one new thing from the video. Let me know if there are any ways I can improve on it. I hope you will use the code or starter in your own projects. Be sure to share your work on Twitter, giving me a mention so I can see what you did. Finally be sure to let me know ideas for other short videos you would like to see. Read on to find ways to get in touch, further below. If you have found this post useful, even though you can only afford even a tiny contribution, please consider supporting me through Buy me a Coffee.
Finally, feel free to share the post on your social media accounts for all your followers who will find it useful. As well as leaving a comment below, you can get in touch via @askRodney on Twitter and also askRodney on Telegram . Also, see further ways to get in touch with Rodney Lab. I post regularly on SvelteKit as well as Search Engine Optimisation among other topics. Also subscribe to the newsletter to keep up-to-date with our latest projects.