Suggestions d'optimisation pour les images CSS

Cet article présente principalement quelques suggestions pertinentes pour l'optimisation des images CSS. Il fournit principalement une brève introduction à la technologie d'intégration d'images Sprites. Les amis dans le besoin peuvent s'y référer

L'optimisation des images CSS consiste à compresser la taille du fichier. image autant que possible. Accélère le chargement des pages, ce qui est utile pour les grands sites Web. Ne le sous-estimez pas, cela peut grandement améliorer la vitesse de chargement des pages Web. La méthode habituellement utilisée par tout le monde est celle des sprites CSS.

Le but des CSS Sprites (technologie d'intégration d'images) est de réduire le nombre de requêtes au serveur en intégrant des images, accélérant ainsi le chargement des pages. Je pense que beaucoup de gens utilisent déjà cette technologie. Permettez-moi de vous donner une brève introduction et de résumer certaines de mes techniques d'utilisation des sprites CSS.
　 Méthode d'implémentation des Sprites CSS :

Intégrez d'abord les petites images dans une grande image, puis positionnez l'arrière-plan en fonction de la position de l'icône spécifique sur la grande image.
　Résumé des points techniques des Sprites CSS :

　1. Lors de l'intégration de petites images, suivez l'ordre de haut en bas, plutôt que de disposer une image à côté d'une autre de gauche à droite. Organiser la valeur de background-position de cette manière est clair en un coup d'œil, ce qui est beaucoup plus pratique lors de l'écriture de CSS. C'est aussi pour le bien d'un entretien ultérieur. Imaginez que si la taille de l'une des images est modifiée lors d'une maintenance ultérieure, la position d'arrière-plan de tous les éléments environnants changera en conséquence, ce qui sera un casse-tête.

2. Lorsque vous intégrez de petites images, essayez d'être le plus à gauche ou à droite possible. Ces deux positions sont très flexibles et conviennent très bien pour placer des icônes devant du texte, elles ne seront pas interférées par d'autres images CSS Sprites. Sur la base du point 1, nous pouvons commencer à intégrer les images de haut en bas le long des côtés les plus à gauche et à droite.

　3. Il n'est pas recommandé de laisser des espaces au-dessus et en dessous des différentes petites images. Parce que cela entraînera une augmentation de la taille de l’image et donc une augmentation de la taille du fichier. Ces lacunes ne sont pas nécessaires.

4. La combinaison d'images avec des couleurs proches ou identiques peut réduire le nombre de couleurs, car la taille du fichier des images avec un petit nombre de couleurs sera relativement petite.
Optimisation de l'image :

Lorsque nous intégrons toutes les petites images dans une seule grande image, nous devons commencer à considérer la question de l'optimisation de l'image. Vous pouvez jeter un œil à la taille actuelle du fichier de l’image. Y a-t-il quelque chose d’insatisfaisant ? Cela n’a pas d’importance. Les étapes suivantes peuvent le résoudre.

Étant donné que l'arrière-plan de la grande image intégrée est fondamentalement complètement transparent, nous l'enregistrerons au format png. Vous pouvez dire que la taille du fichier GIF est plus petite que celle du PNG. N’avons-nous pas besoin de l’optimiser ? Pourquoi pas le GIF ? Parce que les images GIF auront de nombreux bords irréguliers lors du traitement de courbes telles que des coins arrondis ou des lignes diagonales, que nous ne voulons pas voir. Et certains petits pixels d’image proches du blanc peuvent être perdus. De plus, on peut également trouver un format plus petit que gif, qui est le format PNG8 que je vais vous présenter aujourd'hui.

Pour les GIF non animés, il est recommandé d'utiliser PNG8 car il peut obtenir le même effet que l'image png originale et peut vous faire économiser 10 à 30 % de la taille du fichier, encore plus que les images GIF. .
　Comment convertir des images au format png8

　1. Préparation de l'image : quel que soit le logiciel de dessin que vous utilisez pour dessiner l'image, enregistrez-la simplement au format png comme d'habitude. Il n’y a pas d’opération de conversion en png8 dans photoshop, il faut donc se tourner vers les feux d’artifice.

　2. Ouvrez la grande image intégrée dans les feux d'artifice.

　3. Sélectionnez Fichier - Aperçu de l'image.

4. Sélectionnez PNG8 dans la liste déroulante "Format". Il n'est pas nécessaire de sélectionner autre chose. Cliquez simplement sur le bouton "Exporter" pour sélectionner le chemin.

C'est très simple ~ Jetez un œil à la taille de votre photo png8 et comparez-la avec la photo précédente. Vous serez surpris ! ~~En regardant la qualité de l'image, elle est tout simplement parfaite~~

Ce qui précède est l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'étude de chacun. Pour plus de contenu connexe, veuillez payer. attention au site PHP chinois !

Recommandations associées :

Utilisez les boutons de clic CSS3 pour obtenir l'effet d'animation en dégradé d'arrière-plan

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!