English
Η χρήση εικόνων σε ένα website ή ένα e-shop, μας επιτρέπει να δώσουμε άμεσα στον χρήστη μια περιγραφή του περιεχόμενου της σελίδας που μόλις επισκέφθηκε. Ούτως ή άλλως είναι γνωστό πως μια εικόνα αξίζει χίλιες λέξεις…
Γιατί αναγκαίο;
Φανταστείτε μία ιστοσελίδα που περιέχει αποκλειστικά κείμενο. Είναι “ξερό”, κουραστικό για τον αναγνώστη και σίγουρα βαρετό… Τώρα φανταστείτε ένα ηλεκτρονικό κατάστημα που πουλάει για παράδειγμα ρούχα και δεν έχει καμία εικόνα… Θα το εμπιστευόσασταν; Εγώ σίγουρα όχι…
Οι εικόνες είναι αναγκαίες για να αναδείξουν ένα καλογραμμένο άρθρο, ενώ παράλληλα βοηθούν στο να γίνει σαφές το περιεχόμενο του (π.χ. ένα σχεδιάγραμμα που ακολουθεί ένα τεχνικό κείμενο). Σε περιπτώσεις e-shops, οι εικόνες επιτρέπουν στον επισκέπτη να δει το προϊόν που επιθυμεί, πριν ολοκληρώσει την αγορά του, ενώ εικόνες καλής ποιότητας μπορεί ακόμα και να τον ωθήσουν να προχωρήσει στην αγορά του προϊόντος!
Γιατί κακό;
Οι εικόνες είναι από τα πιο “βαριά” στοιχεία μιας ιστοσελίδας, καθώς συνήθως αποτελούν τα πιο μεγάλα, σε μέγεθος, αρχεία που πρέπει να “κατέβουν” στον browser του χρήστη. Το μεγάλο μέγεθος των εικόνων συνήθως προκαλεί καθυστερήσεις στην φόρτωση της ιστοσελίδας ή του e-shop, και σε ορισμένες περιπτώσεις, μία ιστοσελίδα που θα μπορούσε να φορτώσει σε 2″ να χρειάζεται 30-45″.
Άπειρες έρευνες έχουν αποδείξει πως η ταχύτητα φόρτωσης, έχει άμεσο αντίκτυπο στην παραμονή των επισκεπτών στην ιστοσελίδα. Εν ολίγοις, κανείς δεν είναι διατεθιμένος να περιμένει για να ολοκληρωθεί η φόρτωση της ιστοσελίδας σας, και αυτό ενδεχομένως μεταφράζεται σε χαμένους πελάτες, άρα και χαμένα κέρδη.
Ποια είναι η λύση;
Η λύση βρίσκεται στην χρήση συμπιεσμένων εικόνων (compressed images). Μία συμπιεσμένη εικόνα, χρησιμοποιεί λιγότερα bytes για την αναπαράσταση της ίδιας πληροφορίας, επομένως για την ίδια εικόνα, έχουμε ένα αρχείο με μικρότερο μέγεθος, και μικρότερο μέγεθος σημαίνει αυτόματα ταχύτερη φόρτωση, επομένως το πρόβλημα λύθηκε!
Παράλληλα χρήση τεχνικών όπως το lazy load και η λειτουργία προσωρινής αποθήκευσης (cache), μπορούν να βελτιώσουν ιδιαίτερα την ταχύτητα φόρτωσης της ιστοσελίδας σας, χωρίς να επηρεάσουν την εμπειρία χρήσης των επισκεπτών σας.
Πώς συμπιέζω εικόνες;
Υπάρχουν τρεις τρόποι για την συμπίεση μίας εικόνας.
1. Χρήση προγραμμάτων επεξεργασίας εικόνας
Με προγράμματα όπως το Adobe Photoshop, μπορείτε να επεξεργαστείτε και να συμπιέσετε τις εικόνες σας.
Για εικόνες τύπου jpeg, επιλέξτε για την ποιότητα εξαγωγής (export quality) μία τιμή μεταξύ 70-80. Όσο υψηλότερη είναι η ποιότητα της εξαγώμενης εικόνας, τόσο μικρότερο θα είναι το ποσοστό συμπίεσης, επομένως μεγαλύτερο το μέγεθος του τελικού αρχείου. Συνήθως για τιμές μέχρι και 75 δεν υπάρχει αισθητή απώλεια στην ποιότητα της εικόνας.
2. Χρήση online εφαρμογών
Υπάρχουν διάφορες online εφαρμογές, είτε δωρέαν είτε επί πληρωμής, που παρέχουν υπηρεσίες συμπίεσης. Σε αυτές τις εφαρμογές, μπορείτε να κάνετε upload τις εικόνες σας, και να τις παραλάβετε μετά από λίγο έτοιμες συμπιεσμένες.
Τέτοια εφαρμογή είναι το tinypng και την προτείνουμε ανεπιφύλακτα, καθώς είναι ιδιαίτερη εύχρηστη, κάνει γρήγορη και αποτελεσματική συμπίεση και είναι δωρεάν.
3. Χρήση plugins
Για το WordPress υπάρχουν αμέτρητα plugins που κάνουν συμπίεση εικόνων. Υπάρχουν ορισμένα plugins που κάνουν συμπίεση απλά μειώνοντας την ποιότητα της εικόνας, άλλα που χρησιμοποιούν online εφαρμογές στο παρασκήνιο για την επεξεργασία των εικόνων σας, και κάποια άλλα που χρησιμοποιούν εξαιρετικά πολύπλοκους αλγόριθμους και τεχνικές για να επιτύχουν το βέλτιστο δυνατό ποσοστό συμπίεσης.
Εμείς προτείνουμε το EWWW Image Optimizer, το οποίο είναι ένα lightweight plugin και προσφέρει πολλές λειτουργίες, συμπίεση σε πολλούς τύπους αρχείων, ενώ παρέχει δυνατότητα για συμπίεση είτε στον server όπου φιλοξενείται η ιστοσελίδα είτε με χρήση online εφαρμογής.
Πολύπλοκα πράγματα…
Όλες οι ιστοσελίδες που σχεδιάζει και αναπτύσσει η Samsoft, έχουν εγκατεστημένα τα απαραίτητα plugins, για να γίνεται βέλτιστη συμπίεση την στιγμή που κάνετε το upload των εικόνων σας, επομένως δεν υπάρχει τίποτα για να σας μπερδέψει ή να σας καθυστερήσει.