Improve the quality of the rendered diagrams (#1999)

The first commit allows to lazy-load the diagrams, which should improve the loading time of the CS API on mobile. In the process it also improves the alt text of the images.

The second commit serves the diagrams as high-resolution WebPs. Encoding a high resolution diagram as WebP gives a file of approximately the same size as the lower resolution PNG. For maximum compatibility we also serve them as a lower resolution WebP and a fallback PNG. WebP was chosen because it is one of the export formats of draw.io/diagrams.net, and it is widely available in modern browsers.

Signed-off-by: Kévin Commaille <zecakeh@tedomum.fr>

content/client-server-api/_index.md

@@ -2572,7 +2572,7 @@ Note that this rule is only expected to work in room versions
 
 The allowable state transitions of membership are:
 
-![membership-flow-diagram](/diagrams/membership.png)
+{{% diagram name="membership" alt="Diagram presenting the possible membership state transitions" %}}
 
 {{% http-api spec="client-server" api="list_joined_rooms" %}}
 

content/client-server-api/modules/receipts.md

@@ -155,12 +155,12 @@ related to a thread root via non-thread relations.
 The following is an example DAG for a room, with dotted lines showing event
 relationships and solid lines showing topological ordering.
 
-![threaded-dag](/diagrams/threaded-dag.png)
+{{% diagram name="threaded-dag" alt="Diagram presenting a DAG with thread relationships as a single timeline" %}}
 
 This DAG can be represented as 3 threaded timelines, with `A` and `B` being thread
 roots:
 
-![threaded-dag-threads](/diagrams/threaded-dag-threads.png)
+{{% diagram name="threaded-dag-threads" alt="Diagram presenting a DAG with thread relationships as 3 related timelines" %}}
 
 With this, we can demonstrate that:
 * A threaded read receipt on `I` would mark `A`, `B`, and `I` as read.