Τι είναι ένα αρχείο PNG. Τι είναι png.

Αρχείο PNG (από τα αγγλικά. Το φορητό γραφικό δικτύου) αναφέρεται σε bitmaps. Η μορφή PNG περιέχει μια συγκεκριμένη παλέτα χρωμάτων που χρησιμοποιείται στο σχήμα. Σαν Γραφική μορφή Πολύ συχνά ισχύουν στο δίκτυο του World Wide Web όταν εισάγετε ιστοσελίδες σε διάφορες εικόνες. Μέσω της χρήσης του αλγορίθμου συμπίεσης αποπληθωρισμού, Εικόνες rasterΈχοντας μια επέκταση αρχείου PNG είναι διαθέσιμη για συμπίεση χωρίς ρητή απώλεια ποιότητας.

Αναπτηγμένος Αυτή τη μορφή Αρχείο για την αντικατάσταση της μορφής GIF, επειδή η τελευταία φορά που απαιτείται από την παρουσία του πληρωμένου λογισμικού. Μεταξύ των ιδιοκτητών των πόρων Web, οι εικόνες PNG είναι διάσημες για τα εξαιρετικά χαρακτηριστικά ενάντια σε φόντο τέτοιων μορφών. Το PNG υποστηρίζει βάθος χρώματος εντός έως και 48 bits. Η κύρια διαφορά μεταξύ του GIF είναι ότι Γραφικό αρχείο. Περιορίζεται σε 8 bit (μόνο 256 χρώματα). Θα πρέπει να είναι γνωστό ότι σε αντίθεση με το GIF, το PNG δεν έχει υποστήριξη για εφέ κινούμενων εικόνων.

Ανοίξτε ένα αρχείο που έχει μια επέκταση PNG μπορεί να είναι στην πραγματικότητα οποιοδήποτε πρόγραμμα προβολής. ΣΕ λειτουργικό σύστημα Τα Windows, ανοίξτε το PNG, είναι δυνατή με απλά διπλό κλικ στο ποντίκι για να δείτε τις εικόνες. Αυτή η μορφή εικόνας ξεκινάει σε οποιαδήποτε προγράμματα περιήγησης ιστού. Εάν ο χρήστης πρέπει να αλλάξει την αποθηκευμένη εικόνα στην έκδοση PNG, αρκεί να χρησιμοποιήσετε τα βοηθητικά προγράμματα επεξεργασίας εικόνας, όπως φωτογραφίες του Adobe Photoshop ή Microsoft Windows, καθώς και το Corel Paintshop ή τα συστήματα ACD.

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

Τα γραφικά υπολογιστών πλημμύρισαν τα πάντα, ακόμη και τις φωτογραφίες που βλέπουμε πιο συχνά στην οθόνη παρακολούθησης, τηλέφωνο ή τηλεόραση παρά σε χαρτί. Αλλά ποιες είναι οι πιο ενδιαφέρουσες - μέθοδοι αποθήκευσης αυτών των εικόνων είναι πολύ διαφορετικές. Υπάρχουν δεκάδες μορφές αποθήκευσης εικόνων, το καθένα με τα πλεονεκτήματα και τα μειονεκτήματά τους, αλλά εκείνα που δίνουν την πιο αποτελεσματική και δημοφιλή Η καλύτερη ποιότητα Και επιπλέον, το αρχείο αποδεικνύεται ένα μικρό όγκο. Μία από αυτές τις μορφές είναι η μορφή PNG. Τι είναι αυτή η μορφή και από πού προέρχεται;

Σύντομα για τον ίδιο λόγο για την εμφάνιση αυτής της μορφής αποθήκευσης εικόνας ...

Στις 4 Ιανουαρίου 1995, εκφράστηκε η ιδέα της δημιουργίας Δωρεάν μορφή Αντί των αμειβόμενων GIF, και ήδη τον Δεκέμβριο του ίδιου έτους νέα μορφή Το PNG ήταν έτοιμο και προτάθηκε για εξέταση. Η μορφή GIF εκείνη τη στιγμή επέτρεψε να λάβει πολύ μικρά αρχεία που ήταν βολικά για χρήση σε ιστότοπους. Αλλά ο πρώην ελεύθερος gif απροσδόκητα έγινε πληρωμένος - ο ιδιοκτήτης του διπλώματος ευρεσιτεχνίας γι 'αυτόν, η εταιρεία "Unisys Corporation" αφαιρέθηκε για να πάρει χρήματα για κάθε εικόνα που χρησιμοποιεί αυτή η μορφή. Αυτός ήταν ο λόγος για την ανάπτυξη μιας ελεύθερης μορφής, η οποία ονομάστηκε PNG - συντομογραφία από την αγγλική έκφραση "φορητά γραφικά δικτύου". Όπως φαίνεται από το όνομα, προορίζεται για χρήση στο δίκτυο, λόγω των αρχείων ενός μικρού όγκου, το οποίο σας επιτρέπει να κάνετε λήψη γρήγορα σελίδες με γραφικά.

Ποια πλεονεκτήματα και τα μειονεκτήματα έχουν μορφή PNG σε σύγκριση με άλλους, ειδικά με τον κύριο ανταγωνιστή του, μορφή GIF; Υπάρχουν πολλές διαφορές, αλλά για τα πάντα για να ...

ΣΕ Μορφή png Ένας αλγόριθμος συμπίεσης που ονομάζεται Deflate, ο οποίος από μόνο του διανέμεται ελεύθερα, δηλαδή, απολύτως δωρεάν. Αυτός ο αλγόριθμος λειτουργεί στην αρχή ενός συμβατικού προγράμματος, συμπιέζοντας αποτελεσματικά πληροφορίες σχετικά με το χρωματικό σχήμα κάθε εικονοστοιχείου και είναι ότι σας επιτρέπει να πάρετε ένα μάλλον μικρό αρχείο. Επιπλέον, σε αυτή τη μορφή, μπορείτε να εξοικονομήσετε εικόνες πλήρους έγχρωμης χρώματος, δηλαδή εκείνες στις οποίες χρησιμοποιούνται έως και 48 bits για κάθε εικονοστοιχείο - και αυτό είναι ένα πολύ μεγάλο χρωματικό σχήμα, ακόμα περισσότερο από αντίληψη του ανθρώπινου ματιού. Η μορφή GIF σας επιτρέπει επίσης να χρησιμοποιείτε μόνο 256 χρώματα και αποχρώσεις - αρκετά για τις πιο απλές φωτογραφίες, αλλά πολύ λίγα για φωτογραφική ποιότητα.

Σε μορφές PNG, GIF και TIFF, χρησιμοποιείται το λεγόμενο άλφα κανάλι. Αυτό σημαίνει ότι μπορείτε να κάνετε ορισμένα τμήματα της εικόνας διαφανή. Ταυτόχρονα, σε μορφή GIF, αυτό γίνεται πολύ απλό - μόνο ένα από τα χρώματα στην επιλογή έχει εκχωρηθεί διαφανές και κατά την προβολή της εικόνας απλά δεν είναι ορατό - μπορείτε να κάνετε ένα διαφανές φόντο. Η μορφή TIFF είναι πιο σκέψη από αυτή την άποψη, αλλά είναι πολύ σπάνια χρησιμοποιείται - λαμβάνεται πολύ μεγάλο μέγεθος αρχείου. Αλλά στη μορφή PNG άλφα - το κανάλι γίνεται με το μυαλό - δεν υπάρχει διαφάνεια εκεί, αλλά και 256 διαβαθμίσεις φωτεινότητας. Δηλαδή, μπορείτε εύκολα να κάνετε τη μετάβαση από ένα εντελώς διαφανές υπόβαθρο σε μια εικόνα πλήρους χρώματος και να πάρετε όμορφα αποτελέσματα. Ιδιαίτερα όμορφη κοιτάζει σε ιστότοπους. Εάν η διαφάνεια δεν είναι απαραίτητη, μπορείτε απλά να μην το χρησιμοποιήσετε όταν αποθηκεύετε την εικόνα και λάβετε το αρχείο για μικρότερο όγκο.

Δυστυχώς, η μορφή PNG έχει ένα μειονέκτημα, όχι πολύ σημαντικό - δεν σας επιτρέπει να σώσετε την ακολουθία των εικόνων, την αποκαλούμενη κινούμενη εικόνα. Gif σας επιτρέπει να το κάνετε. Συνέβη επειδή κατά τη στιγμή της δημιουργίας μιας νέας μορφής, η κινούμενη εικόνα δεν χρησιμοποιήθηκε σχεδόν οπουδήποτε και δεν υπήρχε ιδιαίτερη ανάγκη για τους πολύχρωμους χώρους το 1995, οπότε η κινούμενη εικόνα αποκλείστηκε από το έργο ως περιττό. Σήμερα, η θέση κινούμενων σχεδίων που καταλαμβάνεται η τεχνολογία Flash, η οποία καμία συνηθισμένη γραφική μορφή είναι ανταγωνιστής.

Εάν η μορφή PNG είναι τόσο καλή, τότε γιατί δεν έγινε υπερπροσωπική; Η απάντηση είναι απλή - η ασθενώς υποστηρίζει τους προγραμματιστές άλλων προγραμμάτων. Ειδικά επηρέασε το γεγονός ότι οι περισσότεροι χρήστες του Διαδικτύου χρησιμοποίησαν το πρόγραμμα περιήγησης Internet Explorer.Και δεν κατάλαβα τις εικόνες στη μορφή PNG, αν και οι προγραμματιστές άλλων περιηγητή ενσωμάτωσαν αμέσως την υποστήριξή τους σε αυτά. Η κατάσταση διορθώθηκε μόνο όταν εμφανίστηκε ο Internet Explorer 7, αλλά ο χρόνος "προώθησης" έχει περάσει από καιρό.

Σήμερα, η μορφή PNG περιλαμβάνεται στις τρεις πιο δημοφιλείς και συνιστώμενες μορφές σε τεχνολογίες ιστού, μαζί με μορφές GIF και JPG. Και, εκτός εάν η έλλειψη κινούμενων σχεδίων είναι μειονεκτική θέση, κερδίζει όλες τις παραμέτρους σε σύγκριση με άλλους. Μια εικόνα υψηλής ποιότητας χωρίς απώλεια ποιότητας, ένα μικρό αρχείο, ομαλή μεταβάσεις σε ένα διαφανές υπόβαθρο, ακόμα και χωρίς παραβίαση των πνευματικών δικαιωμάτων κάποιου - τι άλλο χρειάζεται για την ευτυχία στον προγραμματιστή του ιστότοπου;

Επιπλέον, η δωρεάν μορφή PNG προσφέρει διάφορα πρακτικά πλεονεκτήματα έναντι του σχεδιαστή Web GIF:
- καλύτερη συμπίεση: για τις περισσότερες εικόνες, το PNG φτάνει σε ένα μικρότερο μέγεθος αρχείου από το gif
— Μεγάλο βάθος χρώματος: Το PNG προσφέρει Truecolor μέχρι 48 bits όταν έχουμε μόνο 256 παλέτα χρωμάτων σε gif
— Διαφάνεια άλφα κανάλι: Όταν η GIF προσφέρει μόνο δυαδική διαφάνεια, η PNG επιτρέπει σχεδόν απεριόριστα αποτελέσματα διαφάνειας, προσφέροντας τη διαφάνεια του καναλιού άλφα

Είναι σκόπιμο να παρατηρήσετε ότι το PNG δεν επιτρέπει να κάνει ένα κινούμενο σχέδιο πώς κάνει gif. Αλλά υπάρχει ένα πρότυπο (MNG), το οποίο επιτρέπει, αλλά δεν υποστηρίζεται τόσο ευρέως από τα προγράμματα περιήγησης ιστού και τους γραφικούς συντάκτες.

Λοιπόν, γιατί το gif είναι ακόμα τόσο δημοφιλές;

Είστε πιθανώς έκπληκτος γιατί το PNG δεν χρησιμοποιείται τόσο ευρέως στη μορφή Web, αν είναι τόσο καλό πώς διαφημίζεται. Η απάντηση, ως επί το πλείστον, είναι η λανθασμένη ιδέα της μορφής και η υποστήριξή του στα προγράμματα περιήγησης.

Λόγω του γεγονότος ότι ο Internet Explorer 6 και οι προηγούμενες εκδόσεις δεν υποστηρίζουν το πλήρες φάσμα των δυνατοτήτων PNG (συμπεριλαμβανομένης της διαφάνειας του Alpha Channel) παραμένουν να πιστεύουν (αν και είναι λάθος) ότι ο Internet Explorer δεν υποστηρίζει το PNG καθόλου ή τουλάχιστον δεν το κάνει Υποστήριξη διαφάνειας. Στην πραγματικότητα, ο Internet Explorer 5 και 6 υποστηρίζει αρκετές προδιαγραφές PNG, καθιστώντας το λειτουργικά ισοδύναμο (ή περισσότερες) ανέγγιχτες εικόνες gif. Όλα τα άλλα προγράμματα περιήγησης αναφοράς, συμπεριλαμβανομένου του Firefox, Netscape 6 και άνω, Mozilla, Opera 6 και άνω, σαφάρι και το Camino υποστηρίζουν πλήρως τη διαφάνεια PNG.

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

Η διαφάνεια είναι το βασικό χαρακτηριστικό των GIF και PNG, η οποία είναι συχνά η αιτία της επιλογής της χρησιμοποιούμενης μορφής σχεδιασμού ιστοσελίδων. Αν και η PNG προσφέρει πιο ολοκληρωμένη υποστήριξη διαφάνειας, οι σχεδιαστές ιστοσελίδων συχνά πρέπει να δημιουργήσουν μια έκδοση GIF των εικόνων για την τοποθέτηση σε παλιά προγράμματα περιήγησης. Χρησιμοποιώντας το CSS είναι δυνατό (και εν μέρει κείμενο), μέσω της αποστολής εικόνων gif για παλιά προγράμματα περιήγησης και υψηλής ποιότητας PNG σε προγράμματα περιήγησης που τους καταλαβαίνουν. Αλλά αυτή είναι μια διπλή εργασία για τον σχεδιαστή ιστοσελίδων και ως αποτέλεσμα, οι άνθρωποι πάνε σε μικρότερη αντίσταση και συνεχίζουν να χρησιμοποιούν εικόνες gif.

Έτσι, αναθεωρήσαμε πολλούς λόγους για τους οποίους το GIF είναι ακόμα τόσο δημοφιλές, αλλά οι περισσότεροι από αυτούς βασίζονται σε παρεξηγήσεις έννοιες ή χρησιμοποιώντας το συνηθισμένο σενάριο εργασίας. Ένοπλες με μερικές βασικές γνώσεις στην εργασία με PNG και πώς μπορεί να χρησιμοποιηθεί με ασφάλεια στα προγράμματα περιήγησης, δίνεται η ευκαιρία να επωφεληθείτε από όλα τα πλεονεκτήματα που προσφέρει.

Τι γίνεται με το jpeg;

Το JPEG είναι μια άλλη πανταχολογημένη μορφή ιστού και στις περισσότερες περιπτώσεις, όπως φωτογραφίες (ή άλλες μαζί τους), είναι ακόμα καλύτερο από το PNG ή το gif. Το PNG δεν έχει σχεδιαστεί για να ανταγωνίζεται με το JPEG. Η συμπίεση JPEG κάνει σημαντικά μικρότερα αρχεία από το PNG όταν εργάζεστε με φωτογραφίες. Από την άλλη πλευρά, η PNG παράγει μικρότερα αρχεία όταν εσωτερικές εικόνες παρουσιάζουν κείμενο, γραμμές τέχνης, λογότυπο, "ομαλά" χρώματα κλπ.

Μερικά υπέροχα παραδείγματα χρήσης του Modest PNG

Τώρα ας δούμε πώς να χρησιμοποιήσετε png στο σχεδιασμό ιστοσελίδων. Συγκεντρώσαμε όλα τα αρχεία για κάθε παράδειγμα σε ένα ξεχωριστό φάκελο που διατίθεται στο (HandyBlogger: το αρχικό μενού εκεί, αλλά δεν βρήκα την πηγή).

Βαθμίδα

Τα τελευταία χρόνια, η κλίση είναι μια ομαλή μετάβαση μεταξύ δύο ή περισσοτέρων χρωμάτων, έχει γίνει οι καλύτεροι σχεδιαστές ιστοσελίδων. Οι εξελιγμένες, μόλις διακριτές κλίσεις γεμίσματος, οι οποίες δεν σπεύδουν στα μάτια δημιουργούν ένα αίσθημα βάθους και υφή.
Μερικές φορές το GIF είναι η καλύτερη επιλογή για την κλίση. Εάν η κλίση είναι μια απλή μετάβαση δύο χρωμάτων, το GIF λειτουργεί σε αυτό τέλεια. Ωστόσο, οι περιορισμοί του GIF είναι μόνο 256 χρώματα συχνά δημιουργούν μια αξιοσημείωτη και παραπλανητική "απογύμνωση" μεταξύ των πιο περίπλοκων μεταβάσεων κλίσης. JPEG, από την άλλη πλευρά, μπορεί να εκπέμπει μάλλον πικάντικες κλίσεις, αλλά συχνά κοστίζει περισσότερο αρχείο. Και ενώ οι κλίσεις JPEG είναι συνήθως αρκετά καλές, πρέπει να θυμάστε ότι το JPEG χρησιμοποιεί μια συμπίεση απώλειας που σημαίνει ότι η προκύπτουσα εικόνα δεν θα φτάσει ποτέ στην ποιότητα της μη συμπιεσμένης εικόνας.

Το τυπικό στυλ της κλίσης του φόντου χρησιμοποιείται για κουμπιά, μπλοκ ή ακριβώς κάπου αλλού. Μπορεί να μοιάζει με το σχήμα 5-1. Δεξιόστροφα, από την επάνω αριστερή γωνία, βλέπουμε την αρχική (μη συμπιεσμένη) εικόνα, έκδοση GIF, έκδοση PNG και JPEG. Βλέπετε ότι το PNG ως αποτέλεσμα έχει το μικρότερο μέγεθος (515 bytes). Είναι τέσσερις φορές λιγότερο από Gif εικόνα. JPEG Λίγο περισσότερο από PNG σε 637 bytes και είναι επίσης χαμηλότερη από την ποιότητα λόγω της συμπίεσης με τις απώλειες (η αλήθεια είναι η πιθανότητα ενός ανθρώπινου ματιού να καθορίσει τη διαφορά στην ποιότητα αυτού του απλού προτύπου).

Εικόνα 5-1
Photoshopa - Αποθήκευση για web, Εμφάνιση διαφορών μεγέθους αρχείου για την ίδια εικόνα στο Διάφορες μορφές

Μια εικόνα που θα λειτουργήσει σε οποιοδήποτε υπόβαθρο

Μερικές φορές είναι απαραίτητο να δημιουργηθεί μια εικόνα που λειτουργεί εξίσου σε διαφορετικά υποστρώματα. Ορισμένα κοινά παραδείγματα είναι το λογότυπο και τα εικονίδια. Σε τέτοιες καταστάσεις, τα αρχεία GIF παραδοσιακά κυριαρχούν, αλλά υπάρχουν διάφοροι λόγοι για τους οποίους το PNG μπορεί να είναι μια καλύτερη επιλογή σε αυτή την κατάσταση. Το PNG, κατά κανόνα, κερδίζει στο μέγεθος ενός αρχείου για λογότυπα ή οποιαδήποτε άλλη απλή "τέχνη". Επιπλέον, η συγγενή διαφάνεια PNG δημιουργεί απλή δημιουργία μεμονωμένων αρχείων που λειτουργούν πάνω από οποιοδήποτε υπόβαθρο. Το PNG προσφέρει δυαδική διαφάνεια όπως στο GIF, αλλά παρέχει επίσης μια πολύ πιο επιθυμητή έκδοση με ένα κανάλι άλφα, στο οποίο τα εικονοστοιχεία μπορούν να είναι εν μέρει διαφανή, αντί να συμπεριλαμβάνονται απλά ή να απενεργοποιηθούν. Η χρήση του τελευταίου αυξάνει το μέγεθος του αρχείου, μερικές φορές ακόμη περισσότερο από το gif με δυαδική διαφάνεια, αλλά σας επιτρέπει να κάνετε εξομάλυνση στα σύνορα της εικόνας σας και να το κάνετε πιο κομψό την τοποθέτησή της στην κορυφή του φόντου.

Ωστόσο, επεξεργάστηκα την ιδέα τους χρησιμοποιώντας μια λευκή εικόνα με σύμβολα stencil. Χρησιμοποίησαν ένα λευκό σύμβολο Διάφανο φόντοη οποία, κατά κανόνα, θα μπορούσε να είναι αρκετά αποτελεσματική. Σε αυτή την περίπτωση, το χρώμα φόντου CSS θα είχε εκδηλωθεί σε μια τετράγωνη ή ορθογώνια περιοχή γύρω από το σύμβολο, αντί του ίδιου του συμβόλου.

Και ο Dan και η PJ χρησιμοποιούσε διαφανή gif αντί του PNG. Καλύπτει εντελώς τις ανάγκες τους και κάτω από το στυλ των εικόνων που έπρεπε να δημιουργήσουν εικόνες pixel. Χρησιμοποιώντας PNG, μπορείτε να λάβετε μια παρόμοια τεχνική, αλλά με κάποια υπεροχή της αντίστασης και μερικής διαφάνειας για χρήση σε πιο λεπτομερή εικονίδια.

Λοιπόν, αλλά σε ποια προγράμματα περιήγησης δουλεύει;

Ξέρω τι νομίζετε: Όλη αυτή η διαφάνεια PNG φαίνεται καλό, αλλά είναι πρακτικό;

