Μεταπηδήστε στο περιεχόμενο

Συμπίεση εικόνας & SEO εικόνας

Πως να κάνετε σωστή συμπίεση εικόνας χωρίς απώλεια ποιότητας και αποτελεσματικό SEO εικόνας για το site σας.

Η σημασία της εικόνας στις ιστοσελίδες

Μία εικόνα αξίζει όσο χίλιες λέξεις. Η γνωστή φράση που την γνωρίζουμε όλοι έχει την δικιά της θέση και στις ιστοσελίδες. Δεν αρκεί απλά ένα καλογραμμένο και μεγάλο κείμενο για να κρατήσει το ενδιαφέρον των χρηστών σε μια ιστοσελίδα, χρειάζονται και ωραίες, σχετικές με το περιεχόμενο εικόνες.
Οι εικόνες έχουν πολύ μεγάλη σημασία στις ιστοσελίδες. Συνήθως ο χρήστης – πελάτης, είναι το πρώτο πράγμα που κοιτάει και μετά διαβάζει το κείμενο.
Σε πιο παλιές ιστοσελίδες – blog / forum δεν βλέπαμε συχνά εικόνες παρά μόνο κείμενο, αλλά στην σύγχρονη εποχή του διαδικτύου αυτό έχει αλλάξει – κατά πολύ θα λέγαμε. Έχουνε μπει τα emoji, τα avatars, εικόνες που αναρτούνε οι χρήστες, εικόνες σε σχόλια – απαντήσεις και πολλά άλλα.
Στα eshop η εικόνα πάντα έπαιζε κυρίαρχο ρόλο και για την αγορά αλλά και για την εύρεση του κατάλληλου προϊόντος. Στις ιστοσελίδες υπηρεσιών οι εικόνες πάντα συντροφεύαν το κείμενο, δείχνοντας λεπτομέρειες για κάποιο έργο η υπηρεσία.
Συμπίεση εικόνας & SEO εικόνας
συμπιεση εικονας

Κεφάλαιο πρώτο

Συμπίεση εικόνας

Το πρώτο στάδιο στο SEO εικόνας είναι γιατί πρέπει να γίνεται πάντα συμπίεση εικόνας πριν ανέβει στην ιστοσελίδα.

Γιατί πρέπει να γίνει συμπίεση εικόνας

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

Η ταχύτητα ιστοσελίδας είναι από τα βασικότερα κριτήρια και για κατάταξη SEO αλλά και για την εμπειρία χρήστη.

Όλοι συμπιέζουν τις εικόνες. Μπορεί να πιστεύετε ότι όταν ανεβάζετε εικόνες στα social media η σε διάφορες ιστοσελίδες απευθείας από το κινητό, η εικόνα ανεβαίνει έτσι όπως είναι. Σε καμία περίπτωση όμως δεν συμβαίνει αυτό και λόγω χώρου και λόγω ταχύτητας.
Τα social media έχουν αλγόριθμους που κάνουν αυτόματη συμπίεση και περικοπή εικόνας για να ταιριάξει με την πλατφόρμα τους, ενώ οι ιστοσελίδες έχουνε κώδικα η πρόσθετα που κάνουν συμπίεση πριν ανέβει η εικόνα και σε πολλές περιπτώσεις δεν σας αφήνουν να ανεβάσετε μια εικόνα που είναι μεγαλύτερη π.χ. από 1mb η σε ανάλυση πολύ μεγάλη.

Πως να κάνετε συμπίεση εικόνας

