Joomla Tutorials

 

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

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

Στο άρθρο αυτό, θα εξηγήσω πως να χρησιμοποιείτε τις εικόνες, όταν διαχειρίζεστε έναν ιστότοπο. Καθώς το κείμενο αυτό απευθύνεται σε αρχάριους, θα τονίσω ποιος τύπος εικόνας αρμόζει σε κάθε περίσταση. Θα ξεκινήσω από το πιο κοινό (διαφορές μεταξύ JPEG και PNG) και θα καταλήξω στο πιο πρόσφατο (WebP και AVIF).

 

Οι εικόνες JPEG(.jpg και .jpeg αρχεία) είναι οι πιο συνηθισμένες στο διαδίκτυο. Είναι ψηφιακές, επομένως επιδέχονται σμίκρυνση, αλλά όχι μεγέθυνση. Επιπλέον, συμπιέζονται, ώστε να “φορτώνονται” γρηγορότερα από τους επισκέπτες της σελίδας, μειώνεται, όμως, η οπτική τους ποιότητα.

• Ψηφιακή εικόνα: σωστή απεικόνιση μετά τη μείωση, φτωχή μετά την αύξηση
• Καταστροφική συμπίεση: ελαττώνεται το μέγεθος του αρχείου με κόστος την ποιότητα
• Χρήση 72dpi για το διαδίκτυο και 300dpi για εκτύπωση 

 

 

 

 

✅	❌
Οι εικόνες JPEG είναι κατάλληλες για υπόβαθρα. Η συμπίεση συντελεί σε μικρότερα αρχεία, από αυτά που διαθέτουν οι εικόνες PNG, και η σμίκρυνση είναι αποδεκτή για εικόνες που χρησιμοποιούνται ως υπόβαθρα.	Οι εικόνες JPEG δεν υποστηρίζουν διαφάνεια.Αν η εικόνα πρέπει να εμφανίζεται στο προσκήνιο και στο παρασκήνιο πρέπει να φαίνεται πίσω, οπότε δεν πρέπει να χρησιμοποιήσετε JPEG.
Φωτογραφικό ρεπορτάζ; Χρησιμοποίησε JPEG! Είναι η τυπική μορφή εξόδου για τις ψηφιακές φωτογραφικές μηχανές, οπότε μπορείτε κάλλιστα να την εκμεταλλευτείτε.	Οι ακμές δεν φαίνονται καθαρά στις εικόνες JPEG. Για ένα λογότυπο, γράφημα ή διάγραμμα επιλέξτε έναν άλλον τύπο εικόνας.
	Τα κείμενα είναι λιγότερο ευανάγνωστα. Εάν το κείμενο είναι σημαντικό(για παράδειγμα διαφημιστικό μήνυμα εταιρίας ή κατάλογος εστιατορίου) καλύτερα να χρησιμοποιήσετε διαφορετική μορφή εικόνας.

 

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

✅	❌
Οι εικόνες PΝG είναι κατάλληλες για προσκήνια. Η ευκρίνεια και η λεπτομέρεια τους τις καθιστούν εντυπωσιακές και το διαφανές υπόβαθρο τους επιτρέπει να ενσωματώνονται πάνω από αυτό στη σελίδα.	Μην χρησιμοποιήσετε PNG μορφή εικόνων για μεγάλα αρχεία. Μια φωτογραφία πολλών megapixels θα είναι πολύ πιο βαριά σε PNG μορφή.
Απλές εικόνες PNG μπορούν να χρησιμοποιηθούν και στο υπόβαθρο. Δηλαδή, εικόνες με λίγες λεπτομέρειες για παράδειγμα όχι φωτογραφίες. Παρ' όλα αυτά προσοχή στο μέγεθος του αρχείου.
Οι εικόνες PΝG προσφέρουν σαφή απόδοση των κειμένων και των περιγραμμάτων. Είναι ιδανικό για εικόνες όπου κυριαρχεί το κείμενο (για παράδειγμα λογότυπο με σύνθημα, κατάλογος εστιατορίου) ή όταν γεωμετρικά σχήματα αναπαρίστανται ως γραφήματα και διαγράμματα.

Animated GIF ιδανικά για κινούμενα σχέδια χαμηλής ευκρίνειας
Τα animated GIF (.gif αρχεία) είναι φτιαγμένα από συνεχόμενες ψηφιακές εικόνες περιορισμένες σε 256 χρώματα. Ήταν πολύ δημοφιλή όταν χρησιμοποιούνταν (λίγο υπερβολικά) τα φανταχτερά διαφημιστικά banner και οι κλήσεις σε δράση που αναβόσβηναν. Στις μέρες μας, τα συναντάμε όλο και λιγότερο σε ιστότοπους και όλο και περισσότερο σε εφαρμογές ανταλλαγής μηνυμάτων.

* Ψηφιακή εικόνα: σωστή απεικόνιση μετά τη σμίκρυνση, φτωχή μετά την μεγέθυνση
* Περιορισμένη ποικιλία χρωμάτων: μέχρι 256 χρώματα
* Υποστηρίζει την διαφάνεια

 
Πότε να (μην) χρησιμοποιήσετε GIF εικόνες

 

