Υπάρχουν διάφορες μορφές εικόνας που μπορούν να χρησιμοποιηθούν σε ιστοσελίδες. Μερικά συνηθισμένα παραδείγματα είναι τα GIF , JPG και PNG . Τα αρχεία SVG χρησιμοποιούνται επίσης συχνά σε ιστότοπους σήμερα, δίνοντας στους σχεδιαστές ιστοσελίδων μια άλλη επιλογή για την online εικόνα.
Εικόνες GIF
Χρησιμοποιήστε αρχεία GIF για εικόνες που έχουν μικρό, σταθερό αριθμό χρωμάτων. Τα αρχεία GIF μειώνονται πάντοτε σε όχι περισσότερα από 256 μοναδικά χρώματα. Ο αλγόριθμος συμπίεσης για τα αρχεία GIF είναι λιγότερο πολύπλοκος από ότι για τα αρχεία JPG, αλλά όταν χρησιμοποιείται σε επίπεδες έγχρωμες εικόνες και κείμενο παράγει πολύ μικρά μεγέθη αρχείων .
Η μορφή GIF δεν είναι κατάλληλη για φωτογραφικές εικόνες ή εικόνες με μεταβαλλόμενα χρώματα. Επειδή η μορφή GIF έχει περιορισμένο αριθμό χρωμάτων, οι κλίσεις και οι φωτογραφίες θα καταλήξουν με ζώνη και pixelation όταν αποθηκεύονται ως αρχείο GIF.
Με λίγα λόγια, θα χρησιμοποιούσατε τα GIF μόνο για απλές εικόνες με μερικά μόνο χρώματα, αλλά θα μπορούσατε επίσης να χρησιμοποιήσετε και PNG για αυτό (πολύ πιο σύντομα).
JPG εικόνες
Χρησιμοποιήστε εικόνες JPG για φωτογραφίες και άλλες εικόνες που έχουν εκατομμύρια χρώματα. Χρησιμοποιεί έναν σύνθετο αλγόριθμο συμπίεσης που σας επιτρέπει να δημιουργείτε μικρότερα γραφικά χάνοντας κάποια από την ποιότητα της εικόνας. Αυτό ονομάζεται συμπίεση "απώλειας" επειδή ορισμένες πληροφορίες εικόνας χάνονται όταν συμπιέζεται η εικόνα.
Η μορφή JPG δεν είναι κατάλληλη για εικόνες με κείμενο, μεγάλα μπλοκ στερεών χρωμάτων και απλά σχήματα με τραγανές άκρες. Αυτό οφείλεται στο γεγονός ότι όταν η εικόνα είναι συμπιεσμένη, το κείμενο, το χρώμα ή οι γραμμές μπορεί να θολώσουν, καταλήγοντας σε μια εικόνα που δεν είναι τόσο απότομη όσο θα αποθηκευτεί σε άλλη μορφή.
Οι εικόνες JPG χρησιμοποιούνται καλύτερα για φωτογραφίες και εικόνες που έχουν πολλά και πολλά φυσικά χρώματα.
Εικόνες PNG
Η μορφή PNG αναπτύχθηκε ως αντικατάσταση της μορφής GIF όταν εμφανίστηκε ότι οι εικόνες GIF θα υπόκεινταν σε τέλη δικαιωμάτων. Τα γραφικά PNG έχουν καλύτερο ρυθμό συμπίεσης από τις εικόνες GIF που έχουν ως αποτέλεσμα μικρότερες εικόνες από το ίδιο αρχείο που αποθηκεύτηκε ως GIF. Τα αρχεία PNG προσφέρουν διαφάνεια της άλφα, πράγμα που σημαίνει ότι μπορείτε να έχετε περιοχές των εικόνων σας που είναι είτε πλήρως διαφανείς είτε ακόμη και να χρησιμοποιήσετε μια σειρά διαφάνειας άλφα. Για παράδειγμα, μια σκιά σταγόνας χρησιμοποιεί μια σειρά από εφέ διαφάνειας και θα ήταν κατάλληλη για ένα PNG (ή ίσως να τερματίσετε με τη χρήση σκιών CSS αντί).
Οι εικόνες PNG, όπως τα GIF, δεν ταιριάζουν στις φωτογραφίες. Είναι πιθανό να ξεπεράσετε το ζήτημα της ζώνης που επηρεάζει φωτογραφίες που έχουν αποθηκευτεί ως αρχεία GIF χρησιμοποιώντας αληθινά χρώματα, αλλά αυτό μπορεί να έχει ως αποτέλεσμα πολύ μεγάλες εικόνες. Οι εικόνες PNG υποστηρίζονται επίσης από παλαιότερα κινητά τηλέφωνα και τηλέφωνα με χαρακτηριστικά.
Χρησιμοποιούμε PNG για οποιοδήποτε αρχείο που απαιτεί διαφάνεια. Χρησιμοποιούμε επίσης PNG-8 για οποιοδήποτε αρχείο που θα ήταν κατάλληλο ως GIF, χρησιμοποιώντας αυτό το σχήμα PNG αντί.
Εικόνες SVG
Το SVG αντιπροσωπεύει το Scalable Vector Graphic. Σε αντίθεση με τις μορφές που βασίζονται σε ράστερ που βρίσκονται σε JPG, GIF και PNG, αυτά τα αρχεία χρησιμοποιούν διανύσματα για τη δημιουργία πολύ μικρών αρχείων που μπορούν να αναπαραχθούν σε οποιοδήποτε μέγεθος χωρίς απώλεια ποιότητας αύξησης του μεγέθους αρχείου. Δημιουργούνται για εικόνες όπως εικονίδια και ακόμη και λογότυπα.
Προετοιμασία εικόνων για παράδοση στο Web
Ανεξάρτητα από το ποια μορφή εικόνας χρησιμοποιείτε και ότι ο ιστότοπός σας είναι σίγουρος ότι θα χρησιμοποιήσει διάφορες μορφές σε όλες τις σελίδες του, θα πρέπει να διασφαλίσετε ότι όλες οι εικόνες στον ιστότοπο είναι έτοιμες για διανομή μέσω διαδικτύου . Πολύ μεγάλες εικόνες μπορούν να προκαλέσουν αργή λειτουργία ενός ιστότοπου και να επηρεάσουν τη συνολική απόδοση. Για να καταπολεμηθεί αυτό, αυτές οι εικόνες πρέπει να βελτιστοποιηθούν για να βρεθεί η ισορροπία μεταξύ υψηλής ποιότητας και το χαμηλότερο μέγεθος αρχείου που είναι δυνατόν σε αυτό το επίπεδο ποιότητας.
Η επιλογή της σωστής μορφής εικόνων είναι μέρος της μάχης, αλλά και βεβαιωθείτε ότι έχετε προετοιμάσει αυτά τα αρχεία είναι το επόμενο βήμα σε αυτή τη σημαντική διαδικασία παράδοσης ιστού.
Αρχικό άρθρο από την Jennifer Krynin. Επεξεργασμένο από τον Jeremy Girard.