Optimisation des images pour le digital et enjeux de la sobriété numérique
Proposé par
M2I
Prérequis
Public admis
- Salarié en Poste
- Entreprise
Demandeur d'emploi et Etudiant non admis
Financement
- Votre OPCO
- Financement personnel
Financement CPF non pris en charge
Modalités
- En centre
- À distance
Objectifs pédagogiques
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
- Reconnaître les outils disponibles pour WordPress
- Améliorer le SEO grâce aux balises d'images (Search Engine Optimization).
Programme de la formation
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
Banque d'image
- Commerciales
- Gratuites
Licences de droit d'auteur
- Libres de droit
- Droits gérés
- Libre de diffusion
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
Le contenu de ce programme peut faire l'objet d'adaptation selon les niveaux, prérequis et besoins des apprenants.
Modalités d’évaluation des acquis
- En cours de formation, par des productions
- Et, en fin de formation, par un questionnaire d'auto-évaluation
Proposé par
M2I
"Un leadership dans le domaine de la formation"
Proposé par
M2I