Μπορείτε να συμπιέσετε τις εικόνες είτε χειροκίνητα – που προτείνεται για καλύτερο αποτέλεσμα και μείωση χώρου, είτε αυτόματα. Όταν ανεβάζετε εικόνες στις ιστοσελίδες για συμπίεση η οτιδήποτε άλλο, οι εικόνες αυτές διαγράφονται μετά από λίγο (ανάλογα με την ιστοσελίδα), οπότε δεν έχετε να ανησυχήσετε για κάτι.
Η χειροκίνητη συμπίεση εικόνας γίνεται σε λογισμικά προγράμματα όπως Photoshop, Gimp κτλπ και σε ειδικές ιστοσελίδες που είναι ο πιο εύκολος τρόπος για τους αρχάριους.
Η αυτόματη συμπίεση μπορεί να γίνει με τα ειδικά πρόσθετα για συμπίεση εικόνας στο WordPress.
Να σημειώσουμε ότι τα πρόσθετα ναι μεν συμπιέζουν την εικόνα αυτόματα, αλλά η εικόνα σώζεται στο hosting που έχετε πριν συμπιεστεί, οπότε μην ανεβάζετε εικόνες που είναι π.χ. 2mb, η εικόνα θα συμπιεστεί μέχρι ένα σημείο αλλά ο χώρος που έχετε στο hosting θα γεμίσει πολύ γρήγορα και ανάλογα με τι πακέτο έχετε ίσως χρειαστεί να πληρώσετε περισσότερα για πιο πολύ χώρο. Για αυτό τον λόγο να κάνετε αλλαγή μεγέθους αν η εικόνα είναι μεγάλη πριν την ανεβάσετε, η χειροκίνητη συμπίεση.
Για χειροκίνητη συμπίεση εικόνας μπορείτε να χρησιμοποιήσετε τις παρακάτω ιστοσελίδες:
Το I love img είναι από τα καλύτερα site για συμπίεση εικόνας και προσφέρει πολλές άλλες επιλογές εκτός από την συμπίεση όπως, αλλαγή μεγέθους, περικοπή, μετατροπή σε jpg, watermark εικόνας και πολλά άλλα. Προσφέρει επιλογή γλώσσας, πάνω δεξιά στο μενού επιλέξτε ελληνικά. Μπορείτε να ανεβάσετε μέχρι 30 εικόνες ταυτόχρονα.
To Optimizilla είναι από τα παλαιότερα και καλύτερα site για συμπίεση εικόνας. Μπορείτε να ανεβάσετε μέχρι 20 εικόνες ταυτόχρονα και σας δείχνει σε ποσοστό πόσο συμπιέστηκε η εικόνα.
Το Compressor προσφέρει τρεις επιλογές για συμπίεση, το Lossy – που κάνει κανονική συμπίεση εικόνας,  το Lossless – που κάνει πολύ μικρή συμπίεση και είναι ιδανικό για φωτογραφίες υψηλής ευκρίνειας η για εκτύπωση όχι όμως για ιστοσελίδες και τέλος το custom που είναι για πιο προχωρημένους χρήστες και μπορείτε να επιλέξετε ποσοστό συμπίεσης, αλλαγή μεγέθους και πολλά άλλα.
Για αυτόματη συμπίεση χρησιμοποιείστε τα ειδικά πρόσθετα για συμπίεση εικόνας σε WordPress:
Το reSmush.it είναι μια εξαιρετική επιλογή για πρόσθετο συμπίεσης εικόνας σε WordPress. Έχετε την δυνατότητα να βελτιστοποιείτε αυτόματα τις εικόνες κατά τη μεταφόρτωση και μπορείτε να διαλέξετε μαζικά τις παλαιότερες εικόνες για συμπίεση. Οι ρυθμίσεις είναι απλές και κατανοητές για τον αρχάριο χρήστη. Εχει πάνω από 200.000 ενεργές εγκαταστάσεις και εξαιρετικές αξιολογήσεις.
Άλλες επιλογές σε πρόσθετα για συμπίεση εικόνας σε WordPress είναι το Smush , το Imagify , το ShortPixel. Κάποια από αυτά όμως έχουν όριο εικόνων ανά μήνα η ανά mb. Δοκιμάστε τα και αν πιστεύετε σας εξυπηρετούν εγκαταστήστε τα.

Κεφάλαιο δεύτερο

Διαστάσεις εικόνας

Το δεύτερο στάδιο στο SEO εικόνας είναι οι διαστάσεις που πρέπει να έχει η εικόνα πριν την ανεβάσετε.

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

