Κρατήστε ένα master και κάντε ένα αντίγραφο παραδόσεως web
Αποθηκεύστε την αρχική εικόνα με την περιγραφή της εικόνας και το αρχείο έγκρισης. Δημιουργήστε ξεχωριστά αρχεία παράδοσης για την πραγματική περιοχή εικόνας της σελίδας. Αυτό σας επιτρέπει να αλλάξετε το πλαίσιο ή την συμπίεση της εικόνας αργότερα χωρίς να επεξεργάζεστε επανειλημμένα το μόνο αρχείο πηγής.
Το THE RENDER OFFICE επιστρέφει επί του παρόντος εικόνες PNG σε διαστάσεις τετράγωνου, τοπίου ή πορτραίτου. Μια μεγάλη πηγή μπορεί να είναι χρήσιμη για την ολοκλήρωση, αλλά μια μικρή κάρτα κατηγορίας μπορεί να χρειαστεί λιγότερα pixels. Η ρύθμιση ποιότητας δημιουργίας εικόνας δεν είναι μια αντικατάσταση για την προετοιμασία μιας κατάλληλης εξαγωγής ιστού.
Συγκρίνετε παραδίδει pixels στο διάταγμα
Ελέγξτε το μέγεθος της εικόνας που εμφανίζεται σε όλες τις πραγματικές διατάξεις και πυκνότητες συσκευών που υποστηρίζετε. Προετοιμάστε τις κατάλληλες παραλλαγές εικόνας όπου ο ιστότοπος μπορεί να τις εξυπηρετήσει με αντίδραση. Η μείωση του πλάτους CSS μόνο δεν μειώνει τα byte του αρχείου που κατεβάζεται.
Το MDN καταγράφει πώς οι υποψήφιοι πηγή εικόνας και οι πληροφορίες μεγέθους βοηθούν τους προγράμματα περιήγησης να επιλέξουν έναν κατάλληλο πόρο. Η δηλωμένη διάταξη πρέπει να ταιριάζει με την πραγματική σελίδα. εσφαλμένες πληροφορίες μεγέθους μπορεί να κάνει το πρόγραμμα περιήγησης να επιλέξει έναν λιγότερο κατάλληλο υποψήφιο.
Συγκρίνετε την συμπίεση στο τελικό μέγεθος προβολής
Εξάγετε τις κατάλληλες μορφές που υποστηρίζονται από τη ροή εργασίας δημοσίευσης, στη συνέχεια συγκρίνετε το μέγεθος του αρχείου και την εμφάνιση. Ελέγξτε τα gradients, λεπτή κτίριο, άκρες και όλες τις ακριβείς λεπτομέρειες του προϊόντος μετά την συμπίεση. Κρατήστε τη διαφάνεια μόνο όταν η διάταξη πραγματικά το χρειάζεται.
Επιλέξτε το μικρότερο κατάλληλο αρχείο που διατηρεί την απαιτούμενη ποιότητα για την τοποθέτηση. Δεν υπάρχει καθολικός στόχος μεγέθους αρχείου που να αποδεικνύει ότι μια εικόνα βελτιστοποιείται. Μια μικρή διακοσμητική κάρτα και μια λεπτομερή εικόνα του προϊόντος έχουν διαφορετικές θέσεις εργασίας και θα πρέπει να αναθεωρηθούν ανάλογα.
| Το πεδίο | Καταγραφή | ΕΡΩΤΗΣΗ ΕΡΩΤΗΣΗ |
|---|---|---|
| τοποθεσία | Πραγματική σελίδα και περιοχή εικόνας | Το σχήμα εικόνας εξυπηρετεί αυτή τη διάταξη; |
| Πηγή και εξαγωγή | Master όνομα και παραδόσεις παραλλαγή | Μπορεί να αναπαραχθεί η εξαγωγή; |
| Διαστάσεις και bytes | Το πραγματικό μέγεθος pixel και το μέγεθος αρχείου | Είναι κατάλληλος ο προμηθευμένος πόρος; |
| Visual ανασκόπηση | Η αποδεκτή ποιότητα στο σχεδιασμένο μέγεθος | Η συμπίεση έχει αφαιρέσει σημαντικές πληροφορίες; |
Αποθηκεύστε χώρο διάταξης και φορτίο ανά σημασία
Παρέχετε ενσωματωμένες πληροφορίες πλάτους και ύψους, ώστε ο browser να μπορεί να κρατήσει τη αναλογία της εμφάνισης της εικόνας πριν φτάσει. Το MDN εξηγεί πώς αυτό μειώνει την κίνηση διάταξης. Επιβεβαιώστε ότι το τελικό πλαίσιο εικόνας και η συμπεριφορά CSS συμφωνούν με το αποθηκευμένο χώρο.
Χρησιμοποιήστε το χαλαρό φορτίο για τις κατάλληλες εικόνες που δεν είναι απαραίτητες για την αρχική προβολή. Μην το εφαρμόζετε χωρίς διακρίσεις στην κύρια εικόνα που πρέπει να δει αμέσως ένας επισκέπτης. Ελέγξτε την πραγματική συμπεριφορά της σελίδας αντί να αντιμετωπίζετε ένα χαρακτηριστικό φόρτισης ως μια καθολική ρύθμιση επιδόσεων.
Δώστε την εικόνα χρήσιμη αναζήτηση και το πλαίσιο ανάγνωσης
Βάλτε την εικόνα δίπλα στο σχετικό κείμενο και επιλέξτε ένα σύντομο, περιγραφικό όνομα αρχείου. Γράψτε alt κείμενο για τον σκοπό της εικόνας σε αυτή τη σελίδα, αποφεύγοντας τις λίστες λέξεων-κλειδιών. Η Google περιγράφει τα ονόματα αρχείων ως ένα ελαφρύ σημάδι και χρησιμοποιεί το περιβάλλον της σελίδας για να κατανοήσει το θέμα. μόνο ένα όνομα αρχείων δεν καθορίζει τη σχετικότητα ή την κατάταξη.
Ελέγξτε τις πραγματικές αιτήσεις εικόνας, τη διάταξη, την προσβασιμότητα και την απόδοση της δημοσιευμένης σελίδας με τα κατάλληλα εργαλεία. Καταγράψτε τους όρους και τα αποτελέσματα πριν συγκρίνετε τις εκδόσεις. Η ταχύτερη παράδοση μπορεί να βελτιώσει την εμπειρία, αλλά τα έσοδα εξακολουθούν να εξαρτώνται από την προσφορά, το κοινό και την πλήρη πορεία μετατροπής.
Σχεδιάστε την πηγή πριν την εξαγωγή.
Χρησιμοποιήστε τον οδηγό ροής εργασίας της εκστρατείας για να αποφασίσετε ποια εικόνα χρειάζεστε, πώς θα αναθεωρηθεί και πώς θα παραδοθεί το τελικό περιουσιακό στοιχείο.
Ακολουθήστε τη ροή εργασίας εικόνας εκστρατείας