Refresh desktop screenshots across the website and README

README.md

@@ -16,9 +16,9 @@ shell, native settings, live-reloading themes and wallpapers, desktop widgets,
 fluid animations, and scrolling and tiling layouts work together as one
 cohesive experience—beautiful by default and unmistakably yours.
 
-![Ferese desktop with a stacked clock widget, compact workspace bar, and control center](docs/images/ferese-desktop.png)
+![Ferese Blue desktop with Settings, Control Center, and a clock widget](docs/images/ferese-desktop.webp)
 
-## One cohesive desktop
+## Why Ferese
 
 - **Flexible layouts:** scrolling columns, tree tiling, floating windows and a
   workspace overview.
@@ -31,6 +31,11 @@ cohesive experience—beautiful by default and unmistakably yours.
 - **Screen sharing:** a native display picker and PipeWire video streams for
   portal-compatible recording and conferencing apps.
 
+![Ferese Overview showing open windows and two workspace thumbnails](docs/images/ferese-overview.webp)
+
+The overview brings windows and workspaces into one view. Read more about
+[why Ferese builds the compositor and shell together](docs/why-ferese.md).
+
 ## Make it yours
 
 Use the native Settings app for everyday customization, or edit
@@ -38,7 +43,7 @@ Use the native Settings app for everyday customization, or edit
 changes as you make them and keeps the last working configuration if an edit is
 invalid.
 
-![Ferese Settings showing the Monochrome theme and appearance presets](docs/images/ferese-monochrome.png)
+![Ferese Settings and Control Center sharing the Gruvbox theme](docs/images/ferese-gruvbox.webp)
 
 Choose a preset or build your own look. Window behavior, gestures, shortcuts,
 rules, displays, widgets and login items are configurable too. Start with the

docs/why-ferese.md

@@ -43,6 +43,8 @@ widgets, and native lock screen together. Managed windows have their own radius
 because they are a different kind of surface, but each value still has one clear
 meaning wherever it is used.
 
+![Ferese Settings and Control Center sharing the Gruvbox theme](images/ferese-gruvbox.webp)
+
 In an assembled desktop, making the same visual change may mean editing the
 window manager, bar CSS, launcher theme, notification daemon, and lock screen
 config separately, then keeping those values aligned as the setup changes.
@@ -53,6 +55,8 @@ the compositor, and builds the overview from the real window scene. Focus,
 fullscreen, workspace geometry, and input all work from the same state rather
 than waiting for separate tools to catch up with one another.
 
+![Ferese Overview showing open windows and two workspace thumbnails](images/ferese-overview.webp)
+
 When a window opens, Ferese can handle the result as one transition:
 
 ```text

scripts/build-site.py

@@ -27,8 +27,7 @@ for name in ('index.html', 'styles.css', 'app.js'):
     shutil.copy2(ROOT / 'site' / name, OUTPUT / name)
 (OUTPUT / 'assets').mkdir(exist_ok=True)
 shutil.copytree(ROOT / 'site/assets', OUTPUT / 'assets', dirs_exist_ok=True)
-for name in ('ferese-desktop.png', 'ferese-monochrome.png'):
+shutil.copytree(ROOT / 'docs/images', OUTPUT / 'assets', dirs_exist_ok=True)
-    shutil.copy2(ROOT / 'docs/images' / name, OUTPUT / 'assets' / name)
 shutil.copy2(ROOT / 'packaging/icons/ferese.svg', OUTPUT / 'assets/ferese.svg')
 (OUTPUT / 'docs').mkdir(exist_ok=True)
 (OUTPUT / '.nojekyll').touch()
@@ -71,6 +70,16 @@ for page_number, (slug, title, source) in enumerate(PAGES):
         for child in token.children or []:
             if child.type == 'link_open':
                 child.attrSet('href', rewrite_link(child.attrGet('href'), source))
+            elif child.type == 'image':
+                image = urlsplit(child.attrGet('src'))
+                if not image.scheme and not image.netloc:
+                    path = (source.parent / image.path).resolve()
+                    relative = path.relative_to(ROOT / 'docs/images')
+                    if not path.is_file():
+                        raise FileNotFoundError(path)
+                    child.attrSet('src', f'../assets/{relative.as_posix()}')
+                child.attrSet('loading', 'lazy')
+                child.attrSet('decoding', 'async')
     search_index.extend(sections)
     body = md.renderer.render(tokens, md.options, {})
     body = body.replace('<table>', '<div class="table-scroll" tabindex="0" role="region" aria-label="Reference table"><table>').replace('</table>', '</table></div>')

site/index.html

@@ -63,11 +63,11 @@
       </section>
       <figure class="product-screenshot page-width">
         <a
-          href="assets/ferese-desktop.png"
+          href="assets/ferese-desktop.webp"
           aria-label="View the full-resolution Ferese desktop screenshot"
         >
           <img
-            src="assets/ferese-desktop.png"
+            src="assets/ferese-desktop.webp"
             width="2880"
             height="1800"
             alt="Ferese Blue desktop with the default wallpaper, Settings, Control Center and clock widget"