Πώς να βελτιστοποιήσετε τις εικόνες για τον ιστότοπό σας και να τις κάνετε σε όλες τις συσκευές (Responsive Images for Mobile, Desktop, Tablet)

Γιατί να ασχοληθείτε με τη βελτιστοποίηση των εικόνων; Επιτρέψτε μου να σας ρωτήσω αυτό. πότε ήταν η τελευταία φορά που είδατε έναν ιστότοπο χωρίς εικόνες σε αυτόν? "Ποτέ" θα ήταν η σωστή απάντηση. ��‍♂️ Οι εικόνες είναι πολύ απαραίτητες. Και αυτό δεν αφορά ούτε αυτήν την εξαιρετική φωτογραφία μετοχών που πρέπει να ακολουθήσετε "10 διαδικτυακές συμβουλές μάρκετινγκ" Θέση. Οι εικόνες είναι χρήσιμες για πολλαπλούς σκοπούς. Σκεφτείτε διατάξεις, στοιχείο σχεδίασης, λογότυπα, εικόνες προφίλ και, ναι, εικόνες ιστολογίου.


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

  • Τρόπος παράδοσης αποκριτικών εικόνων σε πολλές συσκευές?
  • Πώς να τα κάνετε να φαίνονται υπέροχα σε όλες αυτές τις συσκευές?
  • Και, το πιο σημαντικό, πώς να βεβαιωθείτε ότι φορτώνουν σε αξιοπρεπή ώρα?

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

Πώς να βελτιστοποιήσετε τις εικόνες για τον ιστότοπό σας και να τις κάνετε σε όλες τις συσκευές

�� Γιατί να μας ακούσετε?

Οι εικόνες υπήρξαν ένα κρίσιμο θέμα για μας τελευταία, και αυτό οφείλεται σε ένα από τα νεότερα εργαλεία της οικογένειάς μας – Optimole.

Το Optimole είναι μια υπηρεσία βελτιστοποίησης εικόνας set-it-and-Ξεχάστε το & εργαλείο. Θεωρούμε ότι είναι η καλύτερη λύση στον Ιστό και μπορούμε να την αποδείξουμε! Αλλά είναι μια συζήτηση για άλλη φορά. Είτε έτσι είτε αλλιώς, με τα χρόνια, μάθαμε πολλά για το πώς να βελτιστοποιήσουμε σωστά τις εικόνες. Θέλουμε να μοιραστούμε μερικές από αυτές τις γνώσεις μαζί σας σήμερα.

�� Γιατί πρέπει να βελτιστοποιήσετε τις εικόνες στον ιστότοπό σας

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

δοκιμασία ταχύτητας

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

Τα οφέλη μπορεί να είναι τεράστια, και ειδικά όταν πρόκειται για επαναλαμβανόμενες εικόνες – εικόνες που πρέπει να φορτώνονται σε κάθε μεμονωμένη ιστοσελίδα. Αυτά είναι πράγματα όπως φόντο, στοιχεία σχεδίασης, λογότυπα, εικονίδια κ.λπ. Μερικές φορές η βελτιστοποίηση μόνο μιας εικόνας φόντου μπορεί να έχει ως αποτέλεσμα τη μείωση του μεγέθους της σελίδας σας κατά 70%+.

Δείτε αυτό το παράδειγμα:

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

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

Πρώτα απ ‘όλα, πιθανότατα δεν πρέπει να εμφανίζετε το ίδιο σύνολο εικόνων στους επισκέπτες της επιφάνειας εργασίας σας και στους επισκέπτες της κινητής τηλεφωνίας σας. Τα περιβάλλοντα είναι απλώς πολύ διαφορετικά – αυτό περιλαμβάνει τα μεγέθη της οθόνης, τον προσανατολισμό (συνήθως σε κατακόρυφο) και ακόμη και τη νοοτροπία του ατόμου που διαβάζει.

Εξάλλου, τα δεδομένα προτείνουν ότι τα σχέδια για κινητά με λιγότερες εικόνες τείνουν να αποδίδουν καλύτερα όσον αφορά τις μετατροπές.

Όταν συγκεντρωθούν όλα, υπάρχουν μερικά πράγματα που πρέπει να προσέξουμε κατά την παράδοση αποκριτικών εικόνων σε πολλές συσκευές:

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

How️ Πώς να βελτιστοποιήσετε τις εικόνες και να τις παραδώσετε σε όλους τους τύπους συσκευών

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

�� Επιλέξτε τη σωστή μορφή

Ας ξεκινήσουμε με την παλιά ερώτηση: PNG ή JPG?

Λένε οι περισσότεροι "JPG όλη την ώρα!" Αλλά αυτό δεν είναι πραγματικά σωστό:

PNG εναντίον JPG

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

Αλλά η λέξη-κλειδί εδώ είναι "τα πιο κοινά σενάρια." Στην πραγματικότητα, εάν αυτό που έχετε είναι μια πολύπλοκη εικόνα με πολλά χρώματα και μεταβάσεις χρωμάτων (γνωστές και πολλές "πληροφορίες χρώματος"), τότε τα JPG θα είναι πράγματι καλύτερα. Σκεφτείτε τυπικές φωτογραφίες. Αυτά λειτουργούν καλύτερα ως JPGs.

Ωστόσο, εάν έχετε μια εικόνα που είναι λίγο πιο απλή, το PNG θα κερδίζει συνεχώς.

Εξετάστε το ακόλουθο παράδειγμα. Εδώ είναι τέσσερις εικόνες:

εικόνα-1-αεικόνα 1-α: JPG

εικόνα-1-βεικόνα 1-β: PNG

εικόνα-2-αεικόνα 2-α: JPG

εικόνα-2-βεικόνα 2-β: PNG

  • Η εικόνα 1-a είναι 312 KB
  • η εικόνα 2-a είναι 196 KB

Δοκιμάστε να μαντέψετε τα μεγέθη των άλλων δύο εικόνων…

Η απάντησή σου:

Λανθασμένος!

  • η εικόνα 1-b είναι 1,3 MB (πιθανότατα μαντέψατε)
  • η εικόνα 2-b είναι 106 KB (περιμένετε, τι ;!)

Όπως μπορείτε να δείτε, το PNG κερδίζει απλές εικόνες με χαμηλό χρώμα.

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

�� Μάθημα 1:

Μην πηγαίνετε πάντα για JPG. Προβλέψτε πόσο μεγάλη θα είναι η εικόνα βάσει των περιεχομένων της και, στη συνέχεια, χρησιμοποιήστε τον σωστό τύπο εικόνας.

Τώρα για λίγο πιο έγκαιρη ερώτηση: SVG; WebP?

SVG και WebP

Το SVG και το WebP είναι λίγο λιγότερο συνηθισμένοι τύποι εικόνων στον ιστό, αλλά είναι και οι δύο εξαιρετικοί αρκεί να τους χρησιμοποιείτε όσο θα έπρεπε. Επιτρέψτε μου να διευκρινίσω:

  • Το SVG είναι μια μορφή διανυσματικής εικόνας βασισμένη σε XML. Τα περιεχόμενα της εικόνας μπορούν να οριστούν σε ένα απλό αρχείο XML – το ίδιο αρχείο XML που θα χρησιμοποιούσατε για άλλους βασικούς σκοπούς επεξεργασίας δεδομένων. Αυτό κάνει το SVG μια καλή μορφή, αρκεί να ασχολείστε με μια απλή διανυσματική εικόνα.
  • Το WebP είναι μια νέα μορφή από την Google. Υποστηρίζουν ότι το WebP είναι 25-34% μικρότερο σε μέγεθος από συγκρίσιμα JPEG και 26% μικρότερο από συγκρίσιμα PNG.

Ποιο είναι λοιπόν το αλίευμα; Μπορείτε να βελτιστοποιήσετε τις εικόνες μετατρέποντάς τις όλες σε SVG και WebPs?

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

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

Στα περισσότερα σενάρια, τα SVG δεν είναι μια μορφή που θα χρησιμοποιείτε πολύ συχνά.

Τώρα, πάνω WebP. Η μορφή είναι εξαιρετική, και στις περισσότερες περιπτώσεις, εξοικονομεί πράγματι πολύ χώρο στο δίσκο όπως υποσχέθηκε. Δείτε αυτές τις δύο παραδείγματα εικόνων:

παράδειγμα εικόνας jpg

παράδειγμα εικόνας ιστοσελίδας

  • η αρχική έκδοση JPG είναι 204 KB
  • το WebP είναι 58 KB

Το κόλπο είναι ότι δεν υποστηρίζουν όλα τα προγράμματα περιήγησης WebP. Στην πραγματικότητα, μπορεί να μην βλέπετε καν την εικόνα WebP που έχω χρησιμοποιήσει παραπάνω. Τη στιγμή της σύνταξης, το WebP λειτουργεί σε Google Chrome, Firefox, Edge και Opera. Φυσικά, οι παλαιότερες εκδόσεις δεν υποστηρίζουν τη μορφή.

Αυτό σημαίνει στην πράξη ότι η προσθήκη εικόνας WebP δεν είναι τόσο απλή όσο η προσθήκη JPG ή PNG.

Θέλω να πω, τεχνικά μπορείτε να χρησιμοποιήσετε ένα κομμάτι κώδικα όπως αυτό:

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

Για να χρησιμοποιήσετε αποτελεσματικά το WebP, θα πρέπει να παρέχετε εναλλακτικές εικόνες. Για παράδειγμα:

Αυτό σημαίνει πολύ περισσότερη δουλειά. Φανταστείτε ότι πρέπει να δημιουργήσετε μια ετικέτα έτσι κάθε φορά που θέλετε να προσθέσετε μια εικόνα WebP σε μια ανάρτηση ιστολογίου ή σελίδα. Και επιτρέψτε μου να σας σταματήσω εκεί, όχι, το WordPress δεν υποστηρίζει εγγενώς το WebP, οπότε θα πρέπει πράγματι να το κάνετε με το χέρι.

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

Μπορείτε να αποθηκεύσετε εικόνες ως WebP στο Photoshop ή να χρησιμοποιήσετε ένα εργαλείο όπως XnConvert (Ελεύθερος).

�� Μάθημα # 2:

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

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

��️ Συμπίεση εικόνων

Η συμπίεση εικόνας είναι σαν μαγεία. Επιτρέψτε μου να σας δείξω:

Αυτή είναι η ίδια εικόνα JPG, αποθηκευμένη μόνο σε διαφορετικό επίπεδο συμπίεσης (συχνά αναφέρεται ως επίπεδο ποιότητας):

coon-100%100% ποιότητα

coon-95%95% ποιότητα

coon-85%85% ποιότητα

coon-50%50% ποιότητα

Αν σας αρέσουν τα περισσότερα άτομα, τότε τα πρώτα τρία φαίνονται ίδια για εσάς. Το τέταρτο αρχίζει να κοιτάζει "λίγο χειρότερο." (Δεξί κλικ και "Άνοιγμα εικόνας σε Νέα καρτέλα")

Ακολουθεί ο χώρος στο δίσκο που χρειάζεται κάθε μία από αυτές τις εικόνες:

  • 100% ποιότητα: 969 KB
  • 95%: 439 KB
  • 85%: 186 KB
  • 50%: 102 KB

Τεράστια, σωστά ;! Μπορείτε να φτάσετε από ~ 1 MB σε ~ 500 KB χωρίς καμία αισθητή απώλεια ποιότητας, αλλάζοντας απλώς τη συμπίεση από 100% σε 95%.

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

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

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

Αλλά σε άλλους τομείς, μπορείτε να είστε λίγο πιο χαλαροί. Για παράδειγμα, το φόντο δεν χρειάζεται να είναι 100% ευκρινές. Γενικά, όλες οι εικόνες με τις οποίες δεν επισκέπτεται άμεσα ο επισκέπτης μπορεί να έχουν χαμηλότερη ποιότητα.

Δύο από τα αγαπημένα μου εργαλεία που μπορούν να σας βοηθήσουν εδώ είναι:

ImageOptim για συμπίεση επιφάνειας εργασίας σε Mac. Μπορείτε απλά να τραβήξετε μια εικόνα από την επιφάνεια εργασίας, να την μεταφέρετε και να την αποθέσετε στο ImageOptim και, στη συνέχεια, το εργαλείο κάνει τη μαγεία του και αντικαθιστά την εικόνα προέλευσης όταν τελειώσει.

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

ImageOptim - εξαιρετικό εργαλείο για τη βελτιστοποίηση εικόνων στην επιφάνεια εργασίας σας

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

optimole - εξαιρετικό εργαλείο βελτιστοποίησης εικόνων στο cloud

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

Με άλλα λόγια, συμπιέστε πάντα τα PNG σας!

Δείτε αυτές τις τρεις εικόνες:

kwf-1
kwf-2

kwf-3

Φαίνονται το ίδιο, αλλά στην πραγματικότητα καταλαμβάνουν:

  • 346 KB
  • 215 KB
  • 100 KB

Δοκιμάστε να μαντέψετε ποια είναι η οποία.

Τρία εργαλεία για να συμπιέσετε τις εικόνες σας και να τις κάνετε μικρότερες:

  • ImageOptim πάλι. Αλλά αυτό απαιτεί πολύ χρόνο με PNG, οπότε αν έχετε πολλά από αυτά για επεξεργασία, ίσως θελήσετε να φτιάξετε τον εαυτό σας ένα φλιτζάνι καφέ ενώ το εργαλείο λειτουργεί.
  • ImageAlpha. Πολύ πιο γρήγορα από το ImageOptim. Είναι η λύση μου για επιτραπέζιους υπολογιστές για PNG.
  • Optimole. Δεν προκαλεί έκπληξη, το Optimole χειρίζεται επίσης τη συμπίεση PNG. Όλα συμβαίνουν στον αυτόματο πιλότο.

�� Μάθημα # 3:

Συμπιέστε τα JPG σας για να φτάσετε σε αποδεκτό επίπεδο ποιότητας έναντι χώρου στο δίσκο.

Συμπιέστε πάντα τα PNG σας.

�� Προβάλετε εικόνες με τις σωστές διαστάσεις

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

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

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

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

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

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

Στη συνέχεια, μπορείτε να δημιουργήσετε σημεία διακοπής για 800 px και 550 px (κοινές τιμές) για να καλύψετε σενάρια tablet και κινητών. Αν και αυτό δεν θα σας δώσει 100% τέλεια αποτελέσματα σε όλες τις συσκευές, τουλάχιστον βελτιστοποιείτε σε λογικό βαθμό και διατηρείτε τις εικόνες σας υπό έλεγχο.

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

Ακολουθεί ένα παράδειγμα του τρόπου χειρισμού του πραγματικού κώδικα εμφάνισης:

Η μαγεία του χαρακτηριστικού srcset είναι ότι το πρόγραμμα περιήγησης κοιτάζει τι υπάρχει και στη συνέχεια επιλέγει την καλύτερη εικόνα με βάση τη συσκευή που χρησιμοποιείται.

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

Αυτό το είδος λύσης διασφαλίζει ότι η εικόνα δεν καταλαμβάνει ολόκληρη την οθόνη 4K πλάτους 3840px. Ωστόσο, θα εξακολουθεί να καταλαμβάνει ολόκληρη την οθόνη όταν προβάλλεται σε κινητό.

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

⭐ Επαγγελματικό τέχνασμα: Αναζητήστε εικόνες που έχουν διαστάσεις 10% μικρότερες από αυτές που χρειάζονται και, στη συνέχεια, αφήστε το πρόγραμμα περιήγησης να τις αυξήσει. Αυτό θα σας εξοικονομήσει επιπλέον χώρο και εύρος ζώνης. Για παράδειγμα, εάν χρειάζεστε μια εικόνα που είναι 500 × 500 εικονοστοιχεία, μπορείτε να κλιμακώσετε την εικόνα σας σε 450 × 450 εικονοστοιχεία και, στη συνέχεια, να αφήσετε το πρόγραμμα περιήγησης να την κλιμακώσει έως και 500. Αυτό εξαρτάται από την εικόνα, αλλά στις περισσότερες περιπτώσεις, ο χρήστης δεν θα το παρατηρήσετε.

�� Μάθημα # 4:

Χρησιμοποιήστε τα σωστά μεγέθη εικόνας για το σχέδιό σας.

Δημιουργήστε σημεία διακοπής.

Δημιουργήστε πολλές εκδόσεις της ίδιας εικόνας για να καλύψετε τα σημεία διακοπής.

Χρησιμοποιήστε τα χαρακτηριστικά srcset και size κατά την εμφάνιση των εικόνων.

�� Βελτιστοποίηση εικόνων για οθόνες Retina και HiDPI

Το άλλο άκρο του φάσματος διαστάσεων εικόνας αφορά εικόνες φιλικές προς το HiDPI.

Η ιστορία είναι ότι οι οθόνες επιτραπέζιων υπολογιστών συνεχίζουν να μεγαλώνουν και τα εικονοστοιχεία τους συνεχίζουν να συσκευάζονται όλο και πιο πυκνά. Δεν είναι ασυνήθιστο αυτές τις μέρες να έχουμε 4K οθόνη συσκευασμένη σε φορητό υπολογιστή 15 ιντσών. Η ανάλυση 4K είναι 3840 × 2160 px, οπότε καθένα από αυτά τα pixel πρέπει να είναι πολύ μικρό.

Αυτό δημιουργεί προβλήματα για ιστότοπους. Βασικά, εάν ο ιστότοπός σας ορίζεται ως πλάτος 1100 px τότε, υπό κανονικές συνθήκες, θα καταλάμβανε μόνο περίπου το 25% του διαθέσιμου ακινήτου οθόνης μιας οθόνης 4K. Αυτό δεν είναι βέλτιστο. Ευτυχώς, τα πράγματα δεν λειτουργούν έτσι.

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

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

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

Για να το διορθώσετε, πρέπει να παραδώσετε κλιμακωτές εικόνες για καθεμία από τις αναλογίες μεγέθυνσης. Ακολουθεί ένας απλός κωδικός:

(Εάν το πρόγραμμα περιήγησης δεν υποστηρίζει το srcset, θα χρησιμοποιηθεί το τυπικό src.)

Τώρα, όταν λέω "κλιμακωτές εικόνες," Στην πραγματικότητα εννοώ ότι πρέπει να ξεκινήσετε από το άλλο άκρο. Ξεκινήστε με μια τεράστια εικόνα (ετικέτα 3x), έπειτα κλιμακώστε την και κάντε τη μικρότερη (έως 2x) και τέλος κάντε την 1x και χρησιμοποιήστε την ως προεπιλεγμένη εικόνα.

�� Μάθημα # 5:

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

⌛ Αναβολή φόρτωσης εικόνας

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

Η αργή φόρτωση είναι η φόρτωση εικόνας κατά παραγγελία. Δηλαδή, οι εικόνες φορτώνονται μόνο ένα δευτερόλεπτο πριν τις χρειαστεί ο χρήστης – όχι νωρίτερα, όχι αργότερα. Και αυτό "όχι νωρίτερα, όχι αργότερα" μέρος είναι το κλειδί εδώ.

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

Τούτου λεχθέντος, η τεμπέλη φόρτωση είναι κάτι εύκολο να γίνει σε ιστότοπους WordPress. Μπορείτε να φορτώσετε τεμπέλης με το JavaScript / jQuery, και μπορείτε ακόμη και να γράψετε τον κωδικό για εσάς μόνοι σας εάν θέλετε. Εναλλακτικά, μπορείτε να αποκτήσετε ένα πρόσθετο a3 Lazy Load, ή μπορείτε να χρησιμοποιήσετε Optimole, που περιλαμβάνει μια τεμπέλης μονάδα φόρτωσης.

�� Μάθημα # 6:

Τεμπέλης φόρτωση εικόνων που είναι στο κάτω μέρος.

�� Παράδοση εικόνων μέσω CDN

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

�� Μιλήσαμε για τα CDN σε βάθος εδώ, ρίξτε μια ματιά.

Το TL; DR είναι ότι τα CDN εκμεταλλεύονται ένα δίκτυο διακομιστών που διαθέτουν όλοι ένα αντίγραφο του ιστότοπού σας και στη συνέχεια το παραδίδουν στον επισκέπτη από την πλησιέστερη διαθέσιμη τοποθεσία. Αυτό θα είναι πάντα ταχύτερο από την παράδοση από τον κύριο διακομιστή σας.

Τα CDN με εικόνα λειτουργούν σχεδόν το ίδιο, αλλά εστιάζουν μόνο σε εσείς, το μαντέψατε, εικόνες.

Τις περισσότερες φορές, η λειτουργία είναι απρόσκοπτη από την άποψή σας. Όλες οι εικόνες στον ιστότοπό σας αντικαθίστανται από τις εκδόσεις που φιλοξενούνται σε CDN (που σημαίνει ότι αλλάζουν οι διευθύνσεις URL της εικόνας).

  • Jetpack έχει ενσωματωμένο ένα δημοφιλές CDN εικόνας. Μπορείτε να το χρησιμοποιήσετε δωρεάν, κάτι που είναι υπέροχο. Ο κύριος περιορισμός είναι ότι λειτουργεί μόνο με τις εικόνες στις αναρτήσεις, τις σελίδες και τις επιλεγμένες εικόνες σας. Δεν λειτουργεί για εικόνες που συνθέτουν το σχέδιό σας (μέρη του θέματος, της διάταξης κ.λπ.). Αυτές είναι οι εικόνες που θα μπορούσαν πραγματικά να χρησιμοποιήσουν κάποιο CDN-ing.
  • Optimole διαθέτει ενσωματωμένο CDN ως μέρος της κύριας δυνατότητας βελτιστοποίησης εικόνας. Αυτό δεν περιορίζεται μόνο στις αναρτήσεις και τις σελίδες σας.

�� Μάθημα # 7:

Συνδέστε τον ιστότοπό σας με ένα CDN εικόνας (Jetpack ή Optimole) ή ένα γενικό CDN (MaxCDN / StackPath).

�� Προβάλετε μικρότερες εικόνες στους χρήστες σε αργές συνδέσεις

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

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

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

Εάν προτιμάτε να το χειρίζεστε ξανά στο αυτόματο πιλότο, Optimole!

�� Μάθημα # 8:

Προβάλετε μικρότερες και πιο συμπιεσμένες εικόνες σε χρήστες με πιο αργές συνδέσεις στο Διαδίκτυο.

�� Εργαλεία εργαλεία εργαλεία!

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

  • Optimole – σας επιτρέπει να βελτιστοποιείτε αυτόματα τις εικόνες, να τις συμπιέζετε, να επιλέγετε το σωστό μέγεθος εικόνας για τη θύρα προβολής του επισκέπτη, να προβάλλετε εικόνα μέσω CDN, τεμπέλης φόρτωσης εικόνων, λειτουργεί με χαμηλότερες ταχύτητες σύνδεσης.
  • ImageOptim και ImageAlpha – χειριστείτε τη συμπίεση εικόνας επιφάνειας εργασίας σε Mac. Μπορείς να χρησιμοποιήσεις TinyPNG στο Win. Κάντε το προτού ανεβάσετε εικόνες στον ιστότοπό σας.
  • XnConvert – σας επιτρέπει να μετατρέψετε εικόνες σε WebP.
  • a3 Lazy Load plugin – τεμπέλης φόρτωση όλων των εικόνων.
  • Jetpack plugin – έρχεται με ένα δωρεάν CDN εικόνας.
  • MaxCDN / StackPath – ένα γενικό CDN που θα φροντίζει ολόκληρο τον ιστότοπό σας, όχι μόνο εικόνες.

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

�� Περαιτέρω ανάγνωση:

  • Imagify vs WP Smush vs ShortPixel vs Optimole: Ποιο είναι το καλύτερο για τη βελτιστοποίηση εικόνων WordPress; Σύγκριση μεταξύ κεφαλών
  • Δωρεάν εικόνες για ιστολόγια – πώς να τα αποκτήσετε & χρησιμοποιήστε τα αποτελεσματικά (προειδοποίηση! μη προφανείς συμβουλές, υποστηριζόμενα από δεδομένα)
  • 11 τρόποι για να επιταχύνετε την απόδοση του WordPress
  • Βελτιστοποίηση ταχύτητας ιστότοπου: πώς να το κάνετε το 2019
  • Ταχύτερη φιλοξενία WordPress – οδηγός για αρχάριους για εύρεση ενός

��‍♂️ TL; DR:

Ακολουθεί μια σύνοψη όλων των μεμονωμένων μαθημάτων που κοινοποιούνται παραπάνω:

Μάθημα 1:

Μην πηγαίνετε πάντα για JPG. Προβλέψτε πόσο μεγάλη θα είναι η εικόνα βάσει των περιεχομένων της και, στη συνέχεια, χρησιμοποιήστε τον σωστό τύπο εικόνας.

Μάθημα # 2:

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

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

Μάθημα # 3:

Συμπιέστε τα JPG σας για να φτάσετε σε αποδεκτό επίπεδο ποιότητας έναντι χώρου στο δίσκο.

Συμπιέστε πάντα τα PNG σας.

Μάθημα # 4:

Χρησιμοποιήστε τα σωστά μεγέθη εικόνας για το σχέδιό σας.

Δημιουργήστε σημεία διακοπής.

Δημιουργήστε πολλές εκδόσεις της ίδιας εικόνας για να καλύψετε τα σημεία διακοπής.

Χρησιμοποιήστε τα χαρακτηριστικά srcset και size κατά την εμφάνιση των εικόνων.

Μάθημα # 5:

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

Μάθημα # 6:

Τεμπέλης φόρτωση εικόνων που είναι στο κάτω μέρος.

Μάθημα # 7:

Συνδέστε τον ιστότοπό σας με ένα CDN εικόνας (Jetpack ή Optimole) ή ένα γενικό CDN (MaxCDN / StackPath).

Μάθημα # 8:

Προβάλετε μικρότερες και πιο συμπιεσμένες εικόνες σε χρήστες με πιο αργές συνδέσεις στο Διαδίκτυο.

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

Μην ξεχάσετε να συμμετάσχετε στο μάθημα συντριβής για την επιτάχυνση του ιστότοπού σας στο WordPress. Με μερικές απλές επιδιορθώσεις, μπορείτε να μειώσετε το χρόνο φόρτωσής σας ακόμη και κατά 50-80%:

Διάταξη, παρουσίαση και επεξεργασία από τον Karol K.

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

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map