Οδηγός

Ίδια οθόνη με διαφορετική πυκνότητα

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

Τελευταία ενημέρωση:

Ομάδα Bitinz · Πώς γράφουμε και ελέγχουμε το περιεχόμενο

Ίδια εμφάνιση, διαφορετικό αρχείο

Το στιγμιότυπο είναι εικόνα, όχι η ζωντανή διεπαφή. Μια πυκνή οθόνη καταγράφει περισσότερα εικονοστοιχεία στην ίδια διάταξη. Ωφελεί το κείμενο, αλλά μια μικρή προεπισκόπηση ίσως δεν χρειάζεται ολόκληρη την ανάλυση.

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

Ελεγχόμενη λήψη, πραγματική συμπίεση

Στις 2026-10-29 καταγράψαμε την ίδια τοπική διεπαφή σε 1× και 2×. Διπλασιασμός πλάτους και ύψους σημαίνει 4 φορές περισσότερα εικονοστοιχεία, όχι σταθερό πολλαπλασιασμό μεγέθους. Και οι δύο λήψεις συμπιέστηκαν με το Ισορροπημένο του Bitinz.

Κρατήσαμε ένα αποτέλεσμα PNG και μία μετατροπή WebP για κάθε λήψη. Εκτελέσαμε κάθε ρύθμιση 3 φορές για να ελέγξουμε ότι τα αρχεία εξόδου ήταν πανομοιότυπα. Πηγές, αθροίσματα ελέγχου και αποτελέσματα συνοδεύουν το πείραμα· η γενική μέθοδος περιγράφεται στη συντακτική πολιτική.

Πυκνότητα και μορφή χωριστά

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

ΕικόναΕικονοστοιχείαΈξοδοςΕπίπεδοΠρινΜετάΜείωση
interface-1x.png800 × 500 pxPNGΙσορροπημένο42.8 KB13.3 KB68.8%
interface-1x.png800 × 500 pxWebPΙσορροπημένο42.8 KB11.1 KB74.1%
interface-2x.png1600 × 1000 pxPNGΙσορροπημένο101.5 KB30.6 KB69.9%
interface-2x.png1600 × 1000 pxWebPΙσορροπημένο101.5 KB27.6 KB72.8%

Bitinz · 1 KB ισοδυναμεί με 1000 byte.

Συμπίεση εικόνωνΜικρύνετε αρχεία JPG, PNG και WebP στη δική τους μορφή, σε παρτίδες και δωρεάν.Συμπιέστε εικόνες

Το κείμενο είναι η χρήσιμη περιοχή ελέγχου

Λεπτομέρεια αρχικού PNG

Αρχικό κείμενο και γραμμές διεπαφής στο απόκομμα

Λεπτομέρεια συμπιεσμένου PNG

Ίδιο κείμενο και γραμμές μετά τη συμπίεση PNG
Ίδια περιοχή κειμένου στο αρχικό και στο πραγματικά συμπιεσμένο PNG, χωρίς ρετούς.

Μικρά γράμματα, λεπτές γραμμές και απαλά σκιασμένα πλαίσια χρειάζονται περισσότερη προσοχή από κενό φόντο. Δείτε πλήρες μέγεθος και μετά το πλάτος του αναγνώστη.

Μικρότερο WebP βοηθά αν υποστηρίζεται και το κείμενο διαβάζεται. Αν απαιτείται PNG, συγκρίνετε το συμπιεσμένο PNG. Όταν δεν χρειάζεται στιγμιότυπο, κρατήστε αληθινό κείμενο στη σελίδα.

Δείξτε ό,τι χρειάζεται ο αναγνώστης

Πριν ανεβάσετε, περικόψτε άσχετο περιβάλλον σε επεξεργαστή. Είναι επιλογή περιεχομένου, ξεχωριστή από συμπίεση: μειώνει περισπασμούς και εικονοστοιχεία. Κρατήστε το απαραίτητο χειριστήριο και την κοντινή ετικέτα.

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

Για υποχρεωτικό PNG χρησιμοποιήστε τον συμπιεστή PNG, για δικό σας ιστότοπο δοκιμάστε PNG σε WebP. Συγκρίνετε με πρωτότυπο βάσει αναγνωσιμότητας και υποστήριξης.

Ετοιμάστε αναγνώσιμο στιγμιότυπο

  1. Καταγράψτε μόνο την αναγκαία διεπαφή και τα συμφραζόμενα.
  2. Κρατήστε αρχικό PNG και συμπιέστε αντίγραφο.
  3. Συγκρίνετε γράμματα και λεπτές γραμμές σε πλήρες και τελικό μέγεθος.
  4. Χρησιμοποιήστε το ελαφρύτερο αποδεκτό αρχείο σε υποστηριζόμενη μορφή.

Συχνές ερωτήσεις

Το 2× έχει διπλάσια εικονοστοιχεία;
Αν διπλασιαστούν πλάτος και ύψος, τα εικονοστοιχεία είναι 4 φορές περισσότερα. Η αναλογία αρχείων εξαρτάται και από περιεχόμενο και μορφή.
Να μετατρέπω πάντα στιγμιότυπα σε WebP;
Χρησιμοποιήστε το αν υποστηρίζεται και το κείμενο μένει σαφές. Κρατήστε PNG όταν απαιτείται ή δίνει καταλληλότερο αποτέλεσμα.
Το Bitinz περικόπτει ή αλλάζει διαστάσεις;
Περικοπή και αλλαγή διαστάσεων γίνονται σε επεξεργαστή. Το Bitinz επεξεργάζεται το μέγεθος που ανεβάζετε.

Εργαλεία σε αυτόν τον οδηγό

Πηγές

  1. Bitinz: Image lab: sources, measurements and output hashes (2026-10-29)
  2. MDN: Window: devicePixelRatio property