diff --git a/developer_manual/design/navigation.rst b/developer_manual/design/navigation.rst
index fbd8ca261..4c28dcf00 100644
--- a/developer_manual/design/navigation.rst
+++ b/developer_manual/design/navigation.rst
@@ -187,7 +187,7 @@ The opening of the menu is activated and animated by the class ``open`` on the m
     * If your top-level link is only used as a header, the **entire** ``a`` needs to be used to toggle the ``open`` class.
     * If your top-level link is used to redirect the user or to trigger something else, you **need** to add the collapsible button and use it as the ``open`` class toggle trigger.
 
-.. figure:: ../images/navigation-collapsible.png
+.. figure:: ../images/navigation-collapsible.*
    :alt: Collapsible navigation entry
    :figclass: figure-with-code
 
diff --git a/developer_manual/images/navigation-collapsible.jpg b/developer_manual/images/navigation-collapsible.jpg
new file mode 100644
index 000000000..9cf105ae5
Binary files /dev/null and b/developer_manual/images/navigation-collapsible.jpg differ
diff --git a/developer_manual/images/navigation-collapsible.png b/developer_manual/images/navigation-collapsible.png
deleted file mode 100644
index 61ef54bd1..000000000
Binary files a/developer_manual/images/navigation-collapsible.png and /dev/null differ