Que puis-je faire pour réduire la taille du fichier de mes images?
Utilisation de certains thèmes wordpress J'ai modifié certains fichiers d'image et constaté que les versions modifiées sont parfois 3 à 4 fois plus volumineuses que l'original (enregistrées dans le même format). Je ne veux pas dégrader la qualité. Comment peut-on réduire la taille d'un fichier pour qu'il se charge plus rapidement?
À l’heure actuelle, par exemple, j’utilise Photoshop et règle le curseur de qualité d’image sur "8" (sur 10).
Smashing Magazine a publié 2 excellents articles sur Optimisation PNG et optimisation JPG .
Ils expliquent en détail certaines choses que vous ignorez peut-être sur les formats et leurs implémentations. Par exemple, l'article JPEG: "N'oubliez pas que lorsque vous définissez la Qualité sur moins de 50 dans Photoshop, un algorithme d'optimisation supplémentaire, appelé sous-échantillonnage des couleurs, est appliqué, qui établit la moyenne de la couleur dans les blocs voisins de huit pixels".
Les deux articles traitent de techniques spécifiques que vous pouvez utiliser dans Photoshop pour préparer vos fichiers en vue d'une compression accrue. Ce qui est beaucoup plus efficace que les techniques utilisées après la sauvegarde d'un fichier.
Une fois que vous avez enregistré ces fichiers, ou sur des fichiers que vous n'avez pas la chance d'avoir des fichiers sources superposés pour Tweak dans Photoshop, il reste encore plus de compression à essorer de ces fichiers.
J'utilise une application Mac appelée ImageOptim . De leur site:
ImageOptim optimise les images (afin qu'elles occupent moins d'espace disque et se chargent plus rapidement) en recherchant les meilleurs paramètres de compression et en supprimant les commentaires et les profils de couleurs inutiles. Il gère les animations PNG, JPEG et GIF.
ImageOptim fournit une interface graphique pour divers outils d’optimisation: AdvPNG à partir de AdvanceCOMP, OptiPNG , PngCrush , JpegOptim , jpegtran de libjpeg, Gifsicle et éventuellement PNGOUT .
C’est excellent pour la publication d’images sur le Web (réduit facilement les images "Enregistré pour le Web" dans Photoshop) et également utile pour réduire la taille des applications Mac et iPhone.
Part de gâteau. Faites glisser vos images (ou vos dossiers d’images) sur la fenêtre. Il utilise tous ces outils pour peaufiner les schémas de compression et supprimer les méta-données et les informations de profil de couleur inutiles (qui ne sont de toute façon pas largement prises en charge). ne pas les sauvegarder et les incorporer).
Tous les outils liés dans cette citation ont des versions Windows/Linux/Mac, à l'exception de PNGOUT, mais heureusement, quelqu'un a porté PNGOUT sous OS X et Linux, car ils sont très attentionnés. Si vous choisissez d'utiliser ImageOptim, il inclura tous les éléments sauf PNGOUT dans l'application. Saisissez le port PNGOUT, déposez-le dans/usr/local/bin (ou ailleurs) et indiquez à ImageOptim où il se trouve.
Il n'est pas rare pour moi, en particulier avec les images PNG, de voir la taille des fichiers chuter de plus de 30%, même après avoir enregistré avec "Enregistrer pour le Web et les périphériques" de Photoshop.
Protip: Après avoir exécuté l'optimisation, triez la colonne d'icônes à gauche et sélectionnez toutes les lignes avec l'icône (X) - les fichiers qui n'ont pas été réduits davantage. Supprimez-les de la liste et réexécutez-les sur toutes les images comportant l'icône en forme de coche. Je peux presque vous promettre que vous aurez des images qui perdront encore la taille du fichier. Répétez le tri, la sélection, la suppression, la réexécution jusqu'à ce que vous obteniez toutes les icônes (X) et que vous l'appeliez un jour.
Lorsque vous enregistrez des photos dans Photoshop, je vous recommande d’utiliser File > Save for Web and Devices. Cela vous permettra de jouer avec les niveaux de compression et de voir le résultat visuel en temps réel. Sur les photographies, vous pouvez généralement enregistrer au-dessous du niveau 8 tout en obtenant d'excellents résultats. 
Vous voudrez peut-être consulter Yahoo Smush.it . J'ai trouvé que ça fonctionne très bien.
Pour les images PNG, vous pouvez réduire le nombre de couleurs de la palette de couleurs et enregistrer sous un fichier PNG indexé. Par exemple, considérons un logo de 128x128 pixels (non compressé). Imaginez qu’il n’utilise que 16 couleurs.
- PNG-32, quatre octets par pixel - 65 Ko
- PNG-8, un octet par pixel - 16 ko
- PNG-4, quatre bits par pixel - 8 Ko
Vous pouvez constater que, sans réduire la qualité de l'image (cela ne s'applique qu'à certains types d'images), vous pouvez réduire considérablement la taille.
Pour les boutons et les icônes de site, vous pouvez également envisager de les regrouper en une seule image et d'utiliser CSS ou JavaScript pour contrôler leur affichage (images-objets). Cela économise le nombre de requêtes HTTP effectuées pour chaque image.
Essayez d'autres formats.
- PNG pour la photographie avec alpha et/ou shadow
- GIF pour les images avec une petite palette de couleurs (noir/blanc ou une icône jaune ou quelque chose)
Essentiellement, essayez d’enregistrer votre image dans différents formats, puis examinez la taille du fichier.
Si vous utilisez le format JPEG, vous devriez pouvoir ajuster la qualité de l'image de haut en bas dans un éditeur graphique tel que Paint.net. Une qualité d'image de 50% est généralement suffisante pour le Web et la rend beaucoup plus petite.
Avec PNG, vous ne pouvez pas faire cela, mais il convient de noter que parfois, le format PNG est beaucoup plus grand et parfois beaucoup plus petit que le format JPEG. Le format PNG est beaucoup plus petit pour les images en noir et blanc, par exemple les dessins au trait en noir et blanc.
Le conseil que nous donnons ces jours-ci est d'utiliser des sprites CSS pour réduire les temps de chargement, en réduisant le nombre de demandes, mais encore une fois, vous devez regarder la taille de l'image que vous obtenez. Il est tout à fait possible que l’image CSS Sprite soit beaucoup plus grande que les images composantes, si vous combinez par exemple plusieurs PNG en noir et blanc avec un en couleur.
Vous voulez également vous assurer que vous supprimez toutes les données EXIF - la quasi-totalité de ces informations n’est pas pertinente pour les utilisateurs du Web, ont-ils vraiment besoin de savoir que vous avez utilisé un Canon 5D pour prendre la photo, et que vous avez utilisé un F-Stop de 2,8, exposé pendant 0,5 seconde, avec un ISO de 160, pas de biais d'exposition et une longueur focale de 9mm?
Toutes ces métadonnées ajoutent du poids à votre image et devraient en général être supprimées.
Comme jessegavin le souligne, la plupart des applications illustrées vous montreront un aperçu des effets de la compression. Utilisez-les, car un réglage général de "8" ne vous donnera que rarement le meilleur compromis possible.
Enfin, le plugin Google Page Speed Firefox/ Firebug peut vous donner une bonne idée de la réduction de la taille de l'image (notamment en vous permettant d'afficher et d'enregistrer les versions plus petites). .
Une fois que vous avez fait toutes les autres suggestions pour vous assurer que votre image est aussi petite que possible tout en conservant le niveau de qualité souhaité, vous voudrez également configurer votre site Web de manière à ce qu'il serve des images avec des en-têtes HTTP minimaux et que le les en-têtes que vous utilisez permettent aux images d'être stockées correctement en mettant en cache les serveurs proxy et les navigateurs Web.
Pour réduire la taille des demandes, assurez-vous que votre serveur Web est configuré pour ne pas envoyer d’en-têtes inutiles tels que X-Powered-By. Assurez-vous également que vous fournissez des éléments tels que des images, des CSS et d'autres composants statiques à partir d'un hôte ne définissant pas de cookies (par exemple, static.example.com).
Pour les images statiques, définissez leur en-tête Expires sur une date dans un futur lointain. Cela garantit que le navigateur Web et tous les mandataires de mise en cache situés au milieu conserveront l'image le plus longtemps possible. Le seul inconvénient est que si vous souhaitez afficher une image différente, vous devez utiliser un nom de fichier différent et créer un lien vers celui-ci. La numérotation des versions dans le nom de fichier (par exemple, myimage_1.png ou /images/3/logo.png) peut être un moyen efficace de le faire. Pour les pages moins statiques, définissez un en-tête Expires réaliste (accès plus X heures) et veillez à définir l'en-tête Last-Modified ou l'en-tête eTag (et non les deux) afin que les navigateurs ayant précédemment téléchargé les fichiers puissent les tester rapidement. s'ils ont la version actuelle en comparant les en-têtes au lieu de dérouler toute l'image.
Bien qu'il existe de nombreuses ressources disponibles sur ces techniques, Yahoo a fourni de nombreux conseils pour améliorer les performances de la diffusion de conten en un seul endroit.