Saltar al contenido

Πότε να χρησιμοποιήσετε τις μορφές JPG, GIF, PNG και SVG

13 de mayo de 2021

Τα συνηθισμένα παραδείγματα τύπων εικόνας στον ιστό περιλαμβάνουν 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, αυτά τα αρχεία χρησιμοποιούν διανύσματα για τη δημιουργία πολύ μικρών αρχείων που μπορούν να αποδοθούν σε οποιοδήποτε μέγεθος χωρίς απώλεια ποιότητας αύξησης στο μέγεθος του αρχείου. Δημιουργούνται για εικόνες όπως εικονίδια και ακόμη και λογότυπα.

Προετοιμασία εικόνων για παράδοση στο Διαδίκτυο

Ανεξάρτητα από τη μορφή εικόνας που χρησιμοποιείτε, βεβαιωθείτε ότι όλες οι εικόνες σε αυτόν τον ιστότοπο είναι προετοιμασμένες για παράδοση στο Διαδίκτυο. Οι υπερβολικά μεγάλες εικόνες μπορούν να προκαλέσουν αργή εκτέλεση ενός ιστότοπου και να επηρεάσουν τη συνολική απόδοση. Για να αντιμετωπιστεί αυτό, αυτές οι εικόνες πρέπει να βελτιστοποιηθούν για να βρεθεί η ισορροπία μεταξύ υψηλής ποιότητας και χαμηλότερου δυνατού μεγέθους αρχείου σε αυτό το επίπεδο ποιότητας. Η επιλογή της σωστής μορφής εικόνων είναι μέρος της μάχης, αλλά και το να βεβαιωθείτε ότι έχετε προετοιμάσει αυτά τα αρχεία είναι το επόμενο βήμα σε αυτήν τη σημαντική διαδικασία παράδοσης ιστού.