Όταν μιλάμε για “βελτιστοποίηση” εικόνων για τον Ιστό, εννοούμε τρία πράγματα: Οι εικόνες να φαίνονται καλές, να φορτώνονται γρήγορα και οι μηχανές αναζήτησης να μπορούν να τις βρουν (Web Design & SEO).
Είναι χρήσιμο να γνωρίζετε τα παρακάτω.
1. Δωρεάν εικόνες υψηλής ποιότητας
Υπάρχουν ιστότοποι φωτογραφιών υψηλής ποιότητας όπου μπορείτε να κατεβάσετε δωρεάν φωτογραφίες για εμπορική χρήση. Μερικά είναι:
Όταν κάνετε λήψη μιας εικόνας από έναν ιστότοπο δωρεάν φωτογραφιών, πιθανότατα θα είναι ένα πολύ μεγάλο αρχείο JPEG. Θα χρειαστεί να μειώσετε το μέγεθος και να ανεβάσετε στον ιστότοπό σας μια μικρότερη έκδοση.
2. Χρησιμοποιήστε τον σωστό τύπο αρχείου: JPEG ή PNG
- Οι φωτογραφίες πρέπει να αποθηκεύονται και να αποστέλλονται ως JPG. Αυτός ο τύπος αρχείου μπορεί να χειριστεί όλα τα χρώματα σε μια φωτογραφία σε ένα σχετικά μικρό, αποτελεσματικό μέγεθος αρχείου.
- Τα γραφικά, ειδικά αυτά που χρησιμοποιούν μεγάλες, επίπεδες περιοχές χρώματος, θα πρέπει να αποθηκεύονται ως PNG.
Τα περισσότερα απλά προγράμματα επεξεργασίας εικόνας σάς επιτρέπουν να επιλέξετε JPG ή PNG από τις επιλογές “Αποθήκευση ως“, “Εξαγωγή” ή “Αποθήκευση για web“.
3. Αλλάξτε το μέγεθος των εικόνων για να βελτιστοποιήσετε την ταχύτητα και την εμφάνιση μιας ιστοσελίδας
Στις εικόνες για τον Ιστό, θέλουμε να βρούμε τη σωστή ισορροπία μεταξύ μεγέθους και ανάλυσης. Όσο υψηλότερη είναι η ανάλυσή μιας εικόνας, τόσο μεγαλύτερο θα είναι το μέγεθος του αρχείου. Οι μεγάλες εικόνες και οι αργοί χρόνοι φόρτωσης είναι ιδιαίτερα ενοχλητικοί για τους επισκέπτες από κινητές συσκευές.
Ποιο είναι το ιδανικό μέγεθος εικόνας για έναν ιστότοπο;
- Βέλτιστο μέγεθος αρχείου: Μια εικόνα 15 MB (megabyte) είναι τεράστια. Μια εικόνα 125 KB (kilobyte) είναι πολύ πιο λογική. Εάν το μέγεθος του αρχείου σας είναι πραγματικά μεγάλο, είναι ένδειξη ότι είτε οι διαστάσεις της εικόνας σας είναι πολύ μεγάλες είτε η ανάλυση είναι πολύ υψηλή.
- Μέγεθος εικόνας: το ύψος και το πλάτος μετρώνται σε pixel. Έτσι, για παράδειγμα, μια τυπική εικόνα σε έναν ιστότοπο μπορεί να είναι 795 × 300 pixel.
- Ανάλυση για εικόνες web: οι περισσότερες οθόνες υπολογιστών εμφανίζουν 72dpi ή 92dpi (dots per inch, κουκκίδες ανά ίντσα), επομένως οτιδήποτε μεγαλύτερο από αυτό είναι υπερβολικό και κάνει την εικόνα σας άσκοπα μεγάλη. Όταν ένα πρόγραμμα σχεδίασης έχει την επιλογή “αποθήκευση για το web“, σημαίνει ότι το αποθηκεύετε σε χαμηλή, φιλική προς τον Ιστό ανάλυση.
Πώς βρίσκετε το μέγεθος αρχείου, το μέγεθος της εικόνας και την ανάλυση της εικόνας σας;
Μπορείτε να βρείτε το μέγεθος του αρχείου και το μέγεθος της εικόνας απευθείας στον υπολογιστή σας. Εάν βρίσκεστε σε υπολογιστή, κάντε δεξί κλικ στο αρχείο εικόνας, επιλέξτε “Ιδιότητες”.
- Οι μεγάλες εικόνες ή οι εικόνες φόντου πλήρους οθόνης δεν πρέπει να υπερβαίνουν το 1MB.
- Τα περισσότερα άλλα γραφικά Ιστού μπορεί να είναι 300 KB ή λιγότερο.
- Μπορείτε να κάνετε μια μεγάλη εικόνα μικρότερη, αλλά είναι πολύ δύσκολο να κάνετε μια μικρή εικόνα μεγαλύτερη. Θα φαίνεται ασαφής και με pixel.
Τι κάνετε εάν η εικόνα σας είναι πολύ μεγάλη για τον ιστότοπο;
- Αλλάξτε το μέγεθος της εικόνας. Εάν η φωτογραφία σας έχει πλάτος 5000 pixel, μπορείτε εύκολα να αλλάξετε το μέγεθός της σε πλάτος 2000 pixel, πλάτος 1200 pixel ή ακόμα μικρότερο. Αυτό θα μειώσει σημαντικά το μέγεθος του αρχείου. Όταν αλλάζετε μέγεθος, φροντίστε να διατηρήσετε τις αναλογίες ίδιες για να μην παραμορφώσετε την εικόνα σας.
- Μειώστε την ανάλυση. Τα περισσότερα προγράμματα φωτογραφιών θα συμπιέσουν αυτόματα την ανάλυση της εικόνας σας σε μέγεθος “φιλικό για τον ιστό” (72dpi και 92dpi, αντίστοιχα). Προσαρμόσετε το επίπεδο ποιότητας από την επιλογή “Αποθήκευση ως” ή ακόμη καλύτερα «αποθήκευση για web” σε πολλά προγράμματα επεξεργασίας φωτογραφιών.
- Συμπιέστε την εικόνα σας με ένα δωρεάν online πρόγραμμα όπως το TinyPNG ή το TinyJPG. Και τα δύο θα μειώσουν σημαντικά το μέγεθος του αρχείου σας χωρίς να επηρεάζουν την ποιότητα.
Πρόγραμμα επεξεργασίας φωτογραφίας στο pixlr.com. Η αρχική φωτογραφία ήταν 6302 × 4789 pixel και 16,2 MB (πολύ μεγάλη για τον web). Χρησιμοποιώντας το Pixlr και μειώνοντας την ανάλυση σε 1000 × 760 pixel, το μέγεθος αρχείου έγινε 132 KB!
4. Κάντε τις εικόνες του ίδιου μεγέθους και στυλ
Οι εικόνες σε μια ιστοσελίδα θα φαίνονται καλύτερες εάν χρησιμοποιείτε σταθερό στυλ και μέγεθος. Η συνέπεια θα βοηθήσει επίσης κατά την ευθυγράμμιση του κειμένου, των στηλών και άλλων πληροφοριών στη σελίδα σας.
Περικοπή μιας εικόνας στο Pixlr για να έχει το ίδιο μέγεθος με τις άλλες εικόνες μου.
5. Ονομάστε σωστά το αρχείο εικόνας
Αφιερώστε λίγο χρόνο για να μετονομάσετε τις εικόνες σας. Με αυτόν τον τρόπο γίνεται πιο εύκολη η διαχείριση των φωτογραφιών σας και βελτιστοποίηση στην αναζήτησή τους. Για λόγους συνέπειας, χρησιμοποιήστε πεζά γράμματα και αριθμούς 0-9. Μην εισάγετε σημεία στίξης ή κενά. Και είναι καλύτερο να χρησιμοποιείτε παύλες αντί για κάτω παύλες. (parthenon.jpg αντί για το DSC12345.jpg).
Περίληψη: Βελτιστοποίηση εικόνας για το web
Έστω ότι βρήκατε μια φωτογραφία στο Unsplash. Όταν την κατεβάσατε, το όνομα ήταν “fN6hZMWqRHuFET5YoApH_StBalmainCoffee.jpg”, η ανάλυση 2509 x 1673 pixel και το μέγεθός του ήταν 586KB. Το μέγεθος δεν είναι μεγάλο αλλά εξακολουθεί να είναι πολύ μεγαλύτερο από ό,τι χρειαζόμαστε για να εμφανιστεί απλώς ως μια μικρή φωτογραφία στην ιστοσελίδα.
Οπότε καλό είναι να κάνετε τα εξής:
- Μετονομάστε την εικόνα σε κάτι που έχει νόημα.
- Χρησιμοποιήστε ένα εργαλείο φωτογραφίας για να αλλάξετε το μέγεθος και να περικόψετε την εικόνα στο μέγεθος που θέλετε. Για παράδειγμα επέλεξα 1000 × 760.
- Βεβαιωθείτε ότι είναι το σωστό μέγεθος αρχείου μόλις το κόψετε στο μέγεθος που θέλετε και το αποθηκεύσετε με το πρόγραμμα επεξεργασίας φωτογραφιών.
- Ανεβάστε το στον ισότοπό σας και μην ξεχάσετε να συμπληρώσετε το Alt Text!