Εκτός από την συμπίεση εικόνας πρέπει να προσέξετε πολύ και την διάσταση, να μην είναι πολύ μεγάλη π.χ. 3840×2160 px αλλά στα πλαίσια της ιστοσελίδας, δηλαδή για εικόνες καρουζελ, banners, κεντρικές εικόνες (πλήρες πλάτος) να είναι 1920χ πλάτος και το ύψος ανάλογα με την θέση της εικόνας στην ιστοσελίδα.
Για τις υπόλοιπες εικόνες μέχρι 700px πλάτος είναι καλά, ενώ για εικόνες προϊόντων σε eshop μια καλή επιλογή είναι η τετράγωνη διάσταση 800×800 px.
Μην ανεβάζετε εικόνες σε πλήρη η μεγάλη διάσταση όταν στην ιστοσελίδα συνήθως πιάνουν μέχρι 600-800 px.  Αν ανεβάσετε εικόνα σε μεγάλες διαστάσεις και την συμπιέσετε, είναι σαν μην την συμπιέσατε καθόλου επειδή λόγω της μεγάλης διάστασης θα πιάνει μεγάλο χώρο και θα είναι σε πολλά kb.
διαφορες διασταση εικονας
Αρχική διάσταση εικόνας 3200×2133 px, μέγεθος 5.8 mb – > συμπίεση εικόνας -> διάσταση ίδια, τελικό μέγεθος 1.41 mb.
διαφορες διασταση εικονας
Αρχική διάσταση εικόνας 3200×2133 px, μέγεθος 5.8 mb – > αλλαγή μεγέθους (resize images) -> πλάτος 700px -> συμπίεση εικόνας ->  νέα διάσταση εικόνας 700×467, τελικό μέγεθος 88 kb.
Όπως βλέπετε μετα την αλλαγή διάστασης η διαφορά στο τελικό μέγεθος είναι τεράστια. Από 1.4 mb σε 88 kb. Οι εικόνες μέχρι 130kb είναι αποδεκτές, ακόμα καλύτερες όμως, αν έχουν λιγότερο μέγεθος.
Για αυτό τον λόγο πάντα να κάνετε αλλαγή μεγέθους αν η εικόνα είναι σε πολύ μεγάλη διάσταση. Το I love img είναι το πιο εύχρηστο εργαλείο για να κάνετε αυτή την δουλειά. Επιλέγετε πρώτα resize image, βάζετε στο width το πλάτος και φροντίστε το aspect ratio ( αναλογία απεικόνισης) να είναι τσεκαρισμένο. Μόλις γίνει το resize επιλέγετε το πράσινο εικονίδιο που γραφεί “continue to compress image”, compress, και είστε έτοιμοι.

Κεφάλαιο τρίτο

Format εικόνας

Η κατάληξη της εικόνας και σε τι μορφή είναι (.jpg, .png κτλπ) έχει σημασία στο SEO εικόνας και στην αποτελεσματική συμπίεση εικόνας.

Η μεγάλη σημασία του format εικόνας

Πρέπει να ανεβάζετε διαφορετική μορφή εικόνας ανάλογα με το τι είναι και όχι “όπως την βρήκα την ανέβασα”. Θα γλιτώσετε πολύ χώρο και θα κρατήσετε την ταχύτητα σε πολύ καλό επίπεδο με αυτό τον τρόπο.
Για το logo, τα εικονίδια και τα γραφήματα μπορείτε να χρησιμοποιήσετε .png καθώς έχει καλύτερη ποιότητα, ενώ οι υπόλοιπες εικόνες θα πρέπει να ανεβαίνουν σαν .jpg (ακόμα καλύτερα αν χρησιμοποιείτε κάποιο πρόσθετο μετατροπής σε .webp).
Σε περιπτώσεις που χρησιμοποιείτε κάποιο πρόγραμμα αφαίρεσης φόντου (συνήθως για προϊόντα σε eshop) μετα την αφαίρεση φόντου, σώστε την εικόνα σαν .jpg αν έχετε επιλογή η αλλιώς κάντε μετατροπή στο I love img (convert το .jpg). Το φόντο θα έχει αφαιρεθεί, θα είναι λευκό, άλλα σαν .jpg θα έχει σημαντικά μικρότερο μέγεθος.
Αν θέλετε οπωσδήποτε να μην έχει φόντο από πίσω, επειδή έχετε δικό σας χρώμα φόντου στην ιστοσελίδα και όχι λευκό, τότε ανεβάστε την σαν .png αλλά να προσέξετε το μέγεθος μην είναι πολύ μεγάλο.
ονομασια εικονων

Κεφάλαιο τέταρτο

Alt text & ονομασία εικόνας

