Update all documentation screenshots to optimised multi-resolution st…

…acks (#2457)

### What

Update all documentation screenshots to optimised multi-resolution
stacks. Existing screenshot that have rounded corners are left alone and
will be redone in a subsequent PR
(#2458). The intention of this
PR is to convert screenshots that are ready for the new drop-shadow CSS
to the `<picture>` tag, such that the CSS applies.

### Checklist
* [x] I have read and agree to [Contributor
Guide](https://github.com/rerun-io/rerun/blob/main/CONTRIBUTING.md) and
the [Code of
Conduct](https://github.com/rerun-io/rerun/blob/main/CODE_OF_CONDUCT.md)
* [ ] I've included a screenshot or gif (if applicable)

<!-- This line will get updated when the PR build summary job finishes.
-->
PR Build Summary: https://build.rerun.io/pr/2457

<!-- pr-link-docs:start -->
Docs preview: https://rerun.io/preview/f04f8f2/docs
Examples preview: https://rerun.io/preview/f04f8f2/examples
<!-- pr-link-docs:end -->

docs/content/concepts/annotation-context.md

@@ -14,7 +14,13 @@ This is particularly useful for visualizing the output of classifications algori
 (as demonstrated by the [Detect and Track Objects](https://github.com/rerun-io/rerun/tree/main/examples/python/detect_and_track_objects) example),
 but can be used more generally for any kind of reoccurring categorization within a Rerun recording.
 
-![class_ids](https://static.rerun.io/5508e3fd5b2fdc020eda0bd545ccb97d26a01303_classids.png)
+<picture>
+  <source media="(max-width: 480px)" srcset="https://static.rerun.io/bb5f5e06931b4924ce3c0243d8285eee558e8f21_classids_480w.png">
+  <source media="(max-width: 768px)" srcset="https://static.rerun.io/43c5455dd453e8a3668f0426c3d8961d22a5471e_classids_768w.png">
+  <source media="(max-width: 1024px)" srcset="https://static.rerun.io/c445af268f7700536bec97bd54134cfe5a48304e_classids_1024w.png">
+  <img src="https://static.rerun.io/7f881338f1970161f52a00f1ddd01d4dcccf8a46_classids_full.png" alt="viewer screenshot showing various tracked objects and their class ids">
+</picture>
+
 
 
 ### Keypoints & Keypoint Connections
@@ -32,7 +38,10 @@ Just as with labels & colors this allows you to use the same connection informat
 
 Keypoints are currently only applicable to 2D and 3D points.
 
-![keypoints](https://static.rerun.io/a8be4dff9cf1d2793d5a5f0d5c4bb058d1430ea8_keypoints.png)
+<picture>
+  <img src="https://static.rerun.io/98b627503df82a6e04c01133dcf6395b040cbd53_keypoints_full.png" alt="keypoint shown on a 3d skeleton">
+</picture>
+
 
 
 ### Logging an Annotation Context
@@ -65,4 +74,9 @@ you can explicitly determine the color of each class.
 * Python: [`log_segmentation_image`](https://ref.rerun.io/docs/python/latest/common/images/#rerun.log_segmentation_image)
 * Rust: Log a [`Tensor`](https://docs.rs/rerun/latest/rerun/components/struct.Tensor.html) with [`TensorDataMeaning::ClassId`](https://docs.rs/rerun/latest/rerun/components/enum.TensorDataMeaning.html#variant.ClassId)
 
-![segmentation image](https://static.rerun.io/7c47738b791a7faaad8f0221a78c027300d407fc_segmentation_image.png)
+<picture>
+  <source media="(max-width: 480px)" srcset="https://static.rerun.io/b1da782a05e2f7c0048f4bddf9ea29fef7c80b4e_segmentation_image_480w.png">
+  <source media="(max-width: 768px)" srcset="https://static.rerun.io/f63cb085ee392f38e6431ab7e8c79aecb1b4e6e1_segmentation_image_768w.png">
+  <img src="https://static.rerun.io/716eeff1a99f51a6e77fca85c4e7dccf76b77c69_segmentation_image_full.png" alt="screenshot of a segmentation image">
+</picture>
+

docs/content/getting-started/logging-python.md

@@ -53,7 +53,16 @@ Now you can run your application just as you would any other python script:
 ```
 
 And with that, we're ready to start sending out data:
-![logging data - waiting for data](https://static.rerun.io/4f83e588d7ca4ba6d09390d6d445f63bb4a73b4e_logging_data2_waiting.png)
+
+<picture>
+  <source media="(max-width: 480px)" srcset="https://static.rerun.io/b509f0c8ba4a46ed8ffd68bea4ade384525a41a1_logging_data2_waiting_480w.png">
+  <source media="(max-width: 768px)" srcset="https://static.rerun.io/89b4674ee51f3f5365bad2347bc3f7319ff8de0f_logging_data2_waiting_768w.png">
+  <source media="(max-width: 1024px)" srcset="https://static.rerun.io/349e38deb9307100471b66becd6fab5d09dae80f_logging_data2_waiting_1024w.png">
+  <source media="(max-width: 1200px)" srcset="https://static.rerun.io/4820da379135db095f0d160550245114e6257400_logging_data2_waiting_1200w.png">
+  <img src="https://static.rerun.io/a45b879f74828ff22d0767c7892bffb17a0ac25f_logging_data2_waiting_full.png" alt="screenshot of the waiting screen">
+</picture>
+
+
 
 By default, the SDK will start a viewer in another process and automatically pipe the data through.
 There are other means of sending data to a viewer as we'll see at the end of this section, but for now this default will work great as we experiment.
@@ -92,7 +101,14 @@ rr.log_points("dna/structure/right", points2, colors=colors2, radii=0.08)
 Run your script once again and you should now see this scene in the viewer.
 Note that if the viewer was still running, Rerun will simply connect to this existing session and replace the data with this new [_recording_](../concepts/apps-and-recordings.md).
 
-![logging data - first points](https://static.rerun.io/46140c891a60026b3ef9fb0c34fcf63e23199ec7_logging_data3_first_points.png)
+<picture>
+  <source media="(max-width: 480px)" srcset="https://static.rerun.io/5305cec597b9957036291198402d5afbbcce218e_logging_data3_first_points_480w.png">
+  <source media="(max-width: 768px)" srcset="https://static.rerun.io/5fa88ed6192920f6162b7080928aa538ae2025dd_logging_data3_first_points_768w.png">
+  <source media="(max-width: 1024px)" srcset="https://static.rerun.io/9a87ed7e20b72902c6506a87fda3d62f716eed88_logging_data3_first_points_1024w.png">
+  <source media="(max-width: 1200px)" srcset="https://static.rerun.io/b32a40031e47a4aa3b1669bef53048765c1b7b10_logging_data3_first_points_1200w.png">
+  <img src="https://static.rerun.io/0e0fada083d59cf14ad20ed0ee50ef88a9550d82_logging_data3_first_points_full.png" alt="screenshot after logging the first points">
+</picture>
+
 
 _This is a good time to make yourself familiar with the viewer: try interacting with the scene and exploring the different menus._
 _Checkout the [Viewer Walkthrough](viewer-walkthrough.md) and [viewer reference](../reference/viewer/overview.md) for a complete tour of the viewer's capabilities._
@@ -152,7 +168,14 @@ rr.log_points("dna/structure/scaffolding/beads", beads, radii=0.06, colors=np.re
 Once again, although we are getting fancier and fancier with our [`numpy` incantations](https://ref.rerun.io/docs/python/latest/package/rerun_demo/util/#rerun_demo.util.bounce_lerp),
 there is nothing new here: it's all about building out `numpy` arrays and feeding them to the Rerun API.
 
-![logging data - beads](https://static.rerun.io/60c3c762448f68da3f5fdd7927a6e65e11f5385f_logging_data5_beads.png)
+<picture>
+  <source media="(max-width: 480px)" srcset="https://static.rerun.io/5ad83403acc560dac2bd85211419482c60019783_logging_data5_beads_480w.png">
+  <source media="(max-width: 768px)" srcset="https://static.rerun.io/cdec3af724a3ceff147c1c6fd6cc9dbc51a2204d_logging_data5_beads_768w.png">
+  <source media="(max-width: 1024px)" srcset="https://static.rerun.io/cb272220c85e3376c75fd6da7f18462b920e172a_logging_data5_beads_1024w.png">
+  <source media="(max-width: 1200px)" srcset="https://static.rerun.io/de68973ad6420112eba8b91217d9f4713d5d9a02_logging_data5_beads_1200w.png">
+  <img src="https://static.rerun.io/7825d736cb8b7dab27f27aa7611c4bac24f23433_logging_data5_beads_full.png" alt="screenshot after logging beads">
+</picture>
+
 
 ## Animating the beads
 
@@ -162,7 +185,14 @@ Up until this point, we've completely set aside one of the core concepts of Reru
 
 Even so, if you look at your [Timeline View](../reference/viewer/timeline.md) right now, you'll notice that Rerun has kept track of time on your behalf anyways by memorizing when each log call occurred.
 
-![logging data - timeline closeup](https://static.rerun.io/f6dbc83f555597e2bfe946e8228301da82ad4611_logging_data6_timeline.png)
+<picture>
+  <source media="(max-width: 480px)" srcset="https://static.rerun.io/720e5ba4d1881f88e1f0dd3342c52f3b472b70c6_logging_data6_timeline_480w.png">
+  <source media="(max-width: 768px)" srcset="https://static.rerun.io/96bdee91b139b19023524bc6954798005a24f298_logging_data6_timeline_768w.png">
+  <source media="(max-width: 1024px)" srcset="https://static.rerun.io/c824ea981c457ee11c03b10645245b51e75de428_logging_data6_timeline_1024w.png">
+  <source media="(max-width: 1200px)" srcset="https://static.rerun.io/d8dcfc5d19865d0c50f43d377fbbcad027d44bf3_logging_data6_timeline_1200w.png">
+  <img src="https://static.rerun.io/37fbc6fcbe8e89b2267057e3eae2e56b8d9ddf42_logging_data6_timeline_full.png" alt="screenshot of the beads with the timeline">
+</picture>
+
 
 Unfortunately, the logging time isn't particularly helpful to us in this case: we can't have our beads animate depending on the logging time, else they would move at different speeds depending on the performance of the logging process!
 For that, we need to introduce our own custom timeline that uses a deterministic clock which we control.
@@ -189,7 +219,14 @@ A call to [`set_time_seconds`](https://ref.rerun.io/docs/python/latest/common/ti
 
 ⚠️  If you run this code as is, the result will be.. surprising: the beads are animating as expected, but everything we've logged until that point is gone! ⚠️
 
-![logging data - wat](https://static.rerun.io/a396c8aae1cbd717a3f35472594f789e4829b1ae_logging_data7_wat.png)
+<picture>
+  <source media="(max-width: 480px)" srcset="https://static.rerun.io/af29a2c3ed2c7a829cd91c2ad11d38f4418b9b23_logging_data7_wat_480w.png">
+  <source media="(max-width: 768px)" srcset="https://static.rerun.io/a46e9b2e7cc03366712fc0d3e3bc5bcb1efb406c_logging_data7_wat_768w.png">
+  <source media="(max-width: 1024px)" srcset="https://static.rerun.io/398fb5f7164b6ccf010e4af8b5c761818bf015a1_logging_data7_wat_1024w.png">
+  <source media="(max-width: 1200px)" srcset="https://static.rerun.io/263d82b50e184ecb4d83350a1ef8b89b5a4d7b5f_logging_data7_wat_1200w.png">
+  <img src="https://static.rerun.io/74239084e9e45d2a0187b5e5e944063e3c8df5fa_logging_data7_wat_full.png" alt="screenshot of the surprising situation">
+</picture>
+
 
 Enter...
 
@@ -202,7 +239,14 @@ rr.spawn()
 rr.set_time_seconds("stable_time", 0)
 ```
 
-![logging data - latest at](https://static.rerun.io/0182b4795ca2fed2f2097cfa5f5271115dee0aaf_logging_data8_latest_at.png)
+<picture>
+  <source media="(max-width: 480px)" srcset="https://static.rerun.io/6c6918d4e1c33dc321d15e8746753ed2b1ca2037_logging_data8_latest_at_480w.png">
+  <source media="(max-width: 768px)" srcset="https://static.rerun.io/73755db0243987f750f620c34d2b5f67e47c6ab4_logging_data8_latest_at_768w.png">
+  <source media="(max-width: 1024px)" srcset="https://static.rerun.io/72d2625d37ed6b149a4f5c016768d300c36a9bee_logging_data8_latest_at_1024w.png">
+  <source media="(max-width: 1200px)" srcset="https://static.rerun.io/a9559392295bc0bfc75da81badae2ae053f707e7_logging_data8_latest_at_1200w.png">
+  <img src="https://static.rerun.io/0a7c2f339aaff03c3ccf82d5686f3af2c19a00a7_logging_data8_latest_at_full.png" alt="screenshot after using latest at">
+</picture>
+
 
 This fix actually introduces yet another very important concept in Rerun: "latest at" semantics.
 Notice how entities `"dna/structure/left"` & `"dna/structure/right"` have only ever been logged at time zero, and yet they are still visible when querying times far beyond that point.

docs/content/getting-started/python.md

@@ -23,7 +23,15 @@ $ python3 -m rerun_demo
 
 If everything is installed and working correctly, you should end up with a window like below.
 Try looping the recording to see the fun animation.
-![Colored Cube](https://static.rerun.io/bb8a27a4a41d226ceca6cf805f7f16fe24224cfe_quickstart0_cube.png)
+
+<picture>
+  <source media="(max-width: 480px)" srcset="https://static.rerun.io/6e767ee4d13d9f4ccb887750302ea3934678672f_quickstart0_cube_480w.png">
+  <source media="(max-width: 768px)" srcset="https://static.rerun.io/4544950fee5574bbd0fdbd511c2fbbdcf2ca99c9_quickstart0_cube_768w.png">
+  <source media="(max-width: 1024px)" srcset="https://static.rerun.io/f1ae7def70ced930795b09a8d84973c3f3859ec4_quickstart0_cube_1024w.png">
+  <source media="(max-width: 1200px)" srcset="https://static.rerun.io/14181fab1e3fde320e84727c3804cbc5259b4b93_quickstart0_cube_1200w.png">
+  <img src="https://static.rerun.io/770ffcd66ebc020bb0ff00ec123e19f1fcb0a3a4_quickstart0_cube_full.png" alt="colored cube">
+</picture>
+
 
 *Note: If this is your first time launching Rerun you will see a notification in the terminal about the Rerun anonymous
 data usage policy. Rerun collects anonymous usage data to help improve the project, though you may choose to opt out if you
@@ -70,7 +78,14 @@ rr.log_points("my_points", positions=positions, colors=colors, radii=0.5)
 When you run this script you will again be greeted with the [Rerun Viewer](../reference/viewer/overview.md), this time
 only showing a simple line of red points.
 
-![Simple Line](https://static.rerun.io/945dcc1c89e0bd8598116f3bd4f12c22834604a8_quickstart1_line.png)
+<picture>
+  <source media="(max-width: 480px)" srcset="https://static.rerun.io/a4633eac537a4383a62db88d54c8b9e7260fdd95_quickstart1_line_480w.png">
+  <source media="(max-width: 768px)" srcset="https://static.rerun.io/5950b31e3698641b79803cbe61d5160502537bff_quickstart1_line_768w.png">
+  <source media="(max-width: 1024px)" srcset="https://static.rerun.io/e274fd2baa46d89365e2e31ee6a2158e00c4ca07_quickstart1_line_1024w.png">
+  <source media="(max-width: 1200px)" srcset="https://static.rerun.io/3d0915cfdc86b25ed486693f80f65076e43d57fa_quickstart1_line_1200w.png">
+  <img src="https://static.rerun.io/37d42194bc99cbb805e3ca53eba11c2896616893_quickstart1_line_full.png" alt="simple line">
+</picture>
+
 
 The [rr.log_points](https://ref.rerun.io/docs/python/latest/common/spatial_primitives/#rerun.log_points) function can
 take any Nx2 or Nx3 numpy array as a collection of positions.
@@ -94,7 +109,13 @@ colors = np.vstack([c.reshape(-1) for c in col_grid]).astype(np.uint8).T
 rr.log_points("my_points", positions=positions, colors=colors, radii=0.5)
 ```
 
-![Simple Cube](https://static.rerun.io/48482e9dc110e0b95c1cf310eab3ccdba6d8880f_quickstart2_simple_cube.png)
+<picture>
+  <source media="(max-width: 480px)" srcset="https://static.rerun.io/a624fdd8cd99414f12bb9e05b27d52720a48bd10_quickstart2_simple_cube_480w.png">
+  <source media="(max-width: 768px)" srcset="https://static.rerun.io/eee0373668bb90fd6b66c3687012833a136dc969_quickstart2_simple_cube_768w.png">
+  <source media="(max-width: 1024px)" srcset="https://static.rerun.io/81da909eb3e44058ac6c67071e2b57490ba6e0ed_quickstart2_simple_cube_1024w.png">
+  <source media="(max-width: 1200px)" srcset="https://static.rerun.io/6eb065269db26ff92292c0d4360cd5affc197410_quickstart2_simple_cube_1200w.png">
+  <img src="https://static.rerun.io/56b44aef7d6875c222219dcff2bc3a3d470c8891_quickstart2_simple_cube_full.png" alt="">
+</picture>
 
 ## What's next
 

docs/content/getting-started/rust.md

@@ -54,7 +54,15 @@ cargo run
 ```
 
 Once everything finishes compiling, you will see the points in the Rerun Viewer:
-![intro users - result](https://static.rerun.io/d9124a2aea32a8f76536c78289bf488ea6261c4d_intro_users1_result.png)
+
+<picture>
+  <source media="(max-width: 480px)" srcset="https://static.rerun.io/64200b0042929ec0a686de6ee154488447a80540_intro_users1_result_480w.png">
+  <source media="(max-width: 768px)" srcset="https://static.rerun.io/2d8bbd8fe7da242f73ea269fdaa1c830552cff7d_intro_users1_result_768w.png">
+  <source media="(max-width: 1024px)" srcset="https://static.rerun.io/429ce634ff41a5350167eff9dea51477c9225772_intro_users1_result_1024w.png">
+  <source media="(max-width: 1200px)" srcset="https://static.rerun.io/c18c538b4e1a577cb0f89e87ef5853c03d5eb2d2_intro_users1_result_1200w.png">
+  <img src="https://static.rerun.io/40dca5343e79c4a214fdac277dc601c3da8fb491_intro_users1_result_full.png" alt="Rust getting started result">
+</picture>
+
 
 ## Using the viewer
 Try out the following to interact with the viewer: