Cours — Multimédia Adaptatif & Emailing d'Alerte

Le problème : des images qui plombent le réseau

Mettre max-width: 100% sur une image la réduit visuellement, mais le smartphone télécharge quand même le fichier entier. Un schéma réseau de 4 Mo reste 4 Mo, même affiché en tout petit — catastrophique pour un technicien d'astreinte en 4G dégradée.

Deux réponses : des formats modernes plus légers, et des balises HTML qui laissent le navigateur choisir la bonne version.

Les formats modernes : WebP et AVIF

Format	Gain vs JPEG/PNG	Points forts
WebP (Google)	−25 à −34 %	Transparence, animations, très bien supporté.
AVIF (open source)	jusqu'à −50 %	Dégradés et détails fins des dashboards.

En production, la conversion s'automatise en ligne de commande (ex. cwebp image.png -o image.webp).

`srcset` : un catalogue de tailles

On fournit plusieurs versions de l'image ; le navigateur choisit la plus adaptée à son écran et ne télécharge que celle-là.

<img src="charts-desktop.png"
     srcset="charts-mobile.png 480w,
             charts-tablet.png 800w,
             charts-desktop.png 1200w"
     sizes="(max-width: 600px) 480px, 800px"
     alt="Graphique Trafic WAN">

480w, 800w… = la largeur réelle de chaque fichier.
sizes = la place que l'image occupera selon l'écran.
Un mobile ne télécharge que la version 480px → bande passante préservée.

`<picture>` : changer de format ou d'image

La balise <picture> va plus loin : elle permet de proposer du WebP/AVIF aux navigateurs modernes avec un PNG de secours (fallback), ou même une image différente sur mobile (schéma simplifié).

<picture>
  <source media="(max-width: 768px)" srcset="topo-mobile.webp" type="image/webp">
  <source media="(min-width: 769px)" srcset="topo-desktop.avif" type="image/avif">
  <!-- repli universel -->
  <img src="topo-desktop.png" alt="Topologie Réseau Globale">
</picture>

L'e-mail HTML : retour au web de 1999

Les clients mail (Outlook, Gmail mobile…) utilisent des moteurs de rendu volontairement bridés. Outlook rend même les mails avec le moteur de… Microsoft Word. Conséquences :

❌ Flexbox et Grid interdits — non supportés.
❌ Pas de CSS externe (<link> bloqué) ni de <style> global (souvent purgé).
✅ La seule règle fiable : mise en page en <table> + styles en ligne (attribut style="" sur chaque balise).

<!-- squelette type d'un mail -->
<table width="100%" cellpadding="0" cellspacing="0" style="background:#0f172a;">
  <tr>
    <td align="center" style="padding:20px;">
      <table width="100%" style="max-width:600px;"> ... </table>
    </td>
  </tr>
</table>

Les règles d'un mail d'alerte SecOps

600px de large maximum — sinon scroll horizontal sur mobile.
Code couleur strict : bandeau rouge = critique, orange = warning, vert = résolu. Diagnostic en une seconde.
Texte brut privilégié : les infos vitales (hôte, IP, erreur) en texte stylisé, jamais dans une image — les clients mail bloquent les images par défaut. Un mail dont l'alerte est une image bloquée = un mail vide à 3 h du matin.
Bouton CTA en cellule de tableau stylisée (padding généreux, cliquable au pouce).

Dans le TP L'alerte « disque 96 % sur SRV-DB-PROD-01 » applique tout ça : tableaux imbriqués, styles en ligne, bandeau #dc2626, corps monospace façon terminal, et bouton d'accès à la console.

Checklist avant de rendre

Aucun <link> CSS ni <style> global dans le mail.
Mise en page 100 % en tableaux (table, tr, td).
Chaque balise stylisée porte son attribut style="".
Conteneur limité à max-width: 600px.
Bandeau rouge #dc2626 pour le niveau critique.
Infos système en texte monospace, lisibles sans images.
Bouton CTA construit avec une cellule de tableau.

Passer à la pratique Ouvrir le TP 4 → Navigation Retour au sommaire

Multimédia Adaptatif & Emailing d'Alerte