A l'issue de cette formation, vous serez capable de :

• Mesurer les impacts sur l'empreinte carbone
• Décrire les impacts sur les visiteurs d'un site Web et sur le référencement par Google
• Renforcer la vitesse de chargement des images d'un site Web par le navigateur
• Assurer une haute qualité visuelle
• Préparer et décliner les images pour les écrans : sites Web et terminaux mobiles, tablettes iPad et Android, Smartphones iPhone et Android
• Identifier les outils disponibles pour WordPress
• Améliorer le SEO grâce aux balises d'images (Search Engine Optimization).

Jour 1 - Matin

Contexte

• Pourquoi bien optimiser les images Web ?
• Les impacts multiples et importants sur :
• Le référencement par Google
• Le taux de rebond des visiteurs
• Les ventes en e-commerce
• Le taux d'engagement
• La confiance dans une marque

Les différents types d'images numériques

• Matriciel vs vectoriel
• La lumière et la perception humaine
• Codage des couleurs
• Synthèse additive
• Synthèse soustractive
• Les pixels
• Définition / résolution
• Taille / format
• Les profils RVB

Les périphériques

• Acquisition
• Scanner
• Appareils photos
• Smartphones
• Affichage
• Ecrans
• Les tailles d'écran

Banques d'image

• Commerciales
• Gratuites

Licences de droit d'auteur

• Libres de droit
• Droits gérés
• Libres de diffusion

Exemples de travaux pratiques (à titre indicatif)

• Analyse comparative des formats d'images et de leurs usages
• Choix d'images sur banques d'images en fonction d'un brief

Jour 1 - Après-midi

Outil de traitement d'image

• Adobe Photoshop
• Pixelmator
• Affinity Photo
• GIMP
• Paint.NET

Les formats matriciels

• JPEG
• PNG
• GIF
• WebP
• JPEG-XL
• AVIF
• HEIC
• Grille des spécificités

Les formats vectoriels

• SVG (+ XML)
• Compression GZIP
• Optimiser avec SVGO

Les compressions

• Lossless (sans perte)
• RLE (Run Length Encoding)
• LZW (Lempel-Ziv-Welch)
• Lossy (destructive)
• JPEG

Traitement pour le Web

• Comprendre le rapport poids / qualité
• Gérer la compression
• Technique du subsampling d'image

Outils d'optimisation

• iLoveIMG
• GIFsicle
• JPEGtran
• OptiPNG
• pngquant

Optimisation SEO

• Bien nommer les images
• Protéger avec .htaccess
• Images dans le texte
• EXIF (Exchangeable Image File Format) et métadonnées
• Visual Search

Insertion dans la page Web

• HTML
• La balise 
• Les attributs : alt, title...
• Taille réelle et taille d'affichage
• CSS
• La propriété background-image
• Superposition de fonds

Optimiser les images dans WordPress

• Outils de redimensionnement internes
• Plug-ins
• Smush
• Imagify (WP Rocket)
• TinyPNG
• Compatibilité WebP
• Site Accelerator du Jetpack
• KeyCDN / Cache Enabler
• Optimus.io

Images responsives

• Le rôle des CSS
• Taille absolue et relative
• HIDPI (High Dots Per Inch) et Retina
• Pixel CSS et pixel d'appareil
• Densité des écrans
• Utilisation d'images de résolutions multiples
• : les attributs "srcset" et "sizes"
• La balise :

Réduire les requêtes HTTP

• Sprite sheet
• Data URI (Uniform Resource Identifier)

Sobriété numérique

• Impacts écologiques des images sur le Web
• Démarche d'éco-conception de sites Web
• Traitements nécessaires en amont
• Les sollicitations inutiles
• Du navigateur
• Du serveur
• Usage d'un CDN
• Bon usage
• De Cloud Computing
• De Cloudinary
• Revisiter son Web Design
• Comprendre le CSS pour y recourir plus souvent
• Optimisation des SVG
• Nettoyage des balises HTML vides

Exemples de travaux pratiques (à titre indicatif)

• Optimisation du poids d'une image avec différents outils en comparant qualité visuelle et taille de fichier
• Analyse d'un site existant et préconisations pour l'optimisation des images et la sobriété numérique