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

15

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).

Ryan Elkins
la source

Réponses:

14

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.

Bryson
la source
+1 Wow! Ce sont des articles impressionnants. Je suis très content que vous les ayez publiées.
jessegavin
Oui, ils sont bien plus avancés sur Photoshop que moi, mais je les ai montrés à mes concepteurs et ils ont toujours appris une chose ou deux.
Bryson
10

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. texte alternatif

jessegavin
la source
1
Pourriez-vous réduire la taille de cette image? Le chargement prend plusieurs secondes.
1
JPEG est normalement une taille de fichier plus petite pour les grandes images multicolores.
Kevin
4

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

Travis Northcutt
la source
lol, l'URL a un drôle de mot
ajax333221
4

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.

dmsnell
la source
3

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)
Aaron
la source
en combinaison avec "Enregistrer pour le Web", c'est souvent une excellente solution
Jason
2
PNG-8 est le plus souvent beaucoup plus petit que le GIF correspondant.
néo
1
GIF est presque obsolète en dehors de l'animation, et même cela est remplacé par APNG.
DisgruntledGoat
2

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.


la source
J'appuie les données EXIF ​​- si vous n'en avez pas besoin, videz-les. Je pensais que ce serait petit (c'est juste du texte, n'est-ce pas?) Mais sur certains sites, j'ai vu une différence de 30 Ko où les images de 50 Ko (téléchargées par l'utilisateur - mais redimensionnées en gardant EXIF) réduites à 20 Ko ou moins au même paramètre de qualité - juste en supprimant les données EXIF ​​..
jeffreypriebe
2

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).

Zhaph - Ben Duguid
la source
1

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.

JasonBirch
la source