Γράγει ο Michael Yalonides – Front End Designer / Developer της Competitive Edge Digital.
Στις μέρες μας η δημιουργία μιας ιστοσελίδας μπορεί να υλοποιηθεί εύκολα χρησιμοποιώντας εργαλεία όπως η WordPress ή άλλα παρόμοια CMSs (Συστήματα Διαχείρισης Περιεχομένου). Τέτοια εργαλεία απευθύνονται κυρίως σε κανονικούς χρήστες και κατ’ επέκταση δίνουν προτεραιότητα στην ευκολία χρήσης χρησιμοποιώντας διάφορα “κόλπα” για να διεκπεραιώσουν το «κτίσιμο της ιστοσελίδας». Για παράδειγμα, η WordPress συμπιέζει αυτόματα αρχεία .jpg και επίσης συρρικνώνει εικόνες 4Κ σε μικρότερη ανάλυση.
Αναλόγως του τύπου της ιστοσελίδας που δημιουργείται/διαχειρίζεστε, την υποκείμενη τεχνολογία που χρησιμοποιείτε για να δημιουργήσετε την ιστοσελίδα σας και την τεχνική σας επάρκεια, μπορείτε να ακολουθήσετε διαφορετικές στρατηγικές βελτιστοποίησης των εικόνων σας.
Σαν κανονικός χρήστης, όταν χρησιμοποιείτε ένα Σύστημα Διαχείρισης Περιεχομένου για την δημιουργία της ιστοσελίδας σας όπως η WordPress, έχετε περιορισμένες επιλογές ως προς τον τρόπο βελτιστοποίησης των εικόνων σας, αναλόγως και του theme που χρησιμοποιείτε. Αν είστε τυχεροί, θα έχετε την επιλογή μεταφόρτωσης μιας έκδοσης της εικόνας για desktop και μια για φορητές συσκευές. Η προσθήκη εικόνων μέσω διάφορων εργαλείων δημιουργίας σελίδας όπως το Elementor, το WPBakery κτλ., προσφέρει κάπως περισσότερες επιλογές, επιτρέποντας την μεταφόρτωση διαφορετικών εκδόσεων της εικόνας για desktop, tablet και mobile. Φυσικά μπορείτε ναι προσθέσετε όσες εκδόσεις της εικόνας σας επιθυμείτε με την προσθήκη κώδικα στο theme χρησιμοποιώντας το στοιχείο <picture>
Όπως μπορείτε να δείτε πιο κάτω μπορούμε να πούμε στο πρόγραμμα περιήγησης να φορτώσει διαφορετικές εκδόσεις της εικόνας μας, αναλόγως της ανάλυσης της οθόνης της συσκευής στην οποία προβάλλεται η ιστοσελίδα. Στο πιο κάτω παράδειγμα, έχουμε 4 διαφορετικές εκδόσεις της εικόνας μας. Μία εικόνα για desktops με ανάλυση οθόνης 4Κ, μία για desktops με ανάλυση οθόνης 2.5K και μία έκδοση για desktops με πιο μικρή ανάλυση οθόνης. Τέλος, έχουμε το στοιχείο <img> που φορτώνει την προεπιλεγμένη εικόνα εάν δεν πληρείται κανένα από τα παραπάνω κριτήρια. Με τέτοιο τρόπο μπορούμε να στοχεύσουμε όλες τις συσκευές που θέλουμε.
<picture>
<source media=”(max-width: 3840px) and (min-width: 2561px)” srcset=”example-4k.jpg”>
<source media=”(max-width: 2560px) and (min-width: 1921px)” srcset=”example-2560.jpg”>
<source media=”(max-width: 1366px) and (min-width: 1025px)” srcset=”example-1366.jpg”>
<img src=”example.jpg” alt=”Example image description”>
</picture>
Ο άλλος τρόπος προβολής των εικόνων είναι ως εικόνες φόντου (background-images). Μπορείτε επίσης να αλλάξετε την εικόνα που προβάλλεται αλλάζοντας την ιδιότητα background-image και χρησιμοποιώντας το στοιχείο @media και την ιδιότητα .css background-image
Μια εικόνα αξίζει όσο χίλιες λέξεις.
ΛΟΓΟΙ ΒΕΛΤΙΣΤΟΠΟΙΗΣΗΣ ΤΩΝ ΕΙΚΟΝΩΝ ΣΑΣ
Στις μέρες μας, ο αριθμός των συσκευών στις οποίες μπορεί να προβληθεί η ιστοσελίδα σας είναι αρκετά μεγάλος. Από επιτραπέζιους υπολογιστές με ανάλυση οθόνης 4Κ έως παλιότερους επιτραπέζιους υπολογιστές με αναλύσεις οθόνης όχι μεγαλύτερες από 1366px πλάτος και όλα τα ενδιάμεσα. Μην ξεχνάτε όλες τις αναλύσεις για tablet σε οριζόντια και κατακόρυφη κατεύθυνση. Τέλος, έχουμε όλες τις φορητές συσκευές με διάφορα μεγέθη οθόνης. Λαμβάνοντας το αυτό υπόψη, η χρήση μιας ή δύο εικόνων με την προσδοκία ότι θα εμφανίζετε σωστά στις περισσότερες συσκευές είναι όνειρο θερινής νυκτός.
Οι κύριοι λόγοι για τη βελτιστοποίηση των εικόνων σας:
- Ο χρήστης βλέπει την εικόνα που έχει βελτιστοποιηθεί καλύτερα για τη συσκευή του/της. Η εικόνα εμφανίζεται όπως επιθυμείτε και όχι oπως το theme υποθέτει ότι πρέπει να προβάλλεται η εικόνα.
- Εξυπηρετούνται οι συσκευές με υψηλότερη πυκνότητα σε pixels, όπως tablets και κινητά με διπλάσια ή τριπλάσια πυκνότητα από κανονικές οθόνες επιτραπέζιων υπολογιστών. Με αυτόν τον τρόπο μπορείτε να αποφύγετε θολές εικόνες σε αυτές τις συσκευές.
- Θα έχετε βελτιωμένους χρόνους φόρτωσης για καλύτερη εμπειρία του χρήστη.
ΠΡΟΣΘΕΤΑ (PLUGINS) WordPress
Εάν δεν θέλετε να βελτιστοποιήσετε τις εικόνες από μόνοι σας, μπορείτε να επιλέξετε μέσα από διάφορα πρόσθετα που βελτιστοποιούν αυτόματα τις εικόνες για εσάς. Ακολουθεί μια λίστα πρόσθετων από τις οποίες μπορείτε να επιλέξετε αυτή που σας ταιριάζει:
ΠΡΟΓΡΑΜΜΑΤΑ «ΧΕΙΡΟΚΙΝΗΤΗΣ» ΒΕΛΤΙΣΤΟΠΟΙΗΣΗΣ ΕΙΚΟΝΑΣ Η ΔΙΑΔΙΚΤΥΑΚΑ ΕΡΓΑΛΕΙΑ
Ενώ υπάρχουν διάφοροι ιστότοποι που προσφέρουν υπηρεσίες βελτιστοποίησης εικόνας, κατά τη γνώμη μου, ο καλύτερος τρόπος για να προετοιμάσετε τις εικόνες σας θα ήταν να χρησιμοποιήσετε ένα πρόγραμμα όπως το Adobe Photoshop. Μια δωρεάν εναλλακτική λύση θα ήταν το GIMP που είναι συμβατό με όλα τα κύρια λειτουργικά συστήματα.
Κρίνοντας την ποιότητα της εικόνας με τα μάτια σας είναι ο καλύτερος τρόπος για να εξασφαλίσετε μια καλή ισορροπία μεταξύ ποιότητας της εικόνας κα του μεγέθους του αρχείου. Ένα διαδικτυακό εργαλείο ή ένα πρόσθετο αυτόματης συμπίεσης εικόνων μπορεί να σας εξοικονομήσει χρόνο, αλλά τα αποτελέσματα ενδέχεται να διαφέρουν.
Αν θέλετε κάτι να γίνει σωστά, κάντε το μόνοι σας.
ΒΕΛΤΙΣΤΟΠΟΙΗΣΗ ΕΙΚΟΝΩΝ ΤΙ ΜΟΡΦΗ ΑΡΧΕΙΟΥ ΝΑ ΕΠΙΛΕΞΩ;
.jpg Η πιο κοινή μορφή εικόνας. Χρησιμοποιείται καλύτερα για φωτογραφίες όπως η εικόνα της ερήμου που βλέπετε στο φόντο αυτής της σελίδας.
.png Ο διάδοχος του .gif. Χρησιμοποιείται καλύτερα για την εξαγωγή γραφικών όπως η εικόνα κάτω από τον τίτλο αυτής της σελίδας. Τα γραφικά με κείμενο και σχήματα θα πρέπει να εξάγονται σε .png ανάλογα και με τη διαφορά μεγέθους μεταξύ του αρχείου αυτού και ενός αρχείου .jpg παρόμοιας ποιότητας. Όπως ο προκάτοχός του και σε αντίθεση με το .jpg, το .png υποστηρίζει επίσης αποτελέσματα διαφάνειας (transparency).
.svg Χρησιμοποιείται καλύτερα για την εξαγωγή διανυσματικών (vector) γραφικών όπως το λογότυπο CED στην επικεφαλίδα και το υποσέλιδο της σελίδας αλλά και αυτό που αιωρείται πάνω από τον βράχο στο background, εάν βλέπετε αυτήν τη σελίδα από έναν επιτραπέζιο υπολογιστή. Μεμονωμένα σχήματα ενός αρχείου .svg μπορούν να έχουν και κίνηση (animation) χρησιμοποιώντας .css, κάτι που μας δίνει πολλές δημιουργικές δυνατότητες. Αν αναλογιστούμε επίσης την εξοικονόμηση στο μέγεθος του αρχείου και την ευκολία του να χρησιμοποιούμε μία εικόνα αντί για πολλές εικόνες raster (αυτές με ιχνοστοιχεία από κουκκίδες) είναι κάτι που κάνει την ζωή μας πιο εύκολη.
.webp Αυτή η μορφή αρχείου είναι διαθέσιμη εδώ και αρκετό καιρό αλλά η υποστήριξη της από όλα τα κύρια προγράμματα περιήγησης ξεκίνησε τον Σεπτέμβριο του 2020. Υπόσχεται να αντικαταστήσει το .jpg παρέχοντας περίπου 30% καλύτερη συμπίεση για την ίδια ποιότητα αρχείου. Επίσης, υποστηρίζει transparency όπως και το .png αλλά με περίπου 20% καλύτερη συμπίεση για την ίδια ποιότητα αρχείου. Υποστηρίζει επίσης και animation κάτι που μόνο το .gif υποστήριζε για τόσα χρόνια χωρίς όμως τους περιορισμούς που επιβάλει το .gif όπως η περιορισμένη παλέτα χρωμάτων. Θα ήταν υπέροχο αν το .webp καταφέρει να αντικαταστήσει και τις τρεις μορφές εικόνας (.jpg, .png & .gif).
ΣΥΜΠΕΡΑΣΜΑΤΙΚΑ
Ενώ οι δυνατότητες που προσφέρονται από τις πρόσφατα υποστηριζόμενες μορφές εικόνας θα οδηγήσουν σε ευρύτερη υιοθέτηση εικόνων υψηλότερης ανάλυσης, ο ρυθμός υιοθέτησης τους από τους σχεδιαστές των themes λογικά θα είναι αρκετά αργός. Ευπρόσδεκτος φυσικά θα ήταν και ο περισσότερος έλεγχος στο πως θα μοιάζει η ιστοσελίδα μας, εκτός από τις τρεις κύριες κατηγορίες επιτραπέζιων υπολογιστών, tablet & κινητών.
Υπάρχουν πολλοί τρόποι για να κάνετε πιο γρήγορο τον ιστότοπό σας και η βελτιστοποίηση των εικόνων σας είναι πιθανώς ο καλύτερος και ευκολότερος τρόπος για να το κάνετε. Τελευταίο αλλά όχι λιγότερο σημαντικό, μην ξεχάσετε την ετικέτα περιγραφής (alt-text) για να συνοδεύσετε τις εικόνες σας 😉
