This is an automated email from the ASF dual-hosted git repository.
wu-sheng pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/skywalking-website.git
The following commit(s) were added to refs/heads/master by this push:
new c5928423d99 docs(blog): convert Meet Horizon UI part 1-3 screenshots
to WebP (q88) (#861)
c5928423d99 is described below
commit c5928423d99c6f359c5f6335d2bed62fb94f3264
Author: 吴晟 Wu Sheng <[email protected]>
AuthorDate: Mon Jun 22 10:06:33 2026 +0800
docs(blog): convert Meet Horizon UI part 1-3 screenshots to WebP (q88)
(#861)
Replaces the 19 PNG screenshots in parts 1-3 (8.3 MB) with q88 WebP (1.9
MB, ~78% smaller) and updates the posts' image references, to cut page weight
and speed loading. WebP is universally supported; the shots render at well
under a third of their native pixel size, so q88 is visually lossless here. The
home-page map3d poster (/images/home/) is left untouched.
---
.../2026-06-21-horizon-ui-dashboards-and-mqe/index.md | 14 +++++++-------
.../index.md | 14 +++++++-------
.../index.md | 10 +++++-----
.../p01-intro-01-sidebar-is-the-estate.png | Bin 1118441 -> 0 bytes
.../p01-intro-01-sidebar-is-the-estate.webp | Bin 0 -> 150136 bytes
.../horizon-0.7.0/p01-intro-02-layer-drilldown.png | Bin 564820 -> 0 bytes
.../horizon-0.7.0/p01-intro-02-layer-drilldown.webp | Bin 0 -> 231812 bytes
.../p01-intro-03-empty-no-dashboard-configured.png | Bin 413159 -> 0 bytes
.../p01-intro-03-empty-no-dashboard-configured.webp | Bin 0 -> 73990 bytes
.../horizon-0.7.0/p01-intro-04-fold-rail.png | Bin 1039247 -> 0 bytes
.../horizon-0.7.0/p01-intro-04-fold-rail.webp | Bin 0 -> 121430 bytes
.../screenshots/horizon-0.7.0/p01-intro-04-resize.png | Bin 774620 -> 0 bytes
.../horizon-0.7.0/p01-intro-04-resize.webp | Bin 0 -> 108874 bytes
.../horizon-0.7.0/p02-dashboards-01-instance-jvm.png | Bin 202568 -> 0 bytes
.../horizon-0.7.0/p02-dashboards-01-instance-jvm.webp | Bin 0 -> 99322 bytes
.../horizon-0.7.0/p02-dashboards-02-instance-go.png | Bin 186376 -> 0 bytes
.../horizon-0.7.0/p02-dashboards-02-instance-go.webp | Bin 0 -> 137106 bytes
.../p02-dashboards-03-si-suffix-axis.png | Bin 53621 -> 0 bytes
.../p02-dashboards-03-si-suffix-axis.webp | Bin 0 -> 22734 bytes
.../p02-dashboards-04-enum-duration-cards.png | Bin 101751 -> 0 bytes
.../p02-dashboards-04-enum-duration-cards.webp | Bin 0 -> 55508 bytes
.../p02-dashboards-05-synced-crosshair.png | Bin 86985 -> 0 bytes
.../p02-dashboards-05-synced-crosshair.webp | Bin 0 -> 40108 bytes
.../p02-dashboards-06-record-jump-to-trace.png | Bin 309421 -> 0 bytes
.../p02-dashboards-06-record-jump-to-trace.webp | Bin 0 -> 193582 bytes
.../p02-dashboards-07-pinned-entities.png | Bin 317919 -> 0 bytes
.../p02-dashboards-07-pinned-entities.webp | Bin 0 -> 144964 bytes
.../horizon-0.7.0/p03-topology-01-service-map.png | Bin 838504 -> 0 bytes
.../horizon-0.7.0/p03-topology-01-service-map.webp | Bin 0 -> 120640 bytes
.../horizon-0.7.0/p03-topology-02-filter-denoise.png | Bin 630180 -> 0 bytes
.../horizon-0.7.0/p03-topology-02-filter-denoise.webp | Bin 0 -> 83834 bytes
.../horizon-0.7.0/p03-topology-03-group-selector.png | Bin 648695 -> 0 bytes
.../horizon-0.7.0/p03-topology-03-group-selector.webp | Bin 0 -> 85036 bytes
.../horizon-0.7.0/p03-topology-04-instance-map.png | Bin 465675 -> 0 bytes
.../horizon-0.7.0/p03-topology-04-instance-map.webp | Bin 0 -> 82240 bytes
.../horizon-0.7.0/p03-topology-05-api-dependency.png | Bin 198306 -> 0 bytes
.../horizon-0.7.0/p03-topology-05-api-dependency.webp | Bin 0 -> 83966 bytes
.../p03-topology-06-smartscape-expand.png | Bin 297641 -> 0 bytes
.../p03-topology-06-smartscape-expand.webp | Bin 0 -> 38260 bytes
.../horizon-0.7.0/p03-topology-06-smartscape.png | Bin 284846 -> 0 bytes
.../horizon-0.7.0/p03-topology-06-smartscape.webp | Bin 0 -> 39432 bytes
41 files changed, 19 insertions(+), 19 deletions(-)
diff --git a/content/blog/2026-06-21-horizon-ui-dashboards-and-mqe/index.md
b/content/blog/2026-06-21-horizon-ui-dashboards-and-mqe/index.md
index 1a4297bf4ce..c2b1882b1e9 100644
--- a/content/blog/2026-06-21-horizon-ui-dashboards-and-mqe/index.md
+++ b/content/blog/2026-06-21-horizon-ui-dashboards-and-mqe/index.md
@@ -35,10 +35,10 @@ There are two kinds of gate:
Because the gate is evaluated **server-side**, a non-JVM instance doesn't just
hide the JVM tiles — the BFF never sends their queries to OAP at all. Open the
same Instance dashboard for a JVM service and a non-JVM one and you're looking
at one template adapting itself, not two hand-built pages:
-
+
Figure 1: On a JVM instance the JVM widgets render — their `visibleWhen` gate
holds.</br>
-
+
Figure 2: The same dashboard on a Go instance — the JVM widgets aren't there,
and their queries never ran. One template, adapting to the entity.</br>
## Numbers humans can read
@@ -49,31 +49,31 @@ Raw metrics are not always readable metrics. Horizon's
widgets format three case
- **`duration`** — a metric in seconds renders as a human time-ago: **`5m 20s
ago`**, compact to `5m` / `2h` on an axis.
- **SI suffixes** — large magnitudes on chart axes and tooltips read as
**`45.1k`**, **`1.34M`**, **`2.5G`** rather than `4.51e4`, with the axis tick
and its hovered value sharing one notation.
-
+
Figure 3: Dense byte and count series get compact SI suffixes, axis and
tooltip in step.</br>
-
+
Figure 4: The `enum` and `duration` formats in action on BanyanDB's lifecycle
cards — `OK` instead of `1`, "5m 20s ago" instead of a seconds count.</br>
## Read the whole grid as one timeline
Every `line` chart on a page shares **one hover cursor**. Point at minute 32
on the throughput chart and minute 32 lights up on the latency chart, the
error-rate chart, and every sparkline tile. The contract is enforced at the
chart-wrapper level — no widget can opt out — so the page reads as a single
coordinated view of one moment, not a dozen independent charts. The
multi-series tooltip is a fixed, aligned table that shows each series'
**title** (never the raw MQE), with values in one [...]
-
+
Figure 5: One cursor moves across every line chart on the page, so you read
the same instant everywhere at once.</br>
## From a slow row to its trace, in one click
`record` widgets — Slow Statements, Slow Commands, Slow Database Statements —
are lists of sampled records, and each row that carries a trace id gets a
**jump-to-trace** icon at its head that opens the originating trace's
waterfall. It resolves the trace **by id, not by layer**, which matters: the
Slow Statements on a Virtual Database / Cache / MQ service belong to the
*caller* on another layer, and a virtual-target layer has no traces tab of its
own — yet the jump still lands. The state [...]
-
+
Figure 6: From a slow statement to the trace that ran it — resolved by trace
id, so it works even on a virtual layer with no traces tab of its own.</br>
## Pin and compare entities
Sometimes one entity isn't enough. Horizon lets you **lock several services,
instances, or endpoints — even ones from different services — and compare them
in place**. Pin entities from the picker or the instance/endpoint list; the one
you're viewing is always part of the cohort (tagged `CURRENT`) and still drives
the header, and each pin adds its own hue. Every widget then compares inline —
line widgets overlay one series per entity, cards show a row each, `top` and
`record` widgets get [...]
-
+
Figure 7: Lock entities — even across services — and every line widget
overlays them hue-by-hue; the comparison bar holds the cohort while the CURRENT
entity still drives the header.</br>
## The time picker moves the *whole* dashboard
diff --git
a/content/blog/2026-06-21-horizon-ui-topology-and-dependency/index.md
b/content/blog/2026-06-21-horizon-ui-topology-and-dependency/index.md
index 188c8b6da48..3f9a3470502 100644
--- a/content/blog/2026-06-21-horizon-ui-topology-and-dependency/index.md
+++ b/content/blog/2026-06-21-horizon-ui-topology-and-dependency/index.md
@@ -24,45 +24,45 @@ Open any layer's **Topology** tab and you get a
left-to-right hierarchical servi
Here's the part worth stressing: every one of those is just the **General
layer's bundled default**. The node's center / ring / secondary metrics and the
edge metrics each live in the **Layer dashboards admin → Topology scope** as an
MQE expression with a unit and a role — so you can point any slot at a
different metric, and the same engine paints a different map for a different
layer, or for this one your way. (The choices travel with the layer template's
export/import, like everything else.)
-
+
Figure 1: One template-driven topology engine — health-banded hex nodes,
RPM-chipped edges, real component icons; every metric on it is configured per
layer.</br>
## Cut the noise
Real topologies are noisy — a dense map fills with conjectured peers OAP
couldn't fully resolve (a bare `rcmd:80`, an un-instrumented address).
Horizon's **Filter** control turns those off without hiding your real
dependencies. It derives one facet automatically — **by layer** — and presents
it exactly as the sidebar does: each row carries the layer's own icon and
localized name (*Virtual Database*, *Java Agent*, …), plus an **Others** bucket
for nodes OAP couldn't classify and a standal [...]
-
+
Figure 2: De-noise in one click — drop the unresolved "Others" peers and keep
your real dependencies.</br>
When a layer's services fall into OAP service groups, the map's service-focus
selector groups by them too, and clicking a group header **batch-selects or
clears every service in that group** — so you can focus a whole team's slice of
a busy map at once.
-
+
Figure 3: Focus a whole service group at once from the map's selector.</br>
## Drill from a call into its instances
A service-to-service edge is an aggregate — behind it are real instances
talking to real instances. Click a call on the map and choose **Instance map
→**, and Horizon draws exactly that: the client service's instances in the left
column, the server service's in the right, with the instance-level calls
between them, animated client→server. It reuses everything from the service map
— the health-ring nodes, the per-call client/server metric sidebar, a node
popover with **Open instance dashb [...]
-
+
Figure 4: Drill from an aggregate call into the instance-to-instance traffic
behind it.</br>
## Walk the request chain, endpoint by endpoint
Service topology answers "which services call this one." The **API
dependency** tab answers the sharper question — "which *endpoints* call this
endpoint, and which does it call." Pick an endpoint and it lays out in columns
by direction: callers on the left, the focus endpoint in the centre, callees on
the right, with the same SLA-coloured node border, the RPM and latency on every
edge, and the heaviest edge labeled. A selected node shows a single **+**
handle that pulls in *its* own call [...]
-
+
Figure 5: Walk the endpoint call chain a hop at a time, latency on every
edge.</br>
## One service, every layer it reports through
A single logical service often reports through several layers at once — a
General agent, a Service Mesh sidecar, the mesh data plane, a Kubernetes pod.
SkyWalking has modeled that cross-layer hierarchy since OAP 10; what Horizon
adds is making it **one click from anywhere on the map**. Select a node and
Horizon lazily probes its hierarchy — if the service has cross-layer peers, a
small **chevron-stack chip** clips to the node.
-
+
Figure 6: The chevron-stack chip on a selected node — lazily probed on
selection, it shows only when the service has cross-layer peers.</br>
Click the chip and the topology dims under a **Smartscape** overlay: the
focused node re-renders bright in place, and its peers fan out vertically by
OAP's layer order — request-near layers above, infra-near below. From there a
two-step click opens any peer in its own layer, pre-selected. (Auto-refresh
pauses while the overlay is open so nothing shifts under you.)
-
+
Figure 7: One service, every layer it reports through — the cross-layer
hierarchy as a one-click overlay on the map.</br>
## Where to go next
diff --git
a/content/blog/2026-06-21-skywalking-horizon-ui-introduction/index.md
b/content/blog/2026-06-21-skywalking-horizon-ui-introduction/index.md
index 54edabd03ef..e1e4a2ce8c8 100644
--- a/content/blog/2026-06-21-skywalking-horizon-ui-introduction/index.md
+++ b/content/blog/2026-06-21-skywalking-horizon-ui-introduction/index.md
@@ -18,7 +18,7 @@ Horizon is built around four verbs. You **observe** —
topology, traces, logs,
Open Horizon and the left sidebar is not a hand-built menu — it is a live
reflection of what your OAP is actually reporting. Horizon asks OAP which
layers exist and which of them have services, and renders exactly those,
refreshing on a 60-second cadence. A layer starts reporting, it shows up; it
goes quiet, it falls away. The menu can't drift from reality because the menu
*is* reality, polled.
-
+
Figure 1: Horizon's home — the live estate on the left, the cross-layer
Services overview on the right.</br>
A few things are happening in that sidebar:
@@ -35,7 +35,7 @@ service → instance → endpoint → topology → trace → logs →
profiling
The slot names follow the layer. The General Service layer in Figure 2 labels
its endpoint slot **API**, adds an **API dependency** view, and fans
**Profiling** into the engines it actually has — Trace, eBPF, pprof (Go), and
Async. Tabs a layer can't support are simply turned off in its template, so you
never land on an empty page. Pick a service and its dashboard fills the canvas
to the right — a header strip of KPIs (RPM, Apdex, error rate, each with its
own sparkline) over a widget gr [...]
-
+
Figure 2: Expand a layer and it fans out into its full workflow — the tab
spine on the left, the selected service's dashboard on the right.</br>
## Never a blank page
@@ -44,7 +44,7 @@ A console that follows live data has to handle the moments
when there isn't any
Open the app at `/` and Horizon cascades to a real destination: the first
available public overview dashboard, or failing that the first layer with
services, and only if neither exists, the empty landing. When it does land on
the empty page, it tells you which problem you have in plain language — **"No
data is flowing yet"** (nothing is reporting) versus **"No dashboard configured
yet"** (services exist, but no overview is set up) — and points you at your
operations team rather than drop [...]
-
+
Figure 3: The empty landing names the actual situation — here, services are
reporting but no overview is configured — instead of a blank dashboard.</br>
The same instinct shows up when OAP itself blips. If the backend goes briefly
unreachable, Horizon keeps the last known sidebar shape on screen and raises an
"OAP unreachable" banner, with service counts marked unknown until it recovers
— so a short outage never looks like your configuration vanished.
@@ -53,10 +53,10 @@ When data *is* flowing, that landing is the war-room you
already saw in Figure 1
And because long layer names and deep namespaces happen, the shell gets out of
the way: drag the divider to resize the sidebar (double-click to reset), or
fold it to a thin icon rail to give the canvas every horizontal pixel — and the
width is remembered per browser.
-
+
Figure 4: Drag the divider to widen the sidebar — long names stop truncating,
and the width is remembered per browser.</br>
-
+
Figure 5: Fold the sidebar to a thin icon rail when you want the canvas to
have every pixel.</br>
## One new tier makes the rest possible
diff --git
a/static/screenshots/horizon-0.7.0/p01-intro-01-sidebar-is-the-estate.png
b/static/screenshots/horizon-0.7.0/p01-intro-01-sidebar-is-the-estate.png
deleted file mode 100644
index 99108626f4b..00000000000
Binary files
a/static/screenshots/horizon-0.7.0/p01-intro-01-sidebar-is-the-estate.png and
/dev/null differ
diff --git
a/static/screenshots/horizon-0.7.0/p01-intro-01-sidebar-is-the-estate.webp
b/static/screenshots/horizon-0.7.0/p01-intro-01-sidebar-is-the-estate.webp
new file mode 100644
index 00000000000..f7a2e38a742
Binary files /dev/null and
b/static/screenshots/horizon-0.7.0/p01-intro-01-sidebar-is-the-estate.webp
differ
diff --git a/static/screenshots/horizon-0.7.0/p01-intro-02-layer-drilldown.png
b/static/screenshots/horizon-0.7.0/p01-intro-02-layer-drilldown.png
deleted file mode 100644
index c7bca2b54ec..00000000000
Binary files
a/static/screenshots/horizon-0.7.0/p01-intro-02-layer-drilldown.png and
/dev/null differ
diff --git a/static/screenshots/horizon-0.7.0/p01-intro-02-layer-drilldown.webp
b/static/screenshots/horizon-0.7.0/p01-intro-02-layer-drilldown.webp
new file mode 100644
index 00000000000..878d3b6aa01
Binary files /dev/null and
b/static/screenshots/horizon-0.7.0/p01-intro-02-layer-drilldown.webp differ
diff --git
a/static/screenshots/horizon-0.7.0/p01-intro-03-empty-no-dashboard-configured.png
b/static/screenshots/horizon-0.7.0/p01-intro-03-empty-no-dashboard-configured.png
deleted file mode 100644
index bff0c391221..00000000000
Binary files
a/static/screenshots/horizon-0.7.0/p01-intro-03-empty-no-dashboard-configured.png
and /dev/null differ
diff --git
a/static/screenshots/horizon-0.7.0/p01-intro-03-empty-no-dashboard-configured.webp
b/static/screenshots/horizon-0.7.0/p01-intro-03-empty-no-dashboard-configured.webp
new file mode 100644
index 00000000000..e0609aadba5
Binary files /dev/null and
b/static/screenshots/horizon-0.7.0/p01-intro-03-empty-no-dashboard-configured.webp
differ
diff --git a/static/screenshots/horizon-0.7.0/p01-intro-04-fold-rail.png
b/static/screenshots/horizon-0.7.0/p01-intro-04-fold-rail.png
deleted file mode 100644
index 95edf8a4f41..00000000000
Binary files a/static/screenshots/horizon-0.7.0/p01-intro-04-fold-rail.png and
/dev/null differ
diff --git a/static/screenshots/horizon-0.7.0/p01-intro-04-fold-rail.webp
b/static/screenshots/horizon-0.7.0/p01-intro-04-fold-rail.webp
new file mode 100644
index 00000000000..38383a34390
Binary files /dev/null and
b/static/screenshots/horizon-0.7.0/p01-intro-04-fold-rail.webp differ
diff --git a/static/screenshots/horizon-0.7.0/p01-intro-04-resize.png
b/static/screenshots/horizon-0.7.0/p01-intro-04-resize.png
deleted file mode 100644
index 13e0e833865..00000000000
Binary files a/static/screenshots/horizon-0.7.0/p01-intro-04-resize.png and
/dev/null differ
diff --git a/static/screenshots/horizon-0.7.0/p01-intro-04-resize.webp
b/static/screenshots/horizon-0.7.0/p01-intro-04-resize.webp
new file mode 100644
index 00000000000..538a0db2bc7
Binary files /dev/null and
b/static/screenshots/horizon-0.7.0/p01-intro-04-resize.webp differ
diff --git
a/static/screenshots/horizon-0.7.0/p02-dashboards-01-instance-jvm.png
b/static/screenshots/horizon-0.7.0/p02-dashboards-01-instance-jvm.png
deleted file mode 100644
index ede09deef46..00000000000
Binary files
a/static/screenshots/horizon-0.7.0/p02-dashboards-01-instance-jvm.png and
/dev/null differ
diff --git
a/static/screenshots/horizon-0.7.0/p02-dashboards-01-instance-jvm.webp
b/static/screenshots/horizon-0.7.0/p02-dashboards-01-instance-jvm.webp
new file mode 100644
index 00000000000..90f03b5b9be
Binary files /dev/null and
b/static/screenshots/horizon-0.7.0/p02-dashboards-01-instance-jvm.webp differ
diff --git a/static/screenshots/horizon-0.7.0/p02-dashboards-02-instance-go.png
b/static/screenshots/horizon-0.7.0/p02-dashboards-02-instance-go.png
deleted file mode 100644
index 9f438af7749..00000000000
Binary files
a/static/screenshots/horizon-0.7.0/p02-dashboards-02-instance-go.png and
/dev/null differ
diff --git
a/static/screenshots/horizon-0.7.0/p02-dashboards-02-instance-go.webp
b/static/screenshots/horizon-0.7.0/p02-dashboards-02-instance-go.webp
new file mode 100644
index 00000000000..61ff044c600
Binary files /dev/null and
b/static/screenshots/horizon-0.7.0/p02-dashboards-02-instance-go.webp differ
diff --git
a/static/screenshots/horizon-0.7.0/p02-dashboards-03-si-suffix-axis.png
b/static/screenshots/horizon-0.7.0/p02-dashboards-03-si-suffix-axis.png
deleted file mode 100644
index e1b4cd1dcd8..00000000000
Binary files
a/static/screenshots/horizon-0.7.0/p02-dashboards-03-si-suffix-axis.png and
/dev/null differ
diff --git
a/static/screenshots/horizon-0.7.0/p02-dashboards-03-si-suffix-axis.webp
b/static/screenshots/horizon-0.7.0/p02-dashboards-03-si-suffix-axis.webp
new file mode 100644
index 00000000000..24f43e2dfab
Binary files /dev/null and
b/static/screenshots/horizon-0.7.0/p02-dashboards-03-si-suffix-axis.webp differ
diff --git
a/static/screenshots/horizon-0.7.0/p02-dashboards-04-enum-duration-cards.png
b/static/screenshots/horizon-0.7.0/p02-dashboards-04-enum-duration-cards.png
deleted file mode 100644
index 41fa6a46814..00000000000
Binary files
a/static/screenshots/horizon-0.7.0/p02-dashboards-04-enum-duration-cards.png
and /dev/null differ
diff --git
a/static/screenshots/horizon-0.7.0/p02-dashboards-04-enum-duration-cards.webp
b/static/screenshots/horizon-0.7.0/p02-dashboards-04-enum-duration-cards.webp
new file mode 100644
index 00000000000..2fe00b71c4e
Binary files /dev/null and
b/static/screenshots/horizon-0.7.0/p02-dashboards-04-enum-duration-cards.webp
differ
diff --git
a/static/screenshots/horizon-0.7.0/p02-dashboards-05-synced-crosshair.png
b/static/screenshots/horizon-0.7.0/p02-dashboards-05-synced-crosshair.png
deleted file mode 100644
index 089104ace1f..00000000000
Binary files
a/static/screenshots/horizon-0.7.0/p02-dashboards-05-synced-crosshair.png and
/dev/null differ
diff --git
a/static/screenshots/horizon-0.7.0/p02-dashboards-05-synced-crosshair.webp
b/static/screenshots/horizon-0.7.0/p02-dashboards-05-synced-crosshair.webp
new file mode 100644
index 00000000000..8d0493b4109
Binary files /dev/null and
b/static/screenshots/horizon-0.7.0/p02-dashboards-05-synced-crosshair.webp
differ
diff --git
a/static/screenshots/horizon-0.7.0/p02-dashboards-06-record-jump-to-trace.png
b/static/screenshots/horizon-0.7.0/p02-dashboards-06-record-jump-to-trace.png
deleted file mode 100644
index f45248be5f4..00000000000
Binary files
a/static/screenshots/horizon-0.7.0/p02-dashboards-06-record-jump-to-trace.png
and /dev/null differ
diff --git
a/static/screenshots/horizon-0.7.0/p02-dashboards-06-record-jump-to-trace.webp
b/static/screenshots/horizon-0.7.0/p02-dashboards-06-record-jump-to-trace.webp
new file mode 100644
index 00000000000..1c4f188b170
Binary files /dev/null and
b/static/screenshots/horizon-0.7.0/p02-dashboards-06-record-jump-to-trace.webp
differ
diff --git
a/static/screenshots/horizon-0.7.0/p02-dashboards-07-pinned-entities.png
b/static/screenshots/horizon-0.7.0/p02-dashboards-07-pinned-entities.png
deleted file mode 100644
index 90f656f5dd0..00000000000
Binary files
a/static/screenshots/horizon-0.7.0/p02-dashboards-07-pinned-entities.png and
/dev/null differ
diff --git
a/static/screenshots/horizon-0.7.0/p02-dashboards-07-pinned-entities.webp
b/static/screenshots/horizon-0.7.0/p02-dashboards-07-pinned-entities.webp
new file mode 100644
index 00000000000..a68ec77ebc1
Binary files /dev/null and
b/static/screenshots/horizon-0.7.0/p02-dashboards-07-pinned-entities.webp differ
diff --git a/static/screenshots/horizon-0.7.0/p03-topology-01-service-map.png
b/static/screenshots/horizon-0.7.0/p03-topology-01-service-map.png
deleted file mode 100644
index 361893a458a..00000000000
Binary files a/static/screenshots/horizon-0.7.0/p03-topology-01-service-map.png
and /dev/null differ
diff --git a/static/screenshots/horizon-0.7.0/p03-topology-01-service-map.webp
b/static/screenshots/horizon-0.7.0/p03-topology-01-service-map.webp
new file mode 100644
index 00000000000..8375bfb6eea
Binary files /dev/null and
b/static/screenshots/horizon-0.7.0/p03-topology-01-service-map.webp differ
diff --git
a/static/screenshots/horizon-0.7.0/p03-topology-02-filter-denoise.png
b/static/screenshots/horizon-0.7.0/p03-topology-02-filter-denoise.png
deleted file mode 100644
index 09a3333182d..00000000000
Binary files
a/static/screenshots/horizon-0.7.0/p03-topology-02-filter-denoise.png and
/dev/null differ
diff --git
a/static/screenshots/horizon-0.7.0/p03-topology-02-filter-denoise.webp
b/static/screenshots/horizon-0.7.0/p03-topology-02-filter-denoise.webp
new file mode 100644
index 00000000000..947155579a9
Binary files /dev/null and
b/static/screenshots/horizon-0.7.0/p03-topology-02-filter-denoise.webp differ
diff --git
a/static/screenshots/horizon-0.7.0/p03-topology-03-group-selector.png
b/static/screenshots/horizon-0.7.0/p03-topology-03-group-selector.png
deleted file mode 100644
index f56d531c281..00000000000
Binary files
a/static/screenshots/horizon-0.7.0/p03-topology-03-group-selector.png and
/dev/null differ
diff --git
a/static/screenshots/horizon-0.7.0/p03-topology-03-group-selector.webp
b/static/screenshots/horizon-0.7.0/p03-topology-03-group-selector.webp
new file mode 100644
index 00000000000..a8511140c12
Binary files /dev/null and
b/static/screenshots/horizon-0.7.0/p03-topology-03-group-selector.webp differ
diff --git a/static/screenshots/horizon-0.7.0/p03-topology-04-instance-map.png
b/static/screenshots/horizon-0.7.0/p03-topology-04-instance-map.png
deleted file mode 100644
index afcd4371de4..00000000000
Binary files
a/static/screenshots/horizon-0.7.0/p03-topology-04-instance-map.png and
/dev/null differ
diff --git a/static/screenshots/horizon-0.7.0/p03-topology-04-instance-map.webp
b/static/screenshots/horizon-0.7.0/p03-topology-04-instance-map.webp
new file mode 100644
index 00000000000..662df94ef3b
Binary files /dev/null and
b/static/screenshots/horizon-0.7.0/p03-topology-04-instance-map.webp differ
diff --git
a/static/screenshots/horizon-0.7.0/p03-topology-05-api-dependency.png
b/static/screenshots/horizon-0.7.0/p03-topology-05-api-dependency.png
deleted file mode 100644
index b990d489684..00000000000
Binary files
a/static/screenshots/horizon-0.7.0/p03-topology-05-api-dependency.png and
/dev/null differ
diff --git
a/static/screenshots/horizon-0.7.0/p03-topology-05-api-dependency.webp
b/static/screenshots/horizon-0.7.0/p03-topology-05-api-dependency.webp
new file mode 100644
index 00000000000..7760d424c50
Binary files /dev/null and
b/static/screenshots/horizon-0.7.0/p03-topology-05-api-dependency.webp differ
diff --git
a/static/screenshots/horizon-0.7.0/p03-topology-06-smartscape-expand.png
b/static/screenshots/horizon-0.7.0/p03-topology-06-smartscape-expand.png
deleted file mode 100644
index a272076010d..00000000000
Binary files
a/static/screenshots/horizon-0.7.0/p03-topology-06-smartscape-expand.png and
/dev/null differ
diff --git
a/static/screenshots/horizon-0.7.0/p03-topology-06-smartscape-expand.webp
b/static/screenshots/horizon-0.7.0/p03-topology-06-smartscape-expand.webp
new file mode 100644
index 00000000000..fd4c5c8a6a6
Binary files /dev/null and
b/static/screenshots/horizon-0.7.0/p03-topology-06-smartscape-expand.webp differ
diff --git a/static/screenshots/horizon-0.7.0/p03-topology-06-smartscape.png
b/static/screenshots/horizon-0.7.0/p03-topology-06-smartscape.png
deleted file mode 100644
index e3d031d098f..00000000000
Binary files a/static/screenshots/horizon-0.7.0/p03-topology-06-smartscape.png
and /dev/null differ
diff --git a/static/screenshots/horizon-0.7.0/p03-topology-06-smartscape.webp
b/static/screenshots/horizon-0.7.0/p03-topology-06-smartscape.webp
new file mode 100644
index 00000000000..c9a927a0aa7
Binary files /dev/null and
b/static/screenshots/horizon-0.7.0/p03-topology-06-smartscape.webp differ
