#odx-page{font-family:’Inter’,system-ui,-apple-system,sans-serif;color:#334155;line-height:1.8;max-width:820px;margin:0 auto;padding:0 20px} #odx-page h1{font-size:2rem;font-weight:800;color:#0f172a;margin:0 0 1rem;line-height:1.3} #odx-page h2{font-size:1.45rem;font-weight:700;color:#1e293b;margin:2.5rem 0 1rem;padding-bottom:.5rem;border-bottom:2px solid #3c72fc30} #odx-page h3{font-size:1.15rem;font-weight:600;color:#1e293b;margin:1.8rem 0 .8rem} #odx-page p{margin:0 0 1.2rem;font-size:1rem;color:#475569} #odx-page ul,#odx-page ol{margin:0 0 1.5rem;padding-left:1.5rem} #odx-page li{margin-bottom:.5rem;color:#475569} #odx-page strong{color:#1e293b} #odx-page a{color:#3c72fc;text-decoration:none} #odx-page a:hover{text-decoration:underline} #odx-page .odx-hero-img{width:100%;height:auto;border-radius:12px;margin:1.5rem 0 2rem;box-shadow:0 4px 20px rgba(0,0,0,.08)} #odx-page .odx-toc{background:#f1f5f9;border-radius:10px;padding:1.5rem 2rem;margin:2rem 0} #odx-page .odx-toc h3{margin:0 0 .8rem;font-size:1.1rem;color:#0f172a;border:none;padding:0} #odx-page .odx-toc ol{margin:0;counter-reset:toc} #odx-page .odx-toc li{counter-increment:toc;margin-bottom:.4rem;color:#3c72fc;font-weight:500} #odx-page .odx-toc li a{color:#3c72fc} #odx-page .odx-highlight{background:linear-gradient(135deg,#eff6ff,#e0f2fe);border-left:4px solid #3c72fc;border-radius:0 10px 10px 0;padding:1.2rem 1.5rem;margin:1.5rem 0} #odx-page .odx-highlight p{margin:0;color:#1e3a5f;font-weight:500} #odx-page .odx-stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem;margin:1.5rem 0} #odx-page .odx-stat{background:#f8fafc;border:1px solid #e2e8f0;border-radius:10px;padding:1.2rem;text-align:center} #odx-page .odx-stat .num{font-size:1.8rem;font-weight:800;color:#3c72fc;display:block} #odx-page .odx-stat .label{font-size:.85rem;color:#64748b;margin-top:.3rem;display:block} #odx-page table{width:100%;border-collapse:collapse;margin:1.5rem 0;font-size:.95rem} #odx-page th{background:#1e293b;color:#fff;padding:.8rem 1rem;text-align:left;font-weight:600} #odx-page td{padding:.7rem 1rem;border-bottom:1px solid #e2e8f0;color:#475569} #odx-page tr:nth-child(even) td{background:#f8fafc} #odx-page .ofaq{background:linear-gradient(135deg,#0a1628 0%,#1e3a5f 100%);border-radius:16px;padding:2.5rem;margin:3rem 0;position:relative;overflow:hidden} #odx-page .ofaq::before{content: »;position:absolute;top:-50%;right:-20%;width:300px;height:300px;background:radial-gradient(circle,rgba(60,114,252,.15),transparent 70%);border-radius:50%} #odx-page .ofaq-head{display:flex;align-items:center;gap:1rem;margin-bottom:1.5rem} #odx-page .ofaq-icon{width:48px;height:48px;background:linear-gradient(135deg,#3c72fc,#60a5fa);border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:1.4rem;flex-shrink:0} #odx-page .ofaq-title{color:#fff;font-size:1.3rem;font-weight:700;margin:0} #odx-page .ofaq-count{color:#94a3b8;font-size:.85rem} #odx-page .ofaq-list{display:flex;flex-direction:column;gap:.8rem} #odx-page .ofaq-item{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);border-radius:12px;overflow:hidden;backdrop-filter:blur(10px)} #odx-page .ofaq-btn{width:100%;display:flex;align-items:center;gap:1rem;padding:1.1rem 1.3rem;cursor:pointer;border:none;background:none;text-align:left} #odx-page .ofaq-num{width:28px;height:28px;background:rgba(60,114,252,.15);border-radius:8px;display:flex;align-items:center;justify-content:center;color:#60a5fa;font-weight:700;font-size:.85rem;flex-shrink:0} #odx-page .ofaq-q{color:#e2e8f0;font-weight:600;font-size:.95rem;flex:1} #odx-page .ofaq-chevron{color:#64748b;transition:transform .3s cubic-bezier(.4,0,.2,1);font-size:.8rem;flex-shrink:0} #odx-page .ofaq-item.active .ofaq-chevron{transform:rotate(180deg)} #odx-page .ofaq-item.active .ofaq-num{background:linear-gradient(135deg,#3c72fc,#60a5fa);color:#fff} #odx-page .ofaq-panel{max-height:0;overflow:hidden;transition:max-height .4s cubic-bezier(.4,0,.2,1)} #odx-page .ofaq-item.active .ofaq-panel{max-height:500px} #odx-page .ofaq-ans{padding:0 1.3rem 1.2rem;color:#cbd5e1;line-height:1.7;font-size:.92rem} #odx-page .odx-cta{background:linear-gradient(135deg,#3c72fc,#1d4ed8);border-radius:14px;padding:2.5rem;text-align:center;margin:3rem 0;color:#fff} #odx-page .odx-cta h3{color:#fff;margin:0 0 .8rem;font-size:1.4rem;border:none} #odx-page .odx-cta p{color:rgba(255,255,255,.85);margin:0 0 1.5rem} #odx-page .odx-cta a.btn{display:inline-block;background:#fff;color:#1d4ed8;padding:.8rem 2rem;border-radius:8px;font-weight:700;text-decoration:none;transition:all .3s} #odx-page .odx-cta a.btn:hover{transform:translateY(-2px);box-shadow:0 8px 25px rgba(0,0,0,.2);text-decoration:none} @media(max-width:768px){#odx-page{padding:0 15px}#odx-page h1{font-size:1.5rem}#odx-page h2{font-size:1.25rem}#odx-page .ofaq{padding:1.5rem}#odx-page .odx-stat-grid{grid-template-columns:1fr 1fr}#odx-page .odx-cta{padding:1.5rem}}

Optimiser les images de votre site web : formats, compression, lazy loading

Les images representent en moyenne 50 % du poids total d’une page web. Des images non optimisees sont la cause numero un de lenteur des sites internet et impactent directement votre referencement Google via les Core Web Vitals. Pour les PME, optimiser les images de leur site est l’action technique la plus simple et la plus impactante pour ameliorer les performances et le positionnement dans les moteurs de recherche.

L’impact des images sur les performances web

Chaque image non optimisee sur votre site est un frein a la vitesse de chargement, a l’experience utilisateur et au referencement. Les consequences sont concretes et mesurables.

Impact sur la vitesse

Une page d’accueil typique de PME contient 10 a 20 images. Si chaque image pese 1 Mo au lieu de 100 Ko apres optimisation, la page fait 10 a 20 Mo au lieu de 1 a 2 Mo. Sur une connexion mobile 4G, la difference se mesure en secondes de chargement supplementaires.

Impact sur le SEO

Le LCP (Largest Contentful Paint) est souvent determine par l’image principale de la page. Une image hero non optimisee peut a elle seule faire basculer votre LCP dans le rouge, impactant votre classement Google.

Impact sur la conversion

Amazon a demontre que chaque 100 ms de latence supplementaire reduit les ventes de 1 %. Pour un site e-commerce ou un site generateur de leads, l’optimisation des images a un impact direct sur le chiffre d’affaires.

Choisir le bon format d’image

Le choix du format d’image est la premiere decision qui impacte le poids de vos fichiers. Les formats modernes offrent une compression bien superieure aux formats traditionnels.

Les formats a connaitre

• JPEG : format historique pour les photos. Bonne compression avec perte. Largement compatible
• PNG : format sans perte, ideal pour les logos, icones et images avec transparence. Plus lourd que JPEG pour les photos
• WebP : format developpe par Google. Offre une compression 25 a 34 % superieure au JPEG a qualite equivalente. Supporte la transparence. Compatible avec tous les navigateurs modernes
• AVIF : format de derniere generation. Compression 50 % superieure au JPEG. Compatibilite en progression rapide (Chrome, Firefox, Safari depuis 2023)
• SVG : format vectoriel pour les logos, icones et illustrations simples. Infiniment scalable sans perte de qualite. Tres leger

