Οι συμπιεσμένες εικόνες έχουν ιδιαίτερα θετική επίδραση στον χρόνο φόρτωσης των ιστοσελίδων. Αλλά πώς μπορείτε να συμπιέσετε τις εικόνες με τον λιγότερο δυνατό τρόπο, χωρίς αισθητή απώλεια ποιότητας; Και ποιες επιλογές υπάρχουν για να το επιτύχετε αυτό; Σε αυτόν τον οδηγό, θα σας δώσουμε μια σαφή επισκόπηση των εργαλείων συμπίεσης εικόνων.

Γιατί πρέπει να συμπιέσω τις εικόνες μου;

Σήμερα, οι εικόνες και οι φωτογραφίες υψηλής ανάλυσης είναι πολύ συνηθισμένες. Στην ψηφιακή φωτογραφία, ο αριθμός των pixel και το μέγεθος των αρχείων αυξάνονται συνεχώς. Είτε ανεβάζετε εικόνες στον ιστότοπό σας είτε τις στέλνετε απλώς μέσω email, είναι πάντα σημαντικό να διατηρείτε το μέγεθος των αρχείων στο ελάχιστο. Να θυμάστε ότι όσο μικρότερο είναι το αρχείο, τόσο λιγότερο χρόνο χρειάζεται για τη μεταφορά του. Αυτό είναι επωφελές για δύο λόγους:

  • Η γρήγορη φόρτωση αυξάνει την ικανοποίηση των επισκεπτών (ειδικά για χρήστες με πρόσβαση στο διαδίκτυο μέσω κινητού τηλεφώνου)
  • Οι γρήγοροι χρόνοι φόρτωσης έχουν θετική επίδραση στην κατάταξη των μηχανών αναζήτησης

Η σωστή μορφή δεδομένων για εικόνες στο διαδίκτυο

Πριν δημοσιεύσετε τις εικόνες σας στο διαδίκτυο, θα πρέπει να ελέγξετε τη μορφή του αρχείου εικόνας. Δεν είναι όλες οι μορφές γραφικών κατάλληλες για χρήση στο διαδίκτυο. Ακολουθούν πέντε τύποι μορφών που μπορούν να χρησιμοποιηθούν:

  • JPG/JPEG: Το JPG είναι μία από τις πιο συχνά χρησιμοποιούμενες μορφές εικόνας. Μπορεί να εμφανίσει 16,7 εκατομμύρια χρώματα και διαθέτει ισχυρούς ρυθμούς συμπίεσης. Τα JPG χρησιμοποιούνται κυρίως για την αποθήκευση φωτογραφιών ή γραφικών που μοιάζουν με φωτογραφίες, ιδιαίτερα εκείνων με πολλά διαφορετικά χρώματα και έντονες αντιθέσεις.
  • PNG: Αυτή η μορφή μπορεί να απεικονίσει μεταξύ 256 (PNG8) και 16,7 εκατομμυρίων (PNG24) διαφορετικών χρωμάτων και να χρησιμοποιηθεί στο διαδίκτυο. Σε αντίθεση με τα JPG, αυτή η μορφή μπορεί να συμπιεστεί χωρίς καμία απώλεια ποιότητας. Τα αρχεία PNG είναι κατάλληλα για την αποθήκευση γραφικών, λογότυπων και κειμένων. Οι εικόνες με λίγα χρώματα μπορούν να συμπιεστούν σε αρχεία που έχουν μόνο ένα κλάσμα του αρχικού μεγέθους της εικόνας.
  • WebP: Το WebP είναι μια σύγχρονη μορφή εικόνας που αναπτύχθηκε από την Google για να παρέχει καλύτερη συμπίεση διατηρώντας παράλληλα την υψηλή ποιότητα της εικόνας. Υποστηρίζει τόσο συμπίεση με απώλειες όσο και συμπίεση χωρίς απώλειες, με αποτέλεσμα μικρότερα μεγέθη αρχείων σε σύγκριση με τα JPEG και PNG. Χάρη σε αποτελεσματικούς αλγόριθμους όπως η προγνωστική κωδικοποίηση, το WebP μπορεί να συμπιέσει εικόνες έως και 30% μικρότερες από τα JPEG με παρόμοια ποιότητα. Η μορφή υποστηρίζει επίσης διαφάνεια (κανάλι άλφα) και κινούμενες εικόνες, καθιστώντας την μια ευέλικτη εναλλακτική λύση για τα PNG και GIF.
  • SVG: Το SVG (Scalable Vector Graphics) είναι μια μορφή εικόνας βασισμένη σε XML που χρησιμοποιείται για διανυσματικά γραφικά. Δεδομένου ότι βασίζεται σε μαθηματικές περιγραφές σχημάτων και γραμμών, η ποιότητα της εικόνας παραμένει ανέπαφη ανεξάρτητα από την κλιμάκωση. Σε αντίθεση με τις μορφές που βασίζονται σε pixel, τα αρχεία SVG μπορούν να μειωθούν σημαντικά σε μέγεθος μέσω απλών βελτιστοποιήσεων κώδικα και συμπίεσης gzip, χωρίς να επηρεάζεται η οπτική ποιότητα. Το SVG είναι ιδανικό για λογότυπα, εικονίδια και εικονογραφήσεις στο διαδίκτυο.
  • GIF: Τα αρχεία GIF εξακολουθούν να είναι αρκετά συνηθισμένα στον ιστό, παρόλο που μπορούν να εμφανίσουν μόνο 256 χρώματα. Αυτό οφείλεται κυρίως στο γεγονός ότι η μορφή GIF υποστηρίζει σύντομα κινούμενα σχέδια που δημιουργούνται από μια ακολουθία εικόνων, τα οποία είναι ιδιαίτερα δημοφιλή στα μέσα κοινωνικής δικτύωσης και σε παρόμοιες πλατφόρμες.

Επιλογή 1: Συμπίεση εικόνων online

Αν θέλετε να συμπιέσετε εικόνες χωρίς να εγκαταστήσετε ειδικό λογισμικό, μπορείτε επίσης να βελτιστοποιήσετε εύκολα τις εικόνες σας online. Για το σκοπό αυτό, υπάρχουν διάφορες προσφορές στο διαδίκτυο που σας επιτρέπουν να τις συμπιέσετε δωρεάν. Τα εργαλεία διαφέρουν συνήθως όσον αφορά τις διαθέσιμες μορφές αρχείων και τους πιθανούς βαθμούς συμπίεσης, και συχνά έχουν περιορισμούς όσον αφορά τον αριθμό των συμπιέσεων που μπορούν να πραγματοποιηθούν. Μερικές από τις καλύτερες λύσεις μπορείτε να βρείτε στις ακόλουθες παραγράφους.

Optimizilla

Το διαδικτυακό εργαλείο Optimizilla της Mediafox Marketing σού επιτρέπει να ανεβάσεις και να συμπιέσεις έως και 20 εικόνες ταυτόχρονα. Οι εικόνες πρέπει να είναι σε μορφή JPEG ή PNG. Η διαδικτυακή εφαρμογή χρησιμοποιεί ένα συνδυασμό διαφορετικών αλγορίθμων συμπίεσης, οι οποίοι χαρακτηρίζονται από καλή αναλογία συμπίεσης και ποιότητας εικόνας. Μπορείς να χρησιμοποιήσεις το ρυθμιστικό για να ορίσεις τον βαθμό συμπίεσης πριν κατεβάσεις τα αποτελέσματα μεμονωμένα ή όλα μαζί ως αρχείο ZIP.

Image: Image compression with Optimizilla
Once you’ve selected the desired compression level, confirm it in Optimizilla by clicking ‘Apply’. In this example, the image size is reduced by 22 percent.

Για να σας βοηθήσει να βρείτε τις καλύτερες δυνατές ρυθμίσεις, το Optimizilla σας παρέχει μικρογραφίες του αρχικού αρχείου και του συμπιεσμένου αντίστοιχου αρχείου. Επιπλέον, το εργαλείο προσδιορίζει το αντίστοιχο μέγεθος του αρχείου. Όλες οι εικόνες που έχουν μεταφορτωθεί διαγράφονται αυτόματα από τους διακομιστές του παρόχου μετά από μία ώρα.

