Πώς να βελτιστοποιήσετε τις εικόνες για το WordPress, ένας πλήρης οδηγός

Πώς να βελτιστοποιήσετε τις εικόνες για το WordPress, ένας πλήρης οδηγός

Τα άτομα στον ιστό δεν έχουν πολύ χρόνο για να καταναλώσουν δεδομένα – επειδή υπάρχουν πολλά από αυτά. Υπάρχουν τόσα πολλά δεδομένα που απλά δεν έχουμε χρόνο να τα διαβάσουμε όλα! Ως επιμελητής περιεχομένου για τον σύγχρονο ιστό, ο στόχος σας είναι να μεγιστοποιήσετε την απόδοση. Όσο περισσότερο εκφράζετε με λιγότερα λόγια, τόσο καλύτερα είστε στη δουλειά σας.


Γιατί οι εικόνες (τόσο πολύ) είναι σημαντικές?

Υπάρχουν πολλοί, πολλοί λόγοι για τους οποίους θα (και θα έπρεπε) να χρησιμοποιείτε εικόνες στις αναρτήσεις και τα άρθρα σας:

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

Είναι επομένως, ουσιαστικά σημαντικό να χρησιμοποιούμε τις σωστές εικόνες στις παρουσιάσεις μας (ανάρτηση ιστολογίου, ανεπίσημη αναφορά, πραγματική παρουσίαση PowerPoint κ.λπ.) για να αφήσουμε ένα σημάδι στο μυαλό του αναγνώστη!

Αλλά περίμενε! Υπαρχει ενα προβλημα!

Οι εικόνες καταλαμβάνουν περίπου το 63% του εύρους ζώνης που χρησιμοποιείται από τους σύγχρονους ιστότοπους, οπότε είναι όλο και πιο σημαντικό να βελτιστοποιούνται σωστά για ταχύτητα.

Η καθυστέρηση ενός δευτερολέπτου στους χρόνους φόρτωσης σελίδας θα μπορούσε να μειώσει τα ποσοστά μετατροπών κατά 7%

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

10 πιο συνηθισμένα σφάλματα βελτιστοποίησης εικόνας

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

1. Μεγάλες διαστάσεις

Τα “Extra Fries” δεν είναι πάντα καλά

Αυτό είναι κλασικό. Ας υποθέσουμε ότι χρειάζεστε μια φωτογραφία 150 × 150 εικονοστοιχείων στη σελίδα “Ομάδα” του ιστότοπού σας. Συνήθως, θα χρησιμοποιήσετε ένα headshot 5MP, θα το επεξεργαστείτε λίγο και τελικά θα το ανεβάσετε.

Εντοπίσατε το πρόβλημα; Μερικοί άνθρωποι ανεβάζουν απευθείας την πραγματική εικόνα 5MP! Το θέμα του WordPress θα φορτώσει ολόκληρη την εικόνα 5MP (δηλαδή 5 x 10 ^ 6 pixel) και θα ζητήσει από το πρόγραμμα περιήγησης να το συρρικνώσει στην απαιτούμενη διάσταση των 150x150px. Στην ουσία, το πρόγραμμα περιήγησης εμφανίζει μόνο 0,0045% της αρχικής εικόνας!

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

Να αλλάζετε πάντα το μέγεθος (και με το μέγεθός μου εννοώ μικρό μέγεθος) της εικόνας στις απαιτούμενες διαστάσεις και στη συνέχεια να την ανεβάσετε!

ImageResize.org

Δεν χρειάζεστε φανταχτερό λογισμικό για να το κάνετε αυτό – υπάρχουν δωρεάν διαδικτυακά εργαλεία όπως ImageResize.org μπορείτε να χρησιμοποιήσετε για να αλλάξετε το μέγεθος και να βελτιστοποιήσετε γρήγορα τις εικόνες σας. Απλώς ανεβάστε και τροποποιήστε τις ρυθμίσεις φωτογραφιών σας. Όταν τελειώσετε, πραγματοποιήστε λήψη της βελτιστοποιημένης εικόνας σας για χρήση στον ιστότοπό σας. Προσφέρουν επίσης μια γρήγορη Συμπιεστής εικόνας αν θέλετε απλώς να μειώσετε το μέγεθος του αρχείου.

