Οι εικόνες αποτελούν απαραίτητο στοιχείο κάθε ιστότοπου.
Δεν προσθέτουν μόνο οπτικό ενδιαφέρον, αλλά μπορούν επίσης να βοηθήσουν στην επικοινωνία πληροφοριών στους χρήστες.
Στην HTML, μπορείτε εύκολα να προσθέσετε εικόνες στην ιστοσελίδα σας χρησιμοποιώντας την ετικέτα <img>.
Η ετικέτα <img> είναι ένα κενό στοιχείο, που σημαίνει ότι δεν έχει ετικέτα κλεισίματος. Αντίθετα, όλα τα χαρακτηριστικά περιλαμβάνονται στην ετικέτα ανοίγματος.
Τα πιο σημαντικά χαρακτηριστικά της ετικέτας <img> είναι τα <src> <alt> <width> και <height>.
Το χαρακτηριστικό src
Το χαρακτηριστικό src καθορίζει τη διεύθυνση URL πηγής της εικόνας που θα πρέπει να εμφανίζεται. Για παράδειγμα: src=”https://edube.org/uploads/media/default/0001/03/mountain_landscape.jpg”
Το χαρακτηριστικό alt
Το χαρακτηριστικό alt παρέχει εναλλακτικό κείμενο που θα εμφανίζεται εάν δεν είναι δυνατή η φόρτωση της εικόνας. Χρησιμοποιείται επίσης από προγράμματα ανάγνωσης οθόνης για χρήστες με προβλήματα όρασης. Για παράδειγμα: alt=”Ορεινό τοπίο”
Το χαρακτηριστικό width
Το χαρακτηριστικό width καθορίζει το πλάτος της εικόνας. Μπορεί να οριστεί σε pixel (π.χ., width=”340″) ή ως ποσοστό του πλάτους του στοιχείου που το περιέχει (π.χ., width=”50%”).
Το χαρακτηριστικό height
Ομοίως με το width, το height καθορίζει το ύψος της εικόνας σε pixel ή ως ποσοστό του γονικού περιέκτη της. Για παράδειγμα: height=”250″ ή height=”50%”.
Συνδυάζοντας τα Όλα
Ακολουθεί ένα παράδειγμα της ετικέτας <img> με όλα τα τέσσερα χαρακτηριστικά σε δράση:
Όταν το πρόγραμμα περιήγησης συναντήσει την ετικέτα <img>, φορτώνει την εικόνα από την καθορισμένη διεύθυνση URL πηγής, εμφανίζει το εναλλακτικό κείμενο, εάν είναι απαραίτητο, και προσαρμόζει το πλάτος και το ύψος της εικόνας σύμφωνα με τα παρεχόμενα χαρακτηριστικά. Αυτό έχει ως αποτέλεσμα η εικόνα να αποδίδεται στην ιστοσελίδα με τις καθορισμένες διαστάσεις και περιγραφή.
Μορφές εικόνας
Πριν εισαγάγετε μια εικόνα στην ιστοσελίδα σας, είναι απαραίτητο να επιλέξετε τη σωστή μορφή εικόνας.
Οι πιο συνηθισμένες μορφές εικόνας που χρησιμοποιούνται στον ιστό είναι: JPEG, PNG και GIF.
Το JPEG χρησιμοποιείται για φωτογραφίες, ενώ το PNG είναι ιδανικό για γραφικά και εικόνες με διαφανές φόντο. Το GIF χρησιμοποιείται συνήθως για απλές κινούμενες εικόνες και γραφικά.
Μορφές εικόνας σε HTML
| Τύπος αρχείου | Περιγραφή | Επέκταση αρχείου |
| JPEG (Joint Photographic Experts Group) |
Ιδανικό για φωτογραφίες ή εικόνες με πολλά χρώματα και διαβαθμίσεις. Οι εικόνες JPEG συμπιέζονται, πράγμα που σημαίνει ότι έχουν μικρότερο μέγεθος αρχείου, αλλά η συμπίεση μπορεί να οδηγήσει σε απώλεια ποιότητας. | jpg or .jpeg |
| PNG (Portable Network Graphics) |
Ιδανικά κατάλληλο για εικόνες με διαφανές φόντο ή εικόνες με αιχμηρές άκρες, όπως λογότυπα ή γραφικά. Οι εικόνες PNG είναι χωρίς απώλειες, πράγμα που σημαίνει ότι δεν χάνουν την ποιότητά τους κατά τη συμπίεση. | .png |
| GIF (Graphics Interchange Format) |
Ιδανικό για απλά κινούμενα γραφικά ή εικόνες με περιορισμένα χρώματα, όπως εικονίδια ή κουμπιά. Οι εικόνες GIF μπορούν επίσης να χρησιμοποιηθούν για τη δημιουργία απλών κινούμενων εικόνων. | .gif |
Λάβετε υπόψη τα χαρακτηριστικά της εικόνας σας, την πολυπλοκότητά της και την προβλεπόμενη χρήση κατά την επιλογή μιας μορφής εικόνας. Η χρήση λανθασμένης μορφής μπορεί να οδηγήσει σε μεγαλύτερα μεγέθη αρχείων, μεγαλύτερους χρόνους φόρτωσης και χαμηλότερη ποιότητα εικόνας.
 |
Παρόλο που οι μορφές εικόνας JPEG, PNG και GIF είναι οι πιο συχνά χρησιμοποιούμενες, λάβετε υπόψη ότι υπάρχουν και άλλες διαθέσιμες μορφές εικόνας, όπως το SVG (Scalable Vector Graphics) και το WebP. Το SVG είναι μια μορφή που βασίζεται σε διανυσματικά γραφικά και είναι ιδανική για εικόνες που πρέπει να κλιμακωθούν χωρίς να χάσουν την ποιότητά τους (Δεν αλλοιώνονται με την αύξηση των διαστάσεών τους), ενώ το WebP είναι μια σχετικά νέα μορφή που προσφέρει καλύτερη συμπίεση και μικρότερα μεγέθη αρχείων από το JPEG και το PNG. Ωστόσο, δεν υποστηρίζουν όλα τα προγράμματα περιήγησης ιστού αυτές τις μορφές, επομένως είναι σημαντικό να ελέγξετε τη συμβατότητα πριν τις χρησιμοποιήσετε στον ιστότοπό σας. Για να ελέγξετε τη συμβατότητα για διαφορετικές μορφές εικόνας, μπορείτε να ανατρέξετε στην τεκμηρίωση των προγραμμάτων περιήγησης ιστού που στοχεύετε. Τα πιο δημοφιλή προγράμματα περιήγησης ιστού, όπως το Chrome, το Firefox, το Safari και το Edge, διαθέτουν επίσημη τεκμηρίωση που παραθέτει τις υποστηριζόμενες μορφές αρχείων και τις εκδόσεις τους. |
Μπορείτε επίσης να χρησιμοποιήσετε διαδικτυακά εργαλεία όπως το CanlUse.com, το οποίο παρέχει μια ολοκληρωμένη βάση δεδομένων με πληροφορίες συμβατότητας προγραμμάτων περιήγησης για διαφορετικές τεχνολογίες ιστού, συμπεριλαμβανομένων των μορφών εικόνας.
Τοποθεσία Εικόνας
Όταν προσθέτετε εικόνες στον ιστότοπό σας, είναι σημαντικό να λάβετε υπόψη την τοποθεσία του αρχείου εικόνας. Εάν η εικόνα είναι αποθηκευμένη στον υπολογιστή σας, θα πρέπει να την ανεβάσετε στον διακομιστή του ιστότοπού σας. Εάν το αρχείο εικόνας δεν βρίσκεται στον ίδιο κατάλογο με το αρχείο HTML, θα πρέπει να δώσετε μια σχετική ή απόλυτη διαδρομή προς το αρχείο εικόνας.
Μόλις η εικόνα βρεθεί στη σωστή θέση, μπορείτε να χρησιμοποιήσετε την ετικέτα <img> και το χαρακτηριστικό src για να την εισαγάγετε στην ιστοσελίδα σας.
Σχετική διαδρομή (Relative Path)
Μια σχετική διαδρομή είναι μια διαδρομή που ξεκινά από τον κατάλογο του αρχείου HTML. Για παράδειγμα:
Σε αυτό το παράδειγμα, η σχετική διαδρομή δείχνει σε ένα αρχείο εικόνας (picture.jpg) σε έναν υποκατάλογο που ονομάζεται images και βρίσκεται στον ίδιο κατάλογο με το αρχείο HTML.
Απόλυτη Διαδρομή (Absolute Path)
Μια απόλυτη διαδρομή είναι μια διαδρομή που ξεκινά από τον ριζικό κατάλογο του ιστότοπου. Για παράδειγμα:
Σε αυτό το παράδειγμα, η απόλυτη διαδρομή δείχνει σε ένα αρχείο εικόνας (picture.jpg) που φιλοξενείται στον διακομιστή ιστού στη διεύθυνση URL “https://example.com/images/pic.jpg”.
Εκτός από αυτές τις μεθόδους, υπάρχουν επίσης αρκετές υπηρεσίες φιλοξενίας εικόνων τρίτων, όπως το Imgur, το Flickr, το Photobucket, το Google Photos, το Dropbox ή το Amazon S3, που σας επιτρέπουν να αποθηκεύετε και να διαχειρίζεστε τις εικόνες σας στο διαδίκτυο. Αυτές οι υπηρεσίες μπορούν να παρέχουν πρόσθετες λειτουργίες, όπως αυτόματη αλλαγή μεγέθους εικόνας, βελτιστοποίηση και συμπίεση.
Ωστόσο, λάβετε υπόψη ότι η χρήση υπηρεσιών τρίτων ενδέχεται να απαιτεί επιπλέον κόστος ή συνδρομή και ενδέχεται να έχετε περιορισμένο έλεγχο στη φιλοξενία και τη διαθεσιμότητα των εικόνων σας.
Εκτός από τα συνήθως χρησιμοποιούμενα χαρακτηριστικά src, alt width και height για εικόνες σε HTML, υπάρχουν πολλά άλλα χαρακτηριστικά που ιστορικά χρησιμοποιούνταν για την τροποποίηση της εμφάνισης μιας εικόνας.
Ενώ αυτά τα χαρακτηριστικά προσφέρουν έναν τρόπο άμεσου χειρισμού της παρουσίασης μιας εικόνας εντός της σήμανσης HTML, είναι σημαντικό να θυμόμαστε ότι οι σύγχρονες πρακτικές ανάπτυξης ιστοσελίδων ευνοούν το CSS για τέτοιες οπτικές προσαρμογές για να διασφαλίσουν καθαρότερο κώδικα και διαχωρισμό του περιεχομένου από την παρουσίαση.
Το χαρακτηριστικό border
Το χαρακτηριστικό border καθορίζει το πλάτος του περιγράμματος γύρω από την εικόνα. Για παράδειγμα:
Τα χαρακτηριστικά hspace και vspace
Τα χαρακτηριστικά hspace και vspace καθορίζουν τον οριζόντιο και κάθετο χώρο γύρω από την εικόνα, αντίστοιχα. Για παράδειγμα:
Το χαρακτηριστικό align
Το χαρακτηριστικό align επιτρέπει τον καθορισμό της ευθυγράμμισης μιας εικόνας σε σχέση με το περιβάλλον περιεχόμενο, με τιμές όπως left, right και center. Για παράδειγμα:
Ενώ αυτά τα χαρακτηριστικά παρέχουν απλούς τρόπους για την προσαρμογή της παρουσίασης εικόνων, οι σύγχρονες πρακτικές HTML χρησιμοποιούν CSS για την επίτευξη αυτών των εφέ. Αυτή η προσέγγιση ενισχύει την ευελιξία του στυλ, διατηρεί την HTML πιο καθαρή και διαχωρίζει την παρουσίαση από το περιεχόμενο.
Πράγματα που πρέπει να έχετε κατά νου όταν εργάζεστε με εικόνες σε HTML:
- Ονομάστε τα αρχεία εικόνων σας περιγραφικά και συμπεριλάβετε σχετικές λέξεις-κλειδιά. Αυτό μπορεί να βοηθήσει στη βελτιστοποίηση μηχανών αναζήτησης και να διευκολύνει την εύρεση εικόνων στη βιβλιοθήκη εικόνων σας. Αποφύγετε τη χρήση γενικών ονομάτων όπως “image1.jpg” ή “photo.png”.
- Χρησιμοποιήστε κατάλληλες μορφές εικόνας για τον τύπο της εικόνας για να εξασφαλίσετε την καλύτερη ποιότητα εικόνας και γρήγορο χρόνο φόρτωσης.
- Αποθηκεύστε τις εικόνες σε κατάλληλη θέση. Βεβαιωθείτε ότι το αρχείο εικόνας βρίσκεται είτε στον ίδιο κατάλογο με το αρχείο HTML σας (σχετική διαδρομή) είτε παρέχετε την πλήρη διαδρομή προς το αρχείο εικόνας στο χαρακτηριστικό src (απόλυτη διαδρομή).
- Λάβετε υπόψη το μέγεθος του αρχείου της εικόνας, καθώς οι μεγάλες εικόνες μπορούν να επιβραδύνουν τον χρόνο φόρτωσης του ιστότοπού σας. Είναι καλή ιδέα να βελτιστοποιήσετε τις εικόνες για τον ιστό πριν τις ανεβάσετε στον ιστότοπό σας (δηλαδή, να τις συμπιέσετε για να μειώσετε το μέγεθος του αρχείου χωρίς να θυσιάσετε την ποιότητα της εικόνας).
- Να παρέχετε πάντα περιγραφικό και ουσιαστικό εναλλακτικό κείμενο για τις εικόνες σας για να βελτιώσετε την προσβασιμότητα και την εμπειρία χρήστη.
- Τέλος, λάβετε υπόψη την τοποθέτηση των εικόνων σας για να συμπληρώσετε το περιεχόμενό σας και να βελτιώσετε την εμπειρία χρήστη. Αποφύγετε την τοποθέτηση εικόνων σε σημεία που αποσπούν την προσοχή και ενδέχεται να επηρεάσουν την αναγνωσιμότητα του κειμένου σας.
Responsive εικόνες: Οι ιδιότητες srcset και sizes
Καθώς όλο και περισσότεροι άνθρωποι χρησιμοποιούν κινητές συσκευές για να περιηγηθούν στο διαδίκτυο, η δημιουργία responsive εικόνων έχει γίνει μια κρίσιμη πτυχή του σχεδιασμού ιστοσελίδων. Η διασφάλιση ότι οι εικόνες φαίνονται καλές σε οθόνες διαφόρων μεγεθών μπορεί να βελτιώσει σημαντικά την εμπειρία του χρήστη και να βελτιώσει την αλληλεπίδραση.
Για να δημιουργήσετε responsive εικόνες σε HTML, μπορείτε να χρησιμοποιήσετε τα χαρακτηριστικά srcset και sizes.
Το χαρακτηριστικό srcset
Το χαρακτηριστικό srcset σάς επιτρέπει να καθορίσετε μια λίστα αρχείων εικόνας με διαφορετικές αναλύσεις, μεγέθη και μορφές. Όταν το πρόγραμμα περιήγησης φορτώνει την εικόνα, θα επιλέξει την πιο κατάλληλη εικόνα από τη λίστα με βάση το μέγεθος της οθόνης και τις δυνατότητες της συσκευής.
Το χαρακτηριστικό sizes
Το χαρακτηριστικό sizes καθορίζει το μέγεθος του κοντέινερ εικόνας στο οποίο θα εμφανίζεται η εικόνα. Με άλλα λόγια, λέει στο πρόγραμμα περιήγησης πόσο χώρο στην οθόνη θα καταλαμβάνει η εικόνα σε διαφορετικές συσκευές.
Τα χαρακτηριστικά srcset και sizes σε παράδειγμα
Χρησιμοποιώντας μαζί τα srcset και sizes, μπορείτε να δημιουργήσετε εικόνες που είναι βελτιστοποιημένες για διαφορετικές συσκευές και μεγέθη οθονών.
Για παράδειγμα:
- Ο κώδικας ορίζει την πηγή της εικόνας σε sunflowers.jpg.
- Το χαρακτηριστικό alt παρέχει το ακόλουθο εναλλακτικό κείμενο για την εικόνα: “Sunflowers in the sunset”,
- Το χαρακτηριστικό srcset παρέχει τρεις διαφορετικές εκδόσεις της εικόνας με διαφορετικά μεγέθη και αναλύσεις (πλάτος 480, 800 και 1200 pixel).
- Το χαρακτηριστικό sizes ορίζει το πλάτος της εικόνας σε διαφορετικά σημεία διακοπής. Στο παράδειγμά μας, η εικόνα θα καταλαμβάνει έως και 95% του πλάτους του παραθύρου προβολής εάν το παράθυρο προβολής είναι μικρότερο από 480px, 45% εάν το παράθυρο προβολής είναι μεταξύ 480px και 800px και 30% εάν το παράθυρο προβολής είναι μεγαλύτερο από 800px.
Όταν φορτωθεί η σελίδα, το πρόγραμμα περιήγησης θα επιλέξει την καταλληλότερη εικόνα από το χαρακτηριστικό srcset με βάση το μέγεθος της οθόνης και τις δυνατότητες της συσκευής.
Είναι σημαντικό να σημειωθεί ότι ενώ η HTML μπορεί να παρέχει ένα βασικό επίπεδο απόκρισης για εικόνες, πιο προηγμένες τεχνικές μπορούν να επιτευχθούν μέσω του CSS.