Πλεονεκτήματα Μειονεκτήματα
Ρυθμιζόμενος λόγος συμπίεσης Περιορισμένος σε 20 συμπιέσεις ταυτόχρονα
Προεπισκόπηση μικρογραφιών της αρχικής και της επεξεργασμένης έκδοσης

TinyPNG

Το TinyPNG επιτρέπει – σε αντίθεση με το όνομά του – όχι μόνο τη συμπίεση αρχείων PNG, αλλά και αρχείων JPEG και WebP. Στην δωρεάν βασική έκδοση, μπορείτε να βελτιστοποιήσετε έως και 20 εικόνες από αυτές τις τρεις μορφές ταυτόχρονα, με το μέγιστο μέγεθος αρχείου ανά εικόνα να περιορίζεται στα 5 megabyte.

Image: Screenshot of the TinyPNG website
After compression, TinyPNG will display the new size of the image file(s) and the saved file size (as a percentage).

Το εργαλείο voormedia έχει ένα προκαθορισμένο επίπεδο συμπίεσης που δεν μπορεί να προσαρμοστεί, αλλά μειώνει το μέγεθος της εικόνας έως και 80%. Χρησιμοποιήστε τη λειτουργία μεταφοράς και απόθεσης για να μετακινήσετε τις επιθυμητές φωτογραφίες στην περιοχή που εμφανίζεται και, στη συνέχεια, κατεβάστε τα αποτελέσματα σε μορφή JPEG ή PNG ή ως αρχείο ZIP. Εναλλακτικά, μπορείτε να τα ανεβάσετε στην υπηρεσία αποθήκευσης cloud, Dropbox.

Πλεονεκτήματα Μειονεκτήματα
Τα αποτελέσματα μπορούν να μεταφορτωθούν στο Dropbox Όριο 20 ταυτόχρονων συμπιέσεων και μέγεθος αρχείου 5 megabyte (στην τυπική έκδοση)
Το επίπεδο συμπίεσης δεν είναι ρυθμιζόμενο

iLoveIMG

Το iLoveIMG είναι μια ολοκληρωμένη online σουίτα χρήσιμων εργαλείων επεξεργασίας εικόνων. Η ομάδα ανάπτυξης με έδρα τη Βαρκελώνη παρέχει εφαρμογές που επιτρέπουν την περικοπή, κλιμάκωση, μετατροπή και ακόμη και συμπίεση εικόνων. Για το τελευταίο, επιλέξτε «Συμπίεση ΕΙΚΟΝΑΣ» και, στη συνέχεια, εισαγάγετε το επιθυμητό υλικό εικόνας χρησιμοποιώντας τη λειτουργία μεταφοράς και απόθεσης ή το πρόγραμμα περιήγησης αρχείων. Οι πιθανές μορφές είναι JPEG, PNG, SVG και GIF.

Image: Screenshot of image compression with iLoveIMG
After compression, you can download the images with a simple click.

Ενώ το iLoveIMG διαθέτει μόνο μία προεπιλεγμένη λειτουργία συμπίεσης, το εργαλείο παρέχει διάφορες επιλογές εξαγωγής. Δεν είναι μόνο δυνατό να κατεβάσετε τα αποτελέσματα στον τοπικό σκληρό δίσκο, αλλά και να τα ανεβάσετε στο Google Drive και στο Dropbox και να προωθήσετε έναν σύνδεσμο λήψης για τις συμπιεσμένες εικόνες. Εάν δεν είστε ικανοποιημένοι με το αποτέλεσμα της συμπίεσης, μπορείτε απλά να το διαγράψετε κάνοντας κλικ στο εικονίδιο του κάδου ανακύκλωσης.

Πλεονεκτήματα Μειονεκτήματα
Τα αποτελέσματα μπορούν να μεταφορτωθούν στο Google Drive και στο Dropbox Μόνο μία λειτουργία συμπίεσης
Διατίθενται επιπλέον εργαλεία για περικοπή, κλιμάκωση και μετατροπή Δεν υπάρχει λειτουργία προεπισκόπησης

Επιλογή 2: Συμπίεση εικόνων με το Photoshop

