Πάρε οποιαδήποτε ιστοσελίδα σε έχασε μέσα στα πρώτα δευτερόλεπτα και γύρνα στην κορυφή. Είναι πολύ πιθανό οι εικόνες να είχαν κάποιο ρόλο. Μια φωτογραφία αρχείου με χαμογελαστούς αγνώστους που δεν μοιάζουν καθόλου με τους ανθρώπους που εξυπηρετεί πραγματικά η επιχείρηση. Μια κύρια εικόνα τόσο αόριστη που θα μπορούσε να ανήκει σε οποιαδήποτε εταιρεία σε οποιονδήποτε κλάδο. Ή καθόλου εικόνες, που αφήνουν τη σελίδα γυμνή και ημιτελή. Οι εικόνες σε μια ιστοσελίδα δεν είναι διακόσμηση. Είναι επικοινωνία. Το άρθρο καλύπτει τι κάνουν πραγματικά οι εικόνες μιας ιστοσελίδας, πώς να διαλέγεις τις σωστές, πού ανήκουν σε κάθε σελίδα και τι συμβαίνει όταν κάνεις λάθος.
Οι επισκέπτες επεξεργάζονται τις εικόνες πιο γρήγορα από τις λέξεις. Πριν διαβάσει κανείς τον τίτλο σου, ο εγκέφαλός του έχει ήδη σχηματίσει πρώτη εντύπωση από το οπτικό υλικό. Αυτό σημαίνει ότι οι εικόνες σου επιχειρηματολογούν για την επιχείρησή σου πριν προλάβεις να επιχειρηματολογήσεις εσύ. Το ερώτημα είναι αν αυτό το επιχείρημα είναι αυτό που θέλεις να κάνεις.
Τι κάνουν πραγματικά οι εικόνες μιας ιστοσελίδας;
Κάθε εικόνα στο site σου λέει κάτι σε έναν επισκέπτη. Η κύρια εικόνα της αρχικής σου λέει «αυτό είναι το είδος της επιχείρησης που είμαστε και αυτοί είναι οι άνθρωποι για τους οποίους υπάρχουμε». Η φωτογραφία στη σελίδα «Σχετικά με εμάς» λέει «εδώ υπάρχουν πραγματικοί άνθρωποι». Η φωτογραφία προϊόντος στη σελίδα υπηρεσίας λέει «αυτό παίρνεις όταν δουλεύεις μαζί μας».
Όταν αυτά τα σήματα είναι καθαρά και σχετικά, οι επισκέπτες νιώθουν προσανατολισμένοι. Όταν είναι αόριστα ή γενικά, οι επισκέπτες δεν νιώθουν τίποτα, που είναι το χειρότερο αποτέλεσμα. Ένας επισκέπτης που δεν νιώθει τίποτα δεν έχει λόγο να συνεχίσει να διαβάζει.
Οι εικόνες καθοδηγούν επίσης πού πηγαίνει το μάτι. Αυτός είναι ο πυρήνας της οπτικής ιεράρχησης σε μια σελίδα. Μια καλά τοποθετημένη εικόνα τραβά την προσοχή προς την ενότητα που μετράει. Μια κακοτοποθετημένη χωρίζει την προσοχή και αφήνει τον επισκέπτη αβέβαιο για το πού να κοιτάξει μετά. Κάθε εικόνα πρέπει να δικαιολογεί τη θέση της βοηθώντας τον επισκέπτη να κινηθεί προς τη σωστή κατεύθυνση.
Πραγματικές φωτογραφίες ή φωτογραφίες αρχείου: έχει σημασία;
Ναι. Περισσότερο απ' όσο περιμένουν οι περισσότεροι.
Οι επισκέπτες ξεχωρίζουν τις φωτογραφίες αρχείου καλύτερα απ' ό,τι πριν πέντε χρόνια. Η τέλεια φωτισμένη αίθουσα σύσκεψης με τέσσερις επαγγελματίες που γνέφουν μπροστά σε laptop. Η χειραψία μπροστά σε ένα αστικό τοπίο. Η χαμογελαστή γυναίκα που κρατά ένα φλιτζάνι καφέ. Αυτές οι εικόνες είναι τόσο συνηθισμένες που οι επισκέπτες έχουν αναπτύξει ένα είδος οπτικής ανοσίας σε αυτές. Τις βλέπουν και δεν καταγράφουν τίποτα.
Οι πραγματικές φωτογραφίες κάνουν το αντίθετο. Μια φωτογραφία του πραγματικού καταστήματός σου, της πραγματικής ομάδας σου, της πραγματικής δουλειάς σου. Αυτές οι εικόνες είναι δικές σου και μόνο δικές σου. Ένας επισκέπτης που τις βλέπει παίρνει απόδειξη ότι υπάρχει μια πραγματική επιχείρηση πίσω από την ιστοσελίδα, που είναι ένα από τα πιο πολύτιμα πράγματα που μπορεί να μεταδώσει μια εικόνα. Ακόμη και μια φωτογραφία από κινητό σε καλό φως είναι συχνά πιο αποτελεσματική από μια γυαλισμένη φωτογραφία αρχείου, γιατί είναι αληθινή.
Παρ' όλα αυτά, οι φωτογραφίες αρχείου έχουν τη θέση τους. Για άρθρα blog, για την εικονογράφηση αφηρημένων εννοιών, για δευτερεύουσες θέσεις εικόνων όπου η εξειδίκευση μετράει λιγότερο, μια καλοδιαλεγμένη φωτογραφία αρχείου κάνει τη δουλειά. Ο κανόνας είναι: χρησιμοποίησε πραγματικές φωτογραφίες όπου διακυβεύεται η εμπιστοσύνη και φωτογραφίες αρχείου όπου η εικόνα απλώς στηρίζει το περιεχόμενο και δεν κάνει ισχυρισμό για την επιχείρησή σου.
Πώς διαλέγεις τη σωστή εικόνα για κάθε σελίδα;
Πριν ψάξεις εικόνα, ρώτα ποια δουλειά πρέπει να κάνει σε αυτή τη συγκεκριμένη σελίδα.
Στην αρχική σου σελίδα, η κύρια εικόνα πρέπει να μεταδίδει τι κάνεις και για ποιον πριν διαβάσει κανείς λέξη. Αν ένας επισκέπτης μπορούσε να κοιτάξει μόνο την κύρια εικόνα σου και να μην έχει ιδέα σε ποιον κλάδο δραστηριοποιείσαι, η εικόνα δεν κάνει τη δουλειά της.
Στη σελίδα «Σχετικά με εμάς», η εικόνα πρέπει να είναι προσωπική. Δείξε τους ανθρώπους. Δείξε τον χώρο. Δείξε κάτι που κάνει την επιχείρηση να φαίνεται ανθρώπινη και συγκεκριμένη και όχι εταιρική και ανώνυμη.
Σε μια σελίδα υπηρεσίας ή προϊόντος, δείξε το αποτέλεσμα. Ένα πριν και μετά για μια επιχείρηση ανακαίνισης. Ένα στιγμιότυπο του dashboard για ένα εργαλείο λογισμικού. Μια φωτογραφία του έτοιμου πιάτου για μια επιχείρηση catering. Οι εικόνες αποτελέσματος πείθουν περισσότερο από τις εικόνες διαδικασίας, γιατί απαντούν στην ερώτηση που πραγματικά κάνει ο επισκέπτης: τι θα έχω όταν τελειώσει αυτό;
Όταν ξέρεις τη δουλειά, τότε βρίσκεις την εικόνα. Όχι το αντίθετο.
Τι κάνει μια εικόνα να δουλεύει εναντίον σου;
Η έλλειψη σχέσης με το θέμα
Μια εικόνα που δεν έχει τίποτα συγκεκριμένο να πει για την επιχείρησή σου, την υπηρεσία σου ή τον πελάτη σου λέει στον επισκέπτη ότι κανείς δεν σκέφτηκε προσεκτικά την οπτική εμπειρία του site. Αυτή η εντύπωση μένει.
Η αναντιστοιχία
Αν το κείμενό σου είναι ζεστό και συζητητικό αλλά οι εικόνες σου είναι ψυχρές και εταιρικές, η σελίδα φαίνεται ασυνεπής. Οι επισκέπτες πιάνουν αυτή τη διαφωνία ακόμη κι όταν δεν μπορούν να τη διατυπώσουν. Η διάθεση της εικόνας και η διάθεση του κειμένου πρέπει να συμφωνούν.
Οι αργοί χρόνοι φόρτωσης
Οι μεγάλες, μη συμπιεσμένες εικόνες είναι ο πιο συχνός λόγος που οι ιστοσελίδες φορτώνουν αργά. Μια σελίδα που χρειάζεται πάνω από τρία δευτερόλεπτα για να φορτώσει στο κινητό χάνει σημαντικό μέρος των επισκεπτών της πριν φανεί οτιδήποτε. Κάθε εικόνα που ανεβάζεις πρέπει να συμπιέζεται για το web. Οι περισσότερες πλατφόρμες ιστοσελίδων χειρίζονται ένα μέρος αυτού αυτόματα, αλλά αξίζει να ξέρεις τι ανεβάζεις. Δες πώς η ταχύτητα της ιστοσελίδας επηρεάζει τους επισκέπτες και τις θέσεις στην αναζήτηση για την πλήρη εικόνα.
Το κείμενο alt που λείπει
Κάθε εικόνα στο site σου χρειάζεται μια σύντομη περιγραφή του τι δείχνει, γραμμένη στο πεδίο alt text. Αυτό μετράει για δύο λόγους. Οι επισκέπτες που χρησιμοποιούν αναγνώστες οθόνης βασίζονται στο alt text για να καταλάβουν τι περιέχει μια εικόνα. Οι μηχανές αναζήτησης χρησιμοποιούν το alt text για να καταχωρίσουν εικόνες. Αν το παραλείψεις, χάνεις γρήγορα και πόντους προσβασιμότητας και αξία SEO.
Πού πρέπει να εμφανίζονται οι εικόνες στις σελίδες σου;
Δεν υπάρχει καθολικός κανόνας για την τοποθέτηση εικόνων, αλλά υπάρχουν μερικά μοτίβα που δουλεύουν σταθερά.
Βάλε την πιο δυνατή εικόνα σου εκεί που κοιτάζουν πρώτα οι επισκέπτες. Στις περισσότερες σελίδες αυτό είναι το πάνω τμήμα, above the fold. Αν ένας επισκέπτης κυλήσει προς τα κάτω πριν δεσμευτεί να διαβάσει, η δεύτερη θέση εικόνας, κάπου στη μέση της σελίδας, τον πιάνει στη μέση της κύλισης. Μια τρίτη εικόνα κοντά στο τέλος μιας μακριάς σελίδας ξαναπιάνει επισκέπτες που έχουν διαβάσει σχεδόν μέχρι κάτω.
Χρησιμοποίησε εικόνες για να σπάσεις μεγάλες ενότητες κειμένου, αλλά μόνο όταν η εικόνα προσθέτει κάτι. Μια εικόνα που εικονογραφεί το σημείο που αναφέρεται στην παράγραφο δίπλα της κάνει δουλειά. Μια εικόνα που μπήκε εκεί απλώς επειδή η ενότητα φαινόταν πολύ μεγάλη είναι γέμισμα, και οι επισκέπτες το καταλαβαίνουν.
Στο κινητό, η τοποθέτηση των εικόνων αλλάζει επειδή η οθόνη είναι στενή και οι εικόνες στοιβάζονται κάθετα. Μια εικόνα που βρίσκεται δίπλα στο κείμενο στον υπολογιστή θα εμφανίζεται πάνω ή κάτω από αυτό στο κινητό. Δοκίμασε πώς φαίνεται κάθε σελίδα σε κινητό και βεβαιώσου ότι η εικόνα εξακολουθεί να έχει νόημα στη νέα της θέση. Αυτό είναι μέρος του να βεβαιωθείς ότι το site σου ακολουθεί τις αρχές του responsive σχεδιασμού σε κάθε σελίδα.
Τι μορφή αρχείου πρέπει να έχουν οι εικόνες σου;
Η σύντομη εκδοχή:
- JPEG για φωτογραφίες. Μικρό μέγεθος αρχείου, υψηλή ποιότητα, δουλεύει παντού.
- PNG για λογότυπα, εικονίδια και οτιδήποτε έχει διαφανές φόντο ή καθαρό κείμενο.
- WebP και για τα δύο, αν το υποστηρίζει η πλατφόρμα σου. Παράγει μικρότερα αρχεία από JPEG και PNG στο ίδιο επίπεδο ποιότητας. Οι περισσότεροι σύγχρονοι browsers χειρίζονται το WebP χωρίς πρόβλημα.
- SVG για εικονίδια και απλές εικονογραφήσεις. Κλιμακώνεται τέλεια σε οποιοδήποτε μέγεθος με μικροσκοπικά αρχεία.
Για μεγέθη αρχείων, στόχευσε κάτω από 200 kilobytes για τυπικές εικόνες σελίδας. Οι κύριες εικόνες μπορούν να φτάσουν περίπου τα 400 kilobytes. Οτιδήποτε μεγαλύτερο χρειάζεται συμπίεση πριν το ανεβάσεις. Μια φωτογραφία πέντε megabytes από το κινητό σου δεν έχει θέση σε μια ιστοσελίδα.
Τι είναι το alt text και γιατί το χρειάζεται κάθε εικόνα;
Το alt text είναι μια σύντομη γραπτή περιγραφή που συνδέεται με μια εικόνα. Βρίσκεται στο tag της εικόνας στη σελίδα, αόρατο στους επισκέπτες που βλέπουν αλλά διαβάζεται από αναγνώστες οθόνης και μηχανές αναζήτησης. Και οι δύο το χρειάζονται για να καταλάβουν τι περιέχουν οι εικόνες σου.
Για την προσβασιμότητα, το alt text είναι ο τρόπος που οι επισκέπτες με αναγνώστες οθόνης βιώνουν τις εικόνες του site σου. Χωρίς αυτό, αυτοί οι επισκέπτες δεν ακούν τίποτα όταν φορτώνει η εικόνα, κάτι που αφήνει κενό σε αυτό που ήθελες να μεταδώσεις. Για το SEO, οι μηχανές αναζήτησης δεν βλέπουν τις εικόνες όπως οι άνθρωποι. Το alt text είναι ο τρόπος που καταλαβαίνουν τι δείχνει μια εικόνα και αν σχετίζεται με τη σελίδα που στηρίζει.
Το να γράφεις καλά το alt text σημαίνει να περιγράφεις αυτό που υπάρχει πραγματικά στην εικόνα, συγκεκριμένα και απλά. Μια φωτογραφία ολοκληρωμένης ανακαίνισης κουζίνας παίρνει alt text όπως «λευκή κουζίνα με μαρμάρινους πάγκους μετά την ανακαίνιση» και όχι «φωτογραφία κουζίνας» ή «εικόνα1». Αν η λέξη-κλειδί σου ταιριάζει φυσικά στην περιγραφή, συμπερίλαβέ την. Αλλά γράψε πρώτα για την περιγραφή. Το alt text που υπάρχει μόνο για να επαναλαμβάνει λέξεις-κλειδιά αποτυγχάνει και στους δύο σκοπούς.
Κάθε εικόνα που ανεβάζεις πρέπει να έχει alt text γραμμένο πριν η σελίδα βγει live. Παίρνει λιγότερο από ένα λεπτό ανά εικόνα και επηρεάζει και ποιος έχει πρόσβαση στο περιεχόμενό σου και πώς κατατάσσονται οι σελίδες σου.
Πώς το WEMASY διαχειρίζεται τις εικόνες
Ο δημιουργός ιστοσελίδων του WEMASY περιλαμβάνει μπλοκ εικόνας που μπορείς να προσθέσεις σε οποιαδήποτε ενότητα σελίδας. Ανεβάζεις απευθείας μέσα στον δημιουργό, τοποθετείς και αλλάζεις μέγεθος χωρίς να αγγίξεις κώδικα και προσθέτεις alt text στο ίδιο βήμα. Οι εικόνες σερβίρονται αυτόματα responsive, ώστε να προσαρμόζονται σε κάθε μέγεθος οθόνης χωρίς να χρειάζεται να φτιάξεις ξεχωριστές εκδοχές για υπολογιστή και κινητό.
Οι ενότητες σελίδων στο WEMASY υποστηρίζουν εικόνες δίπλα στο κείμενο σε ευέλικτες διατάξεις στηλών, ή ως φόντο πλήρους πλάτους για ενότητες όπου μια δυνατή εικόνα δίνει τον τόνο. Και στις δύο περιπτώσεις, η εικόνα μένει δεμένη με το περιεχόμενο που στηρίζει και δεν αιωρείται ελεύθερη από τη διάταξη.
Δες τι περιλαμβάνεται στον δημιουργό ιστοσελίδων του WEMASY ή δες τα πακέτα στη σελίδα τιμών.
Συχνές ερωτήσεις για τις εικόνες ιστοσελίδας
Χρειάζομαι επαγγελματικές φωτογραφίες για την ιστοσελίδα μου;
Οι επαγγελματικές φωτογραφίες κάνουν πραγματική διαφορά στις βασικές σελίδες, ιδιαίτερα στην αρχική και στη σελίδα «Σχετικά με εμάς», όπου σχηματίζεται η εμπιστοσύνη. Για δευτερεύουσες εικόνες, άρθρα blog και υποστηρικτικό οπτικό υλικό, μια καλά φωτισμένη φωτογραφία από σύγχρονο κινητό δουλεύει μια χαρά. Προτεραιότητα έχει η εικόνα να είναι αληθινή και σχετική με την επιχείρησή σου, όχι να τραβήχτηκε από επαγγελματία. Με τον δημιουργό ιστοσελίδων του WEMASY, μπορείς να το στήσεις απευθείας στην ιστοσελίδα σου.
Πόσες εικόνες πρέπει να έχει μια αρχική σελίδα;
Αρκετές για να στηρίζουν τις ενότητες, όχι τόσες ώστε η σελίδα να φαίνεται γεμάτη ή να φορτώνει αργά. Μια δυνατή κύρια εικόνα, μία ή δύο εικόνες στο κυρίως μέρος της σελίδας και προαιρετικά μια φωτογραφία της ομάδας ή του χώρου εργασίας πιο κάτω είναι λογική δομή για τις περισσότερες αρχικές σελίδες μικρών επιχειρήσεων. Κάθε εικόνα πρέπει να δικαιολογεί τη θέση της και όχι να γεμίζει χώρο.
Μπορώ να χρησιμοποιήσω εικόνες από ιστοσελίδες φωτογραφιών αρχείου στην ιστοσελίδα μου;
Ναι, με κάποιους όρους. Οι ιστοσελίδες φωτογραφιών αρχείου προσφέρουν εικόνες με άδειες που επιτρέπουν εμπορική χρήση, αλλά έλεγξε τους όρους κάθε εικόνας πριν τη χρησιμοποιήσεις. Ο πρακτικός περιορισμός είναι ότι αυτές οι εικόνες εμφανίζονται σε πολλά άλλα sites, οπότε χρησιμοποίησέ τες για υποστηρικτικές και δευτερεύουσες θέσεις εικόνων και όχι ως κύριο οπτικό υλικό σε σελίδες υψηλής εμπιστοσύνης όπως η αρχική ή η «Σχετικά με εμάς».
Τι μέγεθος να έχουν οι εικόνες που ανεβάζω στην ιστοσελίδα μου;
Συμπίεσε πριν ανεβάσεις. Στόχευσε κάτω από 200 kilobytes για τις περισσότερες εικόνες σελίδας και κάτω από 400 kilobytes για τις κύριες εικόνες. Χρησιμοποίησε JPEG για φωτογραφίες, PNG για λογότυπα και διαφανείς εικόνες και WebP αν το υποστηρίζει η πλατφόρμα σου. Άλλαξε πάντα το μέγεθος της εικόνας στο μέγιστο πλάτος με το οποίο θα εμφανίζεται πριν την ανεβάσεις, αντί να αφήνεις τον browser να την μικραίνει.
Επηρεάζουν οι εικόνες τις θέσεις της ιστοσελίδας μου στην αναζήτηση;
Ναι, με δύο τρόπους. Οι μεγάλες μη συμπιεσμένες εικόνες επιβραδύνουν τη σελίδα σου, κάτι που οι μηχανές αναζήτησης λαμβάνουν υπόψη στην κατάταξη. Οι εικόνες χωρίς alt text χάνουν την ευκαιρία να πουν στις μηχανές αναζήτησης τι περιέχει η σελίδα. Οι εικόνες με σωστό μέγεθος και περιγραφικό alt text συμβάλλουν και στην ταχύτητα της σελίδας και στην ορατότητα στην αναζήτηση.