Χρήσιμα εργαλεία:

  • IrfanView είναι ένα εξαιρετικό δωρεάν λογισμικό για να αλλάξετε το μέγεθος των εικόνων σας με προηγμένες επιλογές όπως βελτιστοποίηση, υδατογράφημα και περιγράμματα.
  • ImageMagick είναι ένα προηγμένο εργαλείο ανοιχτού κώδικα που μπορεί να χρησιμοποιηθεί σε μια ποικιλία γλωσσών προγραμματισμού και λειτουργικών συστημάτων. Μπορείτε να γράψετε τη δική σας εφαρμογή ή απλά να τη χρησιμοποιήσετε μέσω της γραμμής εντολών.
  • ImageOptim (Mac) σας επιτρέπει να σύρετε ολόκληρους φακέλους και να βελτιστοποιήσετε γρήγορα πολλές εικόνες.
  • TinyPNG είναι ένα διαδικτυακό εργαλείο συμπίεσης εικόνων με API.

2. Εσφαλμένη μορφή εικόνας

shutterstock_108312266

Η μορφή που χρησιμοποιείται για την εικόνα παίζει ζωτικό ρόλο. Ως γενικός κανόνας, χρησιμοποιήστε PNG για διανυσματικά γραφικά και εικόνες που δημιουργούνται από υπολογιστή, όπως εικόνες clip art κ.λπ. Χρήση JPEG για φωτογραφίες ή εικόνες με ποικιλία χρωμάτων. Για μια λεπτομερή εξήγηση, δείτε αυτό φοβερή απάντηση στο StackOverflow.

3. Μη χρήση Progressive JPEG

Βασική γραμμή (Κανονική) JPG έναντι Προοδευτικού JPG

Βασική γραμμή (Κανονική) JPG έναντι Προοδευτικού JPG

Για τον απλό άνθρωπο, τα JPEG είναι δύο τύπων – Baseline και Progressive. Οπτικά, και τα δύο είναι ίδια. Η διαφορά έγκειται στον τρόπο φόρτωσής τους:

  • Το βασικό JPEG έχει μόνο ένα επίπεδο – που περιέχει ολόκληρη την εικόνα. Όταν ζητηθεί, ολόκληρη η εικόνα φορτώνεται ταυτόχρονα.
  • Τα προοδευτικά JPEG συνθέτουν την εικόνα με πολλαπλά επίπεδα. Μια εικόνα προοδευτικής JPEG φορτώνεται ανά στρώμα, το οποίο αυξάνεται σταδιακά στην ποιότητα, δίνοντάς σας τελικά μια προβολή χωρίς απώλειες.
Το IrfanView υποστηρίζει μαζική μετατροπή με προοδευτικό JPEG

Το IrfanView υποστηρίζει μαζική μετατροπή με προοδευτικό JPEG

Όλα τα μεγάλα μεγέθη αλλαγής εικόνων σάς επιτρέπουν να αποθηκεύετε εικόνες ως Progressive JPEG.

4. Δεν χρησιμοποιείτε Lazy Load

Lazy-Loading είναι εξαιρετικό εξοικονόμηση πόρων τεχνική όπου μια εικόνα φορτώνεται μόνο όταν ο επισκέπτης κάνει κύλιση προς τα κάτω στο πλαίσιο προβολής της εικόνας. Σκεφτείτε ένα άρθρο – “15 από τα αυτοκίνητα με την καλύτερη απόδοση καυσίμου το 2014”. Φυσικά, αυτό το άρθρο θα περιέχει τουλάχιστον 15 εικόνες. Και ανεξάρτητα από το ύψος της συσκευής προβολής – οθόνη, tablet ή smartphone, δεν μπορείτε να χωρέσετε και τις 15 εικόνες στο πλαίσιο προβολής. Πρέπει να μετακινηθείτε προς τα κάτω για να δείτε όλες τις εικόνες.

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

5. Μη χρήση CDN

δίκτυο cdn

Η χρήση ενός δικτύου παράδοσης περιεχομένου (CDN) θα προβάλλει την εικόνα από έναν διακομιστή που είναι φυσικά πιο κοντά στην τοποθεσία του επισκέπτη. Εάν ένας επισκέπτης από την Ινδία ζητήσει μια εικόνα και το CDN διαθέτει POP (σημείο παρουσίας ή απλά διακομιστή) στο Τόκιο και τη Νέα Υόρκη, η εικόνα θα προβάλλεται από τον διακομιστή που βρίσκεται στο Τόκιο.

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

