Que puis-je faire pour réduire la taille du fichier de mes images?

En travaillant avec certains thèmes wordpress, j'ai modifié certains des fichiers image et j'ai remarqué que mes versions éditées sont parfois 3-4x plus grandes que l'original (enregistrées en utilisant le même format). Je ne veux pas dégrader la qualité - quelles sont certaines des façons de 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 fait 2 excellents articles sur l' optimisation PNG et l' optimisation JPG .

Ils sont assez détaillés, expliquant en détail certaines choses que vous ne savez peut-être pas sur les formats et leurs implémentations. Par exemple, l'article JPEG: "Gardez à l'esprit que lorsque vous définissez la qualité à moins de 50 dans Photoshop, il exécute un algorithme d'optimisation supplémentaire appelé sous-échantillonnage des couleurs, qui fait la moyenne de la couleur dans les blocs de huit pixels voisins".

Les deux articles abordent des techniques spécifiques que vous pouvez utiliser dans Photoshop pour préparer vos fichiers pour une plus grande compression. Ce qui est beaucoup plus efficace que les techniques utilisées après l'enregistrement d'un fichier.

Après avoir enregistré ces fichiers, ou sur des fichiers pour lesquels vous n'avez pas la chance d'avoir des fichiers source en couches à modifier dans Photoshop, il y a encore plus de compression pour extraire ces fichiers.

J'utilise une application Mac appelée ImageOptim . Depuis leur site:

ImageOptim optimise les images - afin qu'elles occupent moins d'espace disque et se chargent plus rapidement - en trouvant les meilleurs paramètres de compression et en supprimant les commentaires et profils de couleurs inutiles. Il gère les animations PNG, JPEG et GIF.

ImageOptim fournit une interface graphique pour divers outils d'optimisation: AdvPNG d' AdvanceCOMP , OptiPNG , PngCrush , JpegOptim, jpegtran de libjpeg, Gifsicle et éventuellement PNGOUT .

Il est excellent pour publier des images sur le Web (réduit facilement les images «enregistrées 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 dossiers d'images) sur la fenêtre, il exécute tous ces outils en ajustant les schémas de compression et en supprimant les métadonnées et les informations de profil de couleur inutiles (qui ne sont pas largement prises en charge de toute façon - vous devez corriger les profils de couleur avant de sauvegarder, ne pas les enregistrer 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 sur OS X et linux parce qu'ils sont très réfléchis. Si vous choisissez d'utiliser ImageOptim, il inclura tout sauf PNGOUT dans le .app, alors saisissez le port PNGOUT, déposez-le dans / usr / local / bin (ou ailleurs) et dites à 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é via "Save For Web & Devices" de Photoshop.

Protip: Après avoir exécuté l'optimisation, triez par la colonne d'icônes à gauche et sélectionnez toutes les lignes avec l'icône (X) - fichiers qui n'ont plus été réduits. Supprimez-les de la liste et réexécutez toutes les images qui ont l'icône 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 appelez-le un jour.

Lors de l'enregistrement de photos dans Photoshop, je recommande d'utiliser File > Save for Web and Devices. Il vous permettra de jouer avec des niveaux de compression et de voir le résultat visuel en temps réel. Sur les photos, vous pouvez généralement l'enregistrer en dessous du niveau 8 et toujours obtenir d'excellents résultats.

Vous voudrez peut-être consulter Smush.it de Yahoo . Je l'ai trouvé très bien.

Pour les images PNG, vous pouvez réduire le nombre de couleurs dans la palette de couleurs et l'enregistrer en tant que PNG indexé. Par exemple, considérons un logo de 128 x 128 pixels (non compressé). Imaginez qu'il n'y a que 16 couleurs qu'il utilise réellement.

• 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 voir 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 agréger en une seule image et d'utiliser CSS ou JavaScript pour contrôler leur affichage (sprites). Cela permet d'économiser sur le nombre de requêtes HTTP effectuées pour chaque image.

• Une liste à part: Sprites CSS: Le baiser de la mort d'Image Slicing
• Une liste à part: CSS Sprites2 - Il est temps de JavaScript
• Sprites CSS: ce qu'ils sont, pourquoi ils sont cool et comment les utiliser

Essayez d'autres formats.

• JPEG pour les photographies
• PNG pour les photographies avec alpha et / ou ombre
• GIF pour les images avec une petite palette de couleurs (noir / blanc ou une icône jaune ou quelque chose)

Fondamentalement, essayez d'enregistrer votre image dans différents formats, puis examinez la taille du fichier.

Si vous utilisez JPEG, vous devriez pouvoir ajuster la qualité de l'image de haut en bas dans un éditeur graphique comme paint.net. Une qualité d'image de 50% est généralement assez bonne pour le Web et rend l'image beaucoup plus petite.

Avec PNG, vous ne pouvez pas faire cela, mais il convient de noter que parfois PNG est beaucoup plus grand et parfois beaucoup plus petit que JPEG. PNG est beaucoup plus petit pour les images en noir et blanc, par exemple, comme les dessins au trait en noir et blanc.

Le conseil donné ces jours-ci est d'utiliser des sprites CSS pour accélérer les temps de chargement en réduisant les demandes, mais encore une fois, vous devez réellement regarder la taille de l'image que vous obtenez. Il est tout à fait possible que l'image de sprite CSS soit beaucoup plus grande que les images de composants, si, par exemple, vous combinez plusieurs PNG en noir et blanc avec une couleur.

Vous voulez également vous assurer que vous supprimez toutes les données EXIF ​​- presque tout cela n'est pas pertinent pour les utilisateurs sur le 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 focale de 9 mm?

Toutes ces métadonnées ajoutent du poids à votre image et devraient en général être supprimées.

Comme le souligne jessegavin , la plupart des applications d'image vous montreront un aperçu des effets de la compression - utilisez-les, car un paramètre de couverture de "8" va rarement vous donner le meilleur compromis possible.

Enfin, le plugin Google Page Speed Firefox / Firebug peut vous donner une bonne idée de la façon dont vous pouvez réduire la taille des images (notamment en vous permettant de visualiser et d'enregistrer les versions plus petites).

http://www.sitereportcard.com/imagereducer.php

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 souhaiterez également configurer votre site Web afin qu'il serve des images avec un minimum d'en-têtes HTTP et assurez-vous que le les en-têtes que vous servez permettent aux images d'être stockées de manière appropriée en mettant en cache des serveurs proxy et des 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 comme X-Powered-By. Assurez-vous également que vous fournissez des éléments tels que des images, du CSS et d'autres composants statiques à partir d'un hôte qui ne définit pas de cookies (par exemple, static.example.com).

Pour les images statiques, définissez leur en-tête Expires sur une date dans un avenir lointain. Cela garantit que le navigateur Web et tous les mandataires de mise en cache au milieu conserveront l'image aussi longtemps que possible. Le seul inconvénient est que si vous souhaitez afficher une image différente, vous devrez utiliser un nom de fichier différent et un lien vers celui-ci à la place. 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 assurez-vous de définir l'en-tête Last-Modified ou l'en-tête eTag (pas les deux) afin que les navigateurs qui ont précédemment téléchargé les fichiers puissent rapidement tester s'ils ont la version actuelle en comparant les en-têtes au lieu de dérouler l'image entière.

Bien qu'il existe de nombreuses ressources disponibles pour discuter de ces techniques, Yahoo a fait un excellent travail en rassemblant de nombreux conseils pour améliorer les performances de la diffusion de contenu en un seul endroit.