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

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

Σε αυτό το άρθρο θα σας δείξω πολλούς τρόπους βελτιστοποίησης των εικόνων για χρήση στο διαδίκτυο και πιο συγκεκριμένα σε ιστοσελίδες του WordPress.

Επιλέξτε τη σωστή μορφή αρχείου

Το JPEG και το PNG είναι δύο από τις πιο δημοφιλείς μορφές αρχείων εικόνας στον Ιστό. Το JPEG είναι μια συμπιεσμένη μορφή που συνήθως χρησιμοποιείται για φωτογραφίες που περιέχουν πολλά χρώματα, ενώ τα PNG είναι πολύ καλύτερα για φωτογραφίες με κείμενο, εικονογραφήσεις, λογότυπα, στιγμιότυπα οθόνης και διαφανείς εικόνες. Μια άλλη κοινή μορφή είναι το GIF το οποίο ταιριάζει καλύτερα σε εικόνες με λίγα χρώματα ή εικόνες με μεγάλες περιοχές του ίδιου χρώματος. Το GIF χρησιμοποιείται κυρίως για κινούμενες εικόνες στο Web σήμερα.

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

Χρησιμοποιήστε το σωστό μέγεθος και ανάλυση

Πρέπει να είστε προσεκτικοί κατά την προσθήκη εικόνων στον ιστότοπό σας. Θεωρείται η βέλτιστη πρακτική να αποθηκεύσετε τις εικόνες σας στο ίδιο πλάτος και ύψος που θα εμφανίζονται στον ιστότοπο και στο μικρότερο δυνατό μέγεθος αρχείου χωρίς απώλεια ποιότητας.

Συμπίεση των εικόνων σας πριν από τη μεταφόρτωση

Υπάρχουν πολλά εργαλεία εκεί έξω που θα σας βοηθήσουν να συμπιέσετε τις εικόνες σας πριν τις μεταφορτώσετε στο διακομιστή σας. Το Photoshop διαθέτει για παράδειγμα μια εύχρηστη λειτουργία "αποθήκευση για ιστό και συσκευές" που θα σας επιτρέψει να επιλέξετε τις ρυθμίσεις μορφής και ποιότητας. Επίσης, θα δείτε το μέγεθος του αρχείου για την εικόνα σας όταν εφαρμόζετε μια συγκεκριμένη ρύθμιση. Άλλα εργαλεία χειρισμού εικόνας, όπως το GIMP, προσφέρουν παρόμοιες επιλογές.

Υπάρχουν επίσης εργαλεία συμπίεσης online, όπως τα Picresize, Kraken.io και TinyPNG, όπου μπορείτε να ανεβάσετε τις εικόνες υψηλής ανάλυσης, να τις βελτιστοποιήσετε και να μεταφορτώσετε τη συμπιεσμένη μορφή για χρήση στον Ιστό.

Συμπίεση εικόνων μετά τη μεταφόρτωση

Υπάρχουν πολλά πρόσθετα για αυτό το σκοπό και ένα από τα πιο δημοφιλή είναι το WP Smush το οποίο βοηθά στη βελτιστοποίηση των μορφών JPEG, PNG ή GIF μεμονωμένα ή χύμα χρησιμοποιώντας αποκλειστικούς διακομιστές. Απλώς απαλείφει τα μεταδεδομένα και τα αχρησιμοποίητα χρώματα από τα αρχεία για να μειώσει το μέγεθος του αρχείου. Με την δωρεάν έκδοση περιορίζεστε σε εικόνες 1MB και κάτω, αλλά μπορείτε να καταργήσετε αυτόν τον περιορισμό αναβαθμίζοντας την έκδοση Pro που επιτρέπει έως και 5MB.

Ένα άλλο μεγάλο plugin με παρόμοιες λειτουργίες είναι το EWWW Image Optimizer το οποίο μπορεί να σας βοηθήσει να μετατρέψετε τις εικόνες σας στη μορφή που παράγει το χαμηλότερο δυνατό μέγεθος αρχείου.

Υπάρχουν άλλοι διαθέσιμοι στο αποθετήριο WordPress, γι 'αυτό μπορείτε να εξερευνήσετε. Αυτά είναι τα δύο που έχω χρησιμοποιήσει στο παρελθόν, και τα δύο δουλεύουν καλά, γι 'αυτό και θα πρέπει να είναι αρκετά καλά για σας.

Ετικέτα τις εικόνες σας σωστά

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

Προσθέτοντας λεζάντες όπου χρειάζεται είναι ένας άλλος πολύ καλός τρόπος να βοηθήσετε τους επισκέπτες της ιστοσελίδας σας να κατανοήσουν καλύτερα την εικόνα. Οι κατάλληλες περιγραφικές ετικέτες τίτλου και τα ονόματα αρχείων εικόνων βοηθούν με τον ίδιο τρόπο. Έτσι, αντί να αποθηκεύετε τις εικόνες σας ως " FXSCSUYE.jpg ", χρησιμοποιήστε έναν περιγραφικό τίτλο και όνομα με λέξεις-κλειδιά που σχετίζονται με το θέμα και τον ιστότοπό σας. Αυτό είναι επίσης καλό από SEO άποψη.

Lazy-Φόρτωση

Lazy φόρτωση είναι μια τεχνική που χρησιμοποιείται από πολλούς ιστότοπους για την εξοικονόμηση εύρους ζώνης με τη φόρτωση μόνο εικόνων όταν ένας χρήστης μετακινηθεί στο πλαίσιο προβολής της εικόνας. Οι πρώτες εικόνες θα φορτωθούν αμέσως, αλλά άλλες θα περιμένουν έως ότου ο χρήστης βρίσκεται κοντά στην εικόνα πριν τη φόρτωση. Η προσθήκη αυτής της δυνατότητας στον ιστότοπό σας θα εξοικονομήσει εύρος ζώνης για εσάς και το χρήστη σας και θα βελτιώσει την ταχύτητα των ιστοσελίδων σας. BJ Lazy Load είναι μια μεγάλη προσθήκη για να προσθέσετε Lazy φόρτωση στον ιστοχώρο σας WordPress.

Χρησιμοποιήστε ένα Δίκτυο περιεχομένου περιεχομένου

Η χρήση ενός δικτύου παροχής περιεχομένου (CDN) θα μειώσει σημαντικά το φορτίο του διακομιστή σας και θα αυξήσει την απόδοση του ιστότοπού σας. Ένα CDN απλώς θα εξυπηρετεί πόρους από το διακομιστή που βρίσκεται πλησιέστερα στη θέση του χρήστη που το ζητά. Για παράδειγμα, εάν ένας επισκέπτης από το Πεκίνο ζητήσει μια εικόνα και το CDN που χρησιμοποιείτε έχει διακομιστή που βρίσκεται στη Σεούλ και το Σίδνεϊ, η εικόνα θα προβάλλεται από το διακομιστή στη Σεούλ.

Το MaxCDN είναι ένα υψηλής ποιότητας CDN το οποίο μπορείτε να δοκιμάσετε και υπάρχουν και άλλοι όπως το CloudFlare, το CDN.net και πολλά άλλα.

Συμπέρασμα

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