Προσαρμόσιμες εικόνες στο διαδίκτυο

Ένα website δεν αρκεί να είναι μόνο λειτουργικό και όμορφο, πρέπει να είναι και γρήγορο και να επιτρέπει την άμεση διάδραση με τον χρήστη. Σ’ αυτό δεν συντελούν οι μεγάλες φωτογραφίες που ‘ζυγίζουν’ εκαντοντάδες ΚΒ και πολλές φορές MB.

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

Το <picture> καθώς και τα srcset και sizes attributes του γνωστού μας <img> tag, δημιουργήθηκαν για να λύσουν ακριβώς αυτό το πρόβλημα. Χρησιμοποιώντας ‘έξυπνα’ μικρότερες ή κομμένες φωτογραφίες ανάλογα με το μέγεθος της συσκευής που προβάλλονται, μειώνουμε κατά πολύ το μέγεθος τους και συνεπώς τον χρόνο φόρτωσης του website.

Τα χαρακτηριστικά που θα συζητήσουμε σ’ αυτό το άρθρο, υποστηρίζονται πλέον σε όλους τους σύγχρονους browsers ^[1][2]. Αν πρέπει να υποστηρίξετε παλιότερους browsers, μπορείτε να χρησιμοποιήσετε το picturefill.

Επιλογή εικόνας με βάση την ανάλυση

Ας δούμε ένα παράδειγμα, αρχίζοντας με τον κλασσικό τρόπο:

<img src="large-photo.jpg" alt="My photo" />

Η φωτογραφία μας, έστω οτι είναι σε ανάλυση 1920x1080 και έχει μέγεθος 1ΜΒ, θα φορτωθεί κανονικά σε όλες τις συσκευές και αναλύσεις. Ορίζοντας όμως το srcset, σε μικρές αναλύσεις θα φορτωθεί η μικρή φωτογραφία με 640x480 ανάλυση και το 1/4 του μεγέθους της αρχικής.

<img src="large-photo.jpg" alt="My photo"
     srcset="small-photo.jpg 640w, large-photo.jpg 1920w"
     sizes="(max-width: 640px) 600px, 1920px" />

Η παράμετρος srcset ορίζει τη συλλογή των εικόνων από τις οποίες ο browser θα επιλέξει την καταλληλότερη, καθώς και τις διαστάσεις που έχει η κάθε μια. Παρατηρήστε οτι χρησιμοποιούμε την μονάδα w και όχι px που ίσως θα περιμένατε.

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

Επιλογή εικόνας με βάση την πυκνότητα των pixel της συσκευής

Με την έλευση των smartphones και των οθονών υψηλής ανάλυσης (retina display) οι συσκευές απαιτούν μεγαλύτερη ανάλυση των εικόνων ώστε να δείχνουν καθαρές. Αν θέλετε λοιπόν, να υποστηρίξετε πολλαπλές αναλύσεις της ίδιας εικόνας, μπορείτε να χρησιμοποιήσετε την μονάδα x και να παραλείψετε το sizes attribute:

<img src="photo-640w" alt="My photo"
     srcset="photo-320w.jpg, photo-480w.jpg 1.5x, photo-640w 2x" />

Έτσι, η κάθε συσκευή θα ζητήσει την αντίστοιχη φωτογραφία ανάλογα με την αναλογία pixel που υποστηρίζει (device-pixel-ratio).

Art direction

Με τον όρο art direction εννοούμε την δυνατότητα εμφάνισης διαφορετικής φωτογραφίες ανάλογα με το μέγεθος της συσκευής. Για παράδειγμα, μια φωτογραφία μπορεί να φαίνεται ικανοποιητική σε ένα desktop περιβάλλον αλλά στο κινητό να μην φαίνονται οι λεπτομέρειες, οπότε να χρειάζεται κόψιμο ή/και εστίαση σε αυτό που μας ενδιαφέρει περισσότερο.

Αυτό το πρόβλημα αντιμετωπίζεται με το στοιχείο picture:

<picture>
  <source media="(max-width: 799px)" srcset="photo-480w-close-portrait.jpg">
  <source media="(min-width: 800px)" srcset="photo-800w.jpg">
  <img src="photo-800w.jpg" alt="My photo">
</picture>

Τα source περιλαμβάνουν ένα media query το οποίο δείχνει στον browser ποια εικόνα θα φορτώσει ανάλογα με την ανάλυση της συσκευής. Πρέπει οπωσδήποτε να υπάρχει και ένα <img> το οποίο αποτελεί την ‘default’ εικόνα που θα φορτωθεί σε περίπτωση που κανένα media query δεν συμπεριλαμβάνει την ανάλυση που έχει η συσκευή, όπως επίσης και στη περίπτωση που ο browser δεν υποστηρίζει το στοιχείο <picture>.

Υποστηρίζοντας διαφορετικά format των εικόνων

Κάποια καινούργια φωτογραφικά format όπως το webp ή το jpeg-2000 προσφέρουν υψηλότερη συμπίεση και μικρότερο μέγεθος, όμως δεν υποστηρίζονται ακόμα από όλους τους browsers. Χρησιμοποιώντας το picture στοιχείο μπορούμε να έχουμε πολλαπλά format και να αφήσουμε τον browser να διαλέξει το κατάλληλο, ανάλογα με το τι υποστηρίζει.

<picture>
  <source type="image/svg+xml" srcset="photo.svg">
  <source type="image/webp" srcset="photo.webp">
  <img src="photo.png" alt="My photo">
</picture>

Συνοψίζοντας…

Όπως είδαμε, αυτά τα καινούργια χαρακτηριστικά αποτελούν ένα σημαντικό εργαλείο για πιο αποτελεσματική χρήση εικόνων στο διαδίκτυο. Είτε θέλουμε απλά να μειώσουμε το μέγεθος του site μας, είτε να χρησιμοποιήσουμε πιο εξελιγμένες ιδέες όπως art direction, πλέον υπάρχουν τα κατάλληλα εργαλεία για αυτόν τον σκοπό. Παρακάτω μπορείτε να βρείτε κάποια links που περιέχουν περισσότερες πληροφορίες και παραδείγματα.

Παραμπομπές: