Πολυμέσα: εικόνες και κείμενο alt

Ενότητα 4: Δημιουργία περιεχομένου · Χρόνος ανάγνωσης: 9 λεπτά

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

Βασικές έννοιες: βιβλιοθήκη πολυμέσων, μεγέθη εικόνων, big image threshold (2560 pixels), JPEG, PNG, WebP, AVIF, συμπίεση, srcset, lazy loading, κείμενο alt, όνομα αρχείου, πνευματικά δικαιώματα

Τι συμβαίνει όταν ανεβάζετε μια φωτογραφία

Ανεβάζετε μια φωτογραφία από το κινητό σας: 4.000 επί 3.000 pixels, 5 MB. Το WordPress κάνει τότε περισσότερα από όσα νομίζετε:

1. Αν η φωτογραφία είναι φαρδύτερη ή ψηλότερη από 2.560 pixels, το WordPress δημιουργεί μια σμικρυμένη έκδοση (με -scaled στο όνομα) και τη χρησιμοποιεί ως "πρωτότυπο". Το πραγματικό πρωτότυπο διατηρείται επίσης. Αυτό ονομάζεται big image threshold και υπάρχει από το WordPress 5.3.
2. Επιπλέον, το WordPress δημιουργεί μια σειρά από μικρότερα μεγέθη: μικρογραφία (προεπιλογή 150 x 150 pixels, περικομμένη), μεσαίο (300), μεγάλο (1024), καθώς και πρόσθετα μεγέθη πλάτους 768, 1536 και 2048 pixels. Το θέμα εμφάνισης και τα πρόσθετά σας συχνά προσθέτουν και δικά τους μεγέθη.
3. Όλες οι εκδόσεις αποθηκεύονται στο wp-content/uploads/2026/11/ (έτος και μήνας της μεταφόρτωσης).

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

Στη σελίδα, το WordPress προσθέτει σε κάθε εικόνα ένα srcset: μια λίστα με όλα αυτά τα μεγέθη. Ο browser επιλέγει μόνος του το μικρότερο μέγεθος που είναι αρκετά καθαρό για την οθόνη. Ένα κινητό φορτώνει τότε το μέγεθος των 768 pixels, μια μεγάλη οθόνη εκείνο των 1536. Αυτό λειτουργεί σωστά μόνο αν τα μεγέθη υπάρχουν, δηλαδή αν ανεβάζετε μέσω της βιβλιοθήκης πολυμέσων και όχι με FTP.

Σμίκρυνση και συμπίεση εκ των προτέρων

Ακόμη και με αυτά τα αυτόματα μεγέθη, αξίζει να σμικρύνετε τις φωτογραφίες πριν τις ανεβάσετε:

• Διαστάσεις: μια φωτογραφία που στον ιστότοπό σας δεν εμφανίζεται ποτέ φαρδύτερη από 1.600 pixels δεν χρειάζεται να έχει πλάτος 4.000 pixels. Σμικρύνετέ την εκ των προτέρων σε περίπου 2.000 pixels στη μεγάλη πλευρά. Έτσι εξοικονομείτε χώρο αποθήκευσης, μέγεθος αντιγράφων ασφαλείας και χρόνο μεταφόρτωσης.
• Συμπίεση: ένα JPEG με ποιότητα 75 έως 85 φαίνεται στο μάτι σχεδόν ίδιο με ποιότητα 100, αλλά συχνά είναι κατά το ήμισυ μικρότερο.
• Μεταδεδομένα: οι φωτογραφίες από κινητό περιέχουν συχνά την τοποθεσία GPS όπου τραβήχτηκαν. Αν δεν θέλετε να ξέρουν όλοι πού μένετε, αφαιρέστε την πριν από τη μεταφόρτωση. Το WordPress αφαιρεί πολλά μεταδεδομένα από τα σμικρυμένα μεγέθη, αλλά το πρωτότυπο μπορεί να τα περιέχει ακόμη.

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

Ποια μορφή

Αν ο server σας δεν μπορεί να επεξεργαστεί μια μορφή, το WordPress εμφανίζει σφάλμα κατά τη μεταφόρτωση ή δεν δημιουργεί μικρότερα μεγέθη. Στο Εργαλεία > Υγεία ιστότοπου βλέπετε στην καρτέλα Πληροφορίες, στην ενότητα Διαχείριση πολυμέσων, ποιες μορφές υποστηρίζει ο server σας.

Lazy loading

Από το WordPress 5.5, οι εικόνες παίρνουν αυτόματα loading="lazy": ο browser φορτώνει μια εικόνα μόνο όταν κάνετε κύλιση προς αυτήν. Αυτό κάνει μια μεγάλη σελίδα με πολλές φωτογραφίες πολύ πιο γρήγορη. Το WordPress αφήνει σκόπιμα την πρώτη μεγάλη εικόνα στην κορυφή της σελίδας χωρίς lazy loading και συχνά της δίνει προτεραιότητα με fetchpriority="high", επειδή πρέπει να εμφανιστεί όσο το δυνατόν γρηγορότερα. Θα επανέλθουμε σε αυτό στο μάθημα 6.3.

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

Κείμενο alt: για όσους δεν βλέπουν την εικόνα

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