6. Δεν δηλώνει το χαρακτηριστικό «alt»

Το χαρακτηριστικό «alt» περιγράφει την εικόνα για τη μηχανή αναζήτησης. Το κείμενο που εισαγάγετε σε αυτό το πεδίο θα εμφανίζεται στον χρήστη σε περίπτωση που δεν είναι δυνατή η φόρτωση της εικόνας. Πολλοί άνθρωποι τείνουν να αφήνουν αυτά τα πεδία κενά. Αυτό είναι πολύ επιζήμιο για SEO και χάνετε την κυκλοφορία. Θα πρέπει πάντα να προσπαθείτε να συμπεριλάβετε τις λέξεις-κλειδιά του ιστότοπού σας στην ετικέτα alt των εικόνων σας.

7. Μη βελτιστοποίηση εικόνων

μολύβια-μολύβια-σημεία

Οι βελτιστοποιημένες εικόνες είναι 40% ελαφρύτερες από τις κανονικές εικόνες. Αυτό βελτιώνει το χρόνο φόρτωσης και εξοικονομεί εύρος ζώνης. Από τη λίστα των καλύτερων προσθηκών βελτιστοποίησης εικόνων του WordPress, προτείνουμε WPSmush.it για να βελτιστοποιήσετε τις εικόνες σας. Kraken.io είναι επίσης μια εξαιρετική διαδικτυακή επιλογή για τη συμπίεση εικόνων σε ένα jiffy. Το χρησιμοποιούμε όλη την ώρα εδώ στο WPExplorer για να βελτιστοποιήσουμε τις επιλεγμένες εικόνες πριν τις ανεβάσουμε σε δημοσιεύσεις και θεματικές επιδείξεις.

8. Αποκριτικές εικόνες

Το Responsive Web Design είναι εδώ

Το Responsive Web Design είναι εδώ

Ακόμα κι αν ο ιστότοπός σας ανταποκρίνεται, δεν σημαίνει ότι είναι οι εικόνες σας. Αυτό σημαίνει ότι η εικόνα κεφαλίδας που χρησιμοποιείτε για μια επιφάνεια εργασίας 22 ιντσών σερβίρεται επίσης σε iPhone 5 “. Όταν ανεβάζετε μια εικόνα, το WordPress αλλάζει το μέγεθός της σε πολλές εκδόσεις – Μικρογραφία, Μεσαίο, Πλήρες μέγεθος κ.λπ. Αυτό μπορεί να αλλάξει από τον προγραμματιστή. Ένα καλά κωδικοποιημένο θέμα θα εξυπηρετήσει την έκδοση μεσαίου μεγέθους της εικόνας, εξοικονομώντας έτσι εύρος ζώνης.

ο Picturefill.WP Το plugin θα αντικαταστήσει τις ετικέτες εικόνας με ένα νέο στοιχείο που θα εξυπηρετούσε διαφορετικές εικόνες βάσει ερωτημάτων πολυμέσων. Είναι αρκετά πειραματικό (αυτό σημαίνει ότι υπάρχουν σφάλματα) και δεν πρέπει να χρησιμοποιείται σε ζωντανό ιστότοπο.

9. Λεζάντες εικόνων

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

10. Όνομα αρχείου εικόνας

Σκεφτείτε το όνομα αρχείου από την άποψη της μηχανής αναζήτησης. Χρησιμοποιήστε το ίδιο κείμενο που θα κάνατε στην ετικέτα «τίτλος» της εικόνας. Επίσης, προσπαθήστε να συμπεριλάβετε τις λέξεις-κλειδιά σας που είναι πιο σχετικές με τον ιστότοπό σας.

συμπέρασμα

ήρωας-11

Το SEO SEO είναι εξαιρετικά σημαντικό για οποιονδήποτε ιστότοπο – παλιό ή νέο. Οι άνθρωποι που εφαρμόζουν την εικόνα SEO σωστά (μπορεί να είναι αρκετά φυσιολογικές φορές κατά περιόδους), να κερδίσετε σημαντικό αριθμό οργανικής κίνησης (το καλύτερο είδος κυκλοφορίας) στο μακροπρόθεσμα.

Έχετε μια φοβερή τεχνική βελτιστοποίησης; Πυροβολώ συνέχεια!

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map