Μπορείτε επίσης να συμπιέσετε τις εικόνες σας με επαγγελματικά προγράμματα επεξεργασίας εικόνων. Πρώτο και κύριο, το Photoshop είναι αναμφίβολα ο ηγέτης του κλάδου. Εκτός από τις λειτουργίες του για δημιουργικό σχεδιασμό και βελτιστοποίηση φωτογραφικού υλικού, το εργαλείο της Adobe προσφέρει διάφορες επιλογές για αλλαγή της μορφής της εικόνας και προσαρμογή του μεγέθους της. Η επιλογή «Αποθήκευση για το Web», την οποία η Adobe έχει εφαρμόσει ειδικά για τη βελτιστοποίηση φωτογραφιών και εικόνων για ιστότοπους, είναι ιδιαίτερα πρακτική για τους διαχειριστές ιστότοπων. Σε αυτήν τη λειτουργία, μπορούν να συμπιεστούν όχι μόνο οι σημαντικές μορφές GIF, PNG, WebP και JPEG, αλλά και η μορφή γραφικών ράστερ WBMP (Wireless Bitmap), η οποία έχει σχεδιαστεί για κινητές συσκευές.

RjA067CaQhY.jpg To display this video, third-party cookies are required. You can access and change your cookie settings here.

Μόλις επεξεργαστείτε μια εικόνα στη λειτουργία βελτιστοποίησης ιστού του Photoshop, θα ανοίξει ένα νέο παράθυρο στο οποίο μπορείτε όχι μόνο να ορίσετε τις συγκεκριμένες μορφές προορισμού, αλλά και να βελτιστοποιήσετε την επιθυμητή εικόνα για τον ιστότοπό σας όσον αφορά το βάθος χρώματος και το μέγεθος. Στο παράθυρο προεπισκόπησης, το εργαλείο της Adobe συγκρίνει την αρχική εικόνα με την εικόνα προορισμού (συμπεριλαμβανομένων των πληροφοριών για το απόλυτο μέγεθος του αρχείου), ώστε να μπορείτε να δείτε εύκολα τη διαφορά κάθε φορά που συμπιέζετε την εικόνα.

Πλεονεκτήματα Μειονεκτήματα
Ζωντανή προεπισκόπηση για έως και τρία αποτελέσματα συμπίεσης Απαιτεί υψηλή υπολογιστική ισχύ
Διαθέσιμες διάφορες λειτουργίες επεξεργασίας εικόνων Υψηλό κόστος

Επιλογή 3: Συμπίεση εικόνων με δωρεάν λογισμικό και προγράμματα ανοιχτού κώδικα

Με το Photoshop, είναι πολύ βολικό να συμπιέζετε εικόνες με εφαρμογές για επιτραπέζιους υπολογιστές. Αυτές όχι μόνο προσφέρουν σημαντικά περισσότερες λειτουργίες από προεπιλογή, αλλά έχουν και ένα πλεονέκτημα σε σχέση με τα διαδικτυακά εργαλεία, καθώς μπορούν να χρησιμοποιηθούν χωρίς σύνδεση στο διαδίκτυο. Ωστόσο, αν θέλετε να μειώσετε το μέγεθος των εικόνων του ιστότοπού σας, δεν χρειάζεται απαραίτητα να χρησιμοποιήσετε μια premium λύση, όπως ένα προϊόν της Adobe ή άλλη εναλλακτική λύση επί πληρωμή. Εάν έχετε περιορισμένο προϋπολογισμό ή δεν σας ενδιαφέρουν πιο σύνθετες λειτουργίες επεξεργασίας, ένα δωρεάν πρόγραμμα ή ένα πρόγραμμα ανοιχτού κώδικα μπορεί να σας βοηθήσει να επιτύχετε άριστα αποτελέσματα βελτιστοποίησης όσον αφορά φωτογραφίες, εικόνες κ.λπ. Αλλά ποια από τα πολλά δωρεάν εργαλεία είναι πραγματικά αξιόλογα;

IrfanView

Από το 1996, το πρόγραμμα προβολής εικόνων IrfanView είναι μία από τις πιο δημοφιλείς δωρεάν λύσεις για υπολογιστές με Windows. Σύμφωνα με τον προγραμματιστή, το εργαλείο έχει κατά μέσο όρο περίπου ένα εκατομμύριο λήψεις ανά μήνα! Αυτός ο εντυπωσιακός αριθμός πιθανώς οφείλεται στο ελκυστικό μοντέλο αδειοδότησης: είναι εντελώς δωρεάν για προσωπική χρήση, ενώ για εμπορική χρήση απαιτείται άδεια που κοστίζει μόνο ένα διψήφιο ποσό.

