Opens an external site in a new window
Mental Health Awareness Month
“Community”
RODNEY LAB
  • Home
  • Plus +
  • Newsletter
  • Links
  • Profile
RODNEY LAB
  • Home
  • Plus +
  • Newsletter
  • Links

SvelteKit Next‑Gen Background Image # SvelteKit Next-Gen Background Image #

blurry low resolution placeholder image SvelteKit Next-Gen Background Image
  1. Home Rodney Lab Home
  2. Blog Posts Rodney Lab Blog Posts
  3. SvelteKit SvelteKit Blog Posts
<PREVIOUS POST
NEXT POST >
LATEST POST >>

SvelteKit Next‑Gen Background Image #

Updated 6 months ago
3 minute read
Gunning Fog Index: 5.6
Content by Rodney
blurry low resolution placeholder image Author Image: Rodney from Rodney Lab
SHARE:

🔥 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 talking 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 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 img or picture elements, then you should certainly check out the recent article which covers exactly that.

📹 SvelteKit Next‑Gen Background Image: Video #

Please enable JavaScript to watch the video 📼

SvelteKit Next-Gen Background Image

🖥 Code #

Configure vite‑imagetools #

vite.config.js — click to expand code.
vite.config.js
javascript
    
1 import { sveltekit } from '@sveltejs/kit/vite';
2 import { imagetools } from 'vite-imagetools';
3 import { defineConfig } from 'vite';
4
5 /** @type {import('vite').UserConfig} */
6 export default defineConfig({
7 css: {
8 preprocessorOptions: {
9 scss: {
10 additionalData: "@use 'variables.scss';",
11 loadPaths: ['src/lib/styles'],
12 },
13 },
14 },
15 plugins: [sveltekit(), imagetools()],
16 });
Configuring vite-imagetools

SvelteKit Next‑Gen Background Image Svelte Code #

src/routes/+page.svelte — click to expand code.
src/routes/+page.svelte
svelte
    
1 <script>
2 import { browser } from '$app/environment';
3 import backgroundImage from '$lib/assets/sunflower.jpg';
4 import backgroundImageWebp from '$lib/assets/sunflower.jpg?format=webp';
5
6 function serveWebp() {
7 return browser && document.documentElement.classList.contains('webp');
8 }
9
10 let backgroundImageUsed = $derived(serveWebp() ? backgroundImageWebp : backgroundImage);
11 </script>
12
13 <svelte:head>
14 <title>Sunflower Poem</title>
15 <meta name="description" content="A poem about sunflowers" />
16 <meta name="theme-color" content="#ffdf00" />
17 <link rel="apple-touch-icon" href="/icons/icon-192x192.png" />
18 <script
19 async
20 integrity="sha384-xms8Nhw0czGEIWf0BZpCsaCY9PPeFf6bJ6cG0CNYoVvDK3M0146DNIywperKRSNI"
21 src="/modernizr-webp.js"
22 ></script>
23 </svelte:head>
24
25 <div class="container" style:background-image={`url(${backgroundImageUsed})`}>
26 <div class="panel">
27 <div class="content">
28 <h1>The Soul of the Sunflower</h1>
29 <h2>by Sara Jewett</h2>
30 <blockquote>
31 <p>The warm sun kissed the earth</p>
32 <p>To consecrate thy birth,</p>
33 <p>And from his close embrace</p>
34 <p>Thy radiant face</p>
35 <p>Sprang into sight,</p>
36 <p>A blossoming delight.</p>
37 </blockquote>
38 </div>
39 </div>
40 </div>
41
42 <style lang="scss">
43 .container {
44 display: flex;
45 background-color: variables.$color-theme-2;
46 background-position: center center;
47 background-size: cover;
48 width: 100%;
49 min-height: 100vh;
50 padding: variables.$spacing-12;
51 }
52
53 .panel {
54 background: rgba(variables.$color-theme-3, variables.$alpha: 0.81);
55 box-shadow: variables.$spacing-0 variables.$spacing-0 variables.$spacing-1 variables.$spacing-0
56 variables.$color-theme-4;
57 border-radius: variables.$spacing-4;
58 color: #502419;
59 margin: auto;
60 padding: variables.$spacing-6 variables.$spacing-24;
61 height: 100%;
62 }
63
64 .content {
65 padding: variables.$spacing-4;
66 }
67
68 h1,
69 h2,
70 p {
71 font-family:
72 Playfair Display,
73 Times New Roman,
74 Times,
75 serif;
76 }
77 p {
78 font-weight: variables.$font-weight-bold;
79 font-family:
80 Lato,
81 Playfair Display,
82 Times New Roman,
83 Times,
84 serif;
85 font-size: variables.$font-size-2;
86 }
87 </style>
SvelteKit Next-Gen Background Image: Svelte code.

You can see the full code for creating a SvelteKit Next-Gen background image on the Rodney Lab Git Hub repo .

🗳 Poll #

I try to keep these videos short and to the point, though this one ended up a little longer. Do you mind longer videos?
Voting reveals latest results.

🔗 SvelteKit Next‑Gen Background Image: Links #

  • How to set up a Progressive Web App (PWA) in SvelteKit
  • vite-imagetools 
  • About WebP Images 
  • Core Web Vitals 
  • Modernizr WebP JavaScript snippet download 
  • 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 Optimization among other topics. Also, subscribe to the newsletter to keep up-to-date with our latest projects.

Thanks for reading this post. I hope you found it valuable. Please get in touch with your feedback and suggestions for posts you would like to see. Read more about me …

blurry low resolution placeholder image Rodney from Rodney Lab
TAGS:
SVELTEKITCSSOPTIMIZATION

Reposts:

Reposts

  • TSR Codes profile avatar
  • faure gerald profile avatar
  • coadtan profile avatar
  • {PuruVijay}.svelte profile avatar
  • George Ciubotaru profile avatar
  • Svelte Society 🧡 profile avatar
  • silvestre::vivo 💻 profile avatar

Likes:

Likes

  • TSR Codes profile avatar
  • ceednee profile avatar
  • James profile avatar
  • André de Albuquerque profile avatar
  • uptonking profile avatar
  • Scott Spence 🌮 profile avatar
  • Wilson Naranjo profile avatar
  • flease profile avatar
  • Jonathan Hart profile avatar
  • Voju Lucian profile avatar
  • Björn Theart profile avatar
  • Olivier Melcher profile avatar
  • Kematzy profile avatar
  • Dave Porter profile avatar
  • Ryan Arpe profile avatar
  • zer👀finding profile avatar
  • Porfírio 🇵🇹 profile avatar
  • Mika profile avatar
Reposts & likes provided by Mastodon & X via Webmentions.

Related Post

blurry low resolution placeholder image Svelte CSS Image Slider: with Bouncy Overscroll

Svelte CSS Image Slider: with Bouncy Overscroll

sveltekit
<PREVIOUS POST
NEXT POST >
LATEST POST >>

Leave a comment …

Your information will be handled in line with our Privacy Policy .

Ask for more

1 Nov 2022 — Astro Server-Side Rendering: Edge Search Site
3 Oct 2022 — Svelte eCommerce Site: SvelteKit Snipcart Storefront
1 Sept 2022 — Get Started with SvelteKit Headless WordPress

Copyright © 2020 – 2025 Rodney Johnson. All Rights Reserved. Please read important copyright and intellectual property information.

  • Home
  • Profile
  • Plus +
  • Newsletter
  • Contact
  • Links
  • Terms of Use
  • Privacy Policy
We use cookies  to enhance visitors’ experience. Please click the “Options” button to make your choice.  Learn more here.