Καλά νέα είναι ότι όλα τα σύγχρονα προγράμματα περιήγησης υποστηρίζουν πλήρως Εικόνα png, συμπεριλαμβανομένης της διαφάνειας του Alpha Channel, τα πλεονεκτήματα των οποίων έδειξαν στα παραδείγματα. Το Safari (όλες οι εκδόσεις), ο Firefox (όλες οι εκδόσεις), η όπερα (έκδοση 6 και άνω), το Netscape (έκδοση 6 και άνω) και το Mozilla (όλες οι εκδόσεις) θα είναι με ένα κτύπημα για να λειτουργήσει όλα αυτά που θα τους ρωτήσω. Αλλά υπάρχει ένα κακά νέα - το μόνο πρόγραμμα περιήγησης που δεν έχω ακόμη αναφέρει και ποιος έχει τους περισσότερους χρήστες: Internet Explorer.

Ο Internet Explorer 6 και παρακάτω δεν υποστηρίζει τη διαφάνεια του Alpha Channel ενσωματωμένη σε μορφή PNG. Δεδομένου ότι οι πιο πολυάριθμοι surfers ιστού έχουν γίνει (ή όχι ένα πρόγραμμα επιλογής), αυτή η τρύπα που χτυπάει το Web Designers μακριά από PNG. Αλλά, με τον Internet Explorer 7, λάβαμε πλήρη υποστήριξη για τη άλφα διαφάνεια του PNG σε όλα τα σημαντικά προγράμματα περιήγησης. Τι είναι ο επόμενος, υπάρχουν τρόποι να συνεργαστείτε με το Alpha διαφάνεια PNG στον Internet Explorer 6 και παρακάτω; Έτσι, αν θέλετε να χρησιμοποιήσετε αυτό το αποτέλεσμα, τίποτα δεν θα σας σταματήσει. Ο Internet Explorer 6 και οι πρώιμες εκδόσεις του απαιτούν περισσότερο από την απαραίτητη προσοχή, αλλά είναι σίγουρα δυνατή.

Hack για τον Internet Explorer: Alphaimageloader

Ο Internet Explorer έχει διάφορα δικά του φίλτρα. Χρησιμοποιούνται στο CSS, αλλά δεν αποτελούν κανένα μέρος της επίσημης προδιαγραφών CSS. Με άλλα λόγια, δεν είναι τυποποιημένα στον ιστό. Δυστυχώς, ο Internet Explorer 6 και παρακάτω δεν υποστηρίζουν πλήρως τη μορφή PNG (η οποία συνιστάται από το W3C), η Microsoft διαθέτει ένα φίλτρο που εξαλείφει αυτή την ανεπάρκεια: Alphaimageloader.

Ένα από τα κύρια καθήκοντα που αντιμετωπίζουν οι νέοι χώροι που αντιμετωπίζουν οι καλύτεροι Γρήγορο κατέβασμα Σελίδες Browsers. Και επειδή ο μινιμαλιστικός σχεδιασμός δεν είναι σαν όχι σε όλους τους χρήστες, πρέπει να αναζητήσετε έναν συμβιβασμό μεταξύ του όμορφου σχεδίου με κομψά γραφικά στοιχεία και την ταχύτητα του Web Resource. Προηγουμένως, προκειμένου να μειωθεί το βάρος των εικόνων, οι προγραμματιστές τοποθεσίας που χρησιμοποιούνται είτε GIF είτε JPG. Τώρα, όλο και πιο συχνά, οι Vestors χρησιμοποιούν εικόνες σε μορφή PNG. Ας προσπαθήσουμε να καταλάβουμε γιατί συμβαίνει.

Γιατί ήταν η μορφή PNG

Συντομογραφία, που είναι το όνομα αυτού του τύπου γραφικών, σχηματίζεται από τα πρώτα γράμματα των ακόλουθων αγγλικών λέξεων: Φορητά γραφικά δικτύου, τα οποία μπορούν να μεταφραστούν ως "κινητά γραφικά για χρήση στο δίκτυο". Η μορφή PNG αναστέλλει ειδικά προκειμένου να εξαλείψει τα ελλείμματα συμπίεσης χρησιμοποιώντας έναν απλούστερο αλγόριθμο GIF που άρχισε αργά να ξεκίνησε αργά. Επιπλέον, μπορεί να χρησιμοποιηθεί σε κάποιο βαθμό για να αντικαταστήσει ένα πολύ δυσκίνητο tiff που χρησιμοποιείται κυρίως για την επεξεργασία.

Τι συμβαίνει μια μορφή PNG

Μέχρι σήμερα, χρησιμοποιούνται ευρέως δύο εκδόσεις αυτού του αλγορίθμου. Στην πρώτη περίπτωση, 8-bit και στο δεύτερο είναι 24-bit. Η φωτογραφία σε μορφή PNG-8, σε σύγκριση με την έκδοση GIF, διακρίνεται από μια ελαφρώς καλύτερη και έλλειψη δημιουργίας κινούμενων σχεδίων. Παρά το γεγονός ότι μια τέτοια εικόνα μπορεί να περιέχει μέγιστο 256 χρώματα, αυτός ο αλγόριθμος χρησιμοποιείται ευρέως για τη δημιουργία γραφικού κειμένου, λογότυπων, απεικονίσεων με καθαρές άκρες και εικόνες με διαφάνεια με κλίση. Σε περιπτώσεις όπου αυτό δεν είναι αρκετό, οι προγραμματιστές χρησιμοποιούν μια μορφή PNG 24 bit που έχει μάζα πρόσθετων πλεονεκτημάτων, όπως:

• Βελτιωμένος αλγόριθμος συμπίεσης, ακυρώνει οποιαδήποτε απώλεια ποιότητας.
• Η δυνατότητα χρήσης της διαφάνειας άλφα παρέχει 256 διαφορετικά επίπεδα διαφάνειας.
• Η παρουσία της διόρθωσης γάμμα που σας επιτρέπει να ρυθμίζετε αυτόματα τη φωτεινότητα του στιγμιότυπου κατά την αναπαραγωγή σε διαφορετικά προγράμματα.
• Η ικανότητα να χρησιμοποιεί περίπου 16,7 εκατομμύρια έγχρωμες αποχρώσεις.

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

Τάση ανάπτυξης

Παρά το γεγονός ότι η εξάπλωση της μορφής PNG εξακολουθεί να συγκρατείται από παλιά προγράμματα περιήγησης, καθώς και ανεπαρκής και ελλιπής υποστήριξη για τις δυνατότητες αυτού του αλγορίθμου σε νέες εκδόσεις, για το Web Graphics PNG είναι πολύ ελπιδοφόρο. Σε σύγκριση με το GIF, διαθέτει τρία βασικά πλεονεκτήματα: κανάλια άλφα, διόρθωση γάμμα και δισδιάστατη αλληλοσύνδεση (μέθοδος προοδευτικών εικόνων εικόνων). Και σε σύγκριση με το JPEG, δεν έχει καμία απώλεια ποιότητας. Σημειώστε ότι η μορφή PNG εφευρέθηκε στις 4 Ιανουαρίου 1995. Από εκείνη την εποχή, έχουν περάσει 18 χρόνια, και άρχισε να οδηγεί σε χρήση σε ιστοσελίδες, πιέζοντας gif στη δεύτερη θέση.

Το πιο προσαρμοσμένο (για παράδειγμα το MS Paint) το ενέκρινε σήμερα ως πρότυπο για την αποθήκευση των προεπιλεγμένων αρχείων. Πιθανώς, αν δεν ήταν για την κινούμενη εικόνα και τη ματιά των παλιών εκδόσεων του Internet Explorer, το GIF θα έδινε τρόπο στον ανταγωνιστή του ακόμα νωρίτερα.

Η μορφή PNG είναι η πιο "κατώτερη" μεταξύ των δημοφιλών μορφών γραφικών ιστού. Επομένως, δεν είναι ακόμη αρκετά διαδεδομένο. Ωστόσο, οι δυνατότητές του δείχνουν ότι στο μέλλον, οι κατασκευαστές λογισμικού και οι προγραμματιστές ιστοσελίδων θα δώσουν μεγαλύτερη προσοχή σε αυτόν.

Η συντομογραφία PNE αποκρυπτογραφείται ως φορητά γραφικά δικτύου - μεταφορές γραφικών δικτύου.

Όσον αφορά τα χαρακτηριστικά του, αυτή η μορφή είναι παρόμοια με τα GIF, η οποία δεν προκαλεί έκπληξη - τελικά, η PNG αναπτύχθηκε ως εναλλακτική λύση. Το PNG υποστηρίζει τις ακόλουθες λειτουργίες:

• Αποθήκευση εικόνων χρώματος με βάθος χρώματος σε 48 bits (σε gif - μέχρι 8 bits).
• Αποθήκευση μονόχρωμων εικόνων (μέχρι 16 bits ανά εικονοστοιχείο).
• Υποστήριξη μεταβλητής διαφάνειας - μέχρι 256 διαβαθμίσεις (σε μορφή GIF κάθε εικονοστοιχείο ή διαφανές ή όχι).
• Συμπίεση εικόνας χωρίς απώλεια.
• Χρησιμοποιώντας φιλτραρίσματος για βελτιστοποίηση της συμπίεσης (σε GIF απουσιάζει).
• Την ικανότητα να αλληλοσυνδέονται εικόνες στην οθόνη.
• Εσωτερικά εργαλεία για την ανίχνευση σφαλμάτων μεταφοράς δεδομένων (σε GIF λείπουν).
• Τα floworographics (gifs λείπουν).
• Εξοικονόμηση ενός μειωμένου αντιγράφου εικόνας.

Σε αντίθεση με το GIF, η μορφή PNG διανέμεται ελεύθερα για χρήση. Αυτό σημαίνει ότι η υποστήριξή του στο Λογισμικό Μπορείτε να εισάγετε χωρίς να πληρώσετε άδειες. Για να συμπιέσετε την εικόνα σε μορφή PNG, ο αλγόριθμος LZ78 είναι πρόδρομος LZW που χρησιμοποιείται σε μορφή GIF. Τα μειονεκτήματα του PNG σε σύγκριση με το GIF μπορούν να αποδοθούν στην ανικανότητα να αποθηκεύουν σε ένα αρχείο πολλαπλών εικόνων και τη δημιουργία κινούμενων σχεδίων.

Το αρχείο που είναι αποθηκευμένο σε μορφή PNG έχει δομή μπλοκ, το καθιστά παρόμοιο με τη μορφή TIFF. Οποιοδήποτε πρόγραμμα που υποστηρίζει την τυποποιημένη μορφή PNG θα πρέπει να λειτουργεί με τέσσερις τύπους μπλοκ:

