Τα κοινά παραδείγματα τύπων εικόνων στον Ιστό περιλαμβάνουν GIF, JPG, και PNG. Αρχεία SVG. Αυτές οι διαφορετικές μορφές προσφέρουν στους σχεδιαστές ιστοσελίδων διάφορες επιλογές για τη βελτιστοποίηση της οπτικής γοητείας ενός ιστότοπου.
Εικόνες GIF
Χρησιμοποιήστε αρχεία GIF για εικόνες που έχουν μικρό, σταθερό αριθμό χρωμάτων. Τα αρχεία GIF μειώνονται πάντα σε όχι περισσότερα από 256 μοναδικά χρώματα. Ο αλγόριθμος συμπίεσης για αρχεία GIF είναι λιγότερο περίπλοκος από ό, τι για αρχεία JPG, αλλά όταν χρησιμοποιείται σε επίπεδες έγχρωμες εικόνες και κείμενο, παράγει πολύ μικρά μεγέθη αρχείων.
Η μορφή GIF δεν είναι κατάλληλη για φωτογραφικές εικόνες ή εικόνες με χρώματα κλίσης. Επειδή η μορφή GIF έχει περιορισμένο αριθμό χρωμάτων, οι διαβαθμίσεις και οι φωτογραφίες θα καταλήξουν σε ζώνες και pixel όταν αποθηκεύονται ως αρχείο GIF.
JPG Εικόνες
Χρησιμοποιήστε εικόνες JPG για φωτογραφίες και άλλες εικόνες που έχουν εκατομμύρια χρώματα. Χρησιμοποιεί έναν σύνθετο αλγόριθμο συμπίεσης που σας επιτρέπει να δημιουργείτε μικρότερα γραφικά χάνοντας μέρος της ποιότητας της εικόνας. Αυτό ονομάζεται συμπίεση "lossy", επειδή μερικές από τις πληροφορίες της εικόνας χάνονται όταν συμπιέζεται η εικόνα.
Η μορφή JPG δεν είναι κατάλληλη για εικόνες με κείμενο, μεγάλα τεμάχια συμπαγούς χρώματος και απλά σχήματα με ευκρινείς άκρες. Αυτό συμβαίνει επειδή όταν η εικόνα συμπιέζεται, το κείμενο, το χρώμα ή οι γραμμές ενδέχεται να θολώσουν με αποτέλεσμα μια εικόνα που δεν είναι τόσο έντονη όσο θα αποθηκευόταν σε άλλη μορφή.
Εικόνες PNG
Η μορφή PNG αναπτύχθηκε ως αντικατάσταση της μορφής GIF όταν φάνηκε ότι οι εικόνες GIF θα υπόκεινται σε τέλος. Τα γραφικά PNG έχουν καλύτερο ρυθμό συμπίεσης από τις εικόνες GIF, με αποτέλεσμα μικρότερες εικόνες από το ίδιο αρχείο που έχει αποθηκευτεί με ένα GIF. Τα αρχεία PNG προσφέρουν διαφάνεια άλφα, που σημαίνει ότι μπορείτε να έχετε περιοχές των εικόνων σας που είναι είτε πλήρως διαφανείς ή ακόμη και να χρησιμοποιείτε μια σειρά διαφάνειας άλφα. Για παράδειγμα, ένα drop shadow χρησιμοποιεί μια σειρά εφέ διαφάνειας και θα ήταν κατάλληλο για ένα PNG (ή μπορείτε απλώς να μας τερματίσετε χρησιμοποιώντας CSS σκιές αντί αυτού).
Οι εικόνες PNG, όπως τα GIF, δεν είναι κατάλληλες για φωτογραφίες. Είναι πιθανό να αντιμετωπίσετε το ζήτημα της ζώνης που επηρεάζει τις φωτογραφίες που αποθηκεύονται ως αρχεία GIF χρησιμοποιώντας αληθινά χρώματα, αλλά αυτό μπορεί να οδηγήσει σε πολύ μεγάλες εικόνες. Οι εικόνες PNG δεν υποστηρίζονται επίσης καλά από παλαιότερα κινητά τηλέφωνα και κινητά τηλέφωνα.
Εικόνες SVG
Το SVG σημαίνει Scalable Vector Graphic. Σε αντίθεση με τις μορφές που βασίζονται σε ράστερ που βρίσκονται σε JPG, GIF και PNG, αυτά τα αρχεία χρησιμοποιούν διανύσματα για τη δημιουργία πολύ μικρών αρχείων που μπορούν να αποδοθούν σε οποιοδήποτε μέγεθος χωρίς απώλεια ποιότητας αύξησης στο μέγεθος του αρχείου. Δημιουργούνται για εικόνες όπως εικονίδια και ακόμη και λογότυπα.
Προετοιμασία εικόνων για παράδοση στο Διαδίκτυο
Ανεξάρτητα από τη μορφή εικόνας που χρησιμοποιείτε, βεβαιωθείτε ότι είναι όλες οι εικόνες σε αυτόν τον ιστότοπο προετοιμασμένος για παράδοση στο Διαδίκτυο. Οι υπερβολικά μεγάλες εικόνες μπορούν να προκαλέσουν αργή εκτέλεση ενός ιστότοπου και να επηρεάσουν τη συνολική απόδοση. Για την καταπολέμηση αυτού, αυτές οι εικόνες πρέπει να βελτιστοποιηθούν για να βρείτε την ισορροπία μεταξύ υψηλής ποιότητας και χαμηλότερου δυνατού μεγέθους αρχείου σε αυτό το επίπεδο ποιότητας.
Η επιλογή της σωστής μορφής εικόνων είναι μέρος της μάχης, αλλά και το να βεβαιωθείτε ότι έχετε προετοιμάσει αυτά τα αρχεία είναι το επόμενο βήμα σε αυτήν τη σημαντική διαδικασία παράδοσης ιστού.