diff --git a/sources/academy/webscraping/scraping_basics_python/02_devtools_locating_elements.md b/sources/academy/webscraping/scraping_basics_python/02_devtools_locating_elements.md
index 9ad6e67acd..b02e83cf70 100644
--- a/sources/academy/webscraping/scraping_basics_python/02_devtools_locating_elements.md
+++ b/sources/academy/webscraping/scraping_basics_python/02_devtools_locating_elements.md
@@ -65,13 +65,7 @@ document.querySelector('.product-item');
 
 It will return the HTML element for the first product card in the listing:
 
-![Using querySelector() in DevTools Console](./images/devtools-queryselector.png)
-
-:::note About the missing semicolon
-
-In the screenshot, there is a missing semicolon `;` at the end of the line. In JavaScript, semicolons are optional, so it doesn't make a difference here.
-
-:::
+![Using querySelector() in DevTools Console](./images/devtools-queryselector.webp)
 
 CSS selectors can get quite complex, but the basics are enough to scrape most of the Warehouse store. Let's cover two simple types and how they can combine.
 
diff --git a/sources/academy/webscraping/scraping_basics_python/images/devtools-queryselector.png b/sources/academy/webscraping/scraping_basics_python/images/devtools-queryselector.png
deleted file mode 100644
index 598870b290..0000000000
Binary files a/sources/academy/webscraping/scraping_basics_python/images/devtools-queryselector.png and /dev/null differ
diff --git a/sources/academy/webscraping/scraping_basics_python/images/devtools-queryselector.webp b/sources/academy/webscraping/scraping_basics_python/images/devtools-queryselector.webp
new file mode 100644
index 0000000000..f39d003cc8
Binary files /dev/null and b/sources/academy/webscraping/scraping_basics_python/images/devtools-queryselector.webp differ
diff --git a/sources/academy/webscraping/scraping_basics_python/images/scraping.png b/sources/academy/webscraping/scraping_basics_python/images/scraping.png
deleted file mode 100644
index a1d2fa9298..0000000000
Binary files a/sources/academy/webscraping/scraping_basics_python/images/scraping.png and /dev/null differ
diff --git a/sources/academy/webscraping/scraping_basics_python/images/scraping.webp b/sources/academy/webscraping/scraping_basics_python/images/scraping.webp
new file mode 100644
index 0000000000..56c16cf239
Binary files /dev/null and b/sources/academy/webscraping/scraping_basics_python/images/scraping.webp differ
diff --git a/sources/academy/webscraping/scraping_basics_python/index.md b/sources/academy/webscraping/scraping_basics_python/index.md
index baaebb6368..9aed079ea6 100644
--- a/sources/academy/webscraping/scraping_basics_python/index.md
+++ b/sources/academy/webscraping/scraping_basics_python/index.md
@@ -14,11 +14,7 @@ import DocCardList from '@theme/DocCardList';
 
 In this course we'll use Python to create an application for watching prices. It'll be able to scrape all product pages of an e-commerce website and record prices. Data from several runs of such program would be useful for seeing trends in price changes, detecting discounts, etc.
 
-<!--
-TODO image of warehouse with some CVS or JSON exported, similar to sources/academy/webscraping/scraping_basics_javascript/images/beginners-data-collection.png, which is for some reason the same as sources/academy/webscraping/scraping_basics_javascript/images/beginners-data-extraction.png
--->
-
-![E-commerce listing on the left, JSON with data on the right](./images/scraping.png)
+![E-commerce listing on the left, JSON with data on the right](./images/scraping.webp)
 
 ## What you'll do