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

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

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

Βασικές έννοιες: βιβλιοθήκη πολυμέσων, μορφές εικόνων, big image threshold (2.560 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 κάνει συχνά τον αναγνώστη οθόνης να διαβάζει το όνομα αρχείου. Μια εικόνα που είναι σύνδεσμος (για παράδειγμα ένα logo που οδηγεί στην αρχική σελίδα) περιγράφει πού οδηγεί ο σύνδεσμος: Στην αρχική σελίδα του Fietsenwinkel De Spaak.

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

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

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

Αποθηκευτικός χώρος και καθαρισμός

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

Σύνοψη

• Το WordPress δημιουργεί από κάθε ανέβασμα πολλές μορφές και σμικρύνει τις μεγάλες φωτογραφίες σε 2.560 pixels· ο browser επιλέγει μέσω του srcset την κατάλληλη μορφή.
• Σμικρύνετε και συμπιέστε τις φωτογραφίες εκ των προτέρων και αφαιρέστε τα δεδομένα θέσης.
• Χρησιμοποιήστε JPEG ή WebP για φωτογραφίες, PNG για logo και στιγμιότυπα οθόνης· 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/