Optimize images for SEO

Gemfile

@@ -27,6 +27,7 @@ group :jekyll_plugins do
 end
 
 gem "sprockets", "~> 3.7"
+gem "mini_magick"
 
 # Deployment
 gem 'rake'

Gemfile.lock

@@ -96,6 +96,7 @@ GEM
     mina (1.2.3)
       open4 (~> 1.3.4)
       rake
+    mini_magick (4.11.0)
     mini_portile2 (2.5.1)
     minima (2.5.1)
       jekyll (>= 3.5, < 5.0)
@@ -156,6 +157,7 @@ DEPENDENCIES
   jekyll-target-blank
   kramdown-parser-gfm
   mina
+  mini_magick
   minima (~> 2.0)
   pry
   rake

_config.yml

@@ -73,6 +73,7 @@ plugins:
 
 # jekyll-assets
 assets:
+  compression: true
   plugins:
     css: { autoprefixer: {}}
     img: { optim: {}}

_data/providers.yml

@@ -0,0 +1,53 @@
+- name: "INSEE"
+  logo: "insee.png"
+
+- name: "Infogreffe"
+  logo: "infogreffe.png"
+
+- name: "Direction Générale des Finances Publiques"
+  logo: "dgfip.png"
+
+- name: "URSSAF Caisse nationale"
+  logo: "acoss.png"
+
+- name: "INPI"
+  logo: "inpi.png"
+
+- name: "Qualibat"
+  logo: "qualibat.png"
+
+- name: "Répertoire National des Associations"
+  logo: "rna.png"
+
+- name: "CNETP"
+  logo: "cnetp.png"
+
+- name: "ProBTP"
+  logo: "probtp.png"
+
+- name: "MSA"
+  logo: "msa.png"
+
+- name: "OPQIBI"
+  logo: "opqibi.png"
+
+- name: "FNTP"
+  logo: "fntp.png"
+
+- name: "AGEFIPH"
+  logo: "agefiph.png"
+
+- name: "Fabrique numérique des Ministères Sociaux"
+  logo: "fabsocial.png"
+
+- name: "CMA France"
+  logo: "cma.png"
+
+- name: "Agence de la transition écologique"
+  logo: "ademe.png"
+
+- name: "Direction générale des douanes et droits indirects"
+  logo: "douanes.png"
+
+- name: "Agence BIO"
+  logo: "agencebio.png"

_layouts/home.html

@@ -86,8 +86,8 @@ <h1 class="tpl-hero__title">
     </div>
 
     <div id="fonctionnement_api_entreprise">
-      {% asset 'fonctionnement-api-entreprise.png' class="md hide-xs" %}
-      {% asset 'fonctionnement-api-entreprise-mobile.png' class="xs hide-md" %}
+      {% asset 'fonctionnement-api-entreprise.png' magick:format='.webp' magick:resize='x2000' class="md hide-xs" %}
+      {% asset 'fonctionnement-api-entreprise-mobile.png' magick:format='.webp' magick:resize='x800' class="xs hide-md" %}
     </div>
   </section>
   <section class="tpl-section use-cases">
@@ -180,67 +180,11 @@ <h3>Un seul compte,<br />un seul interlocuteur, plusieurs données</h3>
     <div class="tpl-container">
       <h2>Nos fournisseurs de données</h2>
       <ul class="providers__main text-center">
-        <li>
-          <img class="" src="{{ site.baseurl }}{% link assets/images/providers/insee.png %}" alt="INSEE">
-        </li>
-        <li>
-          <img class="" src="{{ site.baseurl }}{% link assets/images/providers/infogreffe.png %}" alt="Infogreffe">
-        </li>
-        <li>
-          <img class="" src="{{ site.baseurl }}{% link assets/images/providers/dgfip.png %}"
-            alt="Direction Générale des Finances Publiques">
-        </li>
-        <li>
-          <img class="" src="{{ site.baseurl }}{% link assets/images/providers/acoss.png %}" alt="URSSAF Caisse nationale">
-        </li>
-      </ul>
-      <ul class="providers__others text-center">
-        <li>
-          <img class="" src="{{ site.baseurl }}{% link assets/images/providers/inpi.png %}" alt="INPI">
-        </li>
-        <li>
-          <img class="" src="{{ site.baseurl }}{% link assets/images/providers/qualibat.png %}" alt="Qualibat">
-        </li>
-        <li>
-          <img class="" src="{{ site.baseurl }}{% link assets/images/providers/rna.png %}"
-            alt="Répertoire National des Associations">
-        </li>
-        <li>
-          <img class="" src="{{ site.baseurl }}{% link assets/images/providers/cnetp.png %}" alt="CNETP">
-        </li>
-        <li>
-          <img class="" src="{{ site.baseurl }}{% link assets/images/providers/probtp.png %}" alt="ProBTP">
-        </li>
-        <li>
-          <img class="" src="{{ site.baseurl }}{% link assets/images/providers/msa.png %}" alt="MSA">
-        </li>
-        <li>
-          <img class="" src="{{ site.baseurl }}{% link assets/images/providers/opqibi.png %}" alt="OPQIBI">
-        </li>
-        <li>
-          <img class="" src="{{ site.baseurl }}{% link assets/images/providers/fntp.png %}" alt="FNTP">
-        </li>
-        <li>
-          <img class="" src="{{ site.baseurl }}{% link assets/images/providers/agefiph.png %}" alt="AGEFIPH">
-        </li>
-        <li>
-          <img class="" src="{{ site.baseurl }}{% link assets/images/providers/fabsocial.png %}"
-            alt="Fabrique numérique des Ministères Sociaux">
-        </li>
-        <li>
-          <img class="" src="{{ site.baseurl }}{% link assets/images/providers/cma.png %}" alt="CMA France">
-        </li>
-        <li>
-          <img class="" src="{{ site.baseurl }}{% link assets/images/providers/ademe.png %}"
-            alt="Agence de la transition écologique">
-        </li>
-        <li>
-          <img class="" src="{{ site.baseurl }}{% link assets/images/providers/douanes.png %}"
-            alt="Direction générale des douanes et droits indirects">
-        </li>
-        <li>
-          <img class="" src="{{ site.baseurl }}{% link assets/images/providers/agencebio.png %}" alt="Agence BIO">
-        </li>
+        {% for provider in site.data.providers %}
+          <li>
+            {% asset "{{ 'providers/' | append: provider.logo }}" magick:format='.webp' alt='{{ provider.name }}' %}
+          </li>
+        {% endfor %}
       </ul>
     </div>
   </section>