optimized images

PacifistaMC · Sep 19, 2023 · 5ae08a7 · 5ae08a7
1 parent 14cf16a
commit 5ae08a7
Show file tree

Hide file tree

Showing 12 changed files with 27 additions and 26 deletions.
diff --git a/src/app/components/footer/footer.component.html b/src/app/components/footer/footer.component.html
@@ -4,7 +4,7 @@
       <div class="row">
 
         <div class="col col-lg-2 align-self-center">
-          <img src="assets/img/pacifista-logo.png" alt="Pacifista Logo">
+          <img ngSrc="assets/img/pacifista-logo.webp" [loading]="'lazy'" alt="Pacifista Logo" height="150" width="150">
         </div>
 
         <div class="col-lg">
@@ -27,7 +27,7 @@ <h3>Nous contacter</h3>
           <a href="https://discord.gg/3smswFCBky" rel="nofollow external" target="_blank">
             <div class="row">
               <div class="col-sm-1">
-                <img src="assets/img/socials/discord.svg" alt="Logo Discord" height="30" width="30">
+                <img ngSrc="assets/img/socials/discord.svg" alt="Logo Discord" height="30" width="30">
               </div>
               <div class="col-sm">
                 <p>Discord</p>
@@ -39,7 +39,7 @@ <h3>Nous contacter</h3>
             <div class="row">
               <div class="row">
                 <div class="col-sm-1">
-                  <img src="assets/img/socials/twitter.svg" alt="Logo Twitter" height="30" width="30">
+                  <img ngSrc="assets/img/socials/twitter.svg" alt="Logo Twitter" height="30" width="30">
                 </div>
                 <div class="col-sm">
                   <p>Twitter</p>
@@ -52,7 +52,7 @@ <h3>Nous contacter</h3>
             <div class="row">
               <div class="row">
                 <div class="col-sm-1">
-                  <img src="assets/img/socials/gmail.svg" alt="Logo Email" height="30" width="30">
+                  <img ngSrc="assets/img/socials/gmail.svg" alt="Logo Email" height="30" width="30">
                 </div>
                 <div class="col-sm">
                   <p>[email protected]</p>

diff --git a/src/app/components/navbar/navbar.component.html b/src/app/components/navbar/navbar.component.html
@@ -2,7 +2,7 @@
   <nav class="navbar navbar-expand-lg">
     <div class="container-fluid">
       <a class="navbar-brand" href="/">
-        <img src="assets/img/pacifista-logo.png" width="60" height="60" alt="pacifista logo" class="d-inline-block">
+        <img ngSrc="assets/img/accueil/pacifista-logo-navbar.webp" [loading]="'lazy'" width="60" height="60" alt="pacifista navbar minecraft logo" class="d-inline-block">
       </a>
 
       <div class="d-flex">

diff --git a/src/app/pages/accueil/components/about/about-accueil-section.component.html b/src/app/pages/accueil/components/about/about-accueil-section.component.html
@@ -3,28 +3,28 @@
     <div class="row text-center align-content-center">
 
       <div class="col">
-        <img ngSrc="assets/img/accueil/dev-team.svg" class="mb-2" alt="Equipe de développement de Pacifista illustré par une image" height="443" width="867">
+        <img ngSrc="assets/img/accueil/dev-team.svg" [loading]="'lazy'" class="mb-2" alt="Equipe de développement de Pacifista illustré par une image" height="443" width="867">
         <h3>Développement fait maison</h3>
         <p>Le code source du serveur et de tout ce qui l’entoure est fait par nos équipes.
           Ce qui nous permet de suivre les tendances / envies de la communauté</p>
       </div>
 
       <div class="col">
-        <img ngSrc="assets/img/accueil/staff-img.svg" class="mb-2" alt="Pacifista possède une équipe à l'écoute des joueurs" height="531" width="525">
+        <img ngSrc="assets/img/accueil/staff-img.svg" [loading]="'lazy'" class="mb-2" alt="Pacifista possède une équipe à l'écoute des joueurs" height="531" width="525">
         <h3>Un staff réactif</h3>
         <p>Dans tous vos problèmes sur Pacifista ou toutes demandes spécifiques
           il y aura toujours une oreille attentive de l’équipe !</p>
       </div>
 
       <div class="col">
-        <img ngSrc="assets/img/accueil/no-limit-modes-img.svg" class="mb-2" alt="logo mondes" height="536" width="525">
+        <img ngSrc="assets/img/accueil/no-limit-modes-img.svg" [loading]="'lazy'" class="mb-2" alt="logo mondes" height="536" width="525">
         <h3>Des modes sans limites</h3>
         <p>Que ce soit dans notre mode de jeu survie, créatif ou bien plus encore,
           nous souhaitons que vous soyez libre dans dans vôtre créativité.</p>
       </div>
 
       <div class="col">