• Η μονάδα κεφαλίδας περιέχει τις βασικές παραμέτρους της εικόνας. Το αρχείο δεν μπορεί να έχει περισσότερους από έναν τίτλους.
• Το μπλοκ παλέτας ορίζει την παλέτα χρωμάτων που χρησιμοποιούνται στην εικόνα. Αυτή η μονάδα χρησιμοποιείται μόνο εάν η παλέτα είναι απαραίτητη (η εικόνα αποθηκεύεται στον τρόπο λειτουργίας των ευρετηριασμένων χρωμάτων).
• Το μπλοκ εικόνας περιέχει δεδομένα εικόνας.
• Η εικόνα της εικόνας closeup κλείνει το αρχείο PNG.

Εκτός από αυτά τα μπλοκ, το αρχείο ενδέχεται να περιέχει πρόσθετα δεδομένα, όπως πληροφορίες σχετικά με τον συγγραφέα, σχόλια κειμένου (συμπεριλαμβανομένων των συμπιεσμένων), πληροφορίες σχετικά με την αντίθεση και τη διόρθωση γάμμα, πληροφορίες σχετικά με τη διαφάνεια (Alpha Channel), κλπ. Με την εισαγωγή νέων Ευκαιρίες, μπορείτε να προσθέσετε εύκολο στο αρχείο Νέο μπλοκ. Ταυτόχρονα, τα παλιά προγράμματα απλά "δεν θα προκαλούν προσοχή". Αυτό παρέχει τη δυνατότητα εύκολης επέκτασης της μορφής.

• Η ίδια η εικόνα μπορεί να αποθηκευτεί σε διαφορετικές λειτουργίες. Για παράδειγμα, Adobe Photoshop. Υποστηρίζει τρόπους RGB (16 εκατομμύρια χρώματα), αποχρώσεις γκρι (256 βαθμίδες) και ευρετηριασμένα χρώματα (256 χρώματα).
• Η διαφάνεια της εικόνας αποθηκεύεται ως κανάλι άλφα, το οποίο σας επιτρέπει να εμφανίζετε έως και 256 διαβαθμίσεις διαφάνειας. Αυτό σας επιτρέπει να εφαρμόσετε μια ομαλή μετάβαση από την εικόνα στο παρασκήνιο και να αποφύγετε την εμφάνιση "haloe" στα σύνορα διαφάνειας. Στο ΣΧ. 2.9 Ένα παράδειγμα μιας τέτοιας επικάλυψης δίνεται. Το αριστερό είναι η αρχική εικόνα, στο κέντρο - το φόντο, σωστά - το αποτέλεσμα.

Σύκο. 2.9.Το αποτέλεσμα της επιβολής εικόνων με μια ομαλή αλλαγή διαφάνειας στο παρασκήνιο

Στο ΣΧ. 2.10 δείχνει το αποτέλεσμα της επικάλυψης στην ίδια εικόνα που αποθηκεύεται σε μορφή GIF.

Σύκο. 2.10.Επιβάλλοντας στο φόντο των εικόνων με δύο τιμές διαφάνειας (ή όχι, ή όχι)

ΣΗΜΕΙΩΣΗ. Στα προγράμματα περιήγησης, η εμφάνιση της ομαλής αλλαγής διαφάνειας δεν εφαρμόζεται ακόμη.

Κατά την αποθήκευση εικόνων σε μορφή PNG, οι ενδιάμεσες εικόνες και διάφορα φίλτρα μπορούν να χρησιμοποιηθούν για τη βελτιστοποίηση της συμπίεσης. Η εικόνα αλληλοσύνδεσης δεν εμφανίζεται η γραμμή ανά γραμμή (όπως κατά την ανάγνωση της μορφής GIF) και τα ορθογώνια μπλοκ (πρώτα 8x8 μπλοκ, κατόπιν 4x8, 4x4, 2x4, 2x2, 1x2). Είναι ένας τέτοιος αλγόριθμος προς τιμήν του εφευρέτη του όνομα του Αδάμ; Δυστυχώς, δεν χειρίζονται σωστά όλα τα προγράμματα περιήγησης τις δυνατότητες αυτής της μορφής. Στο ΣΧ. 2.11 Εμφανίζεται πώς εμφανίζονται τα αρχεία PNG από το πρόγραμμα περιήγησης Internet Explorer.

Τα φίλτρα σας επιτρέπουν να προετοιμάσετε δεδομένα (βελτιστοποιήστε τα) και έτσι αυξήστε τον βαθμό συμπίεσης. Η διήθηση εφαρμόζεται στα bytes των στοιχείων χρώματος της γραμμής pixels. Σε κάθε γραμμή μπορείτε να εφαρμόσετε τον αλγόριθμο ή να μην το χρησιμοποιήσετε καθόλου. Υπάρχουν πολλές ποικιλίες φίλτρων:

Σύκο. 2.11.Εμφανίζοντας μια σελίδα με εικόνες PNG στη διαδικασία εκκίνησης

• Το sub ορίζει τη διαφορά μεταξύ της τιμής byte για το τρέχον εικονοστοιχείο και μια παρόμοια τιμή για το προηγούμενο εικονοστοιχείο.
• Up καθορίζει τη διαφορά μεταξύ της τιμής byte για το τρέχον εικονοστοιχείο και την ίδια τιμή για το προηγούμενο εικονοστοιχείο.
• Μέσος όρος - η τιμή για το τρέχον εικονοστοιχείο προβλέπεται με βάση τη μέση τιμή που λαμβάνεται για τα εικονοστοιχεία που βρίσκονται στα αριστερά και πάνω από το ρεύμα.
• PAETH - Η τιμή προβλέπεται με βάση την τιμή της γραμμικής λειτουργίας που λαμβάνεται από τις τιμές του αριστερού, του άνω και του αριστερού άνω εικονοστοιχείου.

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

