Βελτιστοποιήστε τις εικόνες σας με προκαθορισμένα μεγέθη εικόνας [WordPress Συμβουλή]

Η βελτιστοποίηση των εικόνων σε έναν ιστότοπο είναι μια αποθαρρυντική εργασία. Μπορείτε να επιλέξετε να χρησιμοποιήσετε λιγότερες εικόνες, συμπιεσμένες εικόνες, sprites ή svg. η λίστα συνεχίζεται. Ένα μέρος όπου πολλοί ιστότοποι του WordPress μπλοκάρουν είναι ο καθορισμός μεγεθών εικόνας, το οποίο είναι α κρίσιμη πτυχή της βελτιστοποίησης τοποθεσιών βαρέως περιεχομένου.

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

Σε αυτό το άρθρο θα σας καθοδηγήσω τι μεγέθη εικόνας είναι και πώς να τα ορίσετε.

Πώς WordPress χειρίζεται εικόνες

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

Κάθε φορά που ανεβάζετε μια εικόνα μέσω του WordPress, δημιουργεί εκδόσεις αυτών των εικόνων και τις αποθηκεύει ξεχωριστά. Για παράδειγμα, εάν μεταφορτώσετε μια εικόνα 1200 × 800, το WordPress μπορεί να δημιουργήσει εκδόσεις 100 × 100, 600 × 400 και 900 × 600. Όταν εισάγετε μια εικόνα και επιλέγετε "μέσο", θα χρησιμοποιηθεί η πραγματική μεσαία έκδοση, σε αντίθεση με μια συρρικνούμενη έκδοση του πρωτοτύπου.

Αυτό είναι εξαιρετικά ευεργετικό γιατί εξοικονομεί εύρος ζώνης στο διακομιστή και χρόνο επεξεργασίας στον υπολογιστή-πελάτη. Νομίζω ότι δεν αποτελεί έκπληξη το γεγονός ότι η λήψη μιας εικόνας 600 × 400 είναι πιο γρήγορη από τη λήψη μιας εικόνας 1200 × 800.

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

Η σωστή εικόνα στη σωστή θέση

Ο απώτερος στόχος πρέπει να είναι να χρησιμοποιείτε πάντα τα κατάλληλα μεγέθη εικόνων. Εάν χρειάζεστε μια εικόνα 440 × 380, τραβήξτε μια εικόνα με αυτό το ακριβές μέγεθος από το διακομιστή. Υπάρχουν δύο κύριες θέσεις όπου θα χρησιμοποιείτε τις μεταφορτωμένες εικόνες: τις εμφανιζόμενες εικόνες και τις εικόνες που είναι αποθηκευμένες στην οθόνη - θα ήθελα να σας προτείνω να εστιάζετε πρώτα στις προβαλλόμενες εικόνες.

Σε όλα, εκτός από τα πιο οπτικά κατευθυνόμενα άρθρα, δεν έχει σημασία αν μια εικόνα in-post έχει πλάτος 220px ή 245px. Όποια έκδοση διαθέτετε θα ήταν εξίσου χρήσιμη. Οι εμφανιζόμενες εικόνες εμφανίζονται συνήθως σε κοινά μεγέθη. Για λίστες αντικειμένων μπορείτε να χρησιμοποιήσετε μια μικρογραφία 178 × 178, για επικεφαλίδες άρθρου μπορείτε να χρησιμοποιήσετε μια ευρεία εικόνα 1200 × 600.

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

Έτσι, αυτό που όλα βράζει κάτω είναι αυτό: Δεν θα ήταν υπέροχο αν είχαμε δύο επιπλέον μεγέθη εικόνων που θα μπορούσαμε να χρησιμοποιήσουμε για εμφανισμένες εικόνες; Αυτά τα μεγέθη εικόνας θα δημιουργηθούν ακριβώς δίπλα στο υπόλοιπο όταν μεταφορτώνεται μια εικόνα. Τα καλά νέα είναι ότι το WordPress έχει καλύψει με μια αρκετά απλή λειτουργία.

Δημιουργία μεγεθών εικόνας

Χρησιμοποιώντας το add_image_size () λειτουργία μπορείτε να ορίσετε όλα τα μεγέθη εικόνας που χρειάζεται ο ιστότοπός σας. Ας δημιουργήσουμε τα δύο παραδείγματα που αναφέρονται παραπάνω. Τοποθετήστε τον παρακάτω κώδικα στο αρχείο functions.php του θέματος ή στο αρχείο ενός plugin.

 add_image_size ('featured_thumbnail', 178, 178, true); add_image_size ('featured_wide', 1200, 600). 

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

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

Χρήση μεγεθών εικόνας

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

 the_post_thumbnail ('featured_thumbnail'); 

Η πρώτη παράμετρος αυτής της συνάρτησης σάς επιτρέπει να ορίσετε το μέγεθος της εικόνας που θέλετε να χρησιμοποιήσετε. Εφόσον ορίσαμε "featured_thumbnail", θα χρησιμοποιηθεί η έκδοση 178 × 178 αυτού του αρχείου.

Υπάρχουν πολλές άλλες λειτουργίες όπως wp_get_attachment_image ()και wp_get_attachment_image_src () τα οποία χρησιμοποιούν επίσης την παράμετρο μεγέθους εικόνας. Κάθε φορά που χρησιμοποιείτε μια τέτοια λειτουργία, πρέπει πάντα να καθορίσετε ένα κατάλληλο μέγεθος εικόνας.

Ανανέωση μικρογραφιών

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

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

Μόλις δημιουργηθούν οι μικρογραφίες σας, θα πρέπει να δείτε τις βελτιστοποιημένες εκδόσεις που έχουν φορτωθεί στον ιστότοπό σας. Μπορείτε να το ελέγξετε προβάλλοντας την πηγή της εικόνας. Εάν μεταφορτώσατε το παράδειγμα.jpeg και βλέπετε το παράδειγμα.jpeg ως πηγή της εμφανιζόμενης εικόνας σας, κάτι δεν είναι σωστό. Αμα δεις “παράδειγμα-178 × 178.jpeg” τότε όλα είναι καλά? εμφανίζεται η βελτιστοποιημένη εικόνα.

Ανταπόκριτες εικόνες

Μία δυσκολία στη διατήρηση μιας βελτιστοποιημένης τοποθεσίας είναι η ανταπόκριση. Όταν προβάλλω ένα άρθρο στο iPad, μια εικόνα κατά την εκτύπωση ενός μεγάλου μεγέθους θα υποβαθμιστεί, αφού το μέγιστο πλάτος θα είναι περίπου 786px.

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

Περαιτέρω βελτιστοποίηση εικόνας

Όπως ανέφερα στην εισαγωγή, υπάρχουν αμέτρητοι τρόποι βελτιστοποίησης των εικόνων. Από τα sprites μέχρι τη συμπίεση της εικόνας μπορούν να χρησιμοποιηθούν πολλές τεχνικές για να μειωθούν οι χρόνοι φόρτωσης που συνοδεύουν τις εικόνες. Ashutosh KS έχει γράψει ένα μεγάλο άρθρο που παρουσιάζει 9 WordPress Plugins για να βελτιώσει την απόδοση εικόνας, προτείνω να του δώσει μια ανάγνωση!

Προτείνω επίσης να ρίξετε μια ματιά σε Hassle Free Responsive Images που σας δείχνει πώς να προσθέσετε υποστήριξη για το στοιχείο εικόνας, κάτι που θα θέλετε να χρησιμοποιήσετε αν θέλετε να γράψετε τον δικό σας κώδικα.