-        <img ngSrc="assets/img/accueil/community-img.svg" class="mb-2" alt="logo communauté" height="478" width="660">
+        <img ngSrc="assets/img/accueil/community-img.svg" [loading]="'lazy'" class="mb-2" alt="logo communauté" height="478" width="660">
         <h3>Communauté bienveillante</h3>
         <p>Avec nos plus de 4 ans d’expérience dans la gestion de communauté,
           nous détectons facilement les comportements toxic et problématiques.

diff --git a/src/app/pages/accueil/components/socials/socials-accueil-section.component.html b/src/app/pages/accueil/components/socials/socials-accueil-section.component.html
@@ -9,7 +9,7 @@ <h3>Suivez nos réseaux pour ne rien rater.</h3>
       <div class="col col-lg-3">
         <a href="https://twitter.com/pacifista_mc" rel="nofollow external" target="_blank">
           <div class="social-logo-container">
-            <img ngSrc="assets/img/socials/twitter.svg" alt="Twitter logo" height="100" width="100">
+            <img ngSrc="assets/img/socials/twitter.svg" [loading]="'lazy'" alt="Twitter logo" height="100" width="100">
           </div>
         </a>
         <a class="social-link" href="https://twitter.com/pacifista_mc" rel="nofollow external" target="_blank">Lien <fa-icon [size]="size" [icon]="logoExternalLink"></fa-icon></a>
@@ -18,7 +18,7 @@ <h3>Suivez nos réseaux pour ne rien rater.</h3>
       <div class="col col-lg-3">
         <a href="https://twitch.tv/funixgaming" rel="nofollow external" target="_blank">
           <div class="social-logo-container">
-            <img ngSrc="assets/img/socials/twitch.svg" alt="Twitch logo" height="100" width="100">
+            <img ngSrc="assets/img/socials/twitch.svg" [loading]="'lazy'" alt="Twitch logo" height="100" width="100">
           </div>
         </a>
         <a class="social-link" href="https://twitch.tv/funixgaming" rel="nofollow external" target="_blank">Lien <fa-icon [size]="size" [icon]="logoExternalLink"></fa-icon></a>
@@ -27,7 +27,7 @@ <h3>Suivez nos réseaux pour ne rien rater.</h3>
       <div class="col col-lg-3">
         <a href="https://discord.gg/3smswFCBky" rel="nofollow external" target="_blank">
           <div class="social-logo-container">
-            <img ngSrc="assets/img/socials/discord.svg" alt="Discord logo" height="100" width="100">
+            <img ngSrc="assets/img/socials/discord.svg" [loading]="'lazy'" alt="Discord logo" height="100" width="100">
           </div>
         </a>
         <a class="social-link" href="https://discord.gg/3smswFCBky" rel="nofollow external" target="_blank">Lien <fa-icon [size]="size" [icon]="logoExternalLink"></fa-icon></a>
@@ -36,7 +36,7 @@ <h3>Suivez nos réseaux pour ne rien rater.</h3>
       <div class="col col-lg-3">
         <a href="https://youtube.com/c/funixgaming" rel="nofollow external" target="_blank">
           <div class="social-logo-container">
-            <img ngSrc="assets/img/socials/youtube.svg" alt="YouTube logo" height="100" width="100">
+            <img ngSrc="assets/img/socials/youtube.svg" [loading]="'lazy'" alt="YouTube logo" height="100" width="100">
           </div>
         </a>
         <a class="social-link" href="https://youtube.com/c/funixgaming" rel="nofollow external" target="_blank">Lien <fa-icon [size]="size" [icon]="logoExternalLink"></fa-icon></a>

diff --git a/src/app/pages/accueil/components/staff/staff-accueil-section.component.html b/src/app/pages/accueil/components/staff/staff-accueil-section.component.html
@@ -7,25 +7,25 @@ <h3>L'équipe de Pacifista, à vôtre écoute.</h3>
 
     <div class="row text-center align-content-start justify-content-md-center">
       <div class="col col-lg-12">
-        <img ngSrc="assets/img/minecraft/skins/funixgaming.png" height="180" width="180" alt="FunixGaming Minecraft skin">
+        <img ngSrc="assets/img/minecraft/skins/funixgaming.png" [loading]="'lazy'" height="180" width="180" alt="FunixGaming Minecraft skin">
         <h4>FunixGaming</h4>
         <p><span class="fondateur">Fondateur</span></p>
       </div>
 
       <div class="col col-lg-4">