Εκτός από τους διαφορετικούς αλγόριθμους φιλτραρίσματος, τα ενσωματωμένα εργαλεία διόρθωσης χρώματος μπορούν να εφαρμοστούν στην εικόνα. Για PNG, αυτός είναι ένας δείκτης διόρθωσης γάμμα (σας επιτρέπει να προσαρμόσετε τα χρώματα ανάλογα με τη φωτεινότητα της οθόνης), πληροφορίες σχετικά με την αντίθεση, καθώς και πληροφορίες σχετικά με τα κύρια χρώματα και το "λευκό σημείο". Τα κύρια χρώματα και το λευκό σημείο δίνονται από τις συντεταγμένες στον κανονικό χώρο χρώματος. Όλες αυτές οι παράμετροι σας επιτρέπουν να βελτιώσετε την ποιότητα της εικόνας που αναπαράγεται στον υπολογιστή του χρήστη.

Εξετάσαμε τα χαρακτηριστικά της μορφής PNG. Προκειμένου να γίνει μια πλήρης εικόνα του πεδίου εφαρμογής του, θα δοκιμάσουμε. Στο ΣΧ. 2.12 Υπάρχουν τρεις δοκιμαστικές εικόνες. Εικόνα 2.13 και αποτελεί παράδειγμα ενός σχεδίου που αποτελείται από διαυγείς γραμμές (κυκλώματα ή σχέδιο). Σχήμα 2.13, Β - Μια φωτογραφία που περιέχει ένα μεγάλο οικόπεδο με ομαλή αλλαγή χρώματος (Sky). Εικόνα 2.13, in - Φωτογραφία με μεγάλο αριθμό μικρών λεπτομερειών. Διαστάσεις Αρχεία προέλευσης σε Μορφή tiff: από 127 έως 129 KB.

αλλά
ΣΙ.	σε

Σύκο. 2.12.Δοκιμαστικές εικόνες για τη σύγκριση δυνατοτήτων GIF, JPEG και PNG

Για να συγκρίνετε τις δυνατότητες διαφόρων μορφών, αποθηκεύστε όλες αυτές τις εικόνες στο αρχεία gif., PNG και JPEG. Στην περίπτωση αυτή χρησιμοποιήθηκαν Μορφές gif και PNG σε φυσιολογική και αλληλένδετη λειτουργία, και σε εικόνες μορφής JPEG που είναι αποθηκευμένες με ένδειξη ποιότητας (στην κλίμακα Adobe Photoshop), ίσες με 7. ταυτόχρονα, παρατηρήθηκαν μικροί θόρυβοι σε όλες τις εικόνες (ειδικά στα όρια των αντικειμένων). Συγκρίνετε τα μεγέθη των ληφθέντων αρχείων.

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

Αυτός ο πίνακας σάς επιτρέπει να κρίνετε το βέλτιστο πεδίο χρήσης καθενός από τις μορφές. Όπως μπορεί να δει, οι μορφές GIF και PNG δίνουν ρητά κέρδη ενώ διατηρούν σχέδια με μικρό αριθμό χρωμάτων και μεγάλες μονοφωνικές περιοχές (κυκλώματα, διαγράμματα). Και gif παρέχει μια ελαφρώς καλύτερη συμπίεση. Δεδομένου ότι οι αλγόριθμοι συμπίεσης που χρησιμοποιούνται σε αυτές τις μορφές δεν παρεμβαίνουν στην εικόνα, δεν μπορείτε να φοβάστε ότι οι μικρές λεπτομέρειες του σχήματος θα χαθούν ή θα παραμορφωθούν. Οι ενδιάμεσες εικόνες, αν και είναι πιο οπτικές για τον χρήστη, πάρουν περισσότερο χώρο από το να μην αλληλεπιδρούν. Για να σώσει τις πλήρεις έγχρωμες εικόνες ο καλύτερος τρόπος Κατάλληλος Μορφή jpeg. Αν και συμβάλλει κάποια παραμόρφωση στο σχέδιο, επιλέγοντας το βαθμό συμπίεσης, μπορείτε να τα μειώσετε σε ένα αποδεκτό επίπεδο. Αυτά τα αρχεία μορφοποίησης βρίσκονται σε αυτή την περίπτωση το μικρότερο μέγεθος για όλες τις εικόνες εκτός από το σχήμα. Κατά την εξοικονόμηση τέτοιων σχεδίων, τα GIF και PNG έδειξαν τα καλύτερα αποτελέσματα.

Συγκρίνετε επίσης την αποτελεσματικότητα της χρήσης διαφόρων φίλτρων που χρησιμοποιούνται σε μορφή PNG.

Τα φίλτρα δοκιμάστηκαν στα παραδείγματα δείγματος (Εικ. 2.13, Α) και φωτογραφίες με μικρά μέρη (Εικ. 2.13, Β). Για το καθεστώς, η χρήση φίλτρων δεν έδωσε νίκη στο μέγεθος του αρχείου και, ακόμη και αντίθετα, προκάλεσε την αύξηση της κατά 0,5-1 KB. Ταυτόχρονα, για τη φωτογραφία "προφίλ" τα αρχεία που αποδείχθηκαν μικρότερα από τα "μη φιλτραρισμένα". Για εικόνες με 16 εκατομμύρια συνεργάτες, τα κέρδη ανήλθαν σε περίπου 10%. Ταυτόχρονα, εικόνες με 256 χρώματα στη χρήση του φίλτρου δεν αντιδράσαν πρακτικά.

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