Βελτιστοποίηση εικόνας για τον ιστότοπο: επεξεργασία παρτίδας με χρήση jpegtran | optipng | pngout

  1. Προϋποθέσεις
  2. Χρησιμοποιούμε συστάσεις για εικόνες
  3. Δομή αρχείου
  4. Σύντομες οδηγίες για εργασία
  5. Προσθήκες
  6. x64 (aka andi)

Site χωρίς εικόνες - ένας αναχρονισμός. Τόσοι πολλοί άνθρωποι σκέφτονται, και δεν στερείται κοινής λογικής. Θυμηθείτε, πόσο καιρό έχετε επισκεφτεί για τελευταία φορά το site και πόσο καιρό είστε σε αυτό;

Τα δεδομένα κειμένου είναι πολύ μικρότερα από την εικόνα. Αλλά οι άνθρωποι είναι γνωστό ότι αγαπούν τα μάτια τους. Ως εκ τούτου, οι εικόνες θα είναι ένα αναμφισβήτητο πλεονέκτημα της ιστορίας.

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

Ωστόσο, αυτό δεν αρκεί και ακόμη και οι ειδησεογραφικές περιοχές προσπαθούν να παρέχουν εικόνες δημοσιογράφων

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

Πριν από πολύ καιρό, όταν ο Πούτιν δεν φαινόταν αιώνιος, έκανα την πρώτη ιατρική δικτυακή πύλη μου. Ήταν απαραίτητο να τοποθετήσετε φωτογραφίες στον άτλαντα. Είναι προφανές ότι είναι μάλλον δύσκολο να φανταστεί κανείς την ανατομική δομή του σώματος χωρίς εικόνες και μάλιστα να περιγραφεί με λέξεις. Και χωρίς άλλο σφάλμα, ανέβασα τις εικόνες σε bmp (ασυμπίεστη μορφή). Πρέπει να πω ότι ζυγίζουν ζύμη; Επιπλέον, ορισμένα προγράμματα περιήγησης δεν γνωρίζουν πώς να εμφανίζουν τέτοιες εικόνες.

Γιατί λοιπόν να βελτιστοποιήσετε τις εικόνες; Ένα απλό παράδειγμα είναι μια φωτογραφία. Τα μοντέρνα τηλέφωνα διαθέτουν κάμερες σε 8, 12 και ακόμη περισσότερα megapixel. 12 MP αντιστοιχεί σε εικόνα 4000 × 3000 εικονοστοιχείων. Ανάλογα με την πολυπλοκότητα της σκηνής, αυτό αντιστοιχεί σε μέγεθος 2-5 megabyte, και ακόμη περισσότερο. Δώδεκα φωτογραφίες - και το μέγεθος της σελίδας διογκώνεται πολύ. Η εικόνα ταιριάζει στην περιοχή περιεχομένου, πράγμα που σημαίνει ότι το πρόγραμμα περιήγησης πρέπει πρώτα να κατεβάσει τα πάντα, να το βαθμολογήσει και μόνο στη συνέχεια να το εμφανίσει. Για τους αδύναμους επεξεργαστές ή με μικρή ποσότητα μνήμης RAM - μια καταστροφή.

Τώρα φανταστείτε ότι ο χρήστης παρακολουθεί τον ιστότοπο από το τηλέφωνο. Σε αυτή την περίπτωση, η φόρτωση της σελίδας μπορεί απλά να μην περιμένει. Έτσι, οι εικόνες πρέπει να μειωθούν εκ των προτέρων.

Κάποιος θα υποστηρίξει ότι δεν έχει νόημα σε αυτό · το σύγχρονο CMS κάνει αυτόματα μικρογραφίες κατά τη λήψη εικόνων. Αλλά όλοι έχουν τους δικτυακούς τόπους τους σε VPS ή VIP-ποσοστά; Κατεβάστε μια εικόνα 12 MP μπορεί να βγει, αλλά για να την επεξεργαστεί, η PHP θα χρειαστεί να διαθέσει 35+ megabytes (θεωρητικά, στην πραγματικότητα περισσότερα) για αποθήκευση, και στη συνέχεια ξέρει πόσο να δημιουργήσει ένα μικρότερο αντίγραφο. Τα φτηνά τιμολόγια βυθίζονται αμέσως στην υπερβολή των πόρων. Ένα καλό hoster θα ζητήσει από τον χρήστη να μην το κάνει πια, ένας κακός θα το αγνοήσει, γιατί μόνο τα χρήματα είναι σημαντικά για αυτόν, και όχι η απόδοση των υπηρεσιών.

Και έτσι αποφασίσαμε να δράσουμε σωστά. Μειώνουμε προκαταρκτικά τις εικόνες και, στη συνέχεια, τις φορτώνουμε στον ιστότοπο. Έτσι ο κινητήρας είναι ευκολότερος και οι άνθρωποι. Είναι όλα Όχι πραγματικά.

Πολλοί συντάκτες διατηρούν τα αρχικά κομμάτια (μετα-πληροφορίες, τμήματα του αρχείου εκτός εικόνας) που περιέχουν πρόσθετες πληροφορίες. Για παράδειγμα, αν τραβήξετε μια φωτογραφία του τηλεφώνου, μεταφέρετε το αρχείο στον υπολογιστή, κάντε κλικ πάνω του με το δεξί πλήκτρο και επιλέξτε "Ιδιότητες → Λεπτομέρειες", θα δείτε τα δεδομένα στη συσκευή: ποια φωτογραφική μηχανή φωτογραφήσατε, ταχύτητα κλείστρου, ISO και ούτω καθεξής. Για τον χρήστη, αυτές οι πληροφορίες είναι άχρηστες, ώστε να μπορείτε να απαλλαγείτε από αυτό.

Λοιπόν, σκεφτείτε το, ένα κομμάτι. Τι υπάρχει, μια δέσμη πληροφοριών που περιέχονται; Φανταστείτε. Μερικές φορές παίρνετε εικόνες στις οποίες εκατοντάδες kilobytes τέτοιων δεδομένων. Μόλις σήμερα, έστειλαν ένα λογότυπο μεγέθους 584 KB για να φιλοξενήσουν. Ταυτόχρονα, χρήσιμες πληροφορίες ήταν μόνο 14 KB! Όσο για μένα, δεν είναι απολύτως σωστό να αναγκάσει τον επισκέπτη να κατεβάσει 570 KB από ψηλά.

Ας συνοψίσουμε τα υποσύνολα. Προκειμένου οι χρήστες του ιστότοπου να πάνε καλά, πρέπει:

  1. Μειώστε το μέγεθος της εικόνας. Για να βοηθήσετε οποιοδήποτε πρόγραμμα επεξεργασίας γραφικών.
  2. Το ρίξιμο των τμημάτων του αρχείου είναι περιττό. Στην πραγματικότητα, ο χρήστης χρειάζεται μόνο μια εικόνα.
  3. Προσπαθήστε να μειώσετε περαιτέρω το μέγεθος της εικόνας.

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

Αλλά οι παράγραφοι 2 και 3 μπορούν να δοθούν στο έλεος των ειδικών προγραμμάτων. Λογισμικό για εργασία με εικόνες που έχουν ρυθμιστεί. Η Google συνιστά τα ακόλουθα προγράμματα:

  • jpegtran για τη μορφή εικόνας jpg.
  • optipng και pngout για εικόνες PNG.

Λίγο για το p. 3. Οι γραφικοί συντάκτες συνήθως δεν το ενοχλούν. Απλώς σώζουν την εικόνα, επιλέγοντας τους αλγόριθμους συμπίεσης με τις ίδιες ρυθμίσεις, συντελεστές κβαντισμού και άλλα πράγματα. Επιπλέον, πολλοί μεταφέρουν ειλικρινά τις διαθέσιμες μετα-πληροφορίες και προσθέτουν τις δικές τους, αυξάνοντας περαιτέρω το μέγεθος του αρχείου.

Προϋποθέσεις

Πριν από ένα χρόνο, μιλώντας μαζικά για την υπηρεσία PageSpeed ​​Insights από το google. Στην πραγματικότητα, αυτές είναι οι συστάσεις του γίγαντα αναζήτησης για το πώς να κάνουμε καλά. Απλά πληκτρολογήστε τη διεύθυνση του ιστότοπου και λάβετε μια λίστα προτάσεων για βελτιστοποίηση. Εκεί μπορείτε επίσης να κάνετε λήψη βελτιστοποιημένων πόρων, συμπεριλαμβανομένων εικόνων, για τον ιστότοπό σας. Είναι αλήθεια ότι αυτό ισχύει μόνο για την ελεγχόμενη σελίδα.

Αν έχετε έναν ιστότοπο, φροντίστε να το δείτε αυτό το άρθρο . Ιδιαίτερα χρήσιμο για όσους χρησιμοποιούν το WordPress.

Χρησιμοποιούμε συστάσεις για εικόνες

Φαίνεται απλό: κατεβάστε τα προγράμματα που έχει καθορίσει η Google και τρέξτε όλα τα αρχεία του διακομιστή μέσω αυτών. Το πρόβλημα είναι ότι αυτά τα βοηθητικά προγράμματα είναι κονσόλα. Λαμβάνουν μόνο 1 αρχείο τη φορά. Αλλά δεν είμαστε μάταια μέσα τελευταίο άρθρο πήρε το χρόνο να αρχεία παρτίδας, έτσι;

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

Λήψη αρχείου (212 KB)

Δομή αρχείου

Το αρχείο περιέχει ένα φάκελο [ OptimizeImg ]. Για να ξεκινήσετε, αποσυσκευάστε το κάπου. Το έχω εντοπίσει στο c: \ temp \ αλλά δεν έχει σημασία. Το κύριο πράγμα είναι ότι η διαδρομή δεν περιέχει θαυμαστικά.

Επόμενο. Αυτός ο φάκελος περιέχει τον υποκατάλογο [ uploads ]. Εδώ πρέπει να τοποθετήσετε αρχεία που απαιτούν επεξεργασία. Το καλύτερο μέρος είναι ότι μπορείτε να ωθήσετε τουλάχιστον τη δομή του φακέλου / αρχείου.

Υπάρχουν άλλα 3 προγράμματα: jpegtran.exe | optipng.exe | Το pngout.exe είναι το πολύ βοηθητικό πρόγραμμα που συνιστά η Google. Λήψη από τους αντίστοιχους επίσημους ιστότοπους / αποθετήρια. Σε περίπτωση αμφιβολίας ή απλά θέλετε να κάνετε αναβάθμιση, κάντε λήψη από μια αξιόπιστη πηγή και αντικαταστήστε τις υπάρχουσες.

Και τέλος, η καρδιά του tulza. Batnickki:

  • 1.bat
  • 3.bat
  • 3-go.bat
  • 3-opti-to-out.bat
  • 3-out-to-opti.bat

Το πρώτο αρχείο, 1.bat, επαναδημιουργεί τη δομή από [uploads]. Δημιουργούνται 3 πρόσθετοι φάκελοι: [jpg_jpegtran] [png_optipng] [png_pngout] με επεξεργασία ελάχιστων αρχείων του τύπου τους (jpg - μόνο * .jpg-αρχεία, το ίδιο με png).

Το 3.bat εκκινεί διαδοχικά τρία αρχεία δέσμης για εκτέλεση:

  • Το 3-go.bat είναι σχεδόν το ίδιο με το 1.bat. Παράβλεψη των αρχείων jpg / png μέσω ελαχιστοποιητών. Το αποτέλεσμα της εργασίας θα είναι 3 φάκελοι (βλ. Παραπάνω) με τις αντίστοιχες εικόνες.
  • Το 3-opti-to-out.bat δημιουργεί το φάκελο [png_optipng-to-pngout], στον οποίο γράφονται τα αρχεία που επεξεργάζεται το optipng + pngout (ακριβώς αυτή η σειρά).
  • Το 3-out-to-opti.bat δημιουργεί ένα φάκελο [png_pngout-to-optipng] στον οποίο γράφονται τα αρχεία που επεξεργάζονται από το pngout + optipng. Παρόμοια με την προηγούμενη, μόνο σε διαφορετική ακολουθία.

Κατ 'αρχήν, μόνο το 1.bat είναι αρκετό για τις ανάγκες μας. Οι τσάντες 3x εμφανίστηκαν ως αποτέλεσμα έρευνας και σφαλμάτων στην προηγούμενη έκδοση του αρχείου δέσμης. Έτσι συνέβη ότι κατά τη διάρκεια του σφάλματος τα αρχεία για pngout λήφθηκαν από τον κατάλογο optipng. Και ποια ήταν η έκπληξή μου όταν η κυκλοφορία της παλιάς έκδοσης έδωσε 1,5 φορές μικρότερο μέγεθος από ό, τι στο ενημερωμένο αρχείο δέσμης. Ως αποτέλεσμα, αποδείχθηκε ότι η διπλή επεξεργασία μπορεί να "καλύψει" τις φωτογραφίες καλά. Αλλά χρειάζεται περίπου 2 φορές περισσότερος χρόνος. Έτσι αποφασίστε μόνοι σας αν χρειάζεται.

Σύντομες οδηγίες για εργασία

  1. Λήψη αρχείου .
  2. Αποσυμπιέστε το.
  3. Μεταβείτε στο φάκελο [OptimizeImg] που ανοίξατε πρόσφατα.
  4. Όλα τα αρχεία που απαιτούν τσιμπήματα, αντιγράψτε τον φάκελο [upload].
  5. Εκτελέστε 1.bat και περιμένετε. Αν υπάρχουν πολλά αρχεία και είναι png, περιμένετε πολύ.
  6. Όταν εμφανιστεί ένα μήνυμα στο μαύρο παράθυρο σχετικά με την ανάγκη πατήματος ενός πλήκτρου για να συνεχιστεί, όλα είναι έτοιμα. Παραμένει να πάρει το περιεχόμενο των δημιουργημένων φακέλων και να αντιγράψει στην φιλοξενία μέσω FTP, αντικαθιστώντας παλιά αρχεία.

Για παράδειγμα. Ας έχετε ένα blog στο WordPress. Όλες οι εικόνες αποθηκεύονται σε [ / wp-content / uploads / ]. Μεταβείτε στο φάκελο ιστότοπου (μέσω ftp), μεταβείτε στο [ wp-content ] και απλά αντιγράψτε [ uploads ] στο φάκελο OptimizeImg με το ίδιο όνομα. Εκτελέστε 1.bat και περιμένετε. Αφού τελειώσει η εργασία, το περιεχόμενο [jpg_jpegtran] (πηγαίνουμε εκεί!) Μεταφορτώνεται στο διακομιστή. Τα αιτήματα για υπάρχοντα αρχεία απαντώνται με αντικατάσταση. Ένα παρόμοιο τέχνασμα για το png, αλλά πρώτα εξετάζουμε ποιο φάκελο - [png_optipng] ή [png_pngout] - καταλαμβάνει λιγότερο χώρο, συμπληρώστε το με τα περιεχόμενά του.

Μην φοβάστε να βλάψετε άλλα αρχεία. Το Batniki λειτουργεί μόνο με jpg / png και μόνο οι εικόνες αυτών των τύπων εγγράφονται στους νεοδημιουργημένους φακέλους.

Ελπίζω ότι κάποιος θα είναι χρήσιμος. Επιτυχίες!

Προσθήκες

  1. Η διαδρομή προς το [OptimizeImg] δεν πρέπει να περιέχει θαυμαστικά ! και %
  2. Δεν είναι απαραίτητο να εκτελείτε δέσμες ενεργειών ως διαχειριστής. Επιπλέον, σε αυτή την περίπτωση, μπορεί να μην λειτουργούν!
  3. ...

Εκδότης

δεν είναι online 13 ώρες

x64 (aka andi)

Σχόλια: 2846 Δημοσιεύσεις: 395 Εγγραφή: 02-04-2009