Πώς να χρησιμοποιήσετε το SVG ως Placeholder και άλλες τεχνικές φόρτωσης εικόνας

Δημιουργία SVG από εικόνες μπορεί να χρησιμοποιηθεί για placeholders. Συνέχισε να διαβάζεις!

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

Τις τελευταίες μέρες έχω συναντήσει κάποιες τεχνικές φόρτωσης που χρησιμοποιούν το SVG και θα ήθελα να τις περιγράψω σε αυτό το post.

Σε αυτή την ανάρτηση θα περάσουμε από αυτά τα θέματα:

  • Επισκόπηση των διαφορετικών τύπων εντολών κράτησης θέσης
  • Βάσεις κειμένου SVG (άκρα, σχήματα και σιλουέτες)
  • Αυτοματοποίηση της διαδικασίας.

Επισκόπηση των διαφορετικών τύπων εντολών κράτησης θέσης

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

Πολλές στρατηγικές για να γεμίσετε την περιοχή μιας εικόνας προτού φορτωθεί.

  • Διατηρώντας τον κενό χώρο για την εικόνα: Σε έναν κόσμο ανταποκρινόμενου σχεδιασμού, αυτό αποτρέπει το άλμα από το περιεχόμενο. Αυτές οι αλλαγές στο layout είναι κακές από την άποψη της εμπειρίας ενός χρήστη, αλλά και από την απόδοση. Το πρόγραμμα περιήγησης αναγκάζεται να κάνει υπολογισμούς layout re κάθε φορά που ανακτά τις διαστάσεις μιας εικόνας, αφήνοντας χώρο για αυτό.
  • Placeholder: Φανταστείτε ότι εμφανίζουμε την εικόνα προφίλ ενός χρήστη. Ίσως θελήσετε να εμφανίσετε μια σιλουέτα στο παρασκήνιο. Αυτό εμφανίζεται ενώ φορτώνεται η κύρια εικόνα, αλλά και όταν το αίτημα αυτό απέτυχε ή όταν ο χρήστης δεν έχει ορίσει καμία εικόνα προφίλ καθόλου. Αυτές οι εικόνες είναι συνήθως βασισμένες σε φορέα, και λόγω του μικρού τους μεγέθους είναι ένας καλός υποψήφιος που πρέπει να υπογραμμιστεί.
  • Στερεό χρώμα: Πάρτε ένα χρώμα από την εικόνα και χρησιμοποιήστε το ως χρώμα φόντου για το σύμβολο κράτησης θέσης. Αυτό μπορεί να είναι το κυρίαρχο χρώμα, το πιο ζωντανό ... Η ιδέα είναι ότι βασίζεται στην εικόνα που φορτώνετε και θα σας βοηθήσει να κάνετε τη μετάβαση ανάμεσα σε καμία εικόνα και εικόνα χωρίς φορτίο.
  • Θολή εικόνα: Ονομάζεται επίσης τεχνική θόλωσης. Κάνετε μια μικροσκοπική έκδοση της εικόνας και στη συνέχεια μετάβαση στο πλήρες. Η αρχική εικόνα είναι μικροσκοπική τόσο σε εικονοστοιχεία όσο και σε kBs. Για να αφαιρέσετε αντικείμενα, η εικόνα μεγεθύνεται και θολώνεται. Έχω γράψει προηγουμένως για αυτό το θέμα στο πώς το Medium κάνει προοδευτική φόρτωση εικόνας, χρησιμοποιώντας το WebP για να δημιουργήσει μικροσκοπικές εικόνες προεπισκόπησης και περισσότερα παραδείγματα προοδευτικής φόρτωσης εικόνας.

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

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

Χρησιμοποιώντας κλίσεις ως φόντο. Στιγμιότυπο οθόνης από το Gradify, το οποίο δεν είναι πλέον συνδεδεμένο στο διαδίκτυο. Κωδικοποίηση στο GitHub.

Μια άλλη τεχνική είναι η χρήση των SVG βασισμένων στην εικόνα, η οποία παίρνει κάποια έλξη με πρόσφατα πειράματα και αμυχές.

Βάσεις κειμένου που βασίζονται σε SVG

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

Ακρες

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

Σχήματα

Το SVG μπορεί επίσης να χρησιμοποιηθεί για να σχεδιάσει περιοχές από την εικόνα αντί για άκρα / σύνορα. Κατά κάποιο τρόπο, θα δημιουργήσουμε μια εικόνα bitmap για να δημιουργήσουμε ένα σύμβολο κράτησης θέσης.

Πίσω στις ημέρες προσπαθούσα να κάνω κάτι παρόμοιο με τα τρίγωνα. Μπορείτε να δείτε το αποτέλεσμα στις συνομιλίες μου στο CSSConf και το Render Conf.

