4 Συμβουλές βελτιστοποίησης εικόνας

Sep 12, 2025

πως να

Μερικοί τυχεροί προγραμματιστές και αυτός ο συγγραφέας είχε την ευκαιρία να Tech edit addy addy ofman's new ebook βελτιστοποίηση εικόνας, Βασική βελτιστοποίηση εικόνας , το οποίο πρέπει να διαβάσετε απολύτως.

10 τρόποι βελτιστοποίησης εικόνων για καλύτερη απόδοση

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

Να είναι επιλεκτικές και προφορικές κρίσιμες εικόνες

Ρίξτε μια ματιά στον ιστότοπό σας και εντοπίστε ένα κρίσιμο περιουσιακό στοιχείο εικόνας. Για τους περισσότερους, αυτό θα ήταν μια εικόνα λογότυπου ή ήρωας που θέλετε να κάνετε το συντομότερο δυνατόν.

Αυτό είναι όπου το προφόρτιση Έρχεται υπαινιγμός πόρων. προφόρτιση Είναι ένας τρόπος να συμβάλει στον πελάτη ότι ένα περιουσιακό στοιχείο πρέπει να ανακτηθεί πριν ο ρυθμός του προγράμματος περιήγησης θα το ανακαλύψει διαφορετικά. Μπορείτε να το χρησιμοποιήσετε για σχεδόν τίποτα, αλλά λειτουργεί υπέροχα για προφορτωμένες κρίσιμες εικόνες. Εδώ είναι ένα παράδειγμα που χρησιμοποιείται στο HTML & lt; κεφάλι & gt; στοιχείο για να προφημίσετε μια εικόνα banner ήρωας:

<link rel="preload" href="/img/logo.svg" as="image">

Μπορείτε επίσης να χρησιμοποιήσετε την προφόρτιση σε μια κεφαλίδα HTTP:

Link: </img/logo.svg>; rel=preload; as=image

Παρακάτω μπορείτε να δείτε δύο ρολά screenshot της ίδιας σελίδας φόρτωσης σε χρώμιο. Ένα σενάριο χρησιμοποιεί προφόρτιση Για να φορτώσετε μια εικόνα πανό ήρωα, ενώ το άλλο δεν το κάνει.

The effect of using preload on a hero banner — Το αποτέλεσμα της χρήσης προφόρτς σε ένα πανό ήρωα

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

Αυτόματα απλοποιήστε το έργο τέχνης SVG

Illustrator’s Simplify tool, showing the number of anchor points before and after as Curve Precision is lowered — Το εργαλείο απλούστευσης του εικονογράφου, που δείχνει τον αριθμό των σημείων αγκύρωσης πριν και μετά, καθώς η ακρίβεια καμπύλης μειώνεται

Η βελτιστοποίηση SVGS είναι διαφορετική από ό, τι με άλλους τύπους εικόνων, επειδή σε αντίθεση με τα JPEGS ή τα PNGS, τα SVGs αποτελούνται από κείμενο, ειδικά το XML Markup. Αυτό σημαίνει ότι οι τυπικές βελτιστοποιήσεις που θα εφαρμόζετε στα περιουσιακά στοιχεία που βασίζονται σε κείμενο (για παράδειγμα, η συμπίεση μείωσης, GZIP / Brotli) μπορούν και πρέπει επίσης να εφαρμοστούν στο SVGS. Πέρα από αυτό, μπορείτε να χρησιμοποιήσετε ένα optimizer όπως το Svgo για να περάσει το μέγεθος του SVGS.

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

Αυτό το παράθυρο διαλόγου μπορεί να βρεθεί στο Εικονογράφος cc Το μενού του πηγαίνοντας στο Object & GT; Path & GT; Απλοποιήστε. Με τη μείωση της ακρίβειας καμπύλης (και προαιρετικά προσαρμογή του ορίου γωνίας), είναι δυνατόν να αφαιρέσετε επιπλέον σημεία διαδρομής στο έργο τέχνης σας. Σε αυτή την περίπτωση, θα σημειώσετε ότι η μείωση της καμπύλης ακρίβειας του μόλις 6% αφαιρεί 54 μονοπάτια. Χρησιμοποίησε σοβαρά, θα μπορούσε ακόμη να βελτιώσει την εμφάνιση του έργου τέχνης σας.

The savings that path simplification can afford — Οι εξοικονομήσεις που μπορούν να αντέξουν οικονομικά

Λέξη στο σοφό - Προσέξτε με το πόσο επιθετικό παίρνετε με αυτό το εργαλείο. Η χαμηλότερη ακρίβεια καμπύλης πάρα πολύ, και τα προσεκτικά κατασκευασμένα έργα τέχνης θα μεταβληθούν σε ένα blob. Απελευθερώστε τη σωστή ισορροπία, και θα αποκομίσετε τις ανταμοιβές.

