Τα ιδανικά γραφικά από την βελτιστοποίηση εικόνας για web, μπορούν να μετατρέψουν μια αδιάφορη ιστοσελίδα σε ένα εντυπωσιακό και ισχυρό μέσο επικοινωνίας για το brand σας. Οι κατάλληλες και καλοσχεδιασμένες φωτογραφίες, μπορούν να αγγίξουν τους επισκέπτες σας οπτικά και συναισθηματικά ή να ενισχύσουν το κείμενο που έχετε δημιουργήσει για την ιστοσελίδα σας.
Φωτογραφίες με πιάτα σε ιστοσελίδες εστιατορίων ή φωτογραφίες με χτενίσματα σε ιστοσελίδες κομμωτηρίων, διευκολύνουν τους πελάτες σας να πάρουν ιδέες για τα προϊόντα και τις υπηρεσίες σας. Ωστόσο, μόνο η επιλογή των σωστών και όμορφων εικόνων για την ιστοσελίδα σας, δεν αρκεί.
Η προετοιμασία και η βελτιστοποίηση εικόνας για web, απαιτεί το σωστό μέγεθος, κατάλληλη μορφή αρχείου και ανάλυση εικόνας, και άλλα πολλά τα οποία μπορεί να μην τα γνωρίζατε έως σήμερα.
Είτε προσπαθείτε να ανανεώσετε μερικά γραφικά που χρησιμοποιείτε στο internet marketing της επιχείρησής σας, είτε έχετε νέες εικόνες που θα θέλατε να προετοιμάσετε σωστά για χρήση στην ιστοσελίδα σας και το web, υπάρχουν μερικές βέλτιστες πρακτικές για βελτιστοποίηση εικόνας για web παρακάτω, που αφορούν τα web γραφικά και πρέπει να ακολουθήσετε αν θέλετε να είστε top στις μηχανές αναζήτησης.
Πού χρειάζεστε τις εικόνες;
Οι εικόνες είναι ένα πολύ ισχυρό εργαλείο marketing στο διαδίκτυο, αλλά πολλές φορές χρησιμοποιούνται άσκοπα και υπερβολικά.
Προσπαθήστε να χρησιμοποιείτε φωτογραφίες και γραφικά μόνο όπου είναι λογικό και εντελώς απαραίτητο. Τα γραφικά σας πρέπει να είναι σχετικά με το περιεχόμενο σας σε κάθε σελίδα της ιστοσελίδας σας. Χρησιμοποιήστε τα όταν μια οπτική επεξήγηση θα βοηθήσει το κοινό σας περισσότερο να κατανοήσει τα λεγόμενα σας, σαν να παρουσιάζατε ένα σεμινάριο ή όταν χρειάζεται να αναδείξετε τις λεπτομέρειες ενός προϊόντος.
Είναι σημαντικό να έχετε τουλάχιστον μία εικόνα σε κάθε σελίδα της ιστοσελίδας σας. Χρησιμοποιήστε μια σχετική εικόνα για να τραβήξετε το βλέμμα του αναγνώστη σας εκεί που θέλετε ή για να σπάσει η μονοτονία του κειμένου στη σελίδα σας.
Η χρήση μιας μεγάλης φωτογραφίας ως φόντο που γεμίζει ολόκληρο το παράθυρο του browser, είναι μια δημοφιλής τάση σχεδιασμού ιστοσελίδων σήμερα και μπορεί να είναι πολύ ισχυρή αν γίνει με το σωστό τρόπο φυσικά. Με τη χρήση μιας φωτογραφίας-φόντο, περιορίζεται και ο αριθμός των πολλών φωτογραφιών στην περιοχή του σώματος σε μια σελίδα.
Χρησιμοποιήστε τη σωστή μορφή αρχείου για τα web γραφικά της ιστοσελίδας σας
Όσον αφορά την βελτιστοποίηση εικόνας, υπάρχουν τρεις κύριες μορφές αρχείων που χρησιμοποιούνται στο διαδίκτυο: .jpg, .gif, .webp και .png.
Η κάθε μορφή αρχείου έχει διαφορετικά πλεονεκτήματα αλλά και μειονεκτήματα. Εάν έχετε εικόνες σε άλλες μορφές αρχείων, θα χρειαστεί να τις μετατρέψετε σε μία από αυτές τις τρεις μορφές παραπάνω πριν τις ανεβάσετε στην ιστοσελίδα σας. Είναι ασφαλέστερο να κάνετε μόνοι σας αυτή τη διαδικασία μετατροπής και να ανεβάσετε τη σωστή μορφή αρχείου στην ιστοσελίδα σας.
.jpg
Αυτή η μορφή αρχείου είναι βελτιστοποιημένη για φωτογραφίες. Χειρίζεται τα χιλιάδες χρώματα με τέτοιον τρόπο ώστε να έχετε μια πολύ όμορφη εικόνα με πολύ λογικό μέγεθος αρχείου. Τα περισσότερα εργαλεία επεξεργασίας εικόνας που σας επιτρέπουν να εξάγετε ή να αποθηκεύετε τα αρχεία σας ως αρχεία .jpg (ονομάζονται και JPEG) θα σας επιτρέψουν να προσαρμόσετε μια ρύθμιση ποιότητας που θα εξισορροπεί την ποιότητα της εικόνας με το μέγεθος του αρχείου, άρα θα πετύχετε την ιδανική βελτιστοποίηση εικόνας.
Μπορείτε να κάνετε ένα δοκιμαστικό αρχείο για κάθε εικόνα που αποθηκεύετε μετά τη βελτιστοποίηση εικόνας, ώστε να βρείτε την εικόνα με την καλύτερη ανάλυση και εμφάνιση που είναι ταυτόχρονα και στο χαμηλότερο μέγεθος αρχείου.
Ένα υπερβολικά συμπιεσμένο αρχείο .jpg θα αποτελείται από χρωματιστά τετραγωνάκια διαφορετικού μεγέθους που εμφανίζονται στα χρώματα της φωτογραφίας, συνήθως σε μεγαλύτερα πεδία του ίδιου χρώματος. Αποφύγετε τη χρήση αυτής της μορφής αρχείου για γραφικά που έχουν μεγάλα επίπεδα χρωμάτων (όπως ορισμένα λογότυπα), καθώς δεν θα εμφανίζονται ποτέ τόσο καλά όσο με τις άλλες μορφές αρχείων.
.gif
Το GIF είναι η παλαιότερη μορφή που χρησιμοποιείται για έγχρωμα γραφικά. Δημιουργήθηκε το 1987, η μορφή προφέρεται “τζιφ”. Τα GIF δεν συνιστώνται για web γραφικά, αλλά εξακολουθούν να είναι αρκετά δημοφιλή επειδή μπορούν να αποθηκεύουν πολλά καρέ σε ένα μόνο αρχείο. Αυτό επιτρέπει σε κάποιον να δημιουργεί κινούμενα gif που είναι πολύ δημοφιλή στο διαδίκτυο, αν και περισσότερο για ψυχαγωγική αξία, παρά για πρακτική εφαρμογή.
Τα GIF συμπιέζουν καλά τα συμπαγή πεδία χρώματος και σας επιτρέπουν να ορίσετε ένα χρώμα ώστε να είναι διαφανές, κάτι που μπορεί να είναι πολύ χρήσιμο όταν τοποθετείτε γραφικά σε πολύχρωμο ή φωτογραφικό φόντο.
Κατά την αποθήκευση ενός αρχείου σε αυτήν τη μορφή, μπορεί να σας ζητηθεί να επιλέξετε τον αριθμό των χρωμάτων που θέλετε στο αρχείο, από 8 έως 256.
Όσο λιγότερα χρώματα, τόσο μικρότερο σε μέγεθος θα είναι το αρχείο σας. Και πάλι εδώ, μια δοκιμαστική αποθήκευση αρχείου θα σας βοηθήσει να βρείτε τη σωστή ρύθμιση για τη συγκεκριμένη περίπτωση αποθήκευσης αρχείου εικόνας.
.webP
Το αρχείο WebP είναι μια web μορφή φωτογραφιών που δημιουργήθηκε από την Google. Παρέχει μικρότερο μέγεθος εικόνων, παρόμοιο και ίδιο πολλές φορές αποτέλεσμα με τις άλλες κλασικές μορφές αρχείων εικόνων. Είναι ιδανική για βελτιστοποίηση εικόνας για ιστοσελίδα.
Σύμφωνα με την Google, οι WebP εικόνες είναι περίπου:
- 25–34% μικρότερες σε μέγεθος απ’ ότι JPEG
- 26% μικρότερες σε μέγεθος απ’ ότι οι PNG
Τέλειο;
Το WebP είναι η κατάλληλη επιλογή για βελτιστοποίηση εικόνας σε φωτογραφίες προϊόντων που θα χρησιμοποιηθούν στο Website ή στο eshop σας. Ελαχιστοποιεί το μέγεθος των αρχείων εικόνας, κάτι που προσφέρει πιο γρήγορη φόρτωση της ιστοσελίδα σας.
Τα αρχεία WebP δεν ανοίγουν με Photoshop αλλά με κοινό λογισμικό γραφικών, όπως είναι το GIMP (ανοικτού λογισμικού και μπορείτε να το κατεβάσετε στον υπολογιστή σας), το ImageMagick ή το Microsoft Paint (η κοινή Ζωγραφική), το οποίο ανοίγει τα αρχεία WebΡ από προεπιλογή.
.png
Το αρχείο PNG είναι για αρχεία χωρίς κινούμενα σχέδια. Τα αρχεία .png έχουν σχεδόν πλήρως αντικαταστήσει τη χρήση των GIF. Είναι επίσης εξαιρετικά για μεγάλα χρωματικά πεδία και όχι μόνο, αλλά υποστηρίζουν και τη διαφάνεια, ακόμη και διαφορετικά επίπεδα διαφάνειας. Κατά τη βελτιστοποίηση εικόνας, αυτό είναι ένα πολύ ισχυρό εργαλείο, καθώς σας επιτρέπει να έχετε για παράδειγμα ημιδιάφανα τμήματα της εικόνας σας όπου το φόντο φαίνεται από πίσω, αλλά όχι εντελώς.
Η αποθήκευση αρχείων ως PNG έχει δύο επιλογές — 8 ή 24 bit.
Για ημιδιαφανείς εικόνες, πρέπει να χρησιμοποιήσετε 24 bit, το οποίο στην πραγματικότητα συνιστάται για όλες τις επίπεδες εικόνες γραφικών, εκτός εάν έχετε εικόνα με λίγα χρώματα. Σε αυτές τις περιπτώσεις, μπορείτε να επιλέξετε την έκδοση 8 bit για να αποθηκεύσετε ένα μικρό μέγεθος αρχείου, ώστε να πετύχετε βελτιστοποίηση εικόνας χωρίς να επηρεάζεται η ποιότητά της.
Υπάρχουν επίσης διαδικτυακά εργαλεία που μπορούν να βελτιστοποιήσουν τα PNG χωρίς να επηρεάσουν την ποιότητα της εικόνας, όπως το TinyPNG.
Δώστε προσοχή στο μέγεθος και την ανάλυση του αρχείου κατά τη βελτιστοποίηση εικόνας για ιστοσελίδα
Αυτοί οι δύο όροι είναι σχετικοί.
Το μέγεθος αρχείου αναφέρεται στο πόσο χώρο καταλαμβάνει ένα αρχείο, στην προκειμένη περίπτωση μια εικόνα, σε έναν σκληρό δίσκο. Τα μικρότερα μεγέθη αρχείων είναι καλύτερα για web γραφικά, για να φορτώνει πιο γρήγορα η ιστοσελίδα σας. Αυτό εξακολουθεί να είναι πολύ σημαντικό για όσους έχουν μια πιο αργή σύνδεση στο Διαδίκτυο ή έναν παλιό υπολογιστή. Το θέμα είναι ότι όσο μειώνεται το μέγεθος του αρχείου, μειώνεται και η ποιότητα. Θα θέλετε να βρείτε την καλύτερη μέση λύση μεταξύ ποιότητας και μεγέθους αρχείου, η οποία είναι πιο εύκολη σήμερα από ότι στο παρελθόν.
Όταν τραβάτε μια φωτογραφία με μια ψηφιακή κάμερα ή με το smartphone, οι εικόνες συνήθως είναι πολύ μεγάλες σε megabyte. Ιδανικά, οι φωτογραφίες σας δεν πρέπει να είναι μεγαλύτερες από 1 MB. Τα περισσότερα γραφικά web εμφανίζονται στα 100 kb ή και λιγότερο. Μόνο μια μεγάλη εικόνα όπως το φόντο πλήρους οθόνης θα πρέπει να είναι περίπου 1MB.
Άρα, πώς μειώνουμε το μέγεθος του αρχείου εικόνας;
Η μείωση της ανάλυσης μιας φωτογραφίας, είναι ένας τρόπος να μειωθεί σημαντικά το μέγεθος του αρχείου εικόνας, χωρίς να χαλάσει η ποιότητα της εικόνας στην οθόνη.
Ένα σημαντικό πράγμα που πρέπει να γνωρίζετε σχετικά με την ανάλυση, είναι ότι οι περισσότερες οθόνες υπολογιστών εμφανίζονται στα 72dpi. Αυτό σημαίνει ότι οποιαδήποτε ανάλυση μεγαλύτερη από αυτήν δεν προσθέτει τίποτα στην ποιότητα της εικόνας και απλώς αυξάνει το μέγεθος του αρχείου. Έτσι, μια εικόνα 300dpi και μια έκδοση 72dpi της ίδιας εικόνας, θα φαίνονται ακριβώς ίδιες στην οθόνη, με τη μόνη διαφορά ότι η εικόνα των 300dpi θα είναι 4x μεγαλύτερη σε μέγεθος.
Για χρόνια, το Photoshop είναι το βασικό πρόγραμμα επεξεργασίας φωτογραφίας επαγγελματικά, σε ολόκληρο τον κόσμο και η Adobe έχει μια ενσωματωμένη δυνατότητα που ονομάζεται “αποθήκευση για τον ιστό – Save for web”.
Αυτή η δυνατότητα μας επιτρέπει να αλλάξουμε τις διαστάσεις μιας εικόνας, να αλλάξουμε την ανάλυση σε 72dpi και να αποθηκεύσουμε το αρχείο εικόνας σε μία από τις τρεις αποδεκτές μορφές web με ενσωματωμένες προεπιλογές διαφορετικής ποιότητας. Έτσι, έχουμε την ιδανική βελτιστοποίηση εικόνας για τα αρχεία του web.
Σήμερα, υπάρχουν προσιτές εκδόσεις του Photoshop που σας επιτρέπουν να το χρησιμοποιήσετε, αλλά υπάρχουν και free online εναλλακτικές, όπως το Pixlr, που σας επιτρέπει να διορθώσετε, να αλλάξετε το μέγεθος και να αποθηκεύσετε βελτιστοποιημένες τις εικόνες σας, ειδικά για χρήση στην ιστοσελίδα σας και το web. Είναι πολύ σημαντικό, κατά τη βελτιστοποίηση εικόνας για ιστοσελίδα, να προετοιμάσετε τα γραφικά που θα ανεβάσετε χρησιμοποιώντας εργαλεία που έχουν σχεδιαστεί ειδικά για αυτόν τον σκοπό, ώστε να έχετε τα καλύτερα δυνατά αποτελέσματα.
Περικοπή εικόνας για να εστιάσετε στα βασικά μέρη
Οι περισσότερες φωτογραφίες έχουν πολύ έξτρα φόντο που δεν χρειάζεται ή δεν μας βοηθά να εστιάσουμε εκεί που πραγματικά πρέπει. Η περικοπή φωτογραφίας, είναι η διαδικασία αποκοπής περιττού μέρους από τη φωτογραφία μας. Κάτι τέτοιο θα μπορούσε επίσης να είναι και η ευθυγράμμιση (ίσιωμα) της φωτογραφίας.
Πολλοί κάνουν το λάθος να τοποθετούν το κύριο θέμα των φωτογραφιών τους, είτε ένα πρόσωπο είτε ένα αντικείμενο, σε “νεκρό” σημείο μέσα σε μια φωτογραφία.
Μία κακή περικοπή φωτογραφίας, φαίνεται στον θεατή πως κάτι δεν πάει καλά. Για παράδειγμα:
Κατά την βελτιστοποίηση εικόνας, χρειάζεται ιδιαίτερη προσοχή κατά το cropping, γιατί μπορεί κάτι που σε εσάς να δείχνει καλό, στον θεατή να φανεί εντελώς άστοχο.
Το θέμα σας, στην προκειμένη φάση το σκυλί, δεν πρέπει να είναι κεντραρισμένο στα δεξιά, επειδή μπορεί να έχει έξτρα φόντο η φωτογραφία σας και θέλατε να το αφαιρέσετε. Η 1η φωτογραφία, φαίνεται κάπως περίεργη, λόγω απότομου κοψίματος μπροστά και στο κεφάλι του σκυλιού.
Άρα, κατά την βελτιστοποίηση εικόνας, δίνουμε ιδιαίτερη προσοχή στον χώρο μπροστά από τη μύτη/κεφάλι ενός ατόμου και στον χώρο πάνω από το κεφάλι του ατόμου. Εάν κάποιος κοιτάζει προς μία κατεύθυνση, προσθέστε λίγο περισσότερο χώρο μπροστά του, ώστε ο θεατής να μπορεί να δει μέρος αυτού που κοιτάζει το θέμα (π.χ. κοιτάζει μπροστά του και μπροστά του έχει δρομάκι) ειδικά όταν το θέμα σας βρίσκεται εν κινήσει.
Αλλάξτε τις διαστάσεις ή περικόψτε τις φωτογραφίες σας για να ταιριάζουν κατάλληλα στην ιστοσελίδα σας (π.χ. στη σελίδα προϊόντος του eshop σας)
Οι περισσότερες ψηφιακές φωτογραφίες που τραβάτε, θα είναι σίγουρα πολύ μεγαλύτερες σε διαστάσεις από ό,τι χρειάζεται για να τις χρησιμοποιήσετε στην ιστοσελίδα σας ή το eshop. Κατά τη διαδικασία για την βελτιστοποίηση εικόνας για ιστοσελίδα, αφού περικόψετε τις εικόνες σας, πιθανότατα θα χρειαστεί να αλλάξετε το μέγεθός τους για να ταιριάζουν απόλυτα και σωστά στην ιστοσελίδα σας, για παράδειγμα στη σελίδα προϊόντος.
Να θυμάστε ότι θα έχετε πάντα καλύτερα αποτελέσματα, προετοιμάζοντας την εικόνα σας στις ακριβείς διαστάσεις που πρέπει να έχει στην ιστοσελίδα σας (π.χ. 800x800px).
Ένα σημαντικό πράγμα που πολλοί δεν κατανοούν, είναι ότι κατά τη βελτιστοποίηση εικόνας, μπορείτε πάντα να επεξεργαστείτε μια εικόνα σε μικρότερο μέγεθος αρχείου διατηρώντας ταυτόχρονα την καλή ποιότητα της, αλλά ποτέ δεν μπορείτε να κάνετε το αντίστροφο.
Η προσπάθεια δηλαδή να κάνετε μια εικόνα μεγαλύτερη σε διαστάσεις απ’ ότι είναι, το λογισμικό επεξεργασίας εικόνας θα χρειαστεί να «εφεύρει» pixels. Αυτό θα έχει ως αποτέλεσμα την αλλοίωση της εικόνας σας. Άρα, αν δεν ξέρετε ποιο μέγεθος ακριβώς θα χρειαστείτε, να θυμάστε πάντα ότι κατά τη βελτιστοποίηση εικόνας, μπορείτε να κάνετε μια εικόνα μικρότερη σε διαστάσεις, διατηρώντας την αρχική ποιότητά της.
Σημείωση: Φροντίστε πάντα να διατηρείτε ένα αντίγραφο της εικόνας σε πλήρες μεγέθους, χωρίς επεξεργασία, σε περίπτωση που χρειαστεί να κάνετε αλλαγές αργότερα και δεν έχετε την αυθεντική φωτογραφία διαθέσιμη.
Τώρα γνωρίζετε πλέον ποια είναι τα βασικά σημεία που πρέπει να προσέξετε κατά τη βελτιστοποίηση εικόνας για ιστοσελίδα και κυρίως για ένα eshop. Δείτε ακόμα μερικά χρήσιμα online εργαλεία επεξεργασίας φωτογραφίας και γραφικών.
Διαβάστε ακόμα: Alt-text σε εικόνες και SEO ιστοσελίδας – 3 βασικά tips με Παραδείγματα