Ο κώδικας παραπάνω είναι μια απόδειξη της έννοιας ενός SVG-based placeholder που αποτελείται από 245 τρίγωνα. Η παραγωγή των τριγώνων βασίζεται στο τριγωνισμό Delaunay χρησιμοποιώντας Polyserver του Possan. Όπως αναμενόταν, όσο περισσότερα τρίγωνα χρησιμοποιεί το SVG, τόσο μεγαλύτερο είναι το μέγεθος του αρχείου.

Primitive και SQIP, μια τεχνική LQIP με βάση το SVG

Ο Tobias Baldauf εργάζεται σε μια άλλη τεχνική χαμηλής ποιότητας αντικειμενοστράκτη εικόνας χρησιμοποιώντας SVG που ονομάζεται SQIP. Πριν από το σκάψιμο στο ίδιο το SQIP θα δώσω μια επισκόπηση του Primitive, μιας βιβλιοθήκης στην οποία βασίζεται το SQIP.

Το Primitive είναι αρκετά συναρπαστικό και σίγουρα σας προτείνω να το ελέγξετε. Μετατρέπει μια εικόνα bitmap σε ένα SVG που αποτελείται από αλληλεπικαλυπτόμενα σχήματα. Το μικρό του μέγεθος το καθιστά κατάλληλο για να το εισάγει κατευθείαν στη σελίδα. Μία λιγότερο μετ 'επιστροφής, και ένα σημαντικό placeholder μέσα στο αρχικό φορτίο HTML.

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

Για να καταλάβω πώς λειτουργεί το Primitive, το έτρεξα μέσα από μερικές εικόνες. Δημιούργησα SVG για το έργο τέχνης χρησιμοποιώντας 10 σχήματα και 100 σχήματα:

Επεξεργασία αυτής της εικόνας χρησιμοποιώντας Primitive, χρησιμοποιώντας 10 σχήματα και 100 σχήματα.Επεξεργασία αυτής της εικόνας χρησιμοποιώντας Primitive, χρησιμοποιώντας 10 σχήματα και 100 σχήματα.

Όταν χρησιμοποιούμε 10 σχήματα οι εικόνες αρχίζουμε να κατανοούμε την αρχική εικόνα. Στο πλαίσιο των εντολών κράτησης εικόνων υπάρχει η δυνατότητα να χρησιμοποιηθεί αυτό το SVG ως σύμβολο κράτησης θέσης. Στην πραγματικότητα, ο κώδικας για το SVG με 10 σχήματα είναι πολύ μικρός, περίπου 1030 bytes, ο οποίος μειώνεται στα ~ 640 bytes όταν περνάει την έξοδο μέσω του SVGO.

         

Οι εικόνες που δημιουργήθηκαν με 100 σχήματα είναι μεγαλύτερες, όπως αναμενόταν, βάρους ~ 5kB μετά από SVGO (8kB πριν). Έχουν ένα μεγάλο επίπεδο λεπτομέρειας με ένα ακόμα μικρό ωφέλιμο φορτίο. Η απόφαση για το πόσα τρίγωνα θα χρησιμοποιήσει θα εξαρτηθεί σε μεγάλο βαθμό από τον τύπο της εικόνας (π.χ. αντίθεση, ποσότητα χρωμάτων, πολυπλοκότητα) και επίπεδο λεπτομέρειας.

Θα ήταν δυνατό να δημιουργηθεί ένα σενάριο παρόμοιο με το cpeg-dssim που τροποποιεί την ποσότητα των χρησιμοποιούμενων σχημάτων μέχρι να επιτευχθεί ένα όριο δομικής ομοιότητας (ή μέγιστος αριθμός σχημάτων στη χειρότερη περίπτωση).

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

SQIP

Τα ίδια τα λόγια του Tobias:

Το SQIP είναι μια προσπάθεια να βρεθεί μια ισορροπία ανάμεσα σε αυτά τα δύο άκρα: χρησιμοποιεί το Primitive για να δημιουργήσει ένα SVG που αποτελείται από αρκετά απλά σχήματα που προσεγγίζουν τα κύρια χαρακτηριστικά που φαίνονται μέσα στην εικόνα, βελτιστοποιεί το SVG χρησιμοποιώντας το SVGO και προσθέτει ένα Gaussian Blur filter . Αυτό δημιουργεί ένα σύμβολο κράτησης θέσης SVG το οποίο ζυγίζει μόνο ~ 800-1000 bytes, φαίνεται ομαλό σε όλες τις οθόνες και παρέχει ένα οπτικό σύνθημα των περιεχομένων της εικόνας που έρχονται.

Το αποτέλεσμα είναι παρόμοιο με τη χρήση μιας μικροσκοπικής εικόνας με σύμβολο κράτησης θέσης για την τεχνική θόλωσης (τι κάνει το Medium και άλλες τοποθεσίες). Η διαφορά είναι ότι αντί να χρησιμοποιούμε μια εικόνα bitmap, π.χ. JPG ή WebP, το σύμβολο κράτησης θέσης είναι το SVG.

Εάν εκτελέσουμε το SQIP εναντίον των αρχικών εικόνων, θα λάβουμε το εξής:

