Δημιουργήστε μικρογραφίες που παραμένουν χρήσιμες σε μικρό μέγεθος οθόνης

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

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

Η προεπιλογή εκκίνησης ταιριάζει σε 800 επί 800 pixel, επιλέγει το WebP και εφαρμόζει ελαφριά ευκρίνεια. Αυτό είναι ένα παράδειγμα που προορίζεται για έναν υποψήφιο κάρτας, όχι μια καθολική απαίτηση μικρογραφιών. Μετρήστε το πραγματικό πλάτος της οθόνης και τις ανάγκες πυκνότητας απόκρισης και, στη συνέχεια, επιλέξτε μια κατάλληλη εξαγωγή. Μια ευρεία πηγή θα διατηρήσει την αναλογία της μέσα στο πλαίσιο αντί να γίνει τετράγωνη αυτόματα.

Επιθεωρήστε την εικόνα στο μέγεθος της πραγματικής κάρτας. Ένα πρόσωπο, μια ετικέτα ή ένα διακριτικό χαρακτηριστικό προϊόντος θα πρέπει να είναι ακόμα αναγνωρίσιμο. Οι μικροσκοπικές ενσωματωμένες λέξεις μπορεί να παρέχονται καλύτερα ως πραγματικό κείμενο κάρτας. Συγκρίνετε με την ελαφριά ευκρίνεια, καθώς η ισχυρή αντίθεση των άκρων μπορεί να κάνει μια μικρή εικόνα απασχολημένη. Δοκιμάστε ένα JPEG στις ίδιες διαστάσεις εάν το WebP δεν είναι χρήσιμο στη ροή εργασίας σας. χρήση PNG για περιουσιακά στοιχεία που χρειάζονται υπάρχουσα διαφάνεια. Η τρέχουσα εξαγωγή WebP εδώ είναι αδιαφανής.

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

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

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