Ποια είναι η μορφή υψηλής ποιότητας εικόνας. Ποια μορφή για να επιλέξετε για εικόνες - jpeg, png ή gif
Από τον συγγραφέα: Για το Μάρτιο του 2017, οι εικόνες είναι πάνω από το 65% του περιεχομένου ιστού. Και δεν προκαλεί έκπληξη: οι εικόνες δίνουν ομορφιά, περάσουν μηνύματα, πείτε ιστορίες και δημιουργούν επαφή με τους επισκέπτες στον ιστότοπό σας. πίσω πλευρά Ερώτηση - Εάν η εικόνα χρησιμοποιείται σωστά χρησιμοποιείται, είναι συχνά ο κύριος λόγος για τον ιστότοπο επιβράδυνσης και την κακή εμπειρία των χρηστών.
Η σωστή χρήση των εικόνων στο Διαδίκτυο συνεπάγεται δύο πράγματα:
Επιλέξτε τη σωστή μορφή εικόνας.
Βελτιστοποίηση εικόνας.
Σε αυτό το άρθρο, θα αποκαλύψω το πρώτο στοιχείο, ειδικότερα, θα σας πω σχετικά με τις μορφές εικόνας που είναι πιο κατάλληλες για τον ιστό, καθώς και για τις εικόνες που χρειάζεστε για να χρησιμοποιήσετε αυτές τις μορφές.
Αλλά πριν ατείσθηση να τρέξει εν συντομία στην ορολογία.
Ράστερ ή εικόνες διάνυσμα
Βασισμένο στο εικόνες raster Υπάρχει ένα δισδιάστατο πλέγμα pixel. Κάθε εικονοστοιχείο αποθηκεύει το χρώμα και την αξία της διαφάνειας.
Οι εικόνες Raster είναι κακώς κλιμάκωση: αν αυξήσετε την εικόνα ράστερ, θα χάσει τη σαφήνεια και την ποιότητα. Δημοφιλής Μορφές ράστερ Εικόνες για Web - JPEG, JPG, GIF και PNG.
Παρακάτω υπάρχουν δύο εικόνες Raster (JPG) με ένα μήλο. Η πρώτη εικόνα είναι γνήσια. Το δεύτερο δείχνει το διευρυμένο τμήμα της πρώτης εικόνας.
Ένα παράδειγμα μιας εικόνας bitmap σε είδος.
Αυξημένο μέρος του bitmap.
Δώστε προσοχή στην απώλεια ποιότητας σε μια διευρυμένη έκδοση της εικόνας.
Σε αντίθεση με τις εικόνες Raster vector γραφικά Αποτελείται από γραμμές, αριθμούς, σημεία διαδρομής. Πληροφορίες σχετικά με εικόνες Vector δεν αποθηκεύονται σε εικονοστοιχεία, αποθηκεύεται σε μαθηματικές οδηγίες για το σχέδιο, οι οποίες δεν σχετίζονται με εικονοστοιχεία. Ο Alex Walker εξήγησε σαφώς τη διαφορά στο παράδειγμα του SVG - η πιο δημοφιλής μορφή εικόνων φορέα στο δίκτυο:
"Το SVG δεν είναι μια μορφή εικόνας, είναι μια μεγάλη συνταγή εικόνας." - Γιατί οι εικόνες JPEG είναι σαν μήλο πίτα από McDonalds (χωρίς SVG)
Μία από τις συνέπειες της ανεξαρτησίας από την ανάλυση οθόνης - οι εικόνες φορέα μπορούν να κλιμακωθούν κάτω από το μέγεθος του περιεχομένου. Οι εικόνες θα είναι σαφείς, ιδανικές για οθόνες αμφιβληστροειδούς.
SVG γραφικά σε μικρή κλίμακα.
Μέρος της διευρυμένης εικόνας SVG.
Και οι δύο εικόνες από τα παραπάνω είναι ένα παράδειγμα μιας ενιαίας εικόνας φορέα, ωστόσο, η δεύτερη εικόνα αυξάνεται περισσότερο από δύο φορές σε σύγκριση με το πρώτο. Δεν υπάρχει απώλεια ποιότητας.
Με απώλεια ποιότητας ή απώλειας (απώλειες και απώλειες)
Τόσο ο όρος απώλεια όσο και χωρίς απώλειες αναφέρεται στις τεχνικές συμπίεσης των αρχείων πολυμέσων, δηλ. Εικόνες, ήχο και βίντεο.
Compression Lossy: "Δεν αποκαθιστά τα ψηφιακά δεδομένα μέχρι το 100% του πρωτοτύπου. Μέθοδοι με απώλεια ποιότητας χαρακτηρίζονται από υψηλό βαθμό συμπίεσης, το οποίο μειώνει το βάρος Συμπιεσμένα αρχεία. Ωστόσο, μερικά από τα αρχικά εικονοστοιχεία, τα ηχητικά κύματα και τα πλαίσια βίντεο αφαιρούνται για πάντα. " - Εγκυκλοπαίδεια PCMAG.COM
Τι σημαίνει στην πράξη: τόσο ισχυρότερη συμπίεση του αρχείου με απώλεια ποιότητας, τόσο λιγότερο θα είναι. Να πάρει ένα μικρότερο βάρος αρχείου, χάνετε μη αναστρέψιμα την ποιότητα. Με απώλεια συμπίεσης, πρέπει να εξισορροπήσετε μεταξύ του μικρού βάρους του αρχείου και της ποιότητας.
Βρίσκεστε πολύ συχνά μορφή εικόνας με απώλεια ποιότητας, αυτό είναι JPEG.
Σε αντίθεση με τις εικόνες με απώλεια χωρίς απώλειες, εξοικονομεί όλα τα δεδομένα όπως στο πρωτότυπο. Αυτή η συμπίεση δεν οδηγεί σε πτώση της ποιότητας των αρχείων. Εξαιτίας αυτού, οι μορφές αρχείων χωρίς απώλειες συχνά έχουν περισσότερο βάρος σε σύγκριση με το Lossy.
Στο δίκτυο μπορείτε εύκολα να βρείτε μορφές χωρίς απώλειες, είναι gif και png.
Οι παρεχόμενες πληροφορίες είναι χρήσιμες όταν επιλέγουν Καλύτερη μορφή Εικόνες για το περιεχόμενό σας.
Οι πρώτες τρεις μορφές εικόνας θα περιγράψουμε παρακάτω (JPG, GIF και PNG), έχουν ήδη χρησιμοποιηθεί σε τοποθεσίες για μεγάλο χρονικό διάστημα. Οι τελευταίες δύο μορφές, το SVG και το WEBP, όχι αρκετά καινούργιο, δεν είναι ακόμα δημοφιλείς. Παρ 'όλα αυτά, δεν μπορούν να είναι καλύτερα προσαρμοσμένες για τις απαιτήσεις της προσαρμοστικότητας και ταχέως φορτωμένα ιστότοπους και η δημοτικότητά τους έχει αυξηθεί σημαντικά.
Τσιμπώ
JPEG ή JPG - Lossy Format που σχεδιάστηκε από κοινή ομάδα φωτογραφικών εμπειρογνωμόνων. Οι εικόνες JPG καταλαμβάνουν σχεδόν το 3% όλων των τύπων περιεχομένου σε ιστότοπους. Γιατί αυτή η μορφή είναι τόσο δημοφιλής:
Η μορφή JPG είναι σε θέση να εμφανίζει εκατομμύρια χρωμάτων, γεγονός που το καθιστά ιδανικό υποψήφιο για την εμφάνιση φωτογραφιών στο Διαδίκτυο.
Σύγχρονες τάσεις και προσεγγίσεις στην ανάπτυξη ιστοσελίδων
Μάθετε τον γρήγορο επαγγελματικό αλγόριθμο ανάπτυξης από το μηδέν στο κτίριο του ιστότοπου
Δεδομένου ότι πρόκειται για μια μορφή απώλειας, τότε μπορείτε να χρησιμοποιήσετε τη συμπίεση για να μειώσετε σημαντικά το μέγεθος του αρχείου. Στα αρχεία JPG υπάρχουν πολλά επίπεδα συμπίεσης: περίπου το 60% θα είναι αρκετό για τις εικόνες στο Διαδίκτυο, κάτι υψηλότερο από το 75% να εμποδίζει την ποιότητα της εικόνας.
Όλες οι συσκευές Internet υποστηρίζουν τη μορφή JPG, η οποία απλοποιεί τη χρήση της μορφής στο Internet.
Ένα αξιοσημείωτο μειονέκτημα των αρχείων JPG - αρχείων αυτής της μορφής δεν υποστηρίζει τη διαφάνεια. Αν θέλετε να χρησιμοποιήσετε ένα διαφανές υπόβαθρο για να επικαλύψετε μια εικόνα στο χρώμα του φόντου ή την υφή της σελίδας, οι εικόνες JPG δεν ταιριάζουν. Επιλέξτε μία από τις επιλογές που θα πω παρακάτω.
Gif.
Η μορφή ανταλλαγής GIF ή γραφικών είναι μια μορφή χωρίς απώλειες 8-bit με μέγιστη ποσότητα χρώματος ίσο με 256. Οι περιορισμοί χρώματος καθιστούν την ακατάλληλη επιλογή GIF για την εμφάνιση φωτογραφιών και εικόνων με ένα ευρύ φάσμα χρωμάτων.
Παράγοντες που επηρέασαν τη μακροχρόνια χρήση στο Διαδίκτυο:
Λόγω του ορίου σε 256 χρώματα, το μέγεθος του αρχείου είναι μάλλον χαμηλό.
Υποστηρίζει τη διαφάνεια ·
Υποστηρίζει κινούμενα σχέδια, η οποία σας επιτρέπει να χρησιμοποιήσετε τη μορφή για να εμφανίσετε εικόνες με βρόχους, όπως εικονίδια, emoticons, πανό κ.λπ.;
Καλό κατάλληλο για Απλές εικόνες Με μονοφωνικά χρώματα, αλλά δεν είναι κατάλληλα για φωτογραφίες.
Png.
Το PNG ή το φορητό γραφικό δικτύου είναι μια εναλλακτική λύση σε gif. Η μορφή αναπτύσσεται από το W3C. Όπως το GIF, η μορφή χρησιμοποιεί αλγόριθμο συμπίεσης χωρίς απώλεια ποιότητας, υπάρχουν διαθέσιμες επιλογές 8-bit και 24 bit. Και οι δύο επιλογές υποστηρίζουν τη διαφάνεια. Ωστόσο, σε μια εικόνα PNG 24 bit, η διαφάνεια λειτουργεί στο Alpha Channel, καθώς και κόκκινα, πράσινα και μπλε κανάλια. Επομένως, παρά το γεγονός ότι οι εικόνες GIF και 8-bit PNG μπορούν να είναι είτε εντελώς αδιαφανές είτε εντελώς διαφανές, σε PNG κάθε εικόνα pixel προσφέρει 256 επίπεδα διαφάνειας.
Η επιλογή PNG 24 bit μπορεί να χρησιμοποιηθεί για:
weig εικόνες με Διάφορα επίπεδα διαφάνεια;
σύνθετες φωτογραφίες και γραφικά.
Τα γραφήματα που θέλετε να επεξεργαστείτε συχνά επεξεργαστείτε και εξάγετε: Η μόνη μορφή θα διατηρήσει την ποιότητα.
Διαφορετικός Μορφή gif Το PNG δεν υποστηρίζει κινούμενα σχέδια και το βάρος των αρχείων μπορεί να είναι αρκετά μεγάλο.
Svg.
Svg ή κλιμακωτά διανυσματικά γραφικά (κλιμακωτά διανυσματικά γραφικά) είναι ένας τύπος Αρχεία φορέα με βάση το XML. Η μορφή εμφανίστηκε το 2001, αλλά έλαβε δημοτικότητα μεταξύ των προγραμματιστών του Ιστού μόνο πρόσφατα. Ο λόγος για μια τέτοια αργά αγάπη είναι κακή υποστήριξη για το SVG στα προγράμματα περιήγησης τα χρόνια. Ήθελα να σας ενημερώσω με χαρά ότι κατά τη σύνταξη του άρθρου SVG υποστηρίζεται σε όλα τα μεγάλα προγράμματα περιήγησης, αλλά όχι χωρίς διάκριση και σφάλματα.
Το SVG έχει πολλές λειτουργίες που να συνιστούν αυτή τη μορφή που συνιστάται για τον ιστό, ειδικά εάν η SVG χρησιμοποιείται για απλές εικόνες όπως λογότυπα, κάρτες, εικονίδια κ.λπ.
Pluss της μορφής SVG
Το SVG συχνά ζυγίζει λιγότερες εικόνες ράστερ, ειδικά μετά τη βελτιστοποίηση του ιστού και της συμπίεσης μέσω του GZIP.
Η μορφή είναι κλιμακωτή, η οποία παρέχει σαφήνεια σε οποιαδήποτε ανάλυση οθόνης.
Ο κωδικός SVG μπορεί να τοποθετηθεί σε HTML και να αποθηκεύσει τα ερωτήματα HTTP.
Ο κωδικός SVG μπορεί να ρυθμιστεί μέσω CSS.
Οι εικόνες SVG μπορούν να κινηθούν, συμπεριλαμβανομένων των μεμονωμένων εξαρτημάτων όπως με χρησιμοποιώντας το CSS.Και το JS, το οποίο είναι πολύ δροσερό.
Αποφύγετε πολύ σύνθετες εικόνες SVG, αυξάνει ελαφρώς το μέγεθος του αρχείου. Τέλος, η SVG δεν εφαρμόζεται στις φωτογραφίες, οι μορφές JPG και WebP θα είναι καλύτερα να ταιριάζουν εδώ.
Πτέρυγα
Παρά το γεγονός ότι η μορφή εμφανίστηκε το 2010, δεν θα πάρω λάθος αν λέω ότι το webp είναι ακόμα πολύ νέα μορφήπου δεν είναι τόσο διάσημο όσο το JPG και το PNG. Παρ 'όλα αυτά, ο ιστός έχει αυτή τη μορφή στο αίμα: ήταν ειδικά σχεδιασμένο για το Διαδίκτυο, το οποίο το καθιστά εξαιρετικά ενδιαφέρον.
WEBP - Μορφή εικόνας με ανοιχτή Κωδικός πηγήςπου αναπτύχθηκε από την Google. Βασικά χαρακτηριστικά: "Webp - Σύγχρονη μορφή Στοιχεία στο Διαδίκτυο, παρέχοντας εξαιρετική συμπίεση με απώλειες και χωρίς απώλεια ποιότητας ... απώλειες έκδοση εικόνων webp ζυγίζει 26% λιγότερα png. Lossy έκδοση Webp ζυγίζει 25-34% λιγότερο συγκρίσιμη Εικόνες jpeg... WebP χωρίς απώλειες υποστηρίζει τη διαφάνεια ... λόγω 22% πρόσθετων byte. Σε περιπτώσεις όπου ισχύει η απώλεια RGB συμπίεση, το Appy Webp υποστηρίζει επίσης τη διαφάνεια, παρέχοντας μέγεθος αρχείου 3x σε σύγκριση με το PNG. " - Ιστοσελίδα του WEBP
Το webp crashle είναι ότι συνδυάζει τα πλεονεκτήματα του JPG και PNG χωρίς να αυξάνεται το μέγεθος του αρχείου.
Στο αυτή τη στιγμή Η υποστήριξη μορφοποίησης είναι αρκετά καλή: Τα προγράμματα περιήγησης BLINK υποστηρίζουν τη μορφή από την ίδια την απελευθέρωση, όλα τα ίδια webp - Δημιουργία Google. Για συμβατότητα προς τα πίσω με τα προγράμματα περιήγησης χωρίς υποστήριξη, δηλ. Δηλαδή / άκρη, ο Firefox και το Safari, οι λαϊκοί τεχνίτες ήρθαν με τις λύσεις.
συμπέρασμα
Σε αυτό το άρθρο, σας είπα για τις μορφές εικόνων για το διαδίκτυο, και επίσης να περάσει σύντομα μέσω των τύπων των εικόνων που είναι κατάλληλα για το Διαδίκτυο.
Το JPG, GIF και PNG είναι πολύ δημοφιλείς μορφές που έχουν χρησιμοποιηθεί για πολύ καιρό. SVG και WEBP νεότερες, ενδιαφέρουσες εναλλακτικές λύσεις. SVG Μεγάλη για εικόνες και απλές εικόνες, το WEBP αντικαθιστά όλες τις εφαρμογές JPG και PNG.
Έχετε ήδη χρησιμοποιήσει το SVG και το WEBP στην ανάπτυξη; Ποιες δυσκολίες έχετε; Επιτύχατε κάποια αξιοσημείωτα κέρδη απόδοσης; Γράψτε στα σχόλια!
Προσοχή, πολλές εικόνες! Όλα με δυνατότητα κλικ.
Png.
Ράστερ Γραφική μορφή PNG, κερδίζοντας αυξανόμενη δημοτικότητα στην εποχή του Web 2.0, εμφανίστηκε το 1995 ως αντικαθιστώντας το παλιό καλό gif (και, εν μέρει, tiff). Μέχρι εκείνη την εποχή, οι ιδιοκτήτες του κατοχυρωμένου με δίπλωμα ευρεσιτεχνίας GIF "αποφάσισε να χτυπήσει τετραψήφια ποσά από όλους τους προγραμματιστές που χρησιμοποιούν τη μορφή και την ελεύθερη κοινότητα δεν υπάρχει τίποτα εκτός από την ελεύθερη εναλλακτική λύση.Ποια είναι τα πλεονεκτήματα της μορφής;
- Πλήρης υποστήριξη για αλφα Διαφάνεια - Διαφάνεια. Σας επιτρέπει να κάνετε τμήματα με διαφανή και ημιδιαφανή.
- Υψηλής ποιότητας αλγόριθμος συμπίεσης χωρίς απώλεια ποιότητας. Lzw, αλλά λίγο πιο αποτελεσματική.
- Η πιθανότητα ενός υλικολογισμικού, και σε αντίθεση με το GIF) τόσο κατακόρυφα όσο και οριζόντια ταυτόχρονα.
- Ενσωματωμένη διόρθωση γάμμα. Σας επιτρέπει να συνδέσετε την εικόνα της διαμόρφωσης της οθόνης της, ώστε να εμφανίζονται διαφορετικές οθόνες με τον ίδιο τρόπο όπως ο συγγραφέας.
Δεδομένου ότι το PNG-24 χρησιμοποιεί μια πλήρη παλέτα χρωμάτων, το συγκρίνετε με το GIF είναι αρκετά δύσκολο. Το PNG-8 με την παλέτα δείκτη εδώ είναι πιο παρόμοια. Θα δώσω στιγμιότυπα οθόνης για σύγκριση: 
Η πρακτική (όπως η γνώμη των συναδέλφων) δείχνει ότι οι απλές μικρές εικόνες GIF συμπιέζουν καλύτερα. Αλλά όταν πρόκειται για μεγάλες εικόνες, το gif παραμένει πίσω.
Επιπλέον, ένα άλλο μάλλον μεγάλο πλεονέκτημα: στην πραγματικότητα, αντίθετα με τη δημοφιλή πεποίθηση, Το PNG-8 μπορεί επίσης να χρησιμοποιήσει ένα πλήρες κανάλι άλφαΌπως το PNG-24. Το Just Photoshop δεν τον υποστηρίζει, έτσι Sergey Chikuenok από το στούντιο του Λεμπεφέφ συνιστά τη χρήση πυροτεχνημάτων Adobe από ό, τι αποφάσισα να κάνω (λίγο γι 'αυτό).
Και σε αυτή τη μάχη, αν δεν χρειαζόμαστε διαφάνεια, η PNG χάνει, έτσι να μιλήσει, στο "Μέσο τμήμα της αγοράς". Αν και, αν κολλήσετε στο JPEG "σε ένα προφίλ ICC, η διαφορά στην ένταση του ICC γίνεται αόρατη. Οι μετρήσεις μου έφτασαν στο JPEG 100%. Και με λιγότερη ποιότητα (χωρίς ιδιαίτερα αισθητή για τη διαφορά των ματιών), δυστυχώς, γίνεται Ακόμα πιο λυπηρό.
Γενικά, δείτε τον εαυτό μας: 
Απάντηση. Γενικά, τα αποτελέσματα εξαρτώνται σημαντικά από την ίδια την εικόνα: Το PNG είναι καλύτερο Squeezes κλίσεις και μονοτονικά τμήματα, αλλά για φωτογραφίες, η καλύτερη συμπίεση δίνει JPEG. Παρόλο που λένε (είναι δύσκολο να το πιστέψουμε), σε μεγάλες φωτογραφίες του PNG και στη συνέχεια οδηγεί - μόλις επαληθεύτηκε στη διαδικασία μετατροπής οθόνης στο άρθρο έναντι του κινδύνου JPEG-70% - ).
Ζωή μετά το Photoshop "ή συμπίεση
Σε πολλές περιπτώσεις, η PNG παραμένει γενικά απαραίτητη, δεδομένου ότι η διαφάνεια δεν υποστηρίζεται κανονικά από καμία από τις εναλλακτικές μορφές ιστού και ποιο διάστημα ανοίγει σε σχεδιαστές και cameramen ... Απάντηση. Επιπλέον, λαμβάνοντας υπόψη τις ιδιαιτερότητες της μορφής, για στοιχεία σχεδιασμού στον ιστό - είναι ίσως η καλύτερη λύση.Google και Swing -. Το πρόγραμμα είναι περίπου 1,5 MB με έναν ελάχιστο αριθμό ρυθμίσεων, σας επιτρέπει να οδηγείτε (συμπεριλαμβανομένων των πακέτων) αρχείων PNG με συμπίεση.
Στο πακέτο εικονιδίων (90 αρχεία με διαφανές φόντο χωρίς ειδικές φυσητήρες), το κέρδος στον όγκο ήταν κατά μέσο όρο περίπου 10-15%. Δεν είναι ιδιαίτερα, φυσικά, εντυπωσιακό. Αλλά για τα παραπάνω αρχεία, το ποσοστό της συμπίεσης κυμαίνεται από 10% (μεγάλη αφίσα χωρίς διαφάνεια) σε 72% (ημιδιαφανή ορθογώνια). Έτσι, προσπαθώντας να δοκιμάσετε, τόσο περισσότερη δουλειά με το βοηθητικό πρόγραμμα δεν καταλαμβάνει πολύ χρόνο. 
Εκτός από το PNGOUT, υπάρχουν πολλά άλλα προγράμματα Λεπτομερής παρατήρηση Που τώρα δεν θέλουν να κάνουν:
- Optipng - δεν έχει γραφικό κέλυφος και λειτουργεί από Γραμμή εντολών. Από μη επαληθευμένα δεδομένα, το ποσοστό συμπίεσης είναι μικρότερο. Απάντηση. Αλλά οι χρήστες του λένε το αντίθετο.
- Pngcrush - δεν προσπάθησε τον εαυτό του, λένε "προσπαθώντας να βελτιστοποιήσετε το αρχείο από όλους Διαθέσιμες μέθοδοι"Αλλά το κύριο πράγμα δεν είναι" πώς προσπαθώντας ", αλλά" πώς βελτιστοποιεί ".
- Και ένα άλλο εύρος υπηρεσιών κοινής ωφέλειας απλά καθαρίστε τα σκουπίδια από τα αρχεία.
Adobe πυροτεχνήματα.
Ειλικρινά, το Adobe Fireworks έχει γίνει μια πραγματική ανακάλυψη για μένα: PNG-8, PNG-24 και PNG-32 + σωρός των ρυθμίσεων!
PNG-24 και PNG-32 Δεν σκέφτηκα λεπτομερώς. Στο μέτρο που κατάλαβα, στην ορολογία τους 32 - με ένα άλφα κανάλι και 24 - χωρίς. Σύμφωνα με τις προεπιλογές Photoshop Copes με αυτό το έργο καλύτερα.
Αλλά το PNG-8 έσπασε όλα τα στερεότυπα μου (και οι περισσότεροι συναδέλφους). Το τελικό αρχείο είναι πολύ μικρότερο από το GIF "Α και υπάρχει μια πλήρης υποστήριξη για διαφάνεια με δύο τρόπους: ALPHA και τη διαφάνεια του δείκτη. Το μόνο μείον σε σύγκριση με το PNG-24 παραμένει μια παλέτα δείκτη, αν και όλα εξαρτώνται από τις ανάγκες. Το προσωπικό μου γνώμη - PNG-8 στις περισσότερες περιπτώσεις ή GIF και PNG-24.
PNG εναντίον GIF στο AF, αν και μόνο με τα γνωστά πυροτεχνήματα GIF-JPEG λειτουργεί από προεπιλογή όχι πολύ (δεν έπαιζα με τις ρυθμίσεις). Αλλά ακόμη και σε σύγκριση με το Photoshop, το αποτέλεσμα είναι η διαφορά υπέρ του PNG:
Και εδώ είναι όλη η ποικιλία PNG-8 - γι 'αυτό αξίζει να εγκαταστήσετε το Adobe Fireworks: 
Για σύγκριση: το ίδιο αρχείο από τις προσπάθειες του Photoshop ζυγίσαμε 3.188 bytes έναντι των 450 που έλαβε τώρα, δηλαδή 6 φορές περισσότερο.
Ετυμηγορία
Κατά τη γνώμη μου, το GIF έχει ήδη μιλήσει. Τώρα η ύπαρξή της είναι κατά κύριο λόγο το ζήτημα της αδράνειας της κοινωνίας. Απάντηση. Ωστόσο, το τμήμα των διαφορετικών απολαύσεων κινούμενων εικόνων είναι όλα νωρίς όσο το gif :).Για διαφανή στοιχεία σχεδιασμού αξίζει να χρησιμοποιήσετε το PNG-8 (λιγότερο συχνά PNG-24, όταν οι παλέτες PNG-8 δεν είναι αρκετές για να αποθηκεύσουν την εικόνα χωρίς απώλεια).
Για φωτογραφίες και σύνθετες Γραφικά στοιχεία Ο ηγέτης εξακολουθεί να παραμένει JPEG λόγω των ισχυρών χαρακτηριστικών της βελτιστοποίησης της εικόνας. Αν και σε ορισμένες περιπτώσεις μπορεί να είναι αρκετό και PNG-8 - όπως και πριν, με GIF "OHM, τολμηρά πειράματα - το κλειδί για την επιτυχία. Απάντηση. Αλλά για πραγματικά μεγάλες εικόνες, ο JPEG χάνει.
Απάντηση. Δεν είμαι πραγματικά εξειδικευμένος και αναθεώρηση που έγραψε στο γόνατο, αυτό που λέει ο επιθετικός "σύντομος"; Ίσως όχι στα καλύτερα παραδείγματα. Επομένως, χάρη σε όλους όσους έλαβαν ενεργό ρόλο στη συζήτηση, ειδικά
Γεια σε όλους στο blog. Γενικά, σε αυτό το άρθρο, θέλω να διαλύσω τον μύθο για δύο δεδομένα επέκτασης για εικόνες, είναι JPG και png καλύτερος Από αυτούς που δεν βρέθηκαν ακόμα. Το όλο θέμα είναι ότι και οι δύο ανάλογα με τη χρήση του ίδιου του ιστότοπου ενδέχεται να επηρεάσουν την ταχύτητα του ιστότοπου και τη βελτιστοποίηση. Τι σας έβαλε πάρα πολύ σε ένα αδιέξοδο; Στη συνέχεια, διαβάστε.
Δύο μορφοποίηση PNG και JPG σε ποιες διαφορές.
Φαίνεται η εικόνα και ότι εδώ είναι αυτό, αλλά όλα είναι σε χρώματα. Μορφή JPG Το πιο συνηθισμένο, διότι σε σύγκριση με άλλους:
- Ζυγίζει λιγότερο (αλλά αυτή η ερώτηση είναι αμφιλεγόμενη περαιτέρω).
- Είναι εύκολο να συμπιέσετε.
- Υψηλά χρώματα στη μετάδοση.
Η πιο κοινή μορφή PNG-8 στο κτίριο του ιστότοπου, διότι σε σύγκριση με τους συναδέλφους PNG-24, έχει μια κολοσσιαία διαφορά στο μέγεθος του αρχείου, οπότε το δεύτερο χρησιμοποιείται πολύ σπάνια.
Η κύρια διαφορά μεταξύ των δύο μορφών που το JPEG είναι νοσοκομείο και τα χρώματα του δεν θα τεντώσουν πλέον για να αφαιρέσουν το επιπλέον, και έτσι να μειώσουν το πεδίο της εικόνας και ότι το JPG δεν το κάνει διάφανο φόντο Αυτή η μορφή δεν το υποστηρίζει.
Καταστρέψτε τους μύθους.
Ο σημαντικότερος μύθος όλων των siteproev είναι ότι σε καμία περίπτωση δεν εφαρμόζεται png, είναι απλά ανοησίες, οι εικόνες αυτής της μορφής συμπιέζουν και βελτιστοποιούν είναι καλύτερα από την JPG, πολλές φορές με τη σωστή προσέγγιση.
Πώς να επιλέξετε μια μορφή;
Ψάξτε για παράδειγμα, ας πάρουμε μια εικόνα για την αληθεία της ρωσικής σημαίας μας.
Θα θεωρήσω όλες τις λειτουργίες στο παράδειγμα του Photoshop, τόσο ευκολότερο. Ειδικά επέλεξε ένα μεγάλο μέγεθος και ένα μικρό χρώμα, μόνο τρία χρώματα, και τώρα θέλω να το αποθηκεύσω, να δω τι συμβαίνει, να ξεκινήσει, να πάρει τη μορφή JPG.
Αλλά τι γίνεται αν το έσωσα στο PNG.
Το μέγεθος μειώθηκε σχεδόν σχεδόν. Δεν έκανα τίποτα μόνο ρώτησε τον ελάχιστο αριθμό χρωμάτων, απλά σούπερ σκέφτομαι. Αυτή η μέθοδος είναι κατάλληλη για εκείνους που δεν ενδιαφέρονται για αναπαραγωγή χρωμάτων, όπως ένα blog, όλα τα στιγμιότυπα οθόνης είναι τόσο κατασκευασμένα, που παρουσιάζουν ένα ελάχιστο χρώματα για να είναι ευανάγνωστο και όλα είναι καλά.
Αυτή τη στιγμή και πρέπει να σαρώσει, αφορά όχι μόνο ιστότοπους. Το μέγεθος του σκληρού δίσκου δεν είναι καουτσούκ, η μητέρα μου έχει εικόνες και εικόνες στην εργασία γενικά, 246 συναυλίες που καταλαμβάνουν, και αναρωτιέται γιατί λείπει τόσο πολύ ο τόπος. Απλά πρέπει να χρησιμοποιήσετε τη μέθοδο μου και αυτό είναι.
Φυσικά, αν η εικόνα είναι πολύχρωμη με πολλά χρώματα και σκιές, τότε το PNG δεν θα βοηθήσει, και στη συνέχεια σας συμβουλεύω να το χρησιμοποιήσετε
- Επανεξέταση όλων των εικόνων στο blog και επιλέξτε ποια μορφή Καλύτερη JPEG ή png ισχύουν για όλες τις εικόνες. Ακόμη και εκείνοι που έχουν ήδη συμπιεστεί και βελτιστοποιηθεί, επειδή μπορούν να κοπούν ακόμα περισσότερο, και χωρίς να χάσουν την ποιότητα.
- Κατά τη σύνταξη νέων άρθρων, αξιολογήστε αυτή τη στιγμή, ξέρω ότι ο χρόνος θα φύγει περισσότερο, αλλά.
- Χρησιμοποιήστε το πρόγραμμα Riot, το οποίο δοκιμάστηκε παραπάνω ή χρησιμοποιήστε το για να συμπιέσει το JPG.
- Μην είστε τεμπέλης επειδή είναι απαραίτητο για την αλήθεια.
Και θα το πάρετε για δύο λεπτά περισσότερο, και το όφελος θα είναι ένα ολόκληρο βαγόνι με ένα μικρό τρόλεϊ.
Λοιπόν, ποιο είναι το άρθρο σας, νομίζω για μερικά πράγματα που σας άνοιξα τα μάτια σας, για τα οποία δεν γνωρίζετε καν, έτσι εφαρμόστε και χρησιμοποιήστε, μέχρι στιγμής, σας περιμένει στα σχόλια.