Image: Screenshot of IrfanView
If you save your image as a JPEG using the standard version of IrfanView (without plugins), you can easily adjust the quality using a slider.

Από προεπιλογή, το πρόγραμμα προβολής εικόνων υποστηρίζει πολλές μορφές εικόνων, όπως PNG, JPEG, GIF, BMP, WebP και πολλές άλλες. Μόλις εισαχθεί μια εικόνα, μπορεί να μετατραπεί σε αυτές τις μορφές ανά πάσα στιγμή. Ωστόσο, όταν πρόκειται για συμπίεση εικόνων ειδικά για το διαδίκτυο, συνιστάται η χρήση της λειτουργίας «Αποθήκευση για το διαδίκτυο», η οποία μπορεί να προστεθεί μέσω ενός πρόσθετου. Αυτή η επέκταση σας επιτρέπει να βελτιστοποιήσετε στοίβες εικόνων και φωτογραφιών, ενώ χρησιμοποιείτε το ρυθμιστικό για να προσαρμόσετε το βαθμό διατήρησης της αρχικής ποιότητας της εικόνας. Μια εικόνα προεπισκόπησης και το μέγεθος του συμπιεσμένου αρχείου σας δίνουν μια εικόνα για το τελικό αποτέλεσμα.

Πλεονεκτήματα Μειονεκτήματα
Δυνατότητα επεξεργασίας στοίβας Το πρόσθετο συμπίεσης είναι διαθέσιμο μόνο στα αγγλικά
Λειτουργία προεπισκόπησης και ρυθμιζόμενο επίπεδο συμπίεσης

GIMP

Όταν αναζητάτε εναλλακτικές λύσεις του Photoshop από τον τομέα του ανοιχτού κώδικα, αναπόφευκτα θα συναντήσετε το GIMP (GNU Image Manipulation Program). Το πρόγραμμα γραφικών για Linux, macOS και Windows, το οποίο κυκλοφόρησε το 1998, εντυπωσιάζει εδώ και χρόνια λόγω της ποικιλίας των λειτουργιών του, οι οποίες είναι πολύ παρόμοιες με αυτές του εμπορικού μοντέλου της Adobe. Τώρα υποστηρίζει περισσότερες από τριάντα μορφές αρχείων, συμπεριλαμβανομένων των GIF, WebP, JPEG και PNG, που είναι μορφές ζωτικής σημασίας για τον ιστό. Αυτό σημαίνει ότι μπορείτε να μετατρέψετε τα αρχεία εικόνων σας σε μία από αυτές τις μορφές ιστού ανά πάσα στιγμή χρησιμοποιώντας το λογισμικό GIMP.

Image: Screenshot of GIMP
Exporting image as WebP with GIMP

Εκτός από τη μετατροπή εικόνων σε μικρότερο μορφότυπο αρχείου, το GIMP παρέχει επίσης προηγμένες επιλογές εξαγωγής που σας επιτρέπουν να συμπιέζετε εύκολα τις εικόνες. Χρησιμοποιήστε το ρυθμιστικό για να ορίσετε τον βαθμό συμπίεσης. Οι εκτεταμένες επιλογές είναι επίσης πρακτικές: για παράδειγμα, αν ενεργοποιήσετε την ιδιότητα «Προοδευτική», το αποτέλεσμα είναι ελαφρώς μεγαλύτερο, αλλά οι μεμονωμένες περιοχές φορτώνονται με μια συγκεκριμένη σειρά, έτσι ώστε ακόμα και μετά από ένα σύντομο χρόνο φόρτωσης, να εμφανίζεται μια πρόχειρη προβολή ολόκληρης της εικόνας.

Πλεονεκτήματα Μειονεκτήματα
Ανοιχτός κώδικας Η προεπισκόπηση δείχνει μόνο το μέγεθος του αρχείου του αποτελέσματος
Ο βαθμός συμπίεσης είναι ρυθμιζόμενος

PNGGauntlet

