Πώς να καθορίσετε τις διαστάσεις εικόνας στο WordPress (GTmetrix Item)

Χρειάζομαι καθορίστε τις διαστάσεις της εικόνας στο WordPress?


Αυτό σημαίνει ότι πρέπει να προσθέσετε ένα πλάτος και ύψος στο HTML της εικόνας ή CSS. Εάν μια εικόνα δεν έχει καθορισμένες διαστάσεις εικόνας, θα εμφανίζεται ως σφάλμα στην αναφορά GTmetrix και το GTmetrix θα σας πει ακόμη και το σωστό πλάτος και ύψος που πρέπει να προστεθεί σε αυτήν την εικόνα.

Καθορίστε Διαστάσεις εικόνας WordPress

Το μόνο που έχετε να κάνετε είναι να εντοπίσετε την εικόνα στον ιστότοπό σας στο WordPress, να την δείτε σε HTML και, στη συνέχεια, να προσθέσετε ένα πλάτος και ύψος, όπως αυτό:

1. Βρείτε Καθορισμός σφαλμάτων διάστασης εικόνας στο GTmetrix

Το GTmetrix εμφανίζει μόνο σφάλματα για τη μεμονωμένη σελίδα που δοκιμάζετε.

Εκτελέστε οποιαδήποτε σελίδα μέσω GTmetrix και δείτε ποιες εικόνες έχουν προσδιορίσει λάθη διάστασης εικόνας.

Καθορισμός διαστάσεων εικόνας GTmetrix

2 Αντιγράψτε το πλάτος + το ύψος της εικόνας από το GTmetrix

Στη συνέχεια, αντιγράψτε το πλάτος + το ύψος της εικόνας (παρέχεται από το GTmetrix).

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

3. Εντοπίστε την εικόνα στον ιστότοπό σας

Τώρα πρέπει να εντοπίσουμε την εικόνα στον ιστότοπό σας στο WordPress.

ο Οπτικός επεξεργαστής WordPress καθορίζει αυτόματα τις διαστάσεις της εικόνας για εσάς, οπότε συνήθως δεν υπάρχουν σφάλματα για εικόνες εδώ. Ωστόσο, ορισμένες περιοχές του ιστότοπού σας ενδέχεται να μην καθορίζουν αυτόματα τις διαστάσεις της εικόνας (πιθανώς δημιουργούς σελίδων, ρυθμιστικά, γραφικά στοιχεία και HTML ή CSS με κωδικοποίηση χειρός). Πρέπει να μάθετε ποια περιοχή του ιστότοπού σας WordPress σας δίνει τα λάθη.

Εντοπίστε την εικόνα Widget WordPress

Προσδιορίστε Widget διαστάσεων εικόνας

4. Προσθέστε το πλάτος + ύψος στο HTML της εικόνας

Μόλις εντοπίσετε την εικόνα, προβάλετε την HTML και θα παρατηρήσετε ότι δεν υπάρχει καθορισμένο πλάτος + ύψος. Το μόνο που έχετε να κάνετε είναι να τα εισαγάγετε στον HTML έτσι: πλάτος = “135” ύψος = “135”

Καθορίστε Διαστάσεις εικόνας WordPress

5. Δοκιμάστε ξανά τη σελίδα στο GTmetrix

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

100% Καθορισμός διαστάσεων εικόνας

6. Χρησιμοποιήστε την προσθήκη καθορισμού διαστάσεων εικόνας

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

Προσδιορίστε το πρόσθετο Διαστάσεις εικόνας

7. Επιδιόρθωση Καθορισμού σφαλμάτων διάστασης εικόνας σε πολλές σελίδες

Εμφανίζεται η ίδια εικόνα σε πολλές σελίδες / αναρτήσεις και έχει προσδιορίσει λάθη διάστασης εικόνας?

Μπορείτε να χρησιμοποιήσετε την προσθήκη Better Search Replace για να διορθώσετε το λογότυπό σας, τις εικόνες widget και άλλες εικόνες που εμφανίζονται σε πολλές σελίδες, χωρίς να χρειάζεται να τις περάσετε ξεχωριστά. Μπορεί να εξοικονομήσει χρόνο.

