CSS-IG Optimisation Web, format PNG

Optimiser les images (JPEG, PNG)

Choisir le bon format de l'image Web

• Travaillez toujours avec des formats bruts
• Méthodes d'encodage des formats : Paletted, TrueColor, GrayScale
• Pour des images décoratives à fort taux de couleurs, le PNG peut être remplacé par JPEG
• Choix et usages des différents formats : le récapitulatif
• Compléments : Comparatif entre PNG, JPEG et GIF - Ne convertissez pas JPEG en PNG

Transparence du format PNG

• Les différents types de transparence
• Transparence Paletted (binaire)
• Transparence Paletted (opacités variables)
• Transparence GrayScale - tRNS
• Transparence GrayScale+alpha
• Transparence TrueColor - tRNS
• Transparence TrueColor+alpha
• Support de la transparence dans les navigateurs
• Compléments : Améliorez la transparence de vos PNG

Optimiser les images PNG

• Qualité de conception des images
• Qualité d'insertion
• Des formats bruts, pas de conversion
• Ne sous-dimensionnez pas inutilement
• Encodage : Paletted, GrayScale, TrueColor
• Profondeur de l'image
• Nombre d'entrée et valeurs alpha de la palette
• Transparence PNG-32 en PNG-8
• Convertir en PNG-8 et choix du format
• Compléments : Compression ou optimisation de PNG, Améliorez la transparence de vos PNG, Atténuez la dégradation des PNG-8, Comparatif des outils de compression PNG, Améliorez la compression de vos PNG, Utilisez et optimisez les CSS-Sprites, Evitez la conversion JPEG en PNG, Modifications pré-optimisation des images

Optimisation du serveur Web

Diminuer le nombre de requêtes HTTP

• Eviter les 404 : création d'un favicon, même si inusité
• Efficacité des pages de contrôle d'erreur
• Ne disposez que d'une seule feuille de style
• Stocker plusieurs images en une seule : CSS-Sprites
• Plusieurs liens sans plusieurs images : Image-Map
• Requêtes et résolution DNS vers différents domaines
• Chargement parallèle pour éviter la surcharge des requêtes

Modifier les entêtes HTTP et optimiser le cache

• Contenu d'une requête HTTP : l'entête
• Expires : expiration de réponse
• Cache-Control : durée de vie du fichier
• Last-Modified : date de vérification
• Etag : empreintes numériques du cache

Compression (gzip, deflate) sur le HTML

• Comment vérifier que la compression fonctionne sur les pages HTML
• Tests et impacts sur la performance
• Pré-compression : comment préparer une page à la compression
• Compression des fichiers de feuilles de style et du JavaScript

Optimisation font-end : HTML, CSS

HTML : sémantique et optimisation

• Sémantique : description et usage des balises HTML
• Optimiser HTML avec CSS
• Organisation : balises de poids forts et indentation

Optimiser le CSS (feuille de style)

• Méthodes pour inclure les styles
• Grouper les propriétés aux valeurs identiques
• Débordements de classes et appartenances
• Optimisation des marges
• Optimisation des couleurs
• Autres optimisations et attributs

Quelques mots sur le référencement

Optimiser le HTML pour le référencement

• Le charset, l'encodage et le décodage des caractères
• TITLE (<title>) - Titre de page
• Meta description, la description du site
• H1 (<h1>) - Thème de page
• H2 (<h2>) - Thèse de page
• A (<a>) - Liens hypertextes (internes, externes, nofollow)
• Les ancres identifiées
• STRONG et EM (<strong> et <em>) - Mise en importance
• IMG (<img>) - Description de l'image
• Gabarit d'exemple : HTML optimisé pour le référencement