Quel format pour quel usage

• Photos (hero, equipe, produits) : WebP en priorite, JPEG en fallback
• Logos et icones : SVG quand possible, PNG sinon
• Illustrations et infographies : SVG pour les elements simples, WebP pour les visuels complexes
• Captures d’ecran : WebP ou PNG selon la presence de texte

Compresser efficacement vos images

Compression avec perte vs sans perte

• Compression avec perte (lossy) : reduit le poids en supprimant des donnees visuelles imperceptibles a l’oeil. Ideale pour les photos. Reduction de 60 a 80 % du poids
• Compression sans perte (lossless) : reduit le poids sans alterer la qualite. Ideale pour les logos et les textes. Reduction de 10 a 30 % du poids

Outils de compression

• TinyPNG / TinyJPG : compression en ligne gratuite, tres efficace (jusqu’a 20 images gratuites par jour)
• Squoosh (Google) : outil en ligne avec apercu avant/apres et controle fin de la qualite
• ShortPixel : plugin WordPress qui compresse automatiquement chaque image uploadee
• Imagify : plugin WordPress avec trois niveaux de compression (normal, agressif, ultra)
• EWWW Image Optimizer : plugin WordPress gratuit avec compression en local

Dimensionner correctement

Ne chargez jamais une image de 4000 x 3000 pixels si elle s’affiche en 800 x 600. Redimensionnez chaque image a sa taille d’affichage reelle avant de l’uploader :

• Image pleine largeur : 1200 a 1600 px de large maximum
• Image dans le contenu : 800 px de large maximum
• Vignettes et miniatures : 300 a 400 px
• Pour les ecrans Retina, prevoyez le double de la taille d’affichage

Mettre en place le lazy loading

Le lazy loading (chargement differe) consiste a ne charger les images que lorsqu’elles entrent dans la zone visible de l’ecran. Les images situees plus bas dans la page ne sont chargees que quand l’utilisateur scrolle vers elles.

Implementation

Le lazy loading natif est supporte par tous les navigateurs modernes. Il suffit d’ajouter l’attribut loading="lazy" aux balises <img> :

Regles a respecter :

• Ne pas appliquer le lazy loading a l’image LCP (l’image principale en haut de page). Elle doit se charger immediatement
• Appliquer le lazy loading a toutes les images situees en dessous de la ligne de flottaison (below the fold)
• Toujours specifier les attributs width et height pour eviter le CLS (decalage de mise en page)

Sur WordPress

WordPress integre le lazy loading natif depuis la version 5.5. Les images ajoutees via l’editeur de blocs recoivent automatiquement l’attribut loading="lazy". Verifiez que votre theme ne desactive pas cette fonctionnalite.

Images responsive et SEO

Servir la bonne taille selon l’ecran

L’attribut srcset permet de proposer plusieurs versions d’une image au navigateur, qui choisira automatiquement la plus adaptee a la taille de l’ecran et a la densite de pixels :

• Version mobile : 400 px de large
• Version tablette : 800 px de large
• Version desktop : 1200 px de large
• Version Retina : 2400 px de large

SEO des images

Les images sont aussi un vecteur de trafic via Google Images. Optimisez chaque image pour le referencement :

• Texte alternatif (alt) : descriptif et incluant un mot-cle quand pertinent. Indispensable aussi pour l’accessibilite
• Nom de fichier : descriptif et en minuscules. « audit-cybersecurite-pme.webp » plutot que « IMG_4582.jpg »
• Legende : ajoutez une legende quand elle apporte une information utile au lecteur
• Contexte : placez l’image pres du texte qu’elle illustre pour renforcer la pertinence thematique

document.querySelectorAll(‘.ofaq-btn’).forEach(b=>b.addEventListener(‘click’,()=>{const i=b.closest(‘.ofaq-item’);document.querySelectorAll(‘.ofaq-item’).forEach(x=>{if(x!==i)x.classList.remove(‘active’)});i.classList.toggle(‘active’)}));