Ένα καλό κείμενο alt περιγράφει τι λέει η εικόνα σε αυτό το πλαίσιο:

• Κακό: IMG_4032.jpg ή φωτογραφία.
• Κακό: κατάστημα ποδηλάτων ποδήλατο e-bike αγορά φθηνό ποδήλατο (η συσσώρευση λέξεων-κλειδιών δεν βοηθά κανέναν).
• Καλό: Τεχνικός ρυθμίζει τα φρένα ενός μπλε e-bike στο συνεργείο.

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

Στη βιβλιοθήκη πολυμέσων ορίζετε το κείμενο alt στην ίδια την εικόνα, και στον επεξεργαστή μπλοκ στο μπλοκ εικόνας. Προσοχή: ένα κείμενο alt που συμπληρώνετε στη βιβλιοθήκη πολυμέσων δεν αλλάζει αυτόματα στις εικόνες που υπάρχουν ήδη σε σελίδες.

Ονόματα αρχείων και πνευματικά δικαιώματα

• Όνομα αρχείου: το rythmisi-frenon-e-bike.jpg λέει περισσότερα από το IMG_4032.jpg και εμφανίζεται στη διεύθυνση της εικόνας. Πεζά γράμματα, παύλες, χωρίς κενά.
• Πνευματικά δικαιώματα: μια εικόνα από τις Εικόνες Google δεν είναι ελεύθερη για χρήση. Φωτογράφοι και τράπεζες εικόνων στέλνουν τακτικά τιμολόγια για χρήση χωρίς άδεια. Χρησιμοποιήστε δικές σας φωτογραφίες, φωτογραφίες με σαφή άδεια ή μια τράπεζα εικόνων της οποίας γνωρίζετε τους όρους, και φυλάξτε την απόδειξη της άδειάς σας.

Αποθήκευση και καθαρισμός

Η βιβλιοθήκη πολυμέσων δεν καθαρίζεται από μόνη της. Μια εικόνα που αφαιρείτε από μια σελίδα παραμένει στη βιβλιοθήκη και στο uploads, με όλα τα μεγέθη της. Σε έναν ιστότοπο με περιεχόμενο πολλών ετών, αυτό συσσωρεύεται. Καθαρίζετε που και που, αλλά προσεκτικά: μια εικόνα μπορεί να χρησιμοποιείται σε σημείο που η βιβλιοθήκη δεν βλέπει (σε μια ρύθμιση του θέματος εμφάνισης, σε ένα widget ή σε ένα email). Δημιουργήστε πρώτα ένα αντίγραφο ασφαλείας.

Σύνοψη

• Το WordPress δημιουργεί από κάθε μεταφόρτωση πολλά μεγέθη και σμικρύνει τις μεγάλες φωτογραφίες στα 2.560 pixels· ο browser επιλέγει μέσω srcset το κατάλληλο μέγεθος.
• Σμικρύνετε και συμπιέστε τις φωτογραφίες εκ των προτέρων και αφαιρέστε τα δεδομένα τοποθεσίας.
• Χρησιμοποιήστε JPEG ή WebP για φωτογραφίες, PNG για λογότυπα και στιγμιότυπα οθόνης· SVG μόνο με πρόσθετο που καθαρίζει το αρχείο.
• Το lazy loading γίνεται αυτόματα, εκτός από την πρώτη μεγάλη εικόνα· πλάτος και ύψος αποτρέπουν τις μετατοπίσεις.
• Ένα κείμενο alt περιγράφει τι λέει η εικόνα στο πλαίσιο· η καθαρά διακοσμητική εικόνα παίρνει κενό κείμενο alt.

Κουίζ

Άσκηση

Άσκηση A4.4: Εικόνες στην αρχική σας σελίδα. Συμπληρώστε τη διεύθυνση του ιστότοπού σας. Το πρόγραμμα διαβάζει την αρχική σελίδα και εξετάζει τις πρώτες 20 εικόνες: έχουν χαρακτηριστικό alt (κενό επιτρέπεται, να λείπει όχι), έχουν πλάτος και ύψος, και πόσο μεγάλο είναι κάθε αρχείο (μέσω αιτήματος HEAD); Οι εικόνες πάνω από 300 kB επισημαίνονται. Διορθώστε ό,τι είναι κόκκινο στη βιβλιοθήκη πολυμέσων ή στη σελίδα και ελέγξτε ξανά.

Περαιτέρω ανάγνωση

Αυτά τα άρθρα περιγράφουν τα βήματα στους πίνακες ελέγχου της WebOké· σε άλλους πίνακες ελέγχου λειτουργούν παρόμοια.

• Εγχειρίδιο DirectAdmin 18.5: Μεγάλο μέγεθος αρχείου μεταφόρτωσης (σφάλμα 413) ή λήξη χρόνου
• Η μεταφόρτωση αποτυγχάνει: αυξήστε τις τιμές των upload_max_filesize και max_execution_time
• Βιβλιοθήκη πολυμέσων (wordpress.org, στα Αγγλικά): https://wordpress.org/documentation/article/media-library-screen/
• Σύνταξη κειμένων alt (W3C, στα Αγγλικά): https://www.w3.org/WAI/tutorials/images/decision-tree/