Οι εικόνες εξόδου χρησιμοποιούν το SQIP για την πρώτη εικόνα και η δεύτερη για την εικόνα.

Η έξοδος SVG είναι ~ 900 bytes και με την επιθεώρηση του κώδικα μπορούμε να εντοπίσουμε το φίλτρο feGaussianBlur που εφαρμόζεται στην ομάδα σχημάτων:

   (4) (7,8125) "fill-opacity =". 5 "> <ελλειπτική διαδρομή =" # 817c70 "d =" M0 0h2000v2000H0z " "=" 1 "ry =" 1 "μετασχηματίζει =" μήτρα (50.41098 -3.7951 11.14787 148.07886 107 194.6) "/>  <ελλειψία πλήρωσης = "# fff4bd" rx = "1" ry = "1" μετασχηματισμός = "μήτρα (35.40604 -5.49219 14.85017 95.73337 16.4 123.6)" />    

Το SQIP μπορεί επίσης να εξάγει μια ετικέτα εικόνας με τα περιεχόμενα του SVG Βάση 64 κωδικοποιημένη:

Προσθήκη περιγραφικού άλλου κειμένου

Σιλουέτες

Είχαμε μόνο μια ματιά στη χρήση SVGs για άκρες και πρωτόγονα σχήματα. Μια άλλη δυνατότητα είναι να διανυσματίσουν τις εικόνες "εντοπίζοντας" τους. Ο Mikael Ainalem μοιράστηκε έναν κώδικα πριν από λίγες ημέρες, δείχνοντας πώς να χρησιμοποιήσει μια σιλουέτα 2 χρωμάτων ως σύμβολο κράτησης θέσης. Το αποτέλεσμα είναι πραγματικά όμορφο:

Τα SVG σε αυτή την περίπτωση έχουν σχεδιαστεί με το χέρι, αλλά η τεχνική δημιούργησε γρήγορα ενοποιήσεις με εργαλεία για την αυτοματοποίηση της διαδικασίας.

  • Ο Gatsby, μια στατική γεννήτρια τοποθεσιών που χρησιμοποιεί το React υποστηρίζει αυτά τα εντοπισμένα SVG τώρα. Χρησιμοποιεί ένα JS PORT of potrace για να διανείμει τις εικόνες.
  • Craft 3 CMS, η οποία πρόσθεσε επίσης την υποστήριξη για σιλουέτες. Χρησιμοποιεί ένα λιμάνι PHP των potrace.
  • image-trace-loader, ένας φορτωτής Webpack που χρησιμοποιεί το potrace για να επεξεργαστεί τις εικόνες.

Είναι επίσης ενδιαφέρον να δούμε μια σύγκριση των αποτελεσμάτων μεταξύ του φορτωτή webpack του Emil (βασισμένου σε potrace) και των χειροκίνητων SVG των Mikael.

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

Περίληψη

Έχουμε δει διάφορα εργαλεία και τεχνικές για τη δημιουργία εικόνων SVG από εικόνες και τη χρήση τους ως placeholders. Ο ίδιος τρόπος με τον οποίο το WebP είναι μια εκπληκτική μορφή για μικρογραφίες, το SVG είναι επίσης μια ενδιαφέρουσα μορφή για χρήση σε αντικείμενα κράτησης θέσης. Μπορούμε να ελέγξουμε το επίπεδο λεπτομέρειας (και κατά συνέπεια, το μέγεθος), είναι εξαιρετικά συμπιεστό και εύκολο να χειριστεί με CSS και JS.

Επιπλέον πόροι

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

  • Η γεωμετρία είναι ένα λιμάνι της Primitive γραμμένο στο Haxe. Υπάρχει επίσης μια εφαρμογή JS που μπορείτε να δοκιμάσετε απευθείας στον browser σας.
  • Το Primitive.js, το οποίο είναι λιμάνι του Primitive στο JS. Επίσης, primitive.nextgen, η οποία είναι μια θύρα της εφαρμογής Primitive desktop χρησιμοποιώντας Primitive.js και Electron.
  • Υπάρχουν μερικοί λογαριασμοί Twitter όπου μπορείτε να δείτε παραδείγματα εικόνων που δημιουργούνται με Primitive και Geometrize. Ελέγξτε το @PrimitivePic και @Geometrizer.
  • imagetracerjs, το οποίο είναι ένας ιχνηλάτης εικόνας και ένας διανυσματικός δείκτης γραμματοσειράς JavaScript. Υπάρχουν επίσης θύρες για Java και Android.
  • Canvas-Graphics, μερική υλοποίηση του JS Canvas API στην PHP γύρω από το GD.

σχετικές αναρτήσεις

Εάν έχετε απολαύσει αυτή τη θέση, ελέγξτε έξω αυτές τις άλλες θέσεις που έχω γράψει για τις τεχνικές φόρτωσης εικόνων:

Μπορείτε να διαβάσετε περισσότερα από τα άρθρα μου στο jmperezperez.com.