Το δωρεάν πρόγραμμα PNGGauntlet παρέχει ένα γραφικό περιβάλλον χρήστη για τα τρία εργαλεία ανοιχτού κώδικα PNGOUT, OptiPNG και DeflOpt, τα οποία έχουν όλα αναπτυχθεί για τη βελτιστοποίηση και συμπίεση εικόνων σε μορφή PNG. Η εφαρμογή, η οποία είναι διαθέσιμη μόνο για Windows, είναι επομένως η ιδανική λύση για τη δημιουργία πολύ μικρών λογότυπων, γραφικών και γραμμάτων σε μορφή PNG για το διαδικτυακό σας έργο. Εκτός από την ίδια τη μορφή PNG, οι μορφές JPEG, GIF, TIFF και BMP είναι επίσης δυνατές μορφές εξόδου για τη διαδικασία συμπίεσης ή μετατροπής.

Image: Screenshot of the PNGGauntlet interface
If you tick ‘Overwrite Original Files’, PNGGauntlet automatically replaces the original image with the newly created file.

Υπάρχουν δύο τρόποι για να συμπιέσετε τις εικόνες σας με το PNGGauntlet. Μπορείτε να αποκτήσετε πρόσβαση στην τυπική ρύθμιση εισάγοντας μία ή περισσότερες εικόνες και πατώντας στη συνέχεια «Optimize!» (Βελτιστοποίηση!), ή μπορείτε πρώτα να επιλέξετε μια μεμονωμένη ρύθμιση προσαρμόζοντας τις ρυθμίσεις των τριών ενσωματωμένων εργαλείων κάνοντας κλικ στο κουμπί με το ίδιο όνομα. Ανεξάρτητα από τον τρόπο που θα επιλέξετε, το δωρεάν εργαλείο θα σας δείξει το νέο μέγεθος του αρχείου ή των αρχείων εικόνας ( σε σύγκριση με το αρχικό ) ως ποσοστό μετά την επιτυχή συμπίεση.

Πλεονεκτήματα Μειονεκτήματα
Απλή επεξεργασία στοίβας Χωρίς λειτουργία προεπισκόπησης
Δυνατότητα εξατομίκευσης του επιπέδου συμπίεσης Περιορισμένη επιλογή μορφής εξόδου σε PNG
Η τελευταία έκδοση είναι από το 2012

ImageOptim

Αν θέλετε να συμπιέσετε τις εικόνες και τις φωτογραφίες του διαδικτυακού σας έργου και χρειάζεστε ένα εργαλείο ανοιχτού κώδικα για macOS, σας προτείνουμε το ImageOptim του Kornel Lesinski. Αυτό το πρόγραμμα με άδεια GPL συνδυάζει διάφορα εργαλεία βελτιστοποίησης εικόνων, όπως MozJPEG, pngquant και SVGO, επιτρέποντάς σας όχι μόνο να αφαιρέσετε περιττά μεταδεδομένα EXIF, αλλά και να συμπιέσετε διάφορες μορφές εικόνων, όπως JPEG, SVG, GIF και PNG.

Image: Screenshot of ImageOptim
Once you’ve dragged your file into the tool, the compression process begins automatically. A green tick indicates that the compression was successful.

Χρησιμοποιώντας τη λειτουργία μεταφοράς και απόθεσης, μπορείτε να τοποθετήσετε τα αρχεία εικόνας που επιθυμείτε στο ImageOptim, όπου το πρόγραμμα θα αρχίσει αμέσως να τα συμπιέζει. Ωστόσο, μπορείτε να κάνετε αλλαγές στις ρυθμίσεις ανά πάσα στιγμή και να προσαρμόσετε το επίπεδο συμπίεσης, καθώς και να προσθέσετε ή να αφαιρέσετε επιλογές. Απλά κάντε κλικ στα τρία κουκκίδα για να συνεχίσετε. Στη συνέχεια, απλά κάντε κλικ στο «Again» (Ξανά) για να εκτελέσετε τη μετατροπή για άλλη μια φορά.

Πλεονεκτήματα Μειονεκτήματα
Διάφορες λειτουργίες συμπίεσης Χωρίς λειτουργία προεπισκόπησης
Ανοιχτός κώδικας
Go to Main Menu