💄 Update Help Center images (#7266)

docs/_includes/layouts/base.njk

@@ -16,7 +16,7 @@
         title=title or metadata.title,
         desc=desc or metadata.desc or description or metadata.description,
         url="https://help.penpot.app" + page.url,
-        img="https://help.penpot.app/img/th-help-center.jpg",
+        img="https://help.penpot.app/img/thumb-help-center.jpg",
         img_alt=alt,
         twitterHandle=twitter or metadata.twitter,
         name=name

docs/contributing-guide/index.njk

@@ -7,7 +7,7 @@ eleventyNavigation:
 ---
 
 <div class="main-illus">
-  <img src="/img/home-contributing.png" alt="User guide" border="0">
+  <img src="/img/home-contribution.webp" alt="User guide" border="0">
 </div>
 
 <h1 id="contributing-guide">Contributing guide.</h1>

docs/css/index.css

@@ -832,22 +832,22 @@ a[href].post-tag:visited {
   padding-left: 14.6rem;
 }
 .illus-userguide {
-  background-image: url(/img/home-userguide.png);
+  background-image: url(/img/home-user-guide.webp);
 }
 .illus-faq {
-  background-image: url(/img/home-faq.png);
+  background-image: url(/img/home-faq.webp);
 }
 .illus-techguide {
-  background-image: url(/img/home-techguide.png);
+  background-image: url(/img/home-technical-guide.webp);
 }
 .illus-plugins {
-  background-image: url(/img/home-plugins.png);
+  background-image: url(/img/home-plugins.webp);
 }
 .illus-contributing {
-  background-image: url(/img/home-contributing.png);
+  background-image: url(/img/home-contribution.webp);
 }
 .illus-contact {
-  background-image: url(/img/home-contact.png);
+  background-image: url(/img/home-contact.webp);
 }
 .illus-libraries {
   padding-left: 13rem;
@@ -924,7 +924,7 @@ a[href].post-tag:visited {
   background-size: auto 75%;
   background-position: center top;
   background-repeat: no-repeat;
-  background-image: url(/img/home-contact.png);
+  background-image: url(/img/home-contact.webp);
 }
 .contact-block p,
 .contact-block h2,
@@ -992,22 +992,22 @@ a[href].post-tag:visited {
 }
 
 .plugins .illus-getting-started {
-  background-image: url(/img/plugins/getting_started.png);
+  background-image: url(/img/plugins/plugins-getting-started.webp);
 }
 .plugins .illus-create-plugin {
-  background-image: url(/img/plugins/create_plugin.png);
+  background-image: url(/img/plugins/plugins-create.webp);
 }
 .plugins .illus-deployment {
-  background-image: url(/img/plugins/deployment.png);
+  background-image: url(/img/plugins/plugins-deploy.webp);
 }
 .plugins .illus-api {
-  background-image: url(/img/plugins/api.png);
+  background-image: url(/img/plugins/plugins-api.webp);
 }
 .plugins .illus-examples {
-  background-image: url(/img/plugins/examples.png);
+  background-image: url(/img/plugins/plugins-examples-templates.webp);
 }
 .plugins .illus-faq {
-  background-image: url(/img/plugins/faqs.png);
+  background-image: url(/img/plugins/plugins-faqs.webp);
 }
 
 table, tr, th, td {

docs/technical-guide/index.md

@@ -7,7 +7,7 @@ eleventyNavigation:
 ---
 
 <div class="main-illus">
-  <img src="/img/home-techguide.png" alt="Technical Guide" border="0">
+  <img src="/img/home-technical-guide.webp" alt="Technical Guide" border="0">
 </div>
 
 # Technical Guide

docs/user-guide/index.njk

@@ -7,7 +7,7 @@ eleventyNavigation:
 ---
 
 <div class="main-illus">
-  <img src="/img/home-userguide.png" alt="User guide" border="0">
+  <img src="/img/home-user-guide.webp" alt="User guide" border="0">
 </div>
 
 <h1 id="user-guide">Penpot User Guide</h1>