Βελτιστοποίηση εικόνων για το SharePoint Online

Η ταχύτητα φόρτωσης μιας ιστοσελίδας εξαρτάται από το συνολικό μέγεθος όλων των στοιχείων που απαιτούνται για την απόδοση της σελίδας, όπως εικόνες, HTML, JavaScript και CSS. Οι εικόνες είναι ένας εξαιρετικός τρόπος για να κάνετε την τοποθεσία σας πιο ελκυστική, αλλά το μέγεθός τους μπορεί να επηρεάσει τις επιδόσεις. Η βελτιστοποίηση των εικόνων μέσω συμπίεσης και αλλαγής μεγέθους και η χρήση sprite μπορεί να μετριάσει τις επιπτώσεις των πολύ μεγάλων εικόνων. Χρησιμοποιώντας τις αποδόσεις εικόνας του SharePoint, μπορείτε να αποστείλετε μία μεγάλη εικόνα και να εμφανίζετε ενότητες της εικόνας, επιτρέποντας την επαναχρησιμοποίησή της αντί για την επαναφόρτωσή της.

Χρήση sprite για την επιτάχυνση της φόρτωσης εικόνων στο SharePoint Online

Τα sprite εικόνων περιέχουν πολλές μικρότερες εικόνες. Με τη χρήση CSS, επιλέγετε ένα τμήμα της σύνθετης εικόνας που θα εμφανίζεται σε ένα συγκεκριμένο τμήμα της σελίδας με απόλυτη τοποθέτηση. Ουσιαστικά, μετακινείτε μία μόνο εικόνα σε διάφορες θέσεις στη σελίδα αντί για τη φόρτωση πολλών εικόνων και κάνετε ορατό ένα μικρό τμήμα της εικόνας μέσω ενός μικρού παραθύρου, όπου το απαιτούμενο τμήμα της εικόνας sprite εμφανίζεται στον τελικό χρήστη. Το SharePoint Online χρησιμοποιεί sprite για να εμφανίσει τα διάφορα εικονίδια στο sprite spcommon.png.

Θέματα που καλύπτονται εδώ

  • Συμπίεση εικόνας

  • Βελτιστοποίηση εικόνας

  • Αποδόσεις εικόνας του SharePoint

Στιγμιότυπο οθόνης του spcommon

Αυτό μπορεί να βελτιώσει τις επιδόσεις, επειδή γίνεται λήψη μίας μόνο εικόνας αντί για πολλές η οποία, στη συνέχεια, αποθηκεύεται στο cache και επαναχρησιμοποιείται. Ακόμη και αν η εικόνα δεν παραμείνει στο cache, με τη χρήση μίας εικόνας αντί για πολλές, αυτή η μέθοδος μειώνει το συνολικό αριθμό των αιτήσεων HTTP στο διακομιστή, το οποίο μειώνει τους χρόνους φόρτωσης των σελίδων. Αυτό αποτελεί στην πραγματικότητα μια μορφή δημιουργίας δέσμης εικόνων. Αυτή είναι μια πολύ χρήσιμη τεχνική εφόσον οι εικόνες δεν αλλάζουν πολύ συχνά, όπως, για παράδειγμα, στην περίπτωση των εικονιδίων, όπως φαίνεται στο παράδειγμα του SharePoint που αναφέρθηκε παραπάνω. Για να το επιτύχετε εύκολα αυτό στο Microsoft Visual Studio, μπορείτε να χρησιμοποιήσετε τα Web Essentials, ένα έργο ανοιχτού κώδικα τρίτων που βασίζεται στην κοινότητα. Για περισσότερες πληροφορίες, ανατρέξτε στο θέμα Ελαχιστοποίηση και δημιουργία δέσμης στο SharePoint Online.

Χρήση συμπίεσης και βελτιστοποίησης εικόνων για επιτάχυνση της φόρτωσης σελίδων στο SharePoint

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

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

Επιτάχυνση των λήψεων σελίδων με χρήση αποδόσεων εικόνας του SharePoint

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

Σημείωση: Οι αποδόσεις είναι διαθέσιμες στο SharePoint μόνο όταν είναι ενεργοποιημένη η δημοσίευση. Μπορείτε να ενεργοποιήσετε τη δημοσίευση στην περιοχή Ρυθμίσεις > Ρυθμίσεις τοποθεσίας > Διαχείριση δυνατοτήτων τοποθεσίας > Δημοσίευση στον SharePoint Server. Η επιλογή δεν θα εμφανίζεται εάν δεν το κάνετε.

Η αλλαγή μεγέθους απόδοσης εικόνας λειτουργεί λαμβάνοντας τη μικρότερη διάσταση που έχετε καθορίσει, είτε το πλάτος είτε το ύψος, και, στη συνέχεια, αλλάζοντας το μέγεθος της εικόνας έτσι ώστε η άλλη διάσταση να αλλάζει αυτόματα, ανάλογα με τις κλειδωμένες αναλογίες εικόνας. Από προεπιλογή, περικόπτει την εικόνα από το κέντρο κατά τις υπόλοιπες διαστάσεις. Για παράδειγμα, εάν έχετε καθορίσει απόδοση πλάτους 100px και ύψους 50px και η αρχική εικόνα έχει πλάτος 1000px και ύψος 800px, το μέγεθός της θα αλλάξει έτσι ώστε η διάσταση 800px να είναι τώρα 50px και η διάσταση 1000px (τώρα 62,5px) περικόπτεται από το κέντρο της εικόνας.

Τα βήματα είναι σχετικά απλά, αλλά για να χρησιμοποιήσουν οι εικόνες τις αποδόσεις, οι αποδόσεις πρέπει να υπάρχουν στην τοποθεσία του SharePoint πριν από την προσθήκη των εικόνων. Επιπλέον, πρέπει επίσης να έχετε ενεργοποιήσει τις δυνατότητες Υποδομής δημοσίευσης του SharePoint Server (Επίπεδο συλλογής τοποθεσιών) και Δημοσίευσης του SharePoint Server (Επίπεδο τοποθεσίας).

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

  2. Σε ένα πρόγραμμα περιήγησης web, μεταβείτε στην τοποθεσία ανώτατου επιπέδου της συλλογής τοποθεσιών δημοσίευσης.

  3. Επιλέξτε το εικονίδιο Ρυθμίσεις.

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

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

    Στιγμιότυπο οθόνης της απόδοσης εικόνας
  5. Στη σελίδα Αποδόσεις εικόνας, επιλέξτε Προσθήκη νέου στοιχείου.

    Στιγμιότυπο οθόνης της επιλογής "Προσθήκη νέου στοιχείου"
  6. Στη σελίδα Νέα απόδοση εικόνας, στο πλαίσιο Όνομα, πληκτρολογήστε ένα όνομα για την απόδοση.

  7. Στα πλαίσια κειμένου Πλάτος και Ύψος, πληκτρολογήστε το πλάτος και το ύψος, σε pixel, της απόδοσης και, στη συνέχεια, επιλέξτε Αποθήκευση.

    Στιγμιότυπο οθόνης του ονόματος απόδοσης εικόνας

Προσαρμοσμένη περικοπή με αποδόσεις εικόνας στο SharePoint

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

Κοινή χρήση Facebook Facebook Twitter Twitter Ηλεκτρονικό ταχυδρομείο Ηλεκτρονικό ταχυδρομείο

Σας βοήθησαν αυτές οι πληροφορίες;

Πολύ ωραία! Έχετε άλλα σχόλια;

Πώς μπορούμε να το βελτιώσουμε;

Σας ευχαριστούμε για τα σχόλιά σας!

×