Images (Εικόνες)

Στην ψηφιακή τεχνολογία οι εικόνες έχουν μια επίσης ψηφιακή μορφή ή bitmap ή raster. Αποτελούνται δηλαδή από ένα σύνολο χρωματικών κουκίδων ή pixels σε οριζόντιες και κάθετες γραμμές.

Εκτός από τις ψηφιακές η άλλη μορφή εικόνων είναι η ανυσματική ή vector. Οι ανυσματικές εικόνες αποθηκεύονται σε μορφή κώδικα με τη μορφή svg (Scalable Vector Graphics). Η μορφή αυτή υποστηρίζεται πλέον από την html5.

Διαστάσεις εικόνας (Image Dimensions)

Είναι ο αριθμός των οριζόντιων κουκίδων (pixels) και των κάθετων.

Για παράδειγμα μια εικόνα έχει διαστάσεις: 1000 x 800 pixels.

Μέγεθος εικόνας (Image Size)

Για κάθε pixel χρειάζονται ένα ή ίσως και 4 bytes για να αποθηκευτεί η χρωματική πληροφορία του pixel. Ο συνολικός αριθμός των bytes δίνει το μέγεθος της εικόνας το οποίο εκφράζεται σε bytes.

Για παράδειγμα μια εικόνα με διαστάσεις: 1000 x 800 pixels και αποθηκευτικό χώρο 3 bytes για κάθε pixel, το μέγεθός της είναι: 1000 x 800 x 3 = 2.400.000 ή 2,4 ΜΒ (Mega Bytes).

Όλες οι μορφές εικόνων δέχονται συμπίεση και έτσι το συνολικό μέγεθος είναι αρκετά μικρότερο από το αρχικά υπολογισμένο.

Ανάλυση εικόνας (Image Resolution)

Εκφράζει την πυκνότητα (πόσα pixels ανά ίντσα) με την οποία απεικονίζεται μια εικόνα σε μια οθόνη ή εκτυπώνεται σε έναν εκτυπωτή.

Μία ίντσα είναι ίση με 2,54 εκατοστά. Μερικές φορές η ανάλυση μετράται και σε ppc (pixels per centimeter)

Για παράδειγμα σε μια οθόνη με ανάλυση 100 ppi (pixels per inch) οριζόντια και κάθετα, μια εικόνα με διαστάσεις 1000 x 800 pixels θα φαίνεται με φυσικές διαστάσεις 10 x 8 ίντσες.

Σε μια οθόνη με διπλάσια ανάλυση 200 ppi (pixels per inch) η εικόνα θα φαίνεται με φυσικές διαστάσεςι 5 x 4 ίντσες.

Το ανάλογο ισχύει και για εκτυπωτές με διαφορετικές αναλύσεις εκτύπωσης.

Χρωματικά μοντέλα (Color Models)

Για την κωδικοποίηση της χρωματικής τιμής χρησιμοποιούνται χρωματικά μοντέλα όπως το RGB (Red Green Blue).

Σύμφωνα με το μοντέλο RGB κάθε χρώμα μπορεί να αποδοθεί ως ένας συνδυασμός των τριών χρωμάτων Red Green Blue.

Το μοντέλο RGBA (Red Green Blue, Alpha) διαθέτει ένα ακόμα κανάλι (Alpha) που καθορίζει τη διαφάνεια της εικόνας.

Εναλλακτικό χρωματικό μοντέλο είναι το HSV (hue, saturation, value) και αποδίδει το τελικό χρώμα με βάση ένα αρχικό χρώμα (Hue), τον κορεσμό του χρώματος (saturation) με τιμές από 0 μέχρι 100% και την τιμή (value) με τιμές από 0 μέχρι 100%.

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

Χρωματικό βάθος (Color Depth)

Εκφράζει το μέγεθος της χρωματικής πληροφορίας που απαιτείται για κάθε pixel. Μετράται συνήθως σε bits ή bytes.

Για παράδειγμα χρωματικό βάθος 8 bits σημαίνει 256 διαφορετικά χρώματα για κάθε pixel, επειδή κάθε byte μπορεί να αποθηκεύσει 256 διαφορετικές τιμές.

Επίσης χρωματικό βάθος 24 bits (3 bytes) σημαίνει ότι κάθε pixel μπορεί να έχει: 256x256x256 = 16.777.216 διαφορετικά χρώματα.

Εικόνες που υποστηρίζουν διαφάνεια (chanel alpha) όπως οι εικόνες png, χρειάζονται ένα ακόμα byte. Άρα 4 bytes ανά pixel.

Συμπίεση εικόνων

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

Οι αλγόριθμοι συμπίεσης χωρίζονται σε:

  • lossy
  • lossless

Οι αλγόριθμοι lossy μπορούν να συμπιέσουν την εικόνα παραπάνω από το "επιτρεπτό" αλλά μπορεί να μειωθεί η ποιότητα της εικόνας.

Οι αλγόριθμοι lossless μπορούν να συμπιέσουν την εικόνα μέχρι το "επιτρεπτό" χωρίς να μειώνεται η ποιότητα της εικόνας.

Μορφές εικόνων (Image Formats)

Ψηφιακές εικόνες (bitmap graphics)

Οι μορφές ψηφιακών εικόνων στο διαδίκτυο είναι κυρίως οι παρακάτω:

PNG (Portable Network Graphics)

Υποστηρίζουν lossless συμπίεση, κανάλι alpha (διαφάνεια) και μεγάλο χρωματικό βάθος (24bit).

JPEG ή JPG (Joint Photographic Experts Group image)

Υποστηρίζουν lossy συμπίεση, και μεγάλο χρωματικό βάθος (24bit).

WebP image

Υποστηρίζουν lossy και lossless συμπίεση, κανάλι alpha (διαφάνεια) και μεγάλο χρωματικό βάθος (24bit).

Είναι μία μορφή που έχει αναπτυχθεί από την Google. Το πλεονέκτημα είναι ότι έχει καλύτερη συμπίεση κατά 25% - 35% από τις png και jpg.

Περισσότερες πληροφορίες: WebP Image Galleries

GIF (Graphics Interchange Format)

Υποστηρίζουν lossless συμπίεση, διαφάνεια, αλλά μικρό χρωματικό βάθος (8bit). Γενικά δεν τις προτιμούμε στο web.

Άλλες μορφές

Υπάρχουν και μορφές εικόνων που υποστηρίζουν animation (animated frames) όπως:

  • APNG (Animated Portable Network Graphics)
  • AVIF (AV1 Image File Format)
  • GIF (Graphics Interchange Format)

Ανυσματικές εικόνες (vector images)

Οι ανυσματικές εικόνες που υποστηρίζονται επίσημα από το web είναι οι εικόνες μορφής SVG (Scalable Vector Graphics).

Πιο συγκεκριμένα, η html έχει εισαγάγει ειδική ετικέτα (svg) για την εισαγωγή και ενσωμάτωση εικόνων svg σε ένα έγγραφο html.

Progressive images

Αυτές οι εικόνες περιέχουν και ένα αντίγραφο της ίδιας της εικόνας σε χαμηλή ανάλυση. Έτσι όταν "κατεβαίνει" η εικόνα κατεβαίνει πρώτα η χαμηλής ανάλυσης (για μεγαλύτερη ταχύτητα) και στη συνέχεια αντικαθίσταται με την υψηλής ανάλυσης.

Για τις JPEG η μορφή αναφέρεται ως progressive format ενώ για τις PNG ως interlaced.