✅	❌
Οι εικόνες GIF σας επιτρέπουν να εμφανίζετε μικρές κινούμενες εικόνες αναμονής. Μερικά είναι διαθέσιμα εδώ.	Δεν υπάρχει δυνατότητα ελέγχου της κίνησης GIF.  Δεν είναι δυνατή η εκκίνηση, η διακοπή και η επαναφορά ενός animated GIF. Αναπαράγεται αποκλειστικά σε βρόχο.
Τα animated GIF σας επιτρέπουν να κινείτε εικόνες με μειωμένο αριθμό χρωμάτων. Για παράδειγμα, μια ευχετήρια κάρτα ή ένα επεξηγηματικό διάγραμμα.
Τα animated GIF σας επιτρέπει να προβάλλετε μια ταινία μερικών δευτερολέπτων. Αυτό είναι αρκετά συνηθισμένο σε ιστολόγια και μέσα κοινωνικής δικτύωσης.

Vector SVG κατάλληλες για εικονογραφήσεις και λογότυπα
Ας αφήσουμε τον κόσμο της ψηφιακής εικόνας και να προχωρήσουμε στη μορφή SVG(.svg αρχεία), η οποία είναι διανυσματική. Ως αποτέλεσμα, υποστηρίζει την αλλαγή μεγέθους της εικόνας, είτε μεγέθυνση ή σμίκρυνση. Είναι πάντα απόλυτα ευκρινείς, συγκριτικά με άλλες μορφές εικόνων που είναι ευκρινείς μόνο όταν διαθέτουν το σωστό μέγεθος.

* Vector εικόνες: ιδανική εμφάνιση ανεξάρτητα το μέγεθος
* Εξ’ ορισμού ελαφριές και γρήγορες για φόρτωση και εμφάνιση
* Υποστηρίζει την διαφάνεια

 

 

 

✅	❌
Vector SVG κατάλληλο για εικονογραφήσεις και λογότυπα. Αν υπάρχει κείμενο, μην ξεχάσετε να το μετατρέψετε σε αυτή τη μορφή.	Η SVG μορφή δεν είναι συμβατή με φωτογραφίες. Ο πραγματικός κόσμος δεν είναι διανυσματικός!
Είναι πάντα απόλυτα ευκρινείς. Με ένα μόνο αρχείο μπορείτε να διακρίνετε οποιοδήποτε μέγεθος στη σελίδα.	Να είστε προσεκτικοί με την απόδοση στα προγράμματα περιήγησης! Για παράδειγμα, το παλιό Internet Explorer είναι γνωστό ότι δεν εκτιμά τις κλίσεις στις εικόνες SVG.
Προχωρημένοι χρήστες: οι εικόνες SVG υποστηρίζουν κάποιες κινήσεις CSS.

WebP μορφή ιδανική για σύγχρονες χρήσεις

Καθώς η βελτιστοποίηση των σελίδων γίνεται όλο και πιο σημαντική, έχουν προκύψει νέες μορφές εικόνων, όπως αυτή. Περισσότερο συμπιεσμένη, με ισοδύναμη απόδοση, υποστηρίζεται από τους πιο σύγχρονους περιηγητές. Η μορφή WebP επιτρέπει μικρότερο χρόνο φόρτωσης της σελίδας, οπότε οι επισκέπτες παραμένουν στη σελίδα. Η χρήση του συνιστάται στο πλαίσιο του SEO.

* Ψηφιακή εικόνα: σωστή απεικόνιση μετά τη σμίκρυνση, φτωχή μετά την μεγέθυνση
* Καταστροφική συμπίεση με απώλειες με ταχύτερα και σαφέστερα αποτελέσματα από τη μορφή JPEG
* Υποστηρίζει την διαφάνεια

 

Πότε να (μην) χρησιμοποιήσετε WebP εικόνες

✅	❌
Οι εικόνες WebP πρέπει να χρησιμοποιούνται προσθετικά στις JPEG και PNG εικόνες. Υποστηρίζονται ευρέως, θα ήταν κρίμα να τις αγνοούμε.	Οι εικόνες WebP δεν είναι χρήσιμες σε εταιρικό ιστότοπο στο intranet, όταν το πρόγραμμα περιήγησης που συνιστάται από την εταιρεία δεν τις υποστηρίζει.

Πως να χρησιμοποιήσετε μια WebP εικόνα

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


Icon fonts ιδανικά για το Διαδίκτυο
Αυτό το άρθρο δεν θα ήταν ολοκληρωμένο χωρίς να αναφερθούν τα icon fonts(.woff και .woff2 αρχεία). Σου επιτρέπουν να χρησιμοποιείς εικονίδια σαν να είναι απλοί χαρακτήρες(γραμματοσειρά, χρώμα κ.α.). Η πιο γνωστή είναι η βιβλιοθήκη Font Awesome που περιλαμβάνει πλήθος από εικονίδια, ή η υπηρεσία IcoMoon που σου επιτρέπει να δημιουργήσεις τις δικές σου γραμματοσειρές.

* Γραμματοσειρά: ιδανική εμφάνιση ανεξάρτητα το μέγεθος
* Ενιαίο αρχείο για φόρτωση, χιλιάδες διαθέσιμα εικονίδια

Πότε να (μην) χρησιμοποιήσετε Icon fonts εικόνες

 

✅	❌
Icon fonts είναι χρήσιμα για μονόχρωμα εικονίδια που χρησιμοποιούνται σε διάφορα μέρη όπως κοινωνικά δίκτυα, κουμπιά κοινής χρήσης, κουμπιά μενού, αναζήτηση, σημεία με κουκκίδες, σελιδοποίηση κ.α.	Όχι πολύχρωμα εικονίδια. Κάθε εικονίδιο εμφανίζεται με ένα μόνο χρώμα.
Icon fonts είναι πάντα ευκρινή. Κάθε χαρακτήρας είναι βασισμένος σε μια vector εικόνα.

 

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

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