Πώς να ρυθμίσετε το καλύτερο μέγεθος εικόνας WordPress για γρήγορη φόρτωση
Το σύστημα διαχείρισης περιεχομένου WordPress προσφέρει τη δυνατότητα χρήσης μεμονωμένων μορφών εικόνων εκτός από τα τυπικά μεγέθη εικόνων. Παρουσιάζουμε σημαντικά βήματα για την προσαρμογή των μεγεθών εικόνων, με βάση το WordPress 6.0.3.
Τα προεπιλεγμένα μεγέθη εικόνων στο WordPress
Το μέγεθος των αρχείων εικόνων που είναι ενσωματωμένα σε έναν ιστότοπο έχει μεγάλη επίδραση στην ταχύτητα φόρτωσής του. Οι βέλτιστες μορφές εικόνων μειώνουν τον χρόνο φόρτωσης και το φορτίο μνήμης στον διακομιστή. Το CMS WordPress προσφέρει ένα σύνολο τυποποιημένων μεγεθών εικόνων στον διακομιστή κατά τη μεταφόρτωση πολυμέσων.
| Τυπικά μεγέθη εικόνων WordPress | Μέγεθος (Π x Υ) σε εικονοστοιχεία | Αναλογία διαστάσεων |
|---|---|---|
| Εικόνες προεπισκόπησης | 150 x 150 | Μπορεί να απενεργοποιηθεί |
| Μεσαία | 300 x 300 | Διατηρείται |
| Μεγάλο | 1024 x 1024 | Διατηρημένο |
| Αρχική εικόνα | Όπως μεταφορτώθηκε | Διατηρημένη |
Αφήστε το όνομά σας να μιλήσει. Κάντε το με τον δικό σας τρόπο με την εγγραφή domain.
Αποθήκευση εικόνων WordPress στο backend και προσαρμογή μεγεθών
Αυτά τα μεγέθη εικόνων ορίζονται στις ρυθμίσεις του WordPress και μπορούν να προσαρμοστούν εκεί εντός ορισμένων ορίων. Για να το κάνετε αυτό, μεταβείτε στις «Ρυθμίσεις» > «Μέσα» στο backend.
Μετά τη μεταφόρτωση των πολυμέσων, υπάρχουν επιπλέον αρχεία στη βιβλιοθήκη πολυμέσων. Ο κατάλογος για αυτό είναι https://mydomain.com/wp-content/uploads/ ή https://mydomain.com/wp-content/uploads/2022/11/ (εάν είναι ενεργοποιημένοι οι φάκελοι με βάση το μήνα και το έτος). Για παράδειγμα, μια εικόνα βρίσκεται στα ακόλουθα αρχεία:
- sample-image-1024x683.jpg
- δείγμα-εικόνα-150x150.jpg
- δείγμα-εικόνας-1536x1024.jpg
- δείγμα-εικόνας-2048x1365.jpg
- δείγμα-εικόνας-300x200.jpg
- δείγμα-εικόνα-620x413.jpg
- sample-picture-scaled.jpg (2.560 x 1.707 px)
- sampleimage.jpg (το πρωτότυπο)
Αυτό παρέχει τα καλύτερα μεγέθη εικόνων για τις περισσότερες σελίδες ή αναρτήσεις WordPress. Οι εικόνες που θα ανεβάσετε στη βιβλιοθήκη πολυμέσων δεν πρέπει να έχουν διαστάσεις μεγαλύτερες από 1.920 pixel στη μεγαλύτερη πλευρά της εικόνας. Μπορείτε να αλλάξετε το μέγεθός τους πριν από την αποστολή με δωρεάν προγράμματα επεξεργασίας εικόνων, για να αποφύγετε δυσάρεστες εκπλήξεις. Αυτό ισχύει για τη μορφή εικόνας WebP, η οποία δεν υποστηρίζεται εγγενώς από όλους τους browsers.
Αυτά είναι τα συνιστώμενα μεγέθη εικόνων για χρήση σε θέματα WordPress:
| Μεγέθη εικόνων WordPress | Μέγεθος (Π x Υ) σε εικονοστοιχεία |
|---|---|
| Λογότυπα | 200 x 100 |
| Εικόνες προεπισκόπησης | 150 x 150 |
| Εικόνες φόντου | 1920 x 1080 |
| Εικόνες ανάρτησης σε κατακόρυφη μορφή | 900 x 1200 |
| Δημοσίευση εικόνων σε οριζόντια μορφή | 1200 x 900 |
| Εικόνες κεφαλίδας (banner) | 1048 x 250 |
| Εικόνες slider (ανάλογα με το θέμα) | Έως 1920 x περίπου 600 |
Οι συγκεκριμένες απαιτούμενες διαστάσεις εικόνας εξαρτώνται από τα στοιχεία και τη δομή ενός θέματος WordPress. Μπορείτε να τις βρείτε στην τεκμηρίωση του αντίστοιχου θέματος.
Αλλαγή μεγέθους εικόνων στη βιβλιοθήκη πολυμέσων του WordPress
Τα μεγέθη των εικόνων στο WordPress μπορούν επίσης να προσαρμοστούν. Εκτός από την αλλαγή των αρχικών διαστάσεων της εικόνας, είναι δυνατή η περικοπή, η περιστροφή και η αναστροφή. Για παράδειγμα, για να δημιουργήσετε μια φωτογραφία slider από μια εικόνα με μεγαλύτερες διαστάσεις στη βιβλιοθήκη πολυμέσων, προχωρήστε ως εξής:
Βήμα 1: Επιλέξτε την εικόνα στη βιβλιοθήκη πολυμέσων και κάντε κλικ στην επιλογή «Επεξεργασία εικόνας».
Βήμα 2: Ορίστε τη μέθοδο επεξεργασίας και το μέγεθος
Αξίζει να σημειωθεί ότι το κουμπί περικοπής πρέπει να χρησιμοποιηθεί δύο φορές: μία για να ενεργοποιήσετε τη λειτουργία και μία δεύτερη φορά μετά τη ρύθμιση των διαστάσεων της εικόνας για να εκτελέσετε τη λειτουργία.
Θέλετε να αποθηκεύσετε τα αρχεία σας με τον ασφαλέστερο δυνατό τρόπο; Χρησιμοποιήστε τον αποθηκευτικό χώρο HiDrive Cloud. Μπορείτε να είστε σίγουροι ότι τα δεδομένα σας αποθηκεύονται με ασφάλεια σύμφωνα με τα πρότυπα του βρετανικού GDPR.
Βήμα 3: Αποθήκευση εικόνας στη βιβλιοθήκη πολυμέσων
Μετά την αποθήκευση της κλιμακωμένης εικόνας, ο φάκελος μεταφόρτωσης περιέχει το αρχείο
- προεπισκόπηση-εικόνας-κλιμακωμένη-e1667121439976.jpg
σε άλλες πέντε μορφές με τον αυτόματα εκχωρημένο αναγνωριστικό κωδικό …-e1667121439976. Τα νέα μεγέθη εικόνων μπορούν να επιλεγούν από τη βιβλιοθήκη πολυμέσων στον επεξεργαστή Gutenberg κατά την εισαγωγή ή την αντικατάστασή τους. Οι διαστάσεις της εικόνας σε pixel είναι επίσης διαθέσιμες εκεί.
Προσαρμόστε το μέγεθος της εικόνας κατά την εισαγωγή της στο περιεχόμενο του WordPress
Οι εικόνες από τη βιβλιοθήκη πολυμέσων του WordPress εισάγονται στο περιεχόμενο. Αυτό επιτρέπει την εκ των υστέρων προσαρμογή των μεγεθών εντός ευρέων ορίων. Ο επεξεργαστής Gutenberg του WordPress προσφέρει πολύ πιο εκτεταμένες δυνατότητες σε σύγκριση με τον κλασικό επεξεργαστή TinyMCE.
Αν θέλετε να αποθηκεύσετε τις προσαρμοσμένες ρυθμίσεις σας για μελλοντική χρήση, μπορείτε να χρησιμοποιήσετε την ενότητα «Προσθήκη σε επαναχρησιμοποιήσιμα μπλοκ» του Gutenberg και επίσης να την κλειδώσετε για να αποφύγετε τυχαίες τροποποιήσεις. Αυτό σας εξοικονομεί πολύ χρόνο αν δημοσιεύετε συχνά νέες αναρτήσεις.
Για ιστότοπους που αφορούν συγκεκριμένα επαγγέλματα, όπως ο ιστότοπος ενός φωτογράφου, ενδέχεται να χρειαστούν επιπλέον μορφές εικόνων για να αποτυπώσετε τέλεια το όραμά σας. Ο οδηγός μας«συμπίεση εικόνων»παρέχει περαιτέρω βοήθεια για την προσαρμογή του μεγέθους των εικόνων, π.χ. για προσθήκες γκαλερί WordPress.
Απενεργοποίηση των προεπιλεγμένων μεγεθών εικόνων του WordPress
Ο ευκολότερος τρόπος για να απενεργοποιήσετε τα προεπιλεγμένα μεγέθη εικόνων είναι να χρησιμοποιήσετε το πρόσθετο «Disable Media Sizes ». Στις ρυθμίσεις του, αναφέρονται επίσης και οι επτά μορφές εικόνων που δημιουργούνται.
Με τις ρυθμίσεις του plugin που εμφανίζονται, οι μη επιλεγμένες μορφές δεν δημιουργούνται καθόλου. Η μεταφόρτωση της αρχικής εικόνας δεν μπορεί να «απενεργοποιηθεί». Αυτό είναι ένα πλεονέκτημα αν θέλετε να δημιουργήσετε άλλες μορφές αργότερα.
Η προσθήκη επιπλέον μορφών εικόνων ή η κατάργησή τους είναι επίσης δυνατή με καταχωρήσεις στα αρχεία functions.php και index.php του WordPress. Ωστόσο, αυτό θα πρέπει να γίνεται μόνο από έμπειρους προγραμματιστές. Μια πρώτη επισκόπηση της γλώσσας προγραμματισμού μπορείτε να βρείτε στο σεμινάριο PHP για αρχάριους.
Βελτιστοποιήστε περαιτέρω τις εικόνες για το WordPress με plugins
Στην πράξη, οι εικόνες χρησιμοποιούνται κυρίως ως JPG και PNG. Το μέγεθος των αρχείων αυτών των μορφών εικόνας μπορεί να προσαρμοστεί περαιτέρω με προγράμματα επεξεργασίας εικόνων. Στο Photoshop, κατά την αποθήκευση ή την εξαγωγή, εμφανίζεται ένα ερώτημα σχετικά με την ποιότητα. Το μειονέκτημα αυτής της μεθόδου είναι ότι κάθε εικόνα πρέπει να «επεξεργαστεί» ξεχωριστά και στη συνέχεια να μεταφορτωθεί. Τα plug-ins είναι μια πιο κομψή λύση. Αυτά έχουν συχνά ένα ευρύ φάσμα λειτουργιών, οπότε συνιστάται να μελετήσετε προσεκτικά την τεκμηρίωση του plug-in που χρησιμοποιείτε.
Υψηλούς αριθμούς εγκατάστασης και καλές αξιολογήσεις έχουν, για παράδειγμα, τα ακόλουθα πρόσθετα WordPress για την προσαρμογή των μεγεθών αρχείων και εικόνων WordPress:
- EWWW Image Optimizer: Υποστηρίζει τις μορφές: JPG, PNG, GIF, PDF, WebP, SVG
- TinyPNG: Υποστηρίζει JPG, PNG, WebP
- Imagify: Υποστηρίζει JPG, PNG, PDF, GIF, WebP
- Regenerate Thumbnails: δεν έχει ενημερωθεί εδώ και αρκετό καιρό
- Image Regenerate & Select Crop: το ίδιο
Πριν δοκιμάσετε τα plugins, θυμηθείτε: ένα αντίγραφο ασφαλείας WordPress προστατεύει από την απώλεια δεδομένων σε περίπτωση που κάτι πάει πραγματικά στραβά.
Περίληψη: Βελτιστοποίηση μεγεθών εικόνων WordPress
Με τα ενσωματωμένα εργαλεία του WordPress, μπορούν ήδη να επιτευχθούν πολλά βέλτιστα μεγέθη εικόνων. Με τα plugins διατίθενται πιο εκτεταμένες δυνατότητες. Η παρέμβαση στον κώδικα PHP ενός ιστότοπου WordPress πρέπει να περιορίζεται στους επαγγελματίες προγραμματιστές. Και τέλος: Κατά την βελτιστοποίηση, λάβετε υπόψη το SEO των εικόνων.