docs: Switch to webp, fix some sections (#514)

Switches to webp and fixes some typos/poor wording.

docs/content/configuration/config-file/data-filtering.md

@@ -8,7 +8,7 @@ You can hide specific disks, temperature sensors, and networks by name in the co
 
 For example, here's the disk widget with no filter:
 
-![Disk no filter](/assets/config/disk-filtering/disk_no_filter.png)
+![Disk no filter](/assets/screenshots/config/disk-filtering/disk_no_filter.webp)
 
 The following in the config file would filter out some entries by disk name:
 
@@ -21,9 +21,9 @@ case_sensitive = false
 whole_word = false
 ```
 
-![Disk widget with just disk name filter](/assets/screenshots/config/disk-filtering/disk_name_filter.png)
+![Disk widget with just disk name filter](/assets/screenshots/config/disk-filtering/disk_name_filter.webp)
 
-If there are two potentially conflicting filters (i.e. when you are using both a disk and mount filter), the filter that explicitly allows an entry takes precedence over a filter that explicitly denies one. So for example, let's say I set a disk filter accepting anything with `/dev/sda`, but deny anything with `/mnt/.*` or `/`. So to do so, I write in the config file:
+If there are two potentially conflicting filters (i.e. when you are using both a disk and mount filter), the filter that explicitly allows an entry takes precedence over a filter that explicitly denies one. So for example, let's say we set a disk filter accepting anything with `/dev/sda`, but deny anything with `/mnt/.*` or `/`. So to do so, we write in the config file:
 
 ```toml
 [disk_filter]
@@ -41,6 +41,6 @@ case_sensitive = false
 whole_word = true
 ```
 
-Which gives me:
+This gives us:
 
-![Disk widget with disk name and mount filter](/assets/screenshots/config/disk-filtering/disk_name_mount_filter.png)
+![Disk widget with disk name and mount filter](/assets/screenshots/config/disk-filtering/disk_name_mount_filter.webp)

docs/content/configuration/config-file/layout.md

@@ -31,7 +31,7 @@ The second column is split into two rows with a 1:1 ratio. The first is the temp
 
 This is what the layout would look like when run:
 
-![Sample layout](/assets/screenshots/config/layout/sample_layout.png)
+![Sample layout](/assets/screenshots/config/layout/sample_layout.webp)
 
 Each `[[row]]` represents a _row_ in the layout. A row can have any number of `child` values. Each `[[row.child]]`
 represents either a _column or a widget_. A column can have any number of `child` values as well. Each `[[row.child.child]]`

docs/content/troubleshooting.md

@@ -7,14 +7,14 @@ It's possible that your graphs won't look great out of the box due to the relian
 One example of this is seeing a bunch of missing font characters, caused when the terminal isn't configured properly to render braille fonts.
 
 <figure>
-    <img src="../assets/screenshots/troubleshooting/no_braille.png" alt="Example of a terminal with no braille font."/>
+    <img src="../assets/screenshots/troubleshooting/no_braille.webp" alt="Example of a terminal with no braille font."/>
     <figcaption>Powershell shown missing braille fonts</figcaption>
 </figure>
 
 Another example is when braille is rendered as a block of dots, with the non-coloured dots also appearing. This may look strange for some users, and it is also caused by misconfiguration or missing fonts.
 
 <figure>
-    <img src="../assets/screenshots/troubleshooting/weird_braille.png" alt="Example of a terminal with the wrong braille font."/>
+    <img src="../assets/screenshots/troubleshooting/weird_braille.webp" alt="Example of a terminal with the wrong braille font."/>
     <figcaption>Braille fonts rendering as a block of dots</figcaption>
 </figure>
 
@@ -24,7 +24,7 @@ and ensuring your terminal uses should work.
 Another alternative is to use the `--dot_marker` option to instead render graph charts using dots, which I've generally found to be better supported out of the box:
 
 <figure>
-    <img src="../assets/screenshots/troubleshooting/dots.png" alt="Example of running bottom with the dot marker flag"/>
+    <img src="../assets/screenshots/troubleshooting/dots.webp" alt="Example of running bottom with the dot marker flag"/>
     <figcaption>Example using <code>btm --dot_marker</code></figcaption>
 </figure>
 

docs/content/usage/basic-mode.md

@@ -3,7 +3,7 @@
 Basic mode is a special layout that removes all of the graphs and provides an interface that resembles (a very stripped-down version of) htop.
 
 <figure>
-    <img src="../../assets/screenshots/basic.png" alt="A picture of bottom's basic mode."/>
+    <img src="../../assets/screenshots/basic.webp" alt="A picture of bottom's basic mode."/>
 </figure>
 
 Basic mode can be enabled either through a command line flag:

docs/content/usage/widgets/battery.md

@@ -3,7 +3,7 @@
 The battery widget provides information about batteries on the system.
 
 <figure>
-    <img src="../../../assets/screenshots/battery.png" alt="A picture of an expanded battery widget."/>
+    <img src="../../../assets/screenshots/battery.webp" alt="A picture of an expanded battery widget."/>
 </figure>
 
 The battery widget can be enabled through either the `--battery` flag, the `battery = true` option in a config file, or specifying the widget in a custom layout.

docs/content/usage/widgets/cpu.md

@@ -3,7 +3,7 @@
 The CPU widget displays a visual representation of CPU usage over a time range.
 
 <figure>
-    <img src="../../../assets/screenshots/cpu.png" alt="A picture of an expanded CPU widget showing average CPU usage."/>
+    <img src="../../../assets/screenshots/cpu.webp" alt="A picture of an expanded CPU widget showing average CPU usage."/>
 </figure>
 
 ## Features

docs/content/usage/widgets/disk.md

@@ -3,7 +3,7 @@
 The disk widget provides a table of useful disk and partition information, like I/O per second and total usage.
 
 <figure>
-    <img src="../../../assets/screenshots/disk.png" alt="A picture of an expanded disk widget."/>
+    <img src="../../../assets/screenshots/disk.webp" alt="A picture of an expanded disk widget."/>
 </figure>
 
 ## Features

docs/content/usage/widgets/memory.md

@@ -3,7 +3,7 @@
 The memory widget provides a visual representation of RAM and swap usage over time.
 
 <figure>
-    <img src="../../../assets/screenshots/memory.png" alt="A picture of an expanded memory widget."/>
+    <img src="../../../assets/screenshots/memory.webp" alt="A picture of an expanded memory widget."/>
 </figure>
 
 ## Features

docs/content/usage/widgets/network.md

@@ -4,12 +4,16 @@ The network widget provides a visual representation of network input and output
 received and transmitted.
 
 <figure>
-    <img src="../../../assets/screenshots/network/network.png" alt="A picture of an expanded network widget."/>
+    <img src="../../../assets/screenshots/network/network.webp" alt="A picture of an expanded network widget."/>
 </figure>
 
 ## Features
 
-The legend displays the current reads and writes per second, as well as the total amount read/written.
+The legend displays the current reads and writes per second in bits, as well as the total amount read/written.
+
+The y-axis automatically scales based on shown read/write values, and by default, is a linear scale based on base-10 units (e.x. kilobit, gigabit, etc.).
+Through [configuration](../../../configuration/command-line-flags/), the read/write per second unit can be changed to bytes, while the y-axis can be changed to a
+log scale and/or use base-2 units (e.x. kibibit, gibibit, etc.).
 
 One can also adjust the displayed time range through either the keyboard or mouse, with a range of 30s to 600s.
 

docs/content/usage/widgets/process.md

@@ -4,7 +4,7 @@ The process widget displays a table containing information regarding a running p
 searching, and process control features.
 
 <figure>
-    <img src="../../../assets/screenshots/process/process_default.png" alt="A picture of an expanded process widget by default."/>
+    <img src="../../../assets/screenshots/process/process_default.webp" alt="A picture of an expanded process widget by default."/>
 </figure>
 
 ## Features
@@ -36,7 +36,7 @@ sorting by that column, reverse the sorting order.
 Alternatively, one can sort using the sort menu sub-widget, which is brought up using ++s++ or ++f6++, and can be controlled by arrow keys or the mouse.
 
 <figure>
-    <img src="../../../assets/screenshots/process/process_sort_menu.png" alt="A picture of an expanded process widget with the sort menu open."/>
+    <img src="../../../assets/screenshots/process/process_sort_menu.webp" alt="A picture of an expanded process widget with the sort menu open."/>
 </figure>
 
 ### Grouping
@@ -45,7 +45,7 @@ Pressing ++tab++ in the table will group entries with the same name together. Th
 is added together when displayed.
 
 <figure>
-    <img src="../../../assets/screenshots/process/process_grouped.png" alt="A picture of grouped mode in a process widget."/>
+    <img src="../../../assets/screenshots/process/process_grouped.webp" alt="A picture of grouped mode in a process widget."/>
 </figure>
 
 Note that the process state and user columns are disabled in this mode.
@@ -55,7 +55,7 @@ Note that the process state and user columns are disabled in this mode.
 Pressing ++t++ or ++f5++ in the table toggles tree mode in the process widget, displaying processes in regards to their parent-child process relationships.
 
 <figure>
-    <img src="../../../assets/screenshots/process/process_tree.png" alt="A picture of tree mode in a process widget."/>
+    <img src="../../../assets/screenshots/process/process_tree.webp" alt="A picture of tree mode in a process widget."/>
 </figure>
 
 A process in tree mode can also be "collapsed", hiding its children and any descendants, using either the ++minus++ or ++plus++ keys, or double clicking on an entry.
@@ -67,7 +67,7 @@ Lastly, note that in tree mode, processes cannot be grouped together due to the
 You can show the full command instead of just the process name by pressing ++P++.
 
 <figure>
-    <img src="../../../assets/screenshots/process/process_full.png" alt="A picture of a process widget using full commands."/>
+    <img src="../../../assets/screenshots/process/process_full.webp" alt="A picture of a process widget using full commands."/>
 </figure>
 
 ### Search
@@ -75,31 +75,31 @@ You can show the full command instead of just the process name by pressing ++P++
 Pressing ++slash++ or ++ctrl+f++ will open up the search sub-widget. By default, just typing in something will search by the process name.
 
 <figure>
-    <img src="../../../assets/screenshots/process/search/search.png" alt="A picture of searching for a process with a simple search."/>
+    <img src="../../../assets/screenshots/process/search/search.webp" alt="A picture of searching for a process with a simple search."/>
 </figure>
 
 This search can be further enhanced by matching by case, matching the entire word, or by regex.
 
 <figure>
-    <img src="../../../assets/screenshots/process/search/regex.png" alt="A picture of searching for a process with a search condition that uses regex."/>
+    <img src="../../../assets/screenshots/process/search/regex.webp" alt="A picture of searching for a process with a search condition that uses regex."/>
 </figure>
 
 We are able to also search for multiple things/conditions.
 
 <figure>
-    <img src="../../../assets/screenshots/process/search/or.png" alt="A picture of searching for a process with a search condition that uses the or operator."/>
+    <img src="../../../assets/screenshots/process/search/or.webp" alt="A picture of searching for a process with a search condition that uses the or operator."/>
 </figure>
 
 And if our search uses a keyword, we need to use quotation marks around the term to properly search it.
 
 <figure>
-    <img src="../../../assets/screenshots/process/search/quotes.png" alt="A picture of searching for a process with a search condition that needs quotation marks."/>
+    <img src="../../../assets/screenshots/process/search/quotes.webp" alt="A picture of searching for a process with a search condition that needs quotation marks."/>
 </figure>
 
 Lastly, we can refine our search even further based on the other columns, like PID, CPU usage, etc., as well as grouping together conditions.
 
 <figure>
-    <img src="../../../assets/screenshots/process/search/cpu.png" alt="A picture of searching for a process with a search condition that uses the CPU keyword."/>
+    <img src="../../../assets/screenshots/process/search/cpu.webp" alt="A picture of searching for a process with a search condition that uses the CPU keyword."/>
 </figure>
 
 #### Keywords

docs/content/usage/widgets/temperature.md

@@ -3,7 +3,7 @@
 The temperature widget provides a table of temperature sensors and their current temperature.
 
 <figure>
-    <img src="../../../assets/screenshots/temperature.png" alt="A picture of an expanded temperature widget."/>
+    <img src="../../../assets/screenshots/temperature.webp" alt="A picture of an expanded temperature widget."/>
 </figure>
 
 ## Features