fix images in webp format

Author: tomdu3

Wireframe/assets/readme.webp

@@ -18,7 +18,7 @@ <h1>GitHub Web Project Essentials</h1>
   </header>
   <main>
     <article class="card" id="main-article">
-      <img src="./assets/readme.png" alt="" class="article-img" />
+      <img src="./assets/readme.webp" alt="" class="article-img" />
       <h2 class="article-title">What Is the Purpose of a README file?</h2>
       <p class="article-text">
         A good README file serves as a project's "front door," acting as a crucial piece of documentation that explains
@@ -31,7 +31,7 @@ <h2 class="article-title">What Is the Purpose of a README file?</h2>
         aria-label="Read more about README files">Read more</a>
     </article>
     <article class="card">
-      <img src="./assets/wireframe_design.jpeg" alt="Wireframe design" class="article-img" />
+      <img src="./assets/wireframe_design.webp" alt="Wireframe design" class="article-img" />
       <h2 class="article-title">What Is the Purpose of a Wireframe?</h2>
       <p class="article-text">
         A wireframe is a simplified visual guide used in web and app design to outline the structure, layout, and