Μετατρέψτε κινούμενα gifs σε βίντεο

With FFmpeg you can turn flabby GIFs into svelte video — Με το FFMPEG μπορείτε να μετατρέψετε τα flabby gifs σε ένα svelte video

Όλοι αγαπάμε ένα καλό κινούμενο gif. Μεταφέρουν αποτελεσματικά σχεδόν οποιοδήποτε συναίσθημα, αλλά μπορούν να είναι πραγματικά τεράστιοι. Οι βελτιστοποιητές εικόνων, όπως το gifsicle, μπορούν να βοηθήσουν στο ξύρισμα των υπερβολικών kilobytes, αλλά το εισιτήριο είναι να μετατρέψει αυτά τα gifs σε βίντεο και να τα ενσωματώσουν στο HTML5 & lt; video & gt; ετικέτα. ο ffmpeg Το βοηθητικό πρόγραμμα γραμμής εντολών είναι κατάλληλο για αυτή την εργασία:

 ffmpeg -i animated.gif -b: v 512K animated.Webm
ffmpeg -i animated.gif -b: v 512K animated.ogv
ffmpeg -i animated.gif -b: v 512K animated.mp4

Οι παραπάνω εντολές παίρνουν μια πηγή gif ( animated.gif ) Ως εισροή στο -i Argument και βίντεο εξόδου με ένα μεταβλητό bitrate μέγιστο 512kbps. Σε μια δική μας δοκιμασία, ήμασταν σε θέση να πάρουμε ένα κινούμενο gif 989kb και να το μειώσουμε σε ένα MP4 155kb, ένα 109KB OGV και έναν WebM 85KB. Όλα τα αρχεία βίντεο ήταν συγκρίσιμα σε ποιότητα με την πηγή GIF. Λόγω της πανταχού & lt; video & gt; Υποστήριξη ετικέτας στα προγράμματα περιήγησης, αυτές οι τρεις μορφές βίντεο μπορούν να χρησιμοποιηθούν όπως:

 & lt; video preload = "none" & gt;
  & lt; πηγή src = "/ βίντεο / animated.webm" type = "video / webm" & gt;
  & lt; πηγή src = / βίντεο / animated.ogv "τύπος =" video / ogg "& gt;
  & lt; πηγή src = / βίντεο / animated.mp4 "τύπος =" video / mp4 "& gt;
& lt; / video & gt;

Εάν αποφασίσετε να πάτε αυτή τη διαδρομή, φροντίστε να παραγγείλετε το δικό σας & lt; πηγή & gt; Ετικέτες έτσι ώστε η πιο βέλτιστη μορφή να έχει καθοριστεί πρώτα και το λιγότερο βέλτιστο έχει καθοριστεί τελευταία. Στις περισσότερες περιπτώσεις, αυτό σημαίνει ότι θα ξεκινήσετε πρώτα με τα βίντεο WebM, αλλά ελέγξτε το μέγεθος του αρχείου εξόδου κάθε βίντεο και πηγαίνετε με ό, τι είναι μικρότερο πρώτα και τελειώνει με ό, τι είναι μεγαλύτερο.

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

Τεμπέλης φορτίο με intersectionobserver

Οι Lazy Loading Images είναι κάτι που μπορεί να κάνετε ήδη, αλλά πολλά τεμπέληδες δέκτες φόρτωσης χρησιμοποιούν χειριστές συμβάντων με το CPU. Τέτοιες μέθοδοι συμβάλλουν στις υποτονικές αλληλεπιδράσεις σε μια σελίδα. Το παλαιότερο υλικό με λιγότερη ισχύ επεξεργασίας είναι ακόμη πιο επιρρεπής στις κακές επιδράσεις αυτού του τύπου κώδικα. Η εκτέλεση διαρρύθμισης βοηθάει σε ένα βαθμό, αλλά εξακολουθεί να είναι ένας βρώμικος και μάλλον αναποτελεσματικός τρόπος αντιμετώπισης για τον προσδιορισμό των στοιχείων στην προβολή.

Ευτυχώς, ο προσανατολισμός της διασταύρωσης μας δίνει έναν απλούστερο και πολύ πιο αποτελεσματικό τρόπο για να προσδιορίσετε πότε τα στοιχεία βρίσκονται στο παράθυρο προβολής. Εδώ είναι ένα παράδειγμα μιας βασικής Lazy Loading image Markup:

 & lt; img class = "τεμπέλης" δεδομένων-src = "/ εικόνες / τεμπέλης-φορτωμένο-image.jpg" src = "/ εικόνες / placeholder.jpg" alt = "Είμαι τεμπέλης." Width = "320" Ύψος = "240" & GT;

