diff --git a/docs/_static/images/development/css-framework/callout-boxes.jpg b/docs/_static/images/development/css-framework/callout-boxes.jpg
deleted file mode 100644
index 15a287d3..00000000
Binary files a/docs/_static/images/development/css-framework/callout-boxes.jpg and /dev/null differ
diff --git a/docs/_static/images/development/css-framework/callout-boxes.png b/docs/_static/images/development/css-framework/callout-boxes.png
new file mode 100644
index 00000000..76d81467
Binary files /dev/null and b/docs/_static/images/development/css-framework/callout-boxes.png differ
diff --git a/docs/development/custom/css-framework.md b/docs/development/custom/css-framework.md
index 74a183f3..657c3981 100644
--- a/docs/development/custom/css-framework.md
+++ b/docs/development/custom/css-framework.md
@@ -11,7 +11,7 @@ Callout-boxes need a base-class (`.aa-callout`) and a modifier-class (e.g.:
 `.aa-callout-info` for an info-box). Modifier classes are available for the usual
 Bootstrap alert levels "Success",  "Info", "Warning" and "Danger".
 
-![Alliance Auth Framework: Callout Boxes](/_static/images/development/callout-boxes.jpg "Alliance Auth Framework: Callout Boxes")
+![Alliance Auth Framework: Callout Boxes](/_static/images/development/callout-boxes.png "Alliance Auth Framework: Callout Boxes")
 
 ### HTML