Επιλέξτε χρήσιμες διαστάσεις εικόνας για οθόνες υψηλής πυκνότητας

Μια κάρτα που εμφανίζεται σε πλάτος 800 εικονοστοιχείων CSS μπορεί να χρησιμοποιήσει μια υποψήφια εικόνα με πλάτος 1600 εικονοστοιχείων εικόνας ως παράδειγμα 2x. Το πρόγραμμα περιήγησης μπορεί να επιλέξει μια κατάλληλη πηγή με βάση τη διάταξη, την πυκνότητα της συσκευής και άλλες συνθήκες όταν ο ιστότοπος παρέχει αποκριτική σήμανση εικόνων. Το αρχείο 1600 pixel δεν σημαίνει ότι η κάρτα πρέπει να καταλαμβάνει 1600 εικονοστοιχεία CSS στη σελίδα.

Μετρήστε την πραγματική διάταξη πριν από την εξαγωγή. Μια στήλη άρθρου, ένα πανό πλήρους πλάτους και μια μικρή κάρτα προϊόντος σπάνια χρειάζονται το ίδιο μέγεθος πηγής. Ελέγξτε επίσης τη διάταξη του τηλεφώνου, όπου η εικόνα μπορεί να καταλαμβάνει διαφορετικό πλάτος ή να χρησιμοποιεί διαφορετική περικοπή. Κάνοντας κάθε αρχείο διπλάσιο το μεγαλύτερο πλάτος θύρας προβολής επιφάνειας εργασίας μπορεί να σπαταλήσει byte. Αντιμετωπίστε τις εξαγωγές υψηλότερης πυκνότητας ως υποψήφιες για μια πραγματική αποκριτική υλοποίηση και όχι για ένα ενιαίο υπερμεγέθη αρχείο που πρέπει να κατεβάσει κάθε συσκευή.

Αυτή η σελίδα ξεκινά με ένα πλαίσιο προσαρμογής WebP 1600 επί 1600 pixel. Είναι ένα ενδεικτικό όριο, επομένως αντικαταστήστε το με τιμές με βάση το μέγεθος της οθόνης που μετρήσατε. Το Fit Within διατηρεί τις αναλογίες και δεν μεγεθύνει μια μικρότερη πηγή. Για παράδειγμα, ένα ευρύ πρωτότυπο μπορεί να φτάσει τα 1600 pixel ενώ ένα πορτρέτο ταιριάζει στο ύψος. Ελέγξτε τις πραγματικές διαστάσεις εξόδου.

Εάν μια πηγή έχει πλάτος μόνο 700 pixel, η εγγραφή μιας εξαγωγής 1600 pixel δεν δημιουργεί τη λεπτομέρεια ενός μεγαλύτερου πρωτότυπου. Χρησιμοποιήστε μια καλύτερη πηγή ή αποδεχτείτε έναν μικρότερο υποψήφιο. Συγκρίνετε το ελαφρύ ακόνισμα με το OFF μετά την αλλαγή μεγέθους και επιθεωρήστε τις λεπτές υφές στο επιδιωκόμενο μέγεθος οθόνης. Για διαφανή γραφικά χρησιμοποιήστε το PNG, καθώς η τρέχουσα εξαγωγή WebP εδώ είναι αδιαφανής. Διατηρήστε το αρχικό σχέδιο ή τη φωτογραφία, ώστε να μπορείτε να δημιουργήσετε διαφορετικούς υποψηφίους αργότερα.

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

Δείτε τη σελίδα σε συνηθισμένες ρυθμίσεις οθόνης και υψηλής πυκνότητας και συγκρίνετε τις λεπτομέρειες με το μέγεθος μεταφοράς. Μια εικόνα υψηλότερης ανάλυσης δεν είναι αυτόματα η καλύτερη ανταλλαγή για μια μικρή διακοσμητική κάρτα. Ομοίως, μια υπερβολικά μικρή εικόνα μπορεί να φαίνεται κακή σε μια μεγάλη προβολή προϊόντος. Δοκιμάστε περιεχόμενο με νόημα, όπως πρόσωπα και ετικέτες αντί να κρίνετε μόνο ένα θολό φόντο. Συνεχίστε να φορτώνετε την προτεραιότητα κατάλληλη για τη θέση της εικόνας και μετρήστε την πραγματική σελίδα πριν διεκδικήσετε βελτίωση στην ταχύτητα ή τα βασικά ζωτικά στοιχεία του ιστού.

Ας υποθέσουμε ότι η ευρύτερη κάρτα σας είναι 400 εικονοστοιχεία CSS και μια εικόνα παραμένει καθαρή σε αυτό το πλάτος. Ένα υποψήφιο 800 pixel είναι μια πιθανή εξαγωγή 2x όταν την υποστηρίζει η πηγή. Ελέγξτε την κάρτα και σε στενότερες διατάξεις, καθώς μια εικόνα που εκτείνεται σε ολόκληρη την οθόνη του τηλεφώνου μπορεί να έχει διαφορετικό πλάτος οθόνης από την κάρτα επιφάνειας εργασίας. Εξαγωγή από το πρωτότυπο για κάθε απαραίτητο υποψήφιο αντί για μεγέθυνση του μικρότερου. Επιβεβαιώστε ποιο αρχείο επιλέγει το πρόγραμμα περιήγησης στην πραγματική σελίδα. Αυτός ο τελικός έλεγχος επιλογής είναι αυτός που συνδέει έναν υπολογισμό τοπικών διαστάσεων με τα byte που λαμβάνουν πραγματικά οι επισκέπτες για την εικόνα.