CSS-IG.net a pour thèmes principaux l'optimisation des images Web et le potentiel du format PNG (Portable Network Graphics), recommandé par le W3C. Il s'adresse aux designers et intégrateurs soucieux de la performance de leur site et de la qualité de leur image.
Reprise du principe précédent en appliquant de la transparence sur un PNG pour que l'image de fond soit restituée correctement. Comparatif entre PNG-8 tRNS, PNG-8, PNG-24 et JPEG.
Vous lirez souvent que les captures d'écran devraient être au format PNG ; les captures d'écran qui contiennent une séquence de film (photo) sont l'exception. Faut il choisir JPEG, PNG ou les deux ?
Un brève rapide qui parle des différentes méthodes pré-optimisation et pré-compression : dimensionnement, suppression d'éléments, échange de couleurs et modifications de structure.
Convertissez vos captures d'écran avec le ScriptPNG en utilisant l'option 3 : vous obtiendrez une image bien plus légère, sans détérioration importante de la qualité.
Encore une nouvelle version du ScriptPNG : mise à jour de pngnq 0.5 vers pngnq 1.0 (atténuation des dégradations en passage en PNG-8 avec les options 3 à 7) et de libpng 1.2.37.
Un test qui donne l'illusion de la translucidité d'un PNG-32, ou d'un PNG Paletted avec opacités variables, compatible depuis IE4 et supérieurs.
Le ScriptPNG a été mis à jour. Quelques modifications au niveau du script lui même, un affichage silencieux dans la console, des procédures par étapes, et la mise à jour des différents outils d'optimisation et compression.
Ce test montre une indexation du texte qui pourrait être réalisée dans l'entête d'une image, et positionné en utilisant un système similaire à ceux des images map.
Ce test montre 10 captures d'écran successives dont le poids total est de 32824 octets, ne nécessitant qu'une seule requête HTTP, admettant une structuration quasi-instantanée pour un chargement éclair.
Code.google donne des conseils pour optimiser les images. Le problème, c'est que certaines notions échappent à l'auteur, qui emploi de mauvaises images pour illustrer. Piqûre de rappel concernant le problème rencontré sur cette image.
Chercher à compresser sans optimiser offre généralement une perte du rapport qualité / poids. Lorsque l'image source est perdue, il est difficile d'optimiser une image déjà encodée en JPEG. Démonstration d'une optimisation avant la compression.
Les techniques et outils référencés dans cet article vous permettent de réaliser des points de contrôle pre-optimisation (conversion entre formats à éviter, choix des formats PNG, quantification, vérification de la nécessite de la transparence, position des pixels par rapport aux variables de couleurs), ainsi que d'optimiser la compression de vos fichiers PNG (ScriptPNG). Cet article nécessite l'assimilation du choix du format image, car PNG n'est pas un format universel utilisable dans tous les cas ; de ce choix dépendra le meilleur rapport qualité / poids obtenu pour votre image.
Cet article détaille quels sont les caractéristiques qui permettent d'obtenir un PNG disposant d'un bon potentiel d'optimisation : c'est la première étape, avant d'appliquer les phénomènes de compression. Un guide illustré donne des exemples où les potentiels sont exploités, obtenant ainsi une qualité graphique exceptionnelle tout en proposant un poids très léger. Au sommaire :
CSS-Spritesà large palette
Respecter une bonne structure sémantique permet d'alléger le poids de vos pages HTML, et de simplifier la maintenance du site ; cela permet indirectement à un moteur de recherche de mieux comprendre le thème étudié sur la page, pour mieux structurer les réponses ponctuelles qu'il peut offrir à ses utilisateurs, à partir de recherches ciblées par mots-clés. Le HTML peut donc être organisé d'une manière précise, avec des identifiants et un ordre de structure logique de lecture ; cette architecture améliore l'accessibilité et indirectement le potentiel de référencement.
Cet article contient un exemple de code HTML étudié, détaillé point par point, avec des conseils basiques pour la rédaction Web. Il décrit la fonctionnalité et l'importance de certaines balises qui sont largement considérées par les moteurs de recherche. Nous vous méprenez pas sur l'objectif de l'article : il ne permet en aucun cas d'améliorer votre référencement. Au sommaire :
<title>) - Titre de page<h1>) - Thème de page<h2>) - Thèse de page<a>) - Liens hypertextes (internes, externes, nofollow)<strong> et <em>) - Mise en importance<img>) - Description de l'imageVous pouvez modifier l'entête des requêtes HTTP pour diminuer les requêtes de vérification (Last-Modified), ou encore l'accès aux différentes ressources du site. Hors les modifications d'entêtes, il existe d'autres méthodes qui permettent de diminuer le nombre de requêtes vers le serveur : créer un favicon souvent absent (même lorsqu'il n'est pas sollicité) qui peut générer des erreurs 404, efficacité des pages d'erreurs personnalisées, stocker plusieurs images distinctes dans une seule (CSS-Sprites), une image réactive (ImageMap), les requêtes vers différents nom de domaine, ou encore le chargement parallèle des différentes ressources depuis différentes machines.
Cet article dresse une liste de techniques qui permettent de diminuer le nombre de requêtes HTTP vers un serveur, afin de le soulager et d'augmenter son potentiel de réponse à d'autres clients. Il complémente l'article Modifier les entêtes HTTP et optimiser le cache
, en donnant une liste d'actions qui peuvent emmener à multiplier les requêtes sur un serveur, et les solutions pour atténuer ce phénomène. Au sommaire :
css-ig.net - Contacter l'auteur