Βήμα 1: Εγκαταστήστε το Καλύτερη αναζήτηση Αντικατάσταση προσθήκης.

Βήμα 2: Στο πεδίο “Αναζήτηση για”, προσθέστε το HTML της εικόνας χωρίς το καθορισμένο πλάτος + ύψος. Στο πεδίο “Αντικατάσταση με”, προσθέστε τη νέα έκδοση της εικόνας που περιλαμβάνει το πλάτος + ύψος.

Βήμα 3: Επιλέξτε τους πίνακες στους οποίους θέλετε να σαρώσει και να αντικαταστήσει τις εικόνες την προσθήκη. Μπορείτε να κάνετε μια στεγνή εκτέλεση αν θέλετε να το δοκιμάσετε, διαφορετικά καταργήστε την επιλογή και κάντε κλικ στην επιλογή “Εκτέλεση αναζήτησης / αντικατάστασης”.

Καλύτερη αναζήτηση Αντικαταστήστε εικόνες

Βήμα 4: Η προσθήκη θα εκτελέσει την αναζήτηση / αντικατάσταση της εικόνας σε όλους τους πίνακες που επιλέξατε. Μόλις τελειώσει, το Better Search Replace σας λέει πόσους πίνακες σάρωσε και πόσες εικόνες αντικατέστησε.

Άλλες βελτιστοποιήσεις εικόνων

Έγραψα ένα πλήρες σεμινάριο για βελτιστοποίηση εικόνων στο WordPress το οποίο περιλαμβάνει:

  • Συμπίεση εικόνων
  • Προβολή εικόνων μέσω CDN
  • Αλλαγή μεγέθους GIFS
  • Κατάργηση δεδομένων EXIF
  • Τεμπέλης φόρτωση εικόνων + βίντεο
  • Cloudflare Mirage, Polish, Hotlink Protection

Βελτιστοποιήσεις εικόνας στο GTmetrix

Ψάχνετε περισσότερα μαθήματα ταχύτητας WordPress?
Εδώ είναι άλλα μαθήματα που έγραψα:

  • Πώς να ρυθμίσετε το WP Rocket (το cache plugin που προτείνω)
  • Cloudways εναντίον SiteGround (οι δύο κορυφαίοι οικοδεσπότες που προτείνω)
  • Πώς πήρα 100% GTmetrix Scores (Οδηγός ταχύτητας WordPress)

Έχω επίσης ένα φοβερό βίντεο σχετικά με τη βελτιστοποίηση ταχύτητας WordPress:

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

Συχνές Ερωτήσεις

&# x2705; Πώς καθορίζετε τις διαστάσεις μιας εικόνας?

Βρείτε το σφάλμα στο GTmetrix και σημειώστε το κατάλληλο πλάτος + ύψος της εικόνας (παρέχεται από το GTmetrix). Στη συνέχεια, εντοπίστε την εικόνα στον πίνακα ελέγχου του WordPress και δείτε τον κώδικα HTML. Στη συνέχεια, προσθέστε πλάτος + ύψος στο HTML της εικόνας. Παράδειγμα: πλάτος = “680” ύψος = “340”

&# x2705; Πού μπορώ να βρω το σωστό μέγεθος εικόνας?

Το GTmetrix σας ενημερώνει για τις σωστές διαστάσεις των εικόνων που δεν έχουν καθορισμένο πλάτος + ύψος στην ενότητα Καθορισμός διαστάσεων εικόνας.

&# x2705; Πώς βελτιστοποιείτε τις εικόνες στο GTmetrix?

Αυτό σημαίνει ότι πρέπει να συμπιέσετε χωρίς απώλειες εικόνες χρησιμοποιώντας ένα πρόσθετο όπως το ShortPixel ή το Imagify. Χρησιμοποιώ το ShortPixel.

&# x2705; Πώς προβάλλετε κλιμακωτές εικόνες?

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

Αφήστε μου ένα σχόλιο εάν εξακολουθείτε να έχετε ερωτήσεις.

Στην υγειά σας,
Κάποιος

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