Μια φωτογραφία είναι χίλιες λέξεις. Μπορεί και περισσότερες, αλλά για έναν τεχνικό websites υπάρχουν λίγες ακόμη παραπάνω. Λόγω επαγγελματικής διαστροφής, μια εικόνα σε μια ιστοσελίδα θα του φέρει στο μυαλό λέξεις όπως SEO, ταχύτητα απόκρισης, ανάλυση, συμπίεση, διαστάσεις και πολλά πολλά kbytes. Η ερώτηση “πως ανεβάζω φωτογραφίες στο site μου” έχει κάποιες απαντήσεις που αξίζουν προσοχή.
Με τι θα ασχοληθούμε λοιπόν σε αυτό το άρθρο.
Θα δούμε γιατί πρέπει να δείξουμε αυτή τη λίγη παραπάνω προσοχή κατά το ανέβασμα φωτογραφιών σε ένα site. Πιο συγκεκριμένα, τα σημεία που θα μας απασχολήσουν είναι:
-
- Γιατί θέλει προσοχή το πως να ανεβάσω φωτογραφίες στο site μου. Και παράλληλα με αυτό, βλέπουμε πως επηρεάζεται από τις εικόνες ενός site
- η ταχύτητα φόρτωσης της ιστοσελίδας
- το SEO της ιστοσελίδας
- Πως προετοιμάζουμε τη φωτογραφία πριν το ανέβασμά της
- Τι ενέργειες πρέπει να κάνουμε κατά το ανέβασμα. Και τέλος,
- Στον Επίλογο θα δούμε τη διαφορά που φέρνουν στη πράξη οι ενέργειες που θα περιγράψουμε.
- Γιατί θέλει προσοχή το πως να ανεβάσω φωτογραφίες στο site μου. Και παράλληλα με αυτό, βλέπουμε πως επηρεάζεται από τις εικόνες ενός site
Και το σημαντικότερο απ΄ όλα; Δεν θα δούμε μόνο τι πρέπει να κάνουμε. Αλλά θα δούμε αναλυτικά και βήμα βήμα, το πως θα το κάνουμε.
Παρατήρηση. Αν δεν σας ενδιαφέρει η θεωρία και οι πολλές αναλύσεις αλλά θέλετε να δείτε μόνο τη πρακτική του όλου θέματος, προσπεράστε τη παρακάτω ενότητα και πιέστε απ΄ ευθείας τον σύνδεσμο “Πως προετοιμάζουμε τη φωτογραφία πριν το ανέβασμά της“. Αλλιώς συνεχίστε με την επόμενη ενότητα, που έχει και ωραίες εικόνες.
Ξεκινάμε.
Γιατί θέλει τη προσοχή μας η μεταφόρτωση εικόνων στο site.
Ταχύτητα ιστοσελίδας
Μεταφόρτωση εικόνων. Είναι η επίσημη ονομασία του “ανεβάζω εικόνες”, καμία δύναμη όμως στο σύμπαν δεν θα μας πιέσει να τη χρησιμοποιήσουμε. Υπάρχουν όμως ισχυρές δυνάμεις που μας οδηγούν στο να κάνουμε τη μεταφόρτωση με προσοχή. Ας δούμε μερικά τεχνικά θέματα, όσο πιο απλά μπορούμε.
Μια ιστοσελίδα, άρα και οι φωτογραφίες που υπάρχουν σε αυτήν, εμφανίζεται σε έναν browser – google chrome, monzila, opera ή ό,τι χρησιμοποιεί ο καθένας. Μια φωτογραφία για τον browser είναι ένα σύνολο πληροφοριών. Ανεβάζοντας μια φωτογραφία καλούμε τον browser του χρήστη που ανοίγει το site μας να διαβάσει τις πληροφορίες. Αν αυτές είναι υπερβολικά πολλές θα αργήσει να τις διαβάσει, άρα θα αργήσει και να φορτώσει το site.
Μια εικόνα που δεν έχει υποστεί επεξεργασία ώστε να μειωθεί ο όγκος πληροφοριών που περιέχει, κάνει την ιστοσελίδα πιο αργή.
Τι είναι αυτός ο όγκος πληροφοριών;
Δείτε τις παρακάτω φωτογραφίες:
Δείχνουν ένα κορίτσι που αναπολεί ευχάριστες στιγμές των οποίων οι μνήμες φωτίζουν το γλυκό πρόσωπό της. Αλλά εμάς δεν μας ενδιαφέρει αυτό. Μας αφορά η ανάλυση της κάθε φώτο.
Ο server μας έχει στείλει στο browser του υπολογιστή του χρήστη ένα σύνολο πληροφοριών κάθε φορά. Κάθε πληροφορία διακινείται σε έναν αριθμό bytes δεδομένων τα οποία ο browser τα μεταφράζει ως pixel, και η κάθε πληροφορία του λέει κάτι σαν “πάρε αυτό το πίξελ και βάλε το εκεί, μετά πάρε το άλλο και βάλε το δίπλα στο προηγούμενο” κτλ. Ο συνολικός αριθμός των pixels ορίζουν τις διαστάσεις της κάθε φωτογραφίας, ο δε αριθμός πληροφοριών (bytes) που μεταφέρεται σε κάθε pixel καθορίζουν την ανάλυσή της.
Όσο πιο μεγάλη σε διαστάσεις και όσο πιο μεγάλη είναι η ανάλυσή της, τόσο μεγαλύτερος είναι και ο όγκος της.
Σε μια ιστοσελίδα θέλουμε εικόνα με μικρό όγκο.
Λίγη ακόμη θεωρία
Ας ρίξουμε μια ακόμη ματιά στις παραπάνω φωτογραφίες.
Κατ΄ αρχάς και οι τρεις εικόνες έχουν τις ίδιες ακριβώς διαστάσεις, και μάλιστα έχουν “τις διαστάσεις που πρέπει”. Αυτό σε εισαγωγικά γιατί χρειάζεται την εξήγησή του, την οποία θα δούμε επίσης παρακάτω. Για την ώρα δεν ασχολούμαστε με το θέμα της διάστασης της εικόνας, αλλά της ανάλυσής της.
Η πρώτη φώτο έχει μέτρια προς υψηλή ανάλυση, έτσι η κοπέλα φαίνεται πανέμορφη και θελκτική. Στη δεύτερη η ανάλυση είναι κακή, χαμηλή, η εικόνα είναι κακής ποιότητας και η κοπέλα μας είναι λίγο άσχημη η καημένη. Η ίδια η εικόνα όμως συγκριτικά, καταλαμβάνει πολύ μικρότερο όγκο από τη πρώτη. Συγκεκριμένα, η πρώτη μεταφέρει 40kb πληροφοριών στον browser ενώ η 2η μόλις 14kb.
Η τρίτη εικόνα. Αν τη δείτε προσεκτικά θα παρατηρήσετε δύο πράγματα. Πρώτον, ότι η ανάλυσή της δεν είναι η καλύτερη του κόσμου – τα pixels φαίνονται έντονα σε αυτή και τη κάνουν να μοιάζει με αναγεννησιακή ζωγραφιά που τα χρώματά της με τους αιώνες έχουν ξεθωριάσει. Το αποτέλεσμα που δίνει δεν είναι τόσο άσχημο (;) όσο αυτό της 2ης, σε καμία περίπτωση όμως δεν έχει τη καθαρότητα της 1ης εικόνας.
Το δεύτερο που ίσως έχετε ήδη παρατηρήσει είναι το εξής. Η ποιότητά της δεν είναι ούτε καλύτερη ούτε χειρότερη από τη ποιότητα της 2ης εικόνας: είναι απλά διαφορετική. Κι επειδή είναι σίγουρα κατώτερης ποιότητας από αυτή της 1ης εικόνας, ίσως ήδη έχετε συμπεράνει ότι ο όγκος της είναι αρκετά μικρότερος από αυτόν της 1ης.
Η πραγματικότητα είναι λίγο διαφορετική. Η τρίτη εικόνα, καταλαμβάνει χώρο 77kbytes.
Jpg vs png
Οι δύο πρώτες εικόνες έχουν διαφορετική μορφή από τη τρίτη. Οι δύο πρώτες είναι σε μορφή jpg και η τελευταία σε png, με τη διαφορά τους να βρίσκεται στο τρόπο αποθήκευσης της κάθε μορφής. Αν σας ενδιαφέρουν περισσότερα μπορείτε να δείτε εδώ, ή να διαβάσετε πότε πρέπει να χρησιμοποιείτε jpg ή png. Αλλά σε ό,τι αφορά το θέμα του άρθρου, εμείς θα κρατήσουμε το εξής.
Η μορφή Jpg προσφέρει καλύτερη συμπίεση διατηρώντας την ανάλυση μιας πολυχρωματικής φωτογραφίας, και συνίσταται όταν έχουμε να μεταφορτώσουμε τέτοιες εικόνες. Οι png προσφέρουν άλλα πλεονεκτήματα, περιλαμβάνουν μικρότερο αριθμό χρωμάτων και χρησιμοποιούνται για εικόνες που αποτελούν λογότυπα ή κάποια σκίτσα.
Για να ανεβάσουμε μια φώτο σε ένα site, πρέπει να τη μετατρέψουμε σε μορφή jpg. Με αυτό το τρόπο
- έχουμε καλύτερη ποιότητα στη φώτο μας,
- καταλαμβάνουμε μικρότερο όγκο,
- πετυχαίνουμε μεγαλύτερη ταχύτητα στην ιστοσελίδα μας.
Όλα τα παραπάνω δίνουν μια απάντηση στο γιατί πρέπει να δίνουμε προσοχή στο “πως ανεβάζω φωτογραφίες στο site μου”. Υπάρχει κάτι ακόμη όμως.
SEO ιστοσελίδας
Εδώ έχουμε να πούμε αρκετά λιγότερα.
Σίγουρα έχετε περιηγηθεί στις “εικόνες google”. Αν όχι, ανοίξτε μια νέα καρτέλα. Πληκτρολογήστε στην αναζήτηση “εικόνες google” και ανοίξτε τον αντίστοιχο σύνδεσμο. Κάντε μια αναζήτηση για το είδος της εικόνας που σας ενδιαφέρει – για παράδειγμα, γράψτε τη φράση “πως να γράψω άρθρα με seo“.
Θα δείτε πολλές εικόνες που αφορούν το θέμα αναζήτησης που κάνατε. Και κάτω από τη καθεμία εικόνα, θα δείτε τη διεύθυνση της ιστοσελίδας στην οποία βρίσκεται η εικόνα. Θέλουμε η εικόνα μας να είναι εκεί. Επιθυμούμε το κλικ του επισκέπτη. Η google θα επισημαίνει τη σελίδα μας ως σημαντική, θα της δίνει διαρκώς ώθηση στις μηχανές αναζήτησης. Το SEO της ιστοσελίδας μας θα εκτοξεύεται.
(Διαβάστε περισσότερα για το SEO ιστοσελίδας)
Κάτι τέτοιο δεν γίνεται αυτόματα. Η google θα διαβάσει την εικόνα μας και θα τη τοποθετήσει εκεί, μόνο αν της το δηλώσουμε με κάποιο τρόπο. Το “πως” θα το δούμε στη 3η ενότητα του άρθρου, για την ώρα κρατάμε την επισήμανση ότι μια ανεβασμένη φώτο χωρίς ρυθμίσεις όχι μόνο δεν προσθέτει στο seo της ιστοσελίδας, αλλά δίνει αρνητικούς πόντους σε αυτό.
Πως ανεβάζω φωτογραφίες στο site μου
Σε αυτή την ενότητα θα δούμε βήμα βήμα τη διαδικασία που πρέπει να ακολουθήσουμε πριν τη μεταφόρτωση μιας εικόνας. Το “πως ανεβάζω φωτογραφίες στο site μου” ξεκινάει.
Α. Μορφή
Για τη συνοχή των οδηγιών να επαναλάβουμε αυτό που είπαμε παραπάνω. Οι φωτογραφίες πρέπει να είναι (ή να μετατρέπονται) σε μορφή .jpg, ενώ η μορφή .png συνίσταται μόνο για διαφάνειες, λογότυπα, σχέδια κτλ.
Β. Διαστάσεις
Β1. Header ή background image
Μια εικόνα που επιλέγεται για το header (κορυφή, “σαλόνι” σελίδας) πρέπει να έχει διαστάσεις 1920x(ύψος), όπου το ύψος το επιλέγουμε κατά πως μας ταιριάζει αισθητικά. Μεγαλύτερο μήκος από το 1920 επιβαρύνει τη ταχύτητα της ιστοσελίδας, μικρότερο μήκος αλλοιώνει τη ποιότητα της εικόνας.
Αν τώρα η εικόνα προορίζεται για το background της ιστοσελίδας, οι προτεινόμενες διαστάσεις της είναι 1920x1280px.
Β2. Χαρακτηριστική εικόνα
Η χαρακτηριστική εικόνα μιας σελίδας προβάλλεται (κάποιες φορές) στη κορυφή της σελίδας. Προβάλλεται πάντα στη κορυφή του άρθρου, και είναι αυτή που εμφανίζεται στα social media κατά το διαμερισμό της σελίδας ή του άρθρου. Το facebook γι΄ αυτή την εικόνα προτείνει διαστάσεις 1280×670 px, η πρότασή μας είναι
- η αναλογία να κυμανθεί μεταξύ των παραπάνω διαστάσεων έως τις 1280×853 px
- το μήκος της να μην είναι μικρότερο των 1000px.
Β3. Εσωτερικός χώρος
Οι διαστάσεις καθορίζονται από τη δομή του τμήματος της ιστοσελίδας που θέλουμε να τοποθετήσουμε την εικόνα. Από το αν η σελίδα καταλαμβάνει όλο το πλάτος της οθόνης ή μόνο ένα τμήμα της. Από το αν η φώτο θα τοποθετηθεί σε μια μόνο στήλη, καθώς και από της αναλογίες της στήλης στο σύνολο της γραμμής. Ενδεικτικά να πούμε πως σε ένα τρίστηλο μιας σελίδας που δεν απλώνεται σε όλο το μήκος της οθόνης, η εικόνα που θα τοποθετηθεί εκεί θα ανέβει με διαστάσεις 400x…px.
Για το εσωτερικό ενός άρθρου τώρα. Οποιοδήποτε μήκος εικόνας μεγαλύτερο των 1000px μπορεί να χαρακτηριστεί περιττό. Στα δε περισσότερα blog, μια εικόνα που καταλαμβάνει όλο το πλάτος του χρησιμοποιούμενου χώρου έχει μήκος κοντά στα 800px.
Γ. Ανάλυση – μέγεθος.
Οποιοδήποτε μέγεθος μεγαλύτερο από 200kb είναι υπερβολικό – και βλαβερό για την ιστοσελίδα, συνίσταται δε μόνο σε ειδικές περιπτώσεις και αποκλειστικά για εικόνες του header ή background μιας σελίδας. Μια συνηθισμένο φώτο προτείνεται να συμπιεστεί ώστε να καταλαμβάνει χώρο μικρότερο των 100kb. Η ανάλυση που πρέπει να έχει μια εικόνα των παραπάνω μεγεθών ώστε να καταλαμβάνει μικρό όγκο πρέπει να είναι όχι μεγαλύτερη από 72 px/inch: από εκεί και πάνω πρακτικά δεν θα φανεί καμία διαφορά στη καθαρότητα της φωτογραφίας, ενώ μπορούμε να έχουμε αξιοπρεπή αποτελέσματα ακόμη και με μικρότερη ανάλυση.
Παρατήρηση – Προσθήκη: Αμέσως μετά τη δημοσίευση του άρθρου που διαβάζετε, έπεσε στην αντίληψή μου μια τεχνική επεξεργασίας εικόνας, σύμφωνα με την οποία είναι δυνατή η επίτευξη μικρού όγκου (σε αριθμό pixel) ανεξάρτητα της ανάλυσης που θα επιλέξουμε (των px/inc). Περισσότερα για τη τεχνική αυτή διαβάστε σε αυτό το άρθρο.
Δ. Πως επιτυγχάνουμε τα παραπάνω.
Αν δεν χρησιμοποιούμε ήδη κάποιο εργαλείο επεξεργασίας εικόνας, τότε κάνουμε το εξής.
- στη διεύθυνση αυτή βρίσκουμε ένα δωρεάν εργαλείο επεξεργασίας εικόνων.
- στα δεξιά πιέζουμε το open image:
και επιλέγουμε από τον υπολογιστή την εικόνα που θα εισάγουμε.
- Αριστερά βρίσκονται τα εργαλεία επεξεργασίας της εικόνας. Επιλέγουμε το properties:
και αμέσως μετά το resize image:
- Στο παράθυρο που ανοίγει πληκτρολογούμε το προτεινόμενο μήκος – έστω 1280px για μια χαρακτηριστική εικόνα. Το πλάτος της εικόνας θα αλλάξει αυτόματα:
Προσοχή, αν η εικόνα έχει ήδη μικρότερες διαστάσεις, τότε θα εμφανίζεται αλλοιωμένη. Προτιμάμε να επιλέγουμε εικόνες μεγάλων διαστάσεων ώστε να τις επεξεργαζόμαστε χωρίς να αλλοιωθούν.
- Πατάμε apply για αποθήκευση και κλείνουμε το παράθυρο “properties”.
- Στην αριστερή γραμμή εργαλειών επιλέγουμε το Crop:
- Στο παράθυρο που ανοίγει δίνουμε τις προτεινόμενες διαστάσεις 1280×853:
Παρατήρηση: αν κατά το προηγούμενο βήμα (resize) η εικόνα έχει ήδη βρεθεί στις προτεινόμενες διαστάσεις, τότε το παραπάνω βήμα το παραλείπουμε.
- Αυτόματα στη φωτογραφία θα εμφανιστεί ένα παράθυρο στις διαστάσεις που έχουμε επιλέξει. Το μετακινούμε ώστε από όλη τη φώτο να κοπεί το τμήμα που επιθυμούμε:
- Πατάμε κάτω δεξιά “save”. Στο παράθυρο που ανοίγει:
- Δίνουμε στη photo όνομα που ταιριάζει είτε με το τίτλο του άρθρου μας είτε με το περιεχόμενό της (είναι απαραίτητο για το SEO του άρθρου και της ιστοσελίδας!).
- Επιλέγουμε τη μορφή της (jpg)
- Επιλέγουμε την ανάλυση ζυγίζοντας την ποιότητα με τον όγκο της, ώστε το μέγεθός της να μην είναι μεγάλο.
- Κατεβάζουμε την εικόνα στον υπολογιστή μας πατώντας “download”.
Η εικόνα είναι έτοιμη για μεταφόρτωση στο site. Το “πως ανεβάζω φωτογραφίες στο site μου” έχει ένα ακόμη βήμα.
Κατά τη μεταφόρτωση της εικόνας
Οι ενέργειες που πρέπει να κάνουμε εδώ αφορούν δύο ιδιότητες της ιστοσελίδας. Η πρώτη είναι το SEO της, και η δεύτερη (τι άλλο;) την ταχύτητά της. Ξεκινώ με το 2ο κομμάτι.
(ακολουθεί θεωρία)
Στο μπλοκ κάθε ιστοσελίδας εμφανίζονται τα άρθρα με τη χαρακτηριστική τους εικόνα ως μικρογραφία. Αν η Αρχική Σελίδα του site σας αποτελείται από μια στατική σελίδα, αυτό το τμήμα του άρθρου δεν σας αφορά. Αν η Αρχική σας αποτελείται από τη σελίδα άρθρων (το blog), δώστε προσοχή.
Η χαρακτηριστική εικόνα του άρθρου μας έχει “κοπεί” σε ένα ορισμένο μέγεθος, ώστε να ταιριάζει στο χώρο της οθόνης του επισκέπτη του άρθρου. Στη σελίδα του blog η εικόνα αυτή εμφανίζεται σε μικρογραφία, συνήθως σε διαστάσεις 300×300 px ή και 150×150 px. Ο browser παίρνει το μήνυμα ότι ο χώρος έχει αλλάξει και καλείται να μετατρέψει το μέγεθος της εικόνας. Αυτό χρειάζεται κάποιο χρόνο, ο οποίος για πολλές εικόνες μαζί είναι αισθητός. Η σελίδα αργεί να ανοίξει.
Δεν είναι τυχαίο το ότι οι περισσότερες ειδησιογραφικές ιστοσελίδες έχουν αργούς χρόνους απόκρισης.
Για να προσπεράσουμε αυτό το πρόβλημα έχουμε δύο επιλογές. Η πρώτη είναι να διαθέτουμε έναν πολύ πολύ ακριβό χώρο φιλοξενίας, ο server του οποίου – εκτός των άλλων – θα ανταλλάσσει πληροφορίες με τον browser με πολύ μεγαλύτερες ταχύτητες.
Και η δεύτερη είναι να χρησιμοποιήσουμε το πρόσθετο Regenerate Thumbnails.
Η δουλειά του είναι να κόβει τις εικόνες στο απαιτούμενο μέγεθος, στέλνοντας στον browser τη πληροφορία εμφάνισης της εικόνας του προσαρμοσμένου μεγέθους. Ο browser δεν θα ζητήσει άλλες πληροφορίες, δεν θα κάνει κάποια μετατροπή, θα κερδηθεί σημαντικός χρόνος κατά το άνοιγμα της σελίδας.
Θα χρησιμοποιήσουμε αυτό το πρόσθετο κατά το ανέβασμα των φωτογραφιών μας.
Μεταφόρτωση εικόνας
Για μένα που δεν έχω ανεβάσει ποτέ εικόνα σε WordPress site και θέλω να μάθω πως ανεβάζω φωτογραφίες στο site μου:
1. Από τον Πίνακα Ελέγχου της ιστοσελίδας πηγαίνουμε στα Πολυμέσα και Νέο Αρχείο:
2. Σύρουμε από το φάκελο του υπολογιστή την εικόνα στο παράθυρο που ανοίγει, ή πιέζουμε «επιλογή αρχείων»:
3. Από τη γραμμή εργαλειών αριστερά μεταβαίνουμε στη «Βιβλιοθήκη» και επιλέγουμε την εικόνα που μόλις ανεβάσαμε.
Κι άλλο SEO
Στη προηγούμενη ενότητα αναφέραμε πως, για να εμφανίζεται μια εικόνα μας στις αναζητήσεις εικόνων της google, πρέπει να γίνουν κάποιες ρυθμίσεις κατά το ανέβασμά της. Είμαστε στο σημείο για τις ρυθμίσεις αυτές.
4. Στο παράθυρο που ανοίγει αριστερά:
– Συμπληρώνουμε το πεδίο «Εναλλακτικό Κείμενο», συνήθως με το τίτλο του άρθρου ή/και της εικόνας, ανάλογα με το πώς επιθυμούμε να εμφανίζεται στις μηχανές αναζήτησης.
– Συμπληρώνουμε το πεδίο «Περιγραφή». Συνήθως περιλαμβάνει το τίτλο ή τμήμα του τίτλου του άρθρου, καθώς και μια σύντομη περιγραφή του:
Και μένει ένα ακόμη βήμα:
5. Στο κάτω μέρος και δεξιά του παραθύρου πιέζουμε το Regenerate Thumbnails:
Στο νέο παράθυρο που ανοίγει αφήνουμε τα τσεκαρισμένα κουτιά ως έχουν και πιέζουμε πάλι το ίδιο κουμπί(Regenerate Thumbnails):
Μόλις ολοκληρωθεί η διαδικασία, πατάμε το νέο κουμπί που ανοίγει ώστε να μας γυρίσει στο προηγούμενο παράθυρο.
Η photo είναι έτοιμη για την εισαγωγή της στο άρθρο ως Χαρακτηριστική Εικόνα.
Επίλογος
Όλες οι παραπάνω ενέργειες για το θέμα “Πως ανεβάζω φωτογραφίες στο site μου” είναι απαραίτητες, κυρίως για τη ταχύτητα μιας ιστοσελίδας αλλά και για το SEO της. Ακόμη κι αν δεν έχετε ακολουθήσει τα προτεινόμενα αυτά βήματα για την εισαγωγή εικόνων στο site σας, ποτέ δεν είναι αργά για τις απαραίτητες διορθώσεις.
Δείτε ένα παράδειγμα.
Ανέλαβα πρόσφατα την ανακατασκευή – βελτίωση ενός μουσικού blog – magazino. Η ιστοσελίδα ήταν σχετικά παλιά, ασυντήρητη με πολλά πρόσθετα προγράμματα που δεν υποστηρίζονταν πια από τους δημιουργούς τους. Και το σημαντικότερο, με πολλές, πάρα πολλές, μη επεξεργασμένες φωτογραφίες.
Η βελτίωση είχε να κάνει με τρία πεδία. Το αισθητικό, το λειτουργικό και τη ταχύτητα. Εδώ, μας αφορά το τρίτο πεδίο, και συγκεκριμένα το κομμάτι του που αφορούσε τις φωτογραφίες. Αυτό που έγινε σε αυτό το επίπεδο ήταν
- να συμπιεστούν όλες οι υπάρχουσες φωτογραφίες του site
- να δημιουργηθούν Thumpnails στις περισσότερες από αυτές,
- και κάτι απλούστερο, να ρυθμιστεί η σελίδα ώστε να μη φορτώνονται ταυτόχρονα όλες οι εικόνες μιας σελίδας, αλλά μόνο αυτές που εμφανίζονται στην οθόνη του επισκέπτη.
Μπορώ να πω ότι ήταν αρκετά επίμονη δουλειά αλλά έφερε ένα αναπάντεχα καλό αποτέλεσμα.
Η σελίδα mousikesebeeries.gr
Στη παρακάτω εικόνα φαίνονται οι αριθμοί που αφορούν τη βαθμολογία της ταχύτητας της ιστοσελίδας από το εργαλείο https://gtmetrix.com/, πριν και μετά την ανακατασκευή. Μας ενδιαφέρουν δύο από τους εμφανιζόμενους αριθμούς, σε ό,τι αφορά το θέμα του άρθρου:
Δείτε τους αριθμούς των δύο τελευταίων στηλών. Η πρώτη που αναφέρομαι είναι η Total Page Size. Με απλοϊκά λόγια, δείχνει τον όγκο των πληροφοριών που μεταφέρει ο server και καλείται ο browser να επεξεργαστεί κατά το άνοιγμα της σελίδας. Θυμηθείτε πως όσες περισσότερες είναι οι πληροφορίες, τόσο μεγαλύτερος είναι ο χρόνος επεξεργασίας αυτών, άρα και το άνοιγμα της σελίδας. Οι εικόνες της αρχικής μας σελίδας έχουν πια μικρό μέγεθος, άρα έχουμε μεταφέρει το 1/3 του όγκου των πληροφοριών.
Η δεύτερη στήλη με την ονομασία Requests. Αφορά την ανταλλαγή αιτημάτων μεταξύ browser του χρήστη και server της ιστοσελίδας. Ο αριθμός τους οφείλεται σε αρκετούς παράγοντες, η δημιουργία των μικρογραφιών όμως συνέβαλλε σε ένα μεγάλο βαθμό στη μείωσή τους.
Συνολικά, η όλη επεξεργασία των εικόνων συνέβαλε με τη σειρά της σε ένα μεγάλο βαθμό στο τελικό χρόνο απόκρισης του site.
Διαβάστε ακόμη
Αν το “πως ανεβάζω φωτογραφίες στο site μου” σας έβαλε στη διαδικασία να δείτε περισσότερα, ρίξτε μια ματιά στους παρακάτω συνδέσμους.
- Δείτε αυτή τη σειρά άρθρων που αφορούν γενικά τη ταχύτητα ιστοσελίδας.
- Μάθετε περισσότερα για τη βελτίωση και αναβάθμιση μιας ιστοσελίδας.
- Αν δημιουργείτε WordPress site μόνοι σας, διαβάστε για τα απαραίτητα plugins που καλό είναι να συμπεριλάβετε σε αυτή.
Και αν θέλετε να λαμβάνετε στο ταχυδρομείο σας τα νέα μας άρθρα, τότε ξέρετε τι να κάνετε:
Υ.Γ. Πιθανόν να έχετε παρατηρήσει ότι η φράση “πως ανεβάζω φωτογραφίες στο site μου” έχει εμφανιστεί περισσότερο απ΄ όσο χρειάζεται. Δώστε δικαίωμα: αποτελεί τη φράση – κλειδί για το SEO του άρθρου και οι κανόνες λένε ότι πρέπει να εμφανίζεται στο άρθρο συχνά. Και αυτό έγινε.