-        <img ngSrc="assets/img/minecraft/skins/knyzeeer.png" height="180" width="180" alt="Knyzeeer Minecraft skin">
+        <img ngSrc="assets/img/minecraft/skins/knyzeeer.png" [loading]="'lazy'" height="180" width="180" alt="Knyzeeer Minecraft skin">
         <h4>Knyzeeer</h4>
         <p><span class="admin">Admin</span></p>
       </div>
 
       <div class="col col-lg-4">
-        <img ngSrc="assets/img/minecraft/skins/jarkodj.png" height="180" width="180" alt="JarkoDJ Minecraft skin">
+        <img ngSrc="assets/img/minecraft/skins/jarkodj.png" [loading]="'lazy'" height="180" width="180" alt="JarkoDJ Minecraft skin">
         <h4>JarkoDJ</h4>
         <p><span class="admin">Admin</span></p>
       </div>
 
       <div class="col col-lg-4">
-        <img ngSrc="assets/img/minecraft/skins/tomyshelby.png" height="180" width="180" alt="TomyShelby Minecraft skin">
+        <img ngSrc="assets/img/minecraft/skins/tomyshelby.png" [loading]="'lazy'" height="180" width="180" alt="TomyShelby Minecraft skin">
         <h4>TomyShelby</h4>
         <p><span class="admin">Admin</span></p>
       </div>

diff --git a/src/app/pages/accueil/components/welcome/welcome-accueil-section.component.html b/src/app/pages/accueil/components/welcome/welcome-accueil-section.component.html
@@ -27,6 +27,6 @@ <h4>play.pacifista.fr</h4>
   </div>
 
   <div class="background-image">
-    <img ngSrc="assets/img/accueil/bg_build.webp" alt="Minecraft wallpaper bateau shaders background serveur minecraft survie claim" fill="fill">
+    <img ngSrc="assets/img/accueil/bg_build.webp" [loading]="'lazy'" height="1080" width="1920" alt="Minecraft wallpaper bateau shaders background serveur minecraft survie claim">
   </div>
 </section>
diff --git a/src/app/pages/news/news-card/news-card.component.html b/src/app/pages/news/news-card/news-card.component.html
@@ -1,7 +1,7 @@
 <div class="card text-bg-dark mb-2 pacifista-news-card">
   <div class="row g-0">
     <div class="col-md-4 div-image">
-      <img src="{{ news.articleImageUrl }}" width="600" height="300" class="img-fluid rounded-start" alt="News image {{ news.name }}">
+      <img ngSrc="{{ news.articleImageUrl }}" [loading]="'lazy'" width="600" height="300" class="img-fluid rounded-start" alt="News image {{ news.name }}">
     </div>
 
     <div class="col-md-8">

diff --git a/src/app/pages/news/news-page/news-page.component.html b/src/app/pages/news/news-page/news-page.component.html
@@ -8,7 +8,7 @@ <h3>{{ news.subtitle }}</h3>
         <p>Rédigé par {{ news.originalWriter }} le {{ news.createdAt | date : 'dd/MM/YY - HH:mm' }}</p>
       </div>
 
-      <img src="{{ news.articleImageUrl }}" class="img-fluid" alt="Image illustrative de la news {{ news.name }}">
+      <img ngSrc="{{ news.articleImageUrl }}" [loading]="'lazy'" class="img-fluid" alt="Image illustrative de la news {{ news.name }}">
     </section>
 
     <section class="pt-5">

diff --git a/src/app/pages/news/news.module.ts b/src/app/pages/news/news.module.ts
@@ -1,5 +1,5 @@
 import {NgModule} from '@angular/core';
-import {CommonModule} from '@angular/common';
+import {CommonModule, NgOptimizedImage} from '@angular/common';
 import {NewsListPageComponent} from "./news-list-page/news-list-page.component";
 import {NewsCardComponent} from "./news-card/news-card.component";
 import {FontAwesomeModule} from "@fortawesome/angular-fontawesome";
@@ -12,11 +12,12 @@ import {NewsRoutingModule} from "./news-routing.module";
     NewsCardComponent,
     NewsPageComponent,
   ],
-  imports: [
-    CommonModule,
-    NewsRoutingModule,
-    FontAwesomeModule,
-  ],
+    imports: [
+        CommonModule,
+        NewsRoutingModule,
+        FontAwesomeModule,
+        NgOptimizedImage,
+    ],
   exports: [
     NewsCardComponent
   ]

diff --git a/src/assets/img/accueil/pacifista-logo-navbar.webp b/src/assets/img/accueil/pacifista-logo-navbar.webp
diff --git a/src/assets/img/pacifista-logo.png b/src/assets/img/pacifista-logo.png
diff --git a/src/assets/img/pacifista-logo.webp b/src/assets/img/pacifista-logo.webp