Comment réduire la taille du fichier PNG pour le Web?


16

J'ai un fichier PNG-24 avec un fond transparent et sa taille actuelle est de 1,5 Mo. Comment réduire la taille ou utiliser le format de fichier PNG-8 et conserver la même qualité?

entrez la description de l'image ici

Fichier PNG à partir d'ici: http://www19.zippyshare.com/v/69590430/file.html

Exemple d'image téléchargée J'ai essayé toutes les suggestions mais pas de bons résultats, veuillez en informer

Merci


Utilisez-vous Save For Web ...? Il devrait vous donner des options pour réduire la taille, y compris la profondeur de couleur.
James P

Votre exemple d'image est un fichier JPEG. Si vous voulez que les gens essaient différents outils / méthodes dessus, vous devez fournir l'un de vos fichiers PNG à la place ...!
Laurent Parenteau

le téléchargeur du site l'a converti en jpg. voici le fichier png s8.postimage.org/z4apal6z9/cw_Copy.png ..... veuillez ne pas utiliser posterize car il ne fonctionnera pas avec les autres fichiers que j'ai ..... merci
Welliam

1
Ce lien est également un JPEG.
Dan D.

cette fois, je suis sûr que c'est png www19.zippyshare.com/v/69590430/file.html....... merci pour votre aide
Welliam

Réponses:


6

PNG est un format de compression sans perte - sans changer le matériau source dans le fichier, il y a très peu de moyen d'augmenter la compression au-delà de la compression par défaut du plus haut niveau. Le seul véritable moyen de réduire la taille sera de modifier l'image, soit en réduisant la résolution, soit la profondeur des couleurs afin que la compression PNG soit moins complexe à utiliser.

Si vous souhaitez des niveaux de compression élevés pour l'image et que vous ne vous souciez pas du stockage de données sans perte, utilisez JPEG.


4
Je ne dirais pas peu. Save For Web de Photoshop est si pauvre que PNGOUT peut souvent réduire les fichiers sans perte de 20 à 40%. Et Photoshop ne prend pas en charge PNG8 + alpha, qui peut être 70% plus petit pour certaines images.
Kornel

Les meilleurs chiffres que j'ai jamais vus se situaient autour de 8-15%, mais n'hésitez pas à me lier à de meilleures données.
mikebabcock

1
J'avais besoin d'optimiser un seul fichier png et j'ai utilisé tinypng.com pour cela. Cela m'a fait économiser plus de 50% d'espace.

9

RIOT peut le faire, et bien plus encore.

Radical Image Optimization Tool (RIOT pour faire court) est un optimiseur d'image gratuit qui vous permettra d'ajuster visuellement les paramètres de compression tout en conservant une taille de fichier minimale.

Il utilise une interface côte à côte (double vue) ou une seule vue pour comparer l'original à l'image optimisée en temps réel et voir instantanément la taille du fichier résultant.

L'optimiseur d'image est léger, rapide et simple à utiliser, mais puissant pour les utilisateurs avancés. Vous pourrez contrôler la compression, le nombre de couleurs, les paramètres des métadonnées et bien plus encore, et sélectionner le format d'image (JPEG, GIF ou PNG) pour votre fichier de sortie.

Une autre possibilité consiste à utiliser une combinaison de pngquant, pngout et pngcrush, comme décrit ici , mais cela provient de la ligne de commande.

Voici les instructions pour convertir des images png24 en png8 pour ie6, tout au long de la ligne de commande en utilisant des outils open source (je pense) pngquant + pngout + pngcrush.

1- quantifier l'image en 256 (donc, en gros, les png8 sont de la merde avec de grands sprites ou des sprites avec une large gamme de couleurs).

pngquant 256 some_24_bit.png

2- Convertir l'image d'un png24 en png8

pngout -c3 -d8 -y -force some_24_bit.png some_8_bit.png

3- compresser l'image

pngcrush some_8_bit.png -bit_depth 8 -brute -rem alla -reduce some_8_bit_small.png


6

Essayez TinyPNG

Depuis leur site Web:

Comment ça marche?

Lorsque vous téléchargez un fichier PNG (Portable Network Graphics), des couleurs similaires dans votre image sont combinées. Cette technique est appelée «quantification». Le nombre de couleurs étant réduit, les fichiers PNG 24 bits peuvent être convertis en images couleur indexées 8 bits beaucoup plus petites. Toutes les métadonnées inutiles sont également supprimées. Le résultat: de minuscules fichiers PNG avec un support à 100% pour la transparence.

Ils ont deux options:

  • Faites glisser et déposez les images sur leur site Web et elles seront automatiquement traitées. Service gratuit. (Jusqu'à 20 images. Max 5 Mo chacune)
  • Plugin Photoshop. Cela coûte $.

Je n'ai pas essayé le plugin PS, je ne peux donc pas commenter son fonctionnement.


C'était une très bonne astuce, TinyPNG a réduit mon fichier PNG 24 bits de Photoshop, de 200k à 50k, et il a conservé la transparence mélangée! Merci pour votre réponse. REMARQUE, il était presque impossible de distinguer la qualité d'image.
TripleAntigen

Ça marche vraiment! Mon image PNG de 1 Mo est devenue 253 Ko sans perdre en qualité!
BrunoSerrano

5

Si la ligne de commande ne vous dérange pas, jetez un œil à OptiPNG , ce pourrait être ce que vous recherchez.

OptiPNG est un optimiseur PNG qui recompresse les fichiers image à une taille plus petite, sans perdre aucune information. Ce programme convertit également les formats externes (BMP, GIF, PNM et TIFF) en PNG optimisé et effectue des vérifications et des corrections d'intégrité PNG.


Merci mais pas beaucoup d'optimisation !! J'ai téléchargé l'image
Welliam

3

Utilisez une combinaison de pngoutetdeflopt . pngoutdéterminera automatiquement si vos couleurs PNG tiennent dans PNG-8 et l'utilisera. defloptva extraire quelques octets supplémentaires de l'image déjà optimisée - il est utile de travailler avec toutes les données dégonflées et PNG en fait partie.


merci mais pngout a échoué réduit quelques kb seulement !!
Welliam

1
Vous attendiez-vous à de la magie? Votre image a clairement plus de 256 couleurs. Postérisez-le pour réduire d'abord la quantité de couleurs.
Oleg V. Volkov

Lorsque la taille est réduite de 970 à 945, ce n'est pas de bons résultats. La postérisation ne fonctionne pas avec les autres PNG que j'ai.
Welliam

3

Une bonne idée pour gérer le PNG avec le canal alpha dans le contexte du développement d'un site Web serait de laisser le serveur faire le tour pour vous: séparez dynamiquement les données d'image du canal alpha sur le serveur, optimisez-les séparément et recombinez-les en utilisant le élément canvas et du JavaScript dans le navigateur. Ta-Da! Fonctionne avec tous les navigateurs modernes.

Voici comment cela se fait:

http://headers-already-sent.com/artikel/shrinkimage-1/

Vous trouverez également un package ZIP complet avec le script PHP et un plugin jQuery. Faites-nous savoir ce que vous en pensez.


1

Si vous avez vraiment besoin de réduire une image et que toutes les suggestions simples ne fonctionnent pas, la réponse finale est de diviser l'image en morceaux compressibles et de les recombiner sur le client avec des scripts.

L'image de la question ressemble à un dégradé de couleurs avec des lignes verticales et quelques taches / bruit. Décomposez cela en plusieurs couches:

  1. Le dégradé de couleur sans lignes ni bruit. Cela compressera bien en PNG et très bien en JPEG. Encore mieux, utilisez JavaScript pour générer le dégradé de couleurs sur le client. Vous pourriez probablement le faire en moins de 200 octets de JS.
  2. Les lignes verticales sans couleur ni bruit. Vous pouvez compresser cela en un seul canal 4 bits (alpha ou gris). Vous n'avez besoin que d'une image de 1 pixel de haut, que vous pouvez étirer. Cela se compresserait très bien en PNG.
  3. Le bruit. Encore une fois, tout ce dont vous avez besoin est un seul canal 4 bits (alpha ou gris). Sans couleur ni lignes, cela devrait très bien se compresser en PNG ou JPEG.

Combinez les calques en une seule image avec JavaScript, et votre "image" entière pourrait être de 15 Ko ou moins.

Ce genre de travail était la norme de l'industrie des Jeux depuis des décennies, et il l'est toujours. La grande chose est que Photoshop a déjà tous ces calques séparés, si vous avez créé votre image comme un professionnel.


1

Les fichiers PNG standard sont déjà le format d'image le plus compressé que vous pouvez utiliser, d'où la raison pour laquelle les fichiers PNG sont tellement utilisés pour les images sur les sites Web, en particulier à des fins de conception.

Mais il existe encore un moyen de compresser encore plus les fichiers PNG; en diminuant le nombre de couleurs utilisées dans l'image. Cela peut souvent réduire la taille du fichier jusqu'à 70% ou même plus.

Le meilleur logiciel gratuit automatisé avec le pourcentage de compression global le plus élevé que j'ai trouvé pour cela est FileOptimizer qui utilise plusieurs moteurs (c'est-à-dire PngOptimizer, PNGOUT, pngwolf, etc.) pour compresser l'image à la plus petite taille possible.

Un autre outil en ligne que j'ai trouvé avec de bons résultats est celui-ci: http://www.giftofspeed.com/png-compressor/


1

Permettez-moi de vous présenter FileOptimizer . Il combine différentes méthodes d'optimisation d'image (y compris la suppression EXIF ​​pour économiser quelques octets supplémentaires - peut être désactivée).

Résultats des tests et comparaison avec d'autres solutions.

entrez la description de l'image ici


0

ScriptPNG http://css-ig.net/scriptpng

il vous donne environ 10 options différentes, y compris avec perte! J'ai essayé un tas et ce fichier batch Windows (avec des tas de .exes) est super

Je l'utilise personnellement pour compresser à 8 bits avec perte. Je ne sais pas vraiment comment cela fonctionne, mais mes captures d'écran se ressemblent. Je l'utilise pour compresser des captures d'écran. J'avais environ 2 Go de pngs, maintenant seulement 700 Mo

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.