Η ονομασία τις εικόνας πριν την ανεβάσετε στην ιστοσελίδα και το alt κείμενο της εικόνας, μπορούν να δώσουν ώθηση και έξτρα κλικ στην ιστοσελίδα σας.

Εναλλακτικό κείμενο και προτεινόμενη ονομασία εικόνας

Στις ιστοσελίδες, εκτός από το SEO περιεχομένου και τις λέξεις κλειδιά, υπάρχει και το SEO εικόνας.  Όταν ανεβάζετε τις εικόνες σας στην ιστοσελίδα φροντίστε να ονομάσετε την εικόνα σε κάτι σχετικό όπως -levis-501-jeans.jpg και όχι κάτι σαν 391dade9da30491130dajdjaekda.jpg.
Το γνωρίζουμε ότι είναι δύσκολο να μετονομάσετε τις εικόνες όλες, ειδικά αν έχετε eshop και οι εικόνες είναι πάρα πολλές, όμως βοηθάει – έστω και λίγο – στο SEO εικόνας.
Άλλο κομμάτι στο SEO εικόνας , πολύ πιο σημαντικό από την ονομασία της εικόνας, είναι το εναλλακτικό κείμενο η alt. Όταν ανεβάζετε την εικόνα θα δείτε δίπλα την επιλογή εναλλακτικό κείμενο, εκεί να βάλετε κάτι σχετικό με την εικόνα, π.χ. αν ανεβάσατε μια εικόνα με τζιν levi’s 501 σε μαύρο χρώμα, γράψτε – τζιν levi’s 501 μαύρο χρώμα – . Βοηθάει πάρα πολύ στο SEO εικόνας. Μην το παραλείπετε και το αφήνετε άδειο το εναλλακτικό κείμενο.
Μπορείτε να κάνετε έλεγχο αν λείπει το εναλλακτικό κείμενο στις παρακάτω ιστοσελίδες:
Στο Rushax βάζετε το url της ιστοσελίδας και βγάζει το αποτέλεσμα από κάτω αν λείπει το εναλλακτικό κείμενο και που είναι για να το διορθώσετε.
Στο AdResults βάζετε το url της ιστοσελίδας και από κάτω βγάζει όλες τις εικόνες που είναι στην σελίδα και δίπλα το εναλλακτικό κείμενο. Άμα δείτε μια εικόνα ότι δεν έχει, διορθώστε την.
πρωτοτυπες εικονες

Κεφάλαιο πέμπτο

Πρωτότυπες εικόνες

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

Οι πρωτότυπες εικόνες αυξάνουν τον συνολικό χρόνο του χρήστη στην ιστοσελίδα

Να ανεβάζετε εικόνες ποιοτικές και γνήσιες στην ιστοσελίδα σας και να αποφεύγετε -αν μπορείτε- τις στοκ εικόνες. Υπάρχει μεγάλη πιθανότητα ο χρήστης να έχει ξαναδεί την ίδια εικόνα κάπου αλλού κάνοντας τον να χάσει εν μέρει την εμπιστοσύνη προς εσάς ειδικά αν πρόκειται για επαγγελματική ιστοσελίδα υπηρεσιών.
Αν έχετε eshop και μπορείτε να κάνετε φωτογράφηση προϊόντων -από αρκετές γωνίες- είναι ότι καλύτερο για εσάς καθώς οι εικόνες θα είναι γνήσιες και πρωτότυπες.
Η χρήση εικονιδίων και εικονογραφημάτων προτείνεται καθώς εκτός από εικαστική ώθηση, το μέγεθος τους είναι σχετικά πολύ μικρό κάνοντας τα ιδανικά για να συνοδέψετε την περιγραφή μιας υπηρεσίας.

Κοινοποίηση:

Facebook
Twitter
Pinterest

ΣΑΣ ΑΡΕΣΕ ΤΟ ΑΡΘΡΟ; ΕΓΓΡΑΦΕΙΤΕ ΣΤΟ NEWSLETTER ΜΑΣ ΓΙΑ ΝΑ ΜΑΘΑΙΝΕΤΕ ΠΡΩΤΟΙ ΟΛΑ ΤΑ ΝΕΑ ΑΡΘΡΑ!

Newsletter

Εισάγοντας το email σας συμφωνείτε με την Πολιτική Απορρήτου.