Εδώ, φορτώνουμε μια εικόνα θέσης θέσης στο src Χαρακτηριστικό, και στη συνέχεια αποθηκεύστε τη διεύθυνση URL για την εικόνα που θέλουμε να φορτώσουμε χαλαρά στο Δεδομένα-SRC Χαρακτηριστικό. Για να το κορυφωθεί, δίνουμε το & lt; img & gt; στοιχείο μια τάξη τεμπέλης για εύκολη πρόσβαση με queryselectorall . Από εκεί, χρησιμοποιούμε απλά αυτόν τον κώδικα:

 Document.addeventListener ("Domcontentalloaded", λειτουργία () {
  αν ("IntersectionObserver" στο παράθυρο & amp; "intersectionobserrentry" στο παράθυρο & amp; & amp; "intersectionratio" στο παράθυρο.
    στοιχεία = document.queryselectorall ("img.lazy");

    var imageobserver = νέο intersectionobserver (λειτουργία (καταχωρήσεις, παρατηρητής) {
      Καταχωρήσεις.Fooeach (λειτουργία (είσοδος) {
        Εάν (είσοδος.IsIndersing) {
          entarget.target.etattttribute ("src", vertar.target.getattattribute ("data-src"));
          entry.target.classlist.Remove ("τεμπέλης").
          imageobserver.unobserve (είσοδος.target);
        }
      });
    });

    στοιχεία.Fooeach (λειτουργία (εικόνα) {
      ImageObserver.Observe (εικόνα);
    });
  }
}) ·

Εδώ, δεσμεύουμε τον κώδικα στο έγγραφο αντικειμένων Domcontent φορτίο Εκδήλωση. Αυτός ο κώδικας ελέγχει εάν ο παρατηρητής διασταύρωσης υποστηρίζεται από το τρέχον πρόγραμμα περιήγησης. Αν αποδειχθεί ότι είναι, πιάνουμε όλους img Στοιχεία με μια τάξη τεμπέλης με queryselectorall και στη συνέχεια να επισυνάψετε τους παρατηρητές σε αυτούς.

Ο παρατηρητής περιέχει αναφορές στα στοιχεία που παρατηρούμε ( καταχωρήσεις ) και ο ίδιος ο παρατηρητής ( παρατηρητής ). Αυτός ο κώδικας εξαρτάται σε κάθε είσοδο παρατηρητή ίδιος αξία. Ενώ το παρατηρούμενο στοιχείο είναι έξω από το παράθυρο προβολής, ίδιος επιστρέφει 0 . Καθώς το στοιχείο εισέρχεται στο προβολές, όμως, θα επιστρέψει μια τιμή μεγαλύτερη από 0 . Είναι σε αυτό το σημείο ότι ανταλλάσσουμε το περιεχόμενο της εικόνας Δεδομένα-SRC Χαρακτηριστικό στο src χαρακτηριστικό και αφαιρέστε το τεμπέλης τάξη. Μετά από μια δεδομένη εικόνα τεμπέλης φορτία, ο παρατηρητής απομακρύνεται από αυτό με τους παρατηρητές ξεκουράζω μέθοδος.

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

Το άρθρο αυτό δημοσιεύθηκε αρχικά στην έκδοση 301 του καθαρά , το περιοδικό Best-Selling στον κόσμο για τους σχεδιαστές και τους προγραμματιστές ιστοσελίδων. Αγοράστε τεύχος 301 εδώ ή Εγγραφείτε εδώ .

Σχετικά Άρθρα:

Ο πλήρης οδηγός για το SVG
Χρησιμοποιώντας εργαλεία διάνυσμα: μια προσέγγιση του σχεδιαστή ιστοσελίδων
Animate SVG με JavaScript

4 Συμβουλές βελτιστοποίησης εικόνας

Να είναι επιλεκτικές και προφορικές κρίσιμες εικόνες

Αυτόματα απλοποιήστε το έργο τέχνης SVG

Μετατρέψτε κινούμενα gifs σε βίντεο

Τεμπέλης φορτίο με intersectionobserver

πως να - Τα πιο δημοφιλή άρθρα

Πώς να δημιουργήσετε ψηφιακές ζωγραφιές Air Plein

Πώς να δημιουργήσετε εσωτερικούς χώρους με το Eevee του Blender

Πώς να επιτύχετε κλίμακα στους πίνακές σας

Ξεκινήστε με διάχυτη

Πώς να αναμίξετε μια παλέτα γκουάς

Πώς να προετοιμάσετε τα γραφικά του εικονογράφου για μετά τα αποτελέσματα

Μοντέλο Darth Vader σε ZBrush

Πώς να ονομάσετε τον οργανισμό σχεδιασμού ιστοσελίδων

Κατηγορίες