Βελτιστοποίηση Εικόνων PNG για Ιστοσελίδες

Ο παρακάτω οδηγός απευθύνεται σε εσάς που έχετε στην ιστοσελίδα σας πολλές εικόνες τύπου png, οι οποίες έχουν μέγεθος μεγαλύτερο από 250kb.

Το εργαλείο optipng μπορεί να αναλάβει να τις συμπιέσει, μικραίνοντας το μέγεθός τους βελτιώνοντας τους χρόνους φόρτωσης. Η συμπίεση είναι τύπου lossless οπότε δεν χάνεται καθόλου ποιότητα.

Εγκατάσταση του optipng
  1. Σε Centos/Redhad/CloudLinux πρέπει πρώτα να ενεργοποιήσουμε το epel repository
yum install epel-release  
yum install optipng  
  1. Σε Debian/Ubuntu
apt-get install optipng  
Εκτέλεση του optipng

Μπορούμε να εκτελέσουμε το optipng όπως στο παρακάτω παράδειγμα

cp test.png test.bak  
optipng test.png  

θα λάβουμε κάτι όπως το παρακάτω

** Processing: test.png
1320x1100 pixels, 3x8 bits/pixel, RGB  
Input IDAT size = 1906172 bytes  
Input file size = 1909034 bytes

Trying:  
  zc = 9  zm = 8  zs = 0  f = 5        IDAT size = 1877246
  zc = 9  zm = 8  zs = 1  f = 5        IDAT size = 1862998

Selecting parameters:  
  zc = 9  zm = 8  zs = 1  f = 5        IDAT size = 1862998

Output IDAT size = 1862998 bytes (43174 bytes decrease)  
Output file size = 1863076 bytes (45958 bytes = 2.41% decrease)

στο παραπάνω παράδειγμα είχαμε 2.41% μείωση μεγέθους.

Εκτέλεση του optipng για όλες τις png και σε υπό φακέλλους

Για να εκτελέσουμε το optipng μέσα σε έναν φάκελο για όλες τις png (για παράδειγμα στο wp-content/uploads) κάνουμε χρήση της find.

cd /var/www/wp-content/uploads  
find . -type f -iname "*.png" -print0 | xargs -I {} -0 optipng -o5 -quiet -keep -preserve -log optipng.log "{}"  

Στη συνέχεια στο αρχείο optipng.log μπορούμε να δούμε το log με τα αποτελέσματα συμπίεσης, για παράδειγμα

cat optipng.log  

και μας εμφανίζει

** Warning: The option -log is deprecated; use shell redirection

** Processing: ./02/logo_small-300x158.png
300x158 pixels, 4x8 bits/pixel, RGB+alpha  
Input IDAT size = 20580 bytes  
Input file size = 20661 bytes

Trying:  
  zc = 9  zm = 9  zs = 0  f = 0        IDAT size = 19244
  zc = 9  zm = 8  zs = 0  f = 0        IDAT size = 19244
  zc = 9  zm = 9  zs = 1  f = 0
  zc = 9  zm = 8  zs = 1  f = 0
  zc = 1  zm = 9  zs = 2  f = 0
  zc = 1  zm = 8  zs = 2  f = 0
  zc = 9  zm = 9  zs = 3  f = 0
  zc = 9  zm = 8  zs = 3  f = 0
  zc = 9  zm = 9  zs = 0  f = 1
  zc = 9  zm = 8  zs = 0  f = 1
  zc = 9  zm = 9  zs = 1  f = 1
  zc = 9  zm = 8  zs = 1  f = 1
  zc = 1  zm = 9  zs = 2  f = 1
  zc = 1  zm = 8  zs = 2  f = 1
  zc = 9  zm = 9  zs = 3  f = 1
  zc = 9  zm = 8  zs = 3  f = 1
  zc = 9  zm = 9  zs = 0  f = 2
  zc = 9  zm = 8  zs = 0  f = 2
  zc = 9  zm = 9  zs = 1  f = 2
  zc = 9  zm = 8  zs = 1  f = 2
  zc = 1  zm = 9  zs = 2  f = 2
  zc = 1  zm = 8  zs = 2  f = 2
  zc = 9  zm = 9  zs = 3  f = 2
  zc = 9  zm = 8  zs = 3  f = 2
  zc = 9  zm = 9  zs = 0  f = 3
  zc = 9  zm = 8  zs = 0  f = 3
  zc = 9  zm = 9  zs = 1  f = 3
  zc = 9  zm = 8  zs = 1  f = 3
  zc = 1  zm = 9  zs = 2  f = 3
  zc = 1  zm = 8  zs = 2  f = 3
  zc = 9  zm = 9  zs = 3  f = 3
  zc = 9  zm = 8  zs = 3  f = 3
  zc = 9  zm = 9  zs = 0  f = 4
  zc = 9  zm = 8  zs = 0  f = 4
  zc = 9  zm = 9  zs = 1  f = 4
  zc = 9  zm = 8  zs = 1  f = 4
  zc = 1  zm = 9  zs = 2  f = 4
  zc = 1  zm = 8  zs = 2  f = 4
  zc = 9  zm = 9  zs = 3  f = 4
  zc = 9  zm = 8  zs = 3  f = 4
  zc = 9  zm = 9  zs = 0  f = 5        IDAT size = 19034
  zc = 9  zm = 8  zs = 0  f = 5
  zc = 9  zm = 9  zs = 1  f = 5
  zc = 9  zm = 8  zs = 1  f = 5
  zc = 1  zm = 9  zs = 2  f = 5
  zc = 1  zm = 8  zs = 2  f = 5
  zc = 9  zm = 9  zs = 3  f = 5
  zc = 9  zm = 8  zs = 3  f = 5

Selecting parameters:  
  zc = 9  zm = 9  zs = 0  f = 5        IDAT size = 19034

Output IDAT size = 19034 bytes (1546 bytes decrease)  
Output file size = 19091 bytes (1570 bytes = 7.60% decrease)

** Warning: The option -log is deprecated; use shell redirection

** Processing: ./02/mark2.png
31x40 pixels, 4x8 bits/pixel, RGB+alpha  
Input IDAT size = 1876 bytes  
Input file size = 2882 bytes

Trying:  
  zc = 9  zm = 9  zs = 0  f = 0        IDAT size = 1656
  zc = 9  zm = 8  zs = 0  f = 0        IDAT size = 1656
  zc = 9  zm = 9  zs = 1  f = 0
  zc = 9  zm = 8  zs = 1  f = 0
  zc = 1  zm = 9  zs = 2  f = 0
  zc = 1  zm = 8  zs = 2  f = 0
  zc = 9  zm = 9  zs = 3  f = 0
  zc = 9  zm = 8  zs = 3  f = 0
  zc = 9  zm = 9  zs = 0  f = 1
  zc = 9  zm = 8  zs = 0  f = 1
  zc = 9  zm = 9  zs = 1  f = 1
  zc = 9  zm = 8  zs = 1  f = 1
  zc = 1  zm = 9  zs = 2  f = 1
  zc = 1  zm = 8  zs = 2  f = 1
  zc = 9  zm = 9  zs = 3  f = 1
  zc = 9  zm = 8  zs = 3  f = 1
  zc = 9  zm = 9  zs = 0  f = 2
  zc = 9  zm = 8  zs = 0  f = 2
  zc = 9  zm = 9  zs = 1  f = 2
  zc = 9  zm = 8  zs = 1  f = 2
  zc = 1  zm = 9  zs = 2  f = 2
  zc = 1  zm = 8  zs = 2  f = 2
  zc = 9  zm = 9  zs = 3  f = 2
  zc = 9  zm = 8  zs = 3  f = 2
  zc = 9  zm = 9  zs = 0  f = 3
  zc = 9  zm = 8  zs = 0  f = 3
  zc = 9  zm = 9  zs = 1  f = 3
  zc = 9  zm = 8  zs = 1  f = 3
  zc = 1  zm = 9  zs = 2  f = 3
  zc = 1  zm = 8  zs = 2  f = 3
  zc = 9  zm = 9  zs = 3  f = 3
  zc = 9  zm = 8  zs = 3  f = 3
  zc = 9  zm = 9  zs = 0  f = 4
  zc = 9  zm = 8  zs = 0  f = 4
  zc = 9  zm = 9  zs = 1  f = 4
  zc = 9  zm = 8  zs = 1  f = 4
  zc = 1  zm = 9  zs = 2  f = 4
  zc = 1  zm = 8  zs = 2  f = 4
  zc = 9  zm = 9  zs = 3  f = 4
  zc = 9  zm = 8  zs = 3  f = 4
  zc = 9  zm = 9  zs = 0  f = 5
  zc = 9  zm = 8  zs = 0  f = 5
  zc = 9  zm = 9  zs = 1  f = 5
  zc = 9  zm = 8  zs = 1  f = 5
  zc = 1  zm = 9  zs = 2  f = 5
  zc = 1  zm = 8  zs = 2  f = 5
  zc = 9  zm = 9  zs = 3  f = 5
  zc = 9  zm = 8  zs = 3  f = 5

Selecting parameters:  
  zc = 9  zm = 8  zs = 0  f = 0        IDAT size = 1656

Output IDAT size = 1656 bytes (220 bytes decrease)  
Output file size = 2662 bytes (220 bytes = 7.63% decrease)

** Warning: The option -log is deprecated; use shell redirection

** Processing: ./02/liquid-300x300.png
300x300 pixels, 4x8 bits/pixel, RGB+alpha  
Input IDAT size = 46621 bytes  
Input file size = 46738 bytes

Trying:  
  zc = 9  zm = 9  zs = 0  f = 0        IDAT size = 30078
  zc = 9  zm = 8  zs = 0  f = 0        IDAT size = 30078
  zc = 9  zm = 9  zs = 1  f = 0
  zc = 9  zm = 8  zs = 1  f = 0
  zc = 1  zm = 9  zs = 2  f = 0
  zc = 1  zm = 8  zs = 2  f = 0
  zc = 9  zm = 9  zs = 3  f = 0
  zc = 9  zm = 8  zs = 3  f = 0
  zc = 9  zm = 9  zs = 0  f = 1
  zc = 9  zm = 8  zs = 0  f = 1
  zc = 9  zm = 9  zs = 1  f = 1
  zc = 9  zm = 8  zs = 1  f = 1
  zc = 1  zm = 9  zs = 2  f = 1
  zc = 1  zm = 8  zs = 2  f = 1
  zc = 9  zm = 9  zs = 3  f = 1
  zc = 9  zm = 8  zs = 3  f = 1
  zc = 9  zm = 9  zs = 0  f = 2
  zc = 9  zm = 8  zs = 0  f = 2
  zc = 9  zm = 9  zs = 1  f = 2
  zc = 9  zm = 8  zs = 1  f = 2
  zc = 1  zm = 9  zs = 2  f = 2
  zc = 1  zm = 8  zs = 2  f = 2
  zc = 9  zm = 9  zs = 3  f = 2
  zc = 9  zm = 8  zs = 3  f = 2
  zc = 9  zm = 9  zs = 0  f = 3
  zc = 9  zm = 8  zs = 0  f = 3
  zc = 9  zm = 9  zs = 1  f = 3
  zc = 9  zm = 8  zs = 1  f = 3
  zc = 1  zm = 9  zs = 2  f = 3
  zc = 1  zm = 8  zs = 2  f = 3
  zc = 9  zm = 9  zs = 3  f = 3
  zc = 9  zm = 8  zs = 3  f = 3
  zc = 9  zm = 9  zs = 0  f = 4
  zc = 9  zm = 8  zs = 0  f = 4
  zc = 9  zm = 9  zs = 1  f = 4
  zc = 9  zm = 8  zs = 1  f = 4
  zc = 1  zm = 9  zs = 2  f = 4
  zc = 1  zm = 8  zs = 2  f = 4
  zc = 9  zm = 9  zs = 3  f = 4
  zc = 9  zm = 8  zs = 3  f = 4
  zc = 9  zm = 9  zs = 0  f = 5
  zc = 9  zm = 8  zs = 0  f = 5
  zc = 9  zm = 9  zs = 1  f = 5
  zc = 9  zm = 8  zs = 1  f = 5
  zc = 1  zm = 9  zs = 2  f = 5
  zc = 1  zm = 8  zs = 2  f = 5
  zc = 9  zm = 9  zs = 3  f = 5
  zc = 9  zm = 8  zs = 3  f = 5

Selecting parameters:  
  zc = 9  zm = 8  zs = 0  f = 0        IDAT size = 30078

Output IDAT size = 30078 bytes (16543 bytes decrease)  
Output file size = 30135 bytes (16603 bytes = 35.52% decrease)

** Warning: The option -log is deprecated; use shell redirection

** Processing: ./02/logo_small-150x150.png
150x150 pixels, 4x8 bits/pixel, RGB+alpha  
Input IDAT size = 8258 bytes  
Input file size = 8327 bytes

Trying:  
  zc = 9  zm = 9  zs = 0  f = 0        IDAT size = 7488
  zc = 9  zm = 8  zs = 0  f = 0        IDAT size = 7488
  zc = 9  zm = 9  zs = 1  f = 0
  zc = 9  zm = 8  zs = 1  f = 0
  zc = 1  zm = 9  zs = 2  f = 0
  zc = 1  zm = 8  zs = 2  f = 0
  zc = 9  zm = 9  zs = 3  f = 0
  zc = 9  zm = 8  zs = 3  f = 0
  zc = 9  zm = 9  zs = 0  f = 1
  zc = 9  zm = 8  zs = 0  f = 1
  zc = 9  zm = 9  zs = 1  f = 1
  zc = 9  zm = 8  zs = 1  f = 1
  zc = 1  zm = 9  zs = 2  f = 1
  zc = 1  zm = 8  zs = 2  f = 1
  zc = 9  zm = 9  zs = 3  f = 1
  zc = 9  zm = 8  zs = 3  f = 1
  zc = 9  zm = 9  zs = 0  f = 2
  zc = 9  zm = 8  zs = 0  f = 2
  zc = 9  zm = 9  zs = 1  f = 2
  zc = 9  zm = 8  zs = 1  f = 2
  zc = 1  zm = 9  zs = 2  f = 2
  zc = 1  zm = 8  zs = 2  f = 2
  zc = 9  zm = 9  zs = 3  f = 2
  zc = 9  zm = 8  zs = 3  f = 2
  zc = 9  zm = 9  zs = 0  f = 3
  zc = 9  zm = 8  zs = 0  f = 3
  zc = 9  zm = 9  zs = 1  f = 3
  zc = 9  zm = 8  zs = 1  f = 3
  zc = 1  zm = 9  zs = 2  f = 3
  zc = 1  zm = 8  zs = 2  f = 3
  zc = 9  zm = 9  zs = 3  f = 3
  zc = 9  zm = 8  zs = 3  f = 3
  zc = 9  zm = 9  zs = 0  f = 4        IDAT size = 7465
  zc = 9  zm = 8  zs = 0  f = 4        IDAT size = 7465
  zc = 9  zm = 9  zs = 1  f = 4
  zc = 9  zm = 8  zs = 1  f = 4
  zc = 1  zm = 9  zs = 2  f = 4
  zc = 1  zm = 8  zs = 2  f = 4
  zc = 9  zm = 9  zs = 3  f = 4
  zc = 9  zm = 8  zs = 3  f = 4
  zc = 9  zm = 9  zs = 0  f = 5        IDAT size = 7269
  zc = 9  zm = 8  zs = 0  f = 5
  zc = 9  zm = 9  zs = 1  f = 5
  zc = 9  zm = 8  zs = 1  f = 5
  zc = 1  zm = 9  zs = 2  f = 5
  zc = 1  zm = 8  zs = 2  f = 5
  zc = 9  zm = 9  zs = 3  f = 5
  zc = 9  zm = 8  zs = 3  f = 5

Selecting parameters:  
  zc = 9  zm = 9  zs = 0  f = 5        IDAT size = 7269

Output IDAT size = 7269 bytes (989 bytes decrease)  
Output file size = 7326 bytes (1001 bytes = 12.02% decrease)  
Επίλογος

Το παραπάνω εργαλείο σίγουρα αξίζει την προσοχή σας, ειδικά αν έχετε μεγάλο όγκο εικόνων σε μορφή png.

Άλλα παρόμοια εργαλεία:

  • pngcrush – εργαλείο βελτιστοποίησης εικόνων PNG.
  • pngnq – εργαλείο για βελτιστοποίηση εικόνων PNG. Το εργαλείο αυτό αναλαμβάνει το quantizing σε format RGBA.
  • pngquant – άλλο ένα εργαλείο βελτιστοποίησης εικόνων PNG. Λειτουργεί σε γραμμή εντολής και μετατρέπει εικόνες τύπου 24/32-bit PNG σε paletted (8-bit).