Optimisation des images

src/components/FooterCard/FooterCard.js

@@ -1,9 +1,10 @@
-import React, {Component} from '../../../node_modules/react';
+import './FooterCard.scss';
+
 import { injectIntl } from 'react-intl';
 
-import './FooterCard.scss'
+import React, { Component } from '../../../node_modules/react';
+import bulmaLogo from '../../images/made-with-bulma.webp';
 
-import bulmaLogo from '../../images/made-with-bulma.png';
 
 // import { connect } from "react-redux";
 // import { bindActionCreators } from "redux";

src/components/MainCard/MainCard.js

@@ -3,8 +3,8 @@ import './MainCard.scss';
 import { FormattedMessage, injectIntl } from 'react-intl';
 
 import React, { Component } from '../../../node_modules/react';
-import headshotFond from '../../images/headshot_fond.png';
-import headshotMain from '../../images/headshot_main.png';
+import headshotFond from '../../images/headshot_fond.webp';
+import headshotMain from '../../images/headshot_main.webp';
 import ButtonIcon from '../ButtonIcon/index';
 import ExperienceCard from '../ExperienceCard/index';
 
@@ -23,8 +23,8 @@ class MainCard extends Component {
                             <div class="card">
                                 <div class="card-image">
                                     <figure id="photoProfil" class="image">
-                                        <img class="background" src={headshotFond} alt="Anthony Dumas" />
-                                        <img class="actor" src={headshotMain} alt="Anthony Dumas" />
+                                        <img fetchpriority="high" class="background" src={headshotFond} alt="Anthony Dumas" />
+                                        <img fetchpriority="high" class="actor" src={headshotMain} alt="Anthony Dumas" />
                                     </figure>
                                 </div>
                                 <div class="card-content">

src/messages/en.json

@@ -10,7 +10,7 @@
     "experiences": [
       {
         "occupation": "Software Developer",
-        "logo": "../../images/logos/harvest.fr.png",
+        "logo": "../../images/logos/harvest.fr.webp",
         "url": "https://www.harvest.fr",
         "duration": "(since 2016)",
         "entreprise": "Harvest",
@@ -27,7 +27,7 @@
       },
       {
         "occupation": "Internship as IOT Developer",
-        "logo": "../../images/logos/michelin.png",
+        "logo": "../../images/logos/michelin.webp",
         "url": "https://www.michelin.fr",
         "duration": "2015",
         "entreprise": "Michelin",
@@ -39,7 +39,7 @@
     "education": [
       {
         "occupation": "Associate's Degree in Computer Science / Digital Imaging *",
-        "logo": "../../images/logos/www.iut-clermont.png",
+        "logo": "../../images/logos/www.iut-clermont.webp",
         "url": "https://www.iut-clermont.fr/",
         "duration": "Class of 2015",
         "entreprise": "University of Auvergne",
@@ -55,14 +55,14 @@
       {
         "title": "IOT@Michelin",
         "url": "https://prezi.com/m/o8ey8mmpnkvp/",
-        "image": "../../images/portfolio/computerNonSense.jpg",
+        "image": "../../images/portfolio/computerNonSense.webp",
         "imgAlt": "An IOT prototype.",
         "imgTitle": "An IOT prototype."
       },
       {
         "title": "ADM Photographie",
         "url": "https://photos.adm.ink/",
-        "image": "../../images/portfolio/admPhotos.jpg",
+        "image": "../../images/portfolio/admPhotos.webp",
         "imgAlt": "A picture of a beautiful town.",
         "imgTitle": "A picture of a beautiful town."
       }

src/messages/fr.json

@@ -10,7 +10,7 @@
     "experiences": [
       {
         "occupation": "Software Developer",
-        "logo": "../../images/logos/harvest.fr.png",
+        "logo": "../../images/logos/harvest.fr.webp",
         "url": "https://www.harvest.fr",
         "duration": "depuis 2016",
         "entreprise": "Harvest",
@@ -27,7 +27,7 @@
       },
       {
         "occupation": "Stagiaire Développeur Internet des Objets",
-        "logo": "../../images/logos/michelin.png",
+        "logo": "../../images/logos/michelin.webp",
         "url": "https://www.michelin.fr",
         "duration": "2015",
         "entreprise": "Michelin",
@@ -45,7 +45,7 @@
     "education": [
       {
         "occupation": "DUT Informatique - Imagerie Numérique",
-        "logo": "../../images/logos/www.iut-clermont.png",
+        "logo": "../../images/logos/www.iut-clermont.webp",
         "url": "https://www.iut-clermont.fr/",
         "duration": "Promotion 2015",
         "entreprise": "Université d'Auvergne",
@@ -55,7 +55,7 @@
       },
       {
         "occupation": "L2 Informatique",
-        "logo": "../../images/logos/www.uca.fr.png",
+        "logo": "../../images/logos/www.uca.fr.webp",
         "url": "https://www.uca.fr",
         "duration": "2016",
         "entreprise": "Université Clermont-Auvergne",
@@ -70,14 +70,14 @@
       {
         "title": "IOT@Michelin",
         "url": "https://prezi.com/m/o8ey8mmpnkvp/",
-        "image": "../../images/portfolio/computerNonSense.jpg",
+        "image": "../../images/portfolio/computerNonSense.webp",
         "imgAlt": "Une photo d'un micro ordinateur dans ma main",
         "imgTitle": "Une photo d'un micro ordinateur dans ma main"
       },
       {
         "title": "ADM Photographie",
         "url": "https://photos.adm.ink/",
-        "image": "../../images/portfolio/admPhotos.jpg",
+        "image": "../../images/portfolio/admPhotos.webp",
         "imgAlt": "Une photo du village de mon enfance",
         "imgTitle": "Une photo du village de mon enfance"
       }