Τα γραφικά στο WordPress. Παίζοντας με τις εικόνες και πως τις βελτιστοποιώ πριν τις εισαγάγω. Κάντε το WordPress σας να ‘πετάει’ συμπιέζοντας τις εικόνες και φωτογραφίες σε μικρότερο μέγεθος.

Τα γραφικά στο WordPress. Παίζοντας με τις εικόνες και πως τις βελτιστοποιώ πριν τις εισαγάγω. Κάντε το WordPress σας να ‘πετάει’ συμπιέζοντας τις εικόνες και φωτογραφίες σε μικρότερο μέγεθος.

Ένα από τα προβλήματα που αντιμετωπίζουν σχεδόν όλοι οι web developers όταν παραδίδουν μία δουλειά σε κάποιον πελάτη και ιδιαίτερα κάποιο e-shop, είναι όταν ο πελάτης θα αρχίσει να περνάει προϊόντα μόνος του και ιδιαίτερα τις φωτογραφίες των προϊόντων. Κάποιοι δυστυχώς (παρά τις συστάσεις) για ευκολία, από άγνοια ή από έλλειψη χρόνου τραβούν κάποιες φωτογραφίες, με το κινητό τους συνήθως και ανεβάζουν τις φωτογραφίες ως έχουν. Από εδώ και μετά αρχίζουν τα προβλήματα.

Γιατί πρέπει να γίνεται βελτιστοποίηση των εικόνων στο WordPress

Δύο είναι οι βασικοί λόγοι που πρέπει να βελτιστοποιούμε τις εικόνες μας:

Ταχύτητα

Σήμερα οι ταχύτητες στο Internet δεν έχουν καμία σχέση με αυτές του παρελθόντος και όλα φορτώνουν πιο γρήγορα. Πάντα όμως ένα site στο οποίο έχουν προσεχθεί και βελτιστοποιηθεί σωστά εικόνες και φωτογραφίες θα κάνει πάντα τη διαφορά. Με αυτό το τρόπο βελτιώνουμε το UX (User experience = Εμπειρία του χρήστη) και προσφέρουμε τόσο σε desktop όσο και σε mobile συσκευές ταχύτατη φόρτωση των σελίδων. Με αυτό το τρόπο επιτυγχάνουμε να κρατήσουμε το χρήστη περισσότερη ώρα στον ιστότοπο μας χωρίς να τον κουράζουμε και να του προσφέρουμε μία ευχάριστη εμπειρία πλοήγησης.

Καλύτερή βαθμολογία από τη Google

Κακά τα ψέματα. Ότι είναι αργό τιμωρείτε και πάει προς τα πίσω και όχι άδικα.

Ένας από τους σημαντικούς παράγοντες στον αλγόριθμο της Google για καλύτερη ταξινόμηση ενός ιστότοπου είναι η ταχύτητα φόρτωσης των σελίδων του. Όσο πιο γρήγορα τόσο πιο ψηλά βρισκόμαστε στις αναζητήσεις. Όσο πιο αργά τόσο πιο πίσω.

Πιο κάτω σας δίνουμε ένα link από ένα  πολύ χρήσιμο εργαλείο της Google. Δείτε πόσο γρήγορα φορτώνει το site σας σύμφωνα πάντα με τις μετρήσεις της Google:

https://developers.google.com/speed/pagespeed/insights/

Θα δείτε δύο διαφορετικά αποτελέσματα. Ένα για mobile και ένα για desktop συσκευές. Συνήθως τα αποτελέσματα της βαθμολογίας είναι διαφορετικά για τις κατηγορίες των συσκευών. Κάτω από τις βαθμολογία μας δίνεται ένα πίνακας με 'Πιθανές βελτιστοποιήσεις' που μπορούμε να κάνουμε ώστε να αυξήσουμε τη ταχύτητα του site μας. Επίσης θα δούμε και μία λίστα με όλες τις ‘Βελτιστοποιήσεις που εντοπίστηκαν’.

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

Με ποιο τρόπο θα κάνω βελτιστοποίηση των εικόνων στο WordPress

Θα σας προτείνουμε τρεις διαφορετικούς τρόπους βελτιστοποίησης των εικόνων σας που ο καθένας έχει τα πλεονεκτήματα και τα προτερήματα του.

  • Με Photoshop
  • Online συμπίεση εικόνων
  • Με add-ons του WordPress

Βελτιστοποίηση των εικόνων  στο WordPress με Photoshop

Ο περισσότεροι από εμάς σίγουρα έχουν βρεθεί κάποια στιγμή μπροστά στο περιβάλλον του Photoshop. Τι να πει κανείς για τις δυνατότητες αυτού του προγράμματος. Βρισκόταν και βρίσκεται στη κορυφή της επεξεργασίας εικόνας με διαφορά από οτιδήποτε άλλο. Αν και πολλούς τους τρομάζει η πολυπλοκότητα του (και η τιμή του) το πρόγραμμα διαθέτει ένα πολύ απλό και δυνατό εργαλείο στην επεξεργασία και συμπίεση εικόνων για το web.

Ξεκινώντας τη βελτιστοποίηση στο Photoshop

Ανοίγουμε μία οποιαδήποτε εικόνα από το μενού "File -> Open" ή κάνουμε διπλό click επάνω στην επιφάνεια εργασίας του προγράμματος.

Από το μενού Image επιλέγουμε Image Size εναλλακτικά χρησιμοποιούμε τη συντόμευση "Ctrl+Alt+I"

Βλέπουμε στο παράδειγμα μας ότι η εικόνα μας έχει διαστάσεις

  1. Μήκος 3456px
  2. Ύψος 2304px
  3. και ανάλυση 300px/inch

α. Αποεπιλέγουμε την επιλογή "Resample Image" και αλλάζουμε το "Resoloution" από 300 Pixels/Inch σε 72 Pixels/Inch.

Πρέπει να γνωρίζουμε ότι η ανάλυση της οθόνης του υπολογιστή μας είναι 72 Pixels/Inch. Τα 300 Pixels/Inch χρησιμοποιούνται σε εκτύπωση. Έτσι λοιπόν οτιδήποτε περισσότερο από 72 Pixels/Inch είναι επιπλέον ‘βάρος’ για τη δημοσίευση στο Internet.

β. Στη συνέχεια και αφού έχουμε αλλάξει την ανάλυση σε 72 Pixels/Inch επιλέγουμε (τσεκάρουμε) πάλι την επιλογή "Resolution". Τώρα ήρθε η ώρα να αλλάξουμε τις διαστάσεις τις εικόνας μας το "Width" και το "Height" και αφού το κάνουμε πατάμε το πλήκτρο "Ok".

Οι διαστάσεις είναι καθαρό δικό σας θέμα και αυτό εξαρτάται από το τι project δουλεύετε και σε τι διαστάσεις θέλετε να παρουσιάσετε τις εικόνες σας. Τα παραδείγματα στο συγκεκριμένο άρθρο είναι 1200 Pixels x 800 Pixels. Το σωστό είναι να αλλάζουμε μόνο το "Width" ή το "Height" ώστε να κρατάμε σωστές αναλογίες για να μην παραμορφώνεται η εικόνα.

γ. Έχουμε πλέον μπροστά μας την εικόνα με σωστή ανάλυση και διαστάσεις.

Τώρα ήρθε η ώρα να την συμπιέσουμε σε όποια μορφή θέλουμε (συνήθως jpeg) και στη συνέχεια να την αποθηκεύσουμε.

Από το μενού "File" επιλέγουμε το "Save for Web" ή χρησιμοποιούμε τη συντόμευση "Ctrl + Shift + Alt + S". Αμέσως θα δούμε την παρακάτω οθόνη:

Εδώ θα κάνουμε τις εξής ενέργειες:

  1. Επιλέγουμε την καρτέλα “2-Up” ώστε να βλέπουμε τις διαφορές ανάμεσα στην Original εικόνα και στη JPEG συμπίεση
  2. Εάν δεν είναι επιλεγμένο στο πτυσσόμενο μενού επιλέγουμε JPEG συμπίεση
  3. Επιλέγουμε το ποσοστό “Quality” (ποιότητα) της εικόνας μέχρι στο σημείο να μας είναι ικανοποιητική. Αυτό το βλέπουμε μέσα από τη προεπισκόπηση

4. Πατάμε "Save"

Τελειώσαμε!

Βελτιστοποίηση των εικόνων στο WorPress με Online συμπίεση εικόνων

Εάν κάνει κάποιος μία αναζήτηση στο Google με τη λέξη κλειδί  ‘optimize images online’ θα επιστρέψουν …μερικά εκατομμύρια αποτελέσματα. Εμείς επιλέξαμε, δοκιμάσαμε και σας παρουσιάζουμε τα καλύτερα online ‘συμπιεστικά’  για εικόνες ώστε να μην χάνετε χρόνο και μπείτε αμέσως στη παραγωγή.

Τα online ‘συμπιεστικά’ χωρίζονται σε δύο μεγάλες κατηγορίες.

  1. Αυτά τα οποία απλά παρέχουν μία καλύτερη ή λιγότερο καλύτερη συμπίεση
  2. Αυτά που εκτός τη συμπίεση παρέχουν και τη δυνατότητα αλλαγής μεγέθους τις εικόνας

Δυστυχώς κανένα από αυτά που βρήκαμε και παρουσιάζουμε δεν παρέχει τη δυνατότητα για αλλαγή της ανάλυσης της εικόνας. Εάν δηλαδή η εικόνα μας είναι  300 Pixels/Inch και θέλουμε να τη μετατρέψουμε σε 72 Pixels/Inch για παράδειγμα. Λίγο το κακό γιατί όπως θα δείτε παρακάτω στις δοκιμές που εκτελέσαμε τα καλύτερα από αυτά παρέχουν θεαματική συμπίεση με “αποδεκτά ορατά αποτελέσματα”.  Η έκφραση “αποδεκτά ορατά αποτελέσματα” σημαίνει ότι η συμπίεση δεν καταστρέφει τη ποιότητα τις εικόνας σε τέτοιο βαθμό ώστε να μην είναι αισθητά αποδεκτή.

Στο παράδειγμα μας θα χρησιμοποιήσουμε μία εικόνα .jpg διαστάσεων 1920 x 1080px και μεγέθους 2442,60Kb (2,5MB περίπου).

…και ξεκινάμε με  το tinypng.com

Το TinyPNG εκτός από την online συμπίεση παρέχει και ένα δωρεάν πρόσθετο για το WordPress και καθώς επίσης  ένα Photoshop Plugin με κόστος περίπου τα 50$.

Δοκιμάζοντας το TinyPNG

Το tinypng.com διαθέτει λειτουργία drag & drop και αυτό απλοποιεί τη φόρτωση της εικόνας.

Αφού φορτώσαμε την εικόνα των 2442,60Kb και αυτή συμπιέστηκε από τον αλγόριθμο της σελίδας το αποτέλεσμα που πήραμε ήταν -75% του αρχικού μεγέθους. Δηλαδή από 2,5MB πήραμε 633,9 KB. Καθόλου άσχημα.

Παρακάτω μπορούμε να κάνουμε έναν οπτικό έλεγχο και βλέπουμε ότι δεν μπορούμε να διακρίνουμε την αρχική από τη συμπιεσμένη φωτογραφία.

Το TinyPNG τα πήγε πολύ καλά!

Δοκιμάζοντας το optimizilla.com

Το Optimizilla έχει ένα πολύ απλό και εύκολο περιβάλλον για τον χρήστη και ίσως είναι το μοναδικό που παρέχει τη δυνατότητα να επιλέξεις το βαθμό συμπίεσης με ταυτόχρονη προεπισκόπηση της απώλειας ποιότητας της εικόνας. Από προεπιλογή η συμπίεση είναι -67%.

Αφού λοιπόν φορτώσαμε τη φωτογραφία μας για τη συμπίεση, την μεταφορτώσαμε κατόπιν στον υπολογιστή μας για να συγκρίνουμε το ‘πριν’ και το ΄μετά’. Το αποτέλεσμα το βλέπουμε παρακάτω.

Αρχικό αρχείο 2,5MB βελτιστοποιημένο αρχείο 800Kb.

Βλέπουμε ότι και εδώ τα πήγαμε πολύ καλά και ουσιαστικά δεν υπάρχει καμία οπτική διαφορά με το ‘πριν’ και το ΄μετά’.

…συνέχεια έχει το compressor.io

Το Compressor.io μας υπόσχεται δραστική μείωση του μεγέθους του αρχείου μας και υποστηρίζει αρχεία τύπου JPEG - PNG - GIFSVG σε αντίθεση με τα δύο προηγούμενα που υποστηρίζουν μόνο δύο τύπους αρχείων.

Εδώ δεν έχουμε την επιλογή να επιλέξουμε βαθμό συμπίεσης όπως στο Optimizilla αλλά παρέχει μία προεπιλεγμένη συμπίεση γύρω στο -74% που είναι πολύ καλά.

Για να δούμε όμως πως τα πάει με το ‘πριν’ και το ΄μετά’.

Αφού φορτώσαμε τη φωτογραφία μας και τη συμπιέσαμε, τη μεταφορτώσαμε για να τη συγκρίνουμε. Ιδού το αποτέλεσμα:

Όσο και να προσπαθήσουμε δεν μπορούμε πραγματικά να δούμε καμία οπτική διαφορά πριν και μετά τη συμπίεση.

…και φτάσαμε στο Image Optimizer!

Το imageoptimizer.net είναι από εκείνα τα συμπιεστικά που σου επιτρέπουν όχι μόνο να συμπιέσεις και να βελτιστοποιήσεις τις εικόνες σου αλλά σου επιτρέπουν να επιλέξεις το βαθμό συμπίεσης (εμείς επιλέξαμε το “Normal”) αλλά και το πολύ σημαντικό να αλλάξεις τις διαστάσεις τις εικόνας. Δεν διαθέτει drag & drop.

Εδώ θέλω να δώσετε λίγο προσοχή. Όταν προσπαθήσαμε να αλλάξουμε τις διαστάσεις τις εικόνας σε μήκος 1200px είδαμε ότι το ύψος δεν αλλάζει αυτόματα ώστε να κρατηθούν οι σωστές αναλογίες και για να μην υπάρξει παραμόρφωση της εικόνας. Αυτό στη αρχή μας ξένισε διότι ο χρήστης είναι αδύνατον να γνωρίζει το σωστό ύψος εάν θέσει για πχ το μήκος στα 1200px. Συνεχίσαμε το πείραμα μας και αφού φορτώσαμε, συμπιέσαμε και μεταφορτώσαμε την εικόνα στον υπολογιστή μας είδαμε ότι ο αλγόριθμος δούλεψε σωστά και κρατήθηκαν οι σωστές αναλογίες αλλαγής μεγέθους της εικόνας δηλαδή από 1920 x 1080px σε 1200 x 675px που είναι και οι σωστές αναλογίες.

Αυτό το οποίο μας προβλημάτισε σε αυτό το συμπιεστικό είναι ότι όταν στη προσπάθεια μας να αλλάξουμε το βαθμό συμπίεσης από ‘Normal’ που είναι η προεπιλογή σε πιο ισχυρή συμπίεση ‘Small’ και ‘Very small’ το αποτέλεσμα ήταν πάντα το ίδιο. Μεταφορτώναμε πάντα ένα αρχείο μεγέθους 1012Kb. Προφανώς κάτι δεν δουλεύει σωστά.

Πάραυτα το τελικό αποτέλεσμα είναι ικανοποιητικό όπως βλέπετε παρακάτω, αλλά με ένα αρχείο αρκετά μεγαλύτερο σε μέγεθος (1012Kb) από ότι στις παραπάνω δοκιμές μας.

Προσωπικά θα επέλεγα κάποιο άλλο online συμπιστικό.

Κάτι που αξίζει τη προσοχή μας ‘Online Image Optimizer- GIF, JPG, and PNG

Πολλές φορές η εμφάνιση ξεγελά και δημιουργεί λανθασμένες εντυπώσεις. Αυτό συνέβη και με το http://tools.dynamicdrive.com/imageoptimizer που με τη πρώτη ματιά θυμίζει κάτι παλιό, πολύ παλιό θα έλεγα. Πίσω όμως από τα φαινόμενα κρύβεται μία δυνατή μηχανή συμπίεσης που έρχεται να κάνει τη διαφορά με τα περισσότερα από τα συμπιεστικά που δοκιμάσαμε.

Στα υπέρ

  1. Δυνατότητα βελτιστοποίησης για gifs, animated gifs, jpgs, and pngs κάτι που δεν συναντήσαμε μέχρι τώρα τουλάχιστον για animated gifs
  2. Επιλογή για μετατροπή του αρχικού αρχείου σε άλλου τύπου format (GIF, JPG, PNG)
  3. Επιλογή ‘show all results’ που εάν επιλεγεί εμφανίζει εννέα αποτελέσματα διαφορετικού επιπέδου συμπίεσης από -63% έως -95%. Με απλά λόγια η αρχική μας εικόνα μεγέθους 2,5Mb έφτασε στα 114Kb στη πιο ισχυρή συμπίεση χωρίς καθόλου σχεδόν οπτικές διαφορές

Στα μείον είναι ότι δεν διαθέτει δυνατότητα αλλαγής διαστάσεων της εικόνας.

Θα το προτείναμε

kraken.io από τα καλύτερα αλλά…

Θα πρέπει να σταθούμε αρκετά στο kraken.io για να το μελετήσουμε για τις πολλές δυνατότητες που το φέρνουν μπροστά και μάλιστα με διαφορά από τα υπόλοιπα.

Φυσικά το καλό πληρώνεται έτσι και το kraken.io έχει κλειδωμένες τις περισσότερες και πιο ισχυρές του δυνατότητες.

Δεν μπήκαμε σε διαδικασία να δοκιμάσουμε τις δωρεάν δυνατότητες που μας δίνει αλλά πιστεύουμε εάν κάποιος έχει ανάγκη να βελτιστοποιεί συχνά εικόνες αξίζουν τα 50$/έτος για 500Mb/μήνα.

Δοκιμάστε το!

Resizeimage…και κλείνουμε με το καλύτερο!

Το resizeimage.net αποτελεί μία έκπληξη στο Online Optimization.

Έχει τα πάντα ή σχεδόν τα πάντα.

Υπάρχουν λειτουργίες όπως:

  1. Crop your image
  2. Rotate your image
  3. Resize your image
  4. Make background transparent
  5. Select the output image format (JPG PNG GIF BMP)
  6. Optimize your image
  7. PDF to JPG
  8. Gif Maker

Θέλετε και άλλα ή φτάνουν;

Από τη πλευρά μας δεν χρειάζεται να γράψουμε περισσότερα απλά σας προτείνουμε να είναι η επιλογή σας.

Φυσικά όλα τα παραπάνω δωρεάν!

Βελτιστοποίηση των εικόνων στο WorPress με add-ons

Image Optimizer WD

Το πρόσθετο EWWW Image Optimizer βελτιστοποιεί αυτόματα και χωρίς ιδιαίτερες απώλειες τις εικόνες μας καθώς τις φορτώνουμε στον ιστότοπο μας. Μπορεί επίσης να βελτιστοποιήσει τις εικόνες που έχουμε μεταφορτώσει στο παρελθόν.

Ένα από τα ιδιαίτερα χαρακτηριστικό αυτού του πρόσθετου είναι η δυνατότητα μετατροπής των εικόνων μας στη μορφή αρχείου που παράγει το μικρότερο μέγεθος εικόνας. Μπορεί επίσης να εφαρμόσει προαιρετικά μειώσεις απώλειας για εικόνες PNG.

Το πρόσθετο έχει τουλάχιστον 600.000 ενεργές εγκαταστάσεις και βαθμολογία 4,5/5.

BJ Lazy Load

Το BJ Lazy Load είναι να απλό στη χρήση πρόσθετο γραμμένο από Σουηδούς προγραμματιστές.

Μερικά από πλεονεκτήματα του είναι ότι βελτιστοποιεί εικόνες Gravatar, εικόνες των iFrames και δυνατότητα να φορτώνει πρώτα μία εικόνα χαμηλής ανάλυσης πριν φορτωθεί η πραγματική εικόνα.

Σας το προτείνουμε

Imsanity και λογικό μέγεθος εικόνας

Το Imsanity με το περίεργο banner στο WordPress Plugin Repository μας δίνει μέσα από ένα απλό περιβάλλον κάποια ενδιαφέροντα χαρακτηριστικά.

Μπορούμε να ορίσουμε το μέγιστο ύψος και πλάτος της εικόνας μας, να ορίσουμε τη ποιότητα εικόνας JPG από το 1-100 και μετατρέψουμε BMP σε JPG και PNG σε JPG.

Δοκιμάστε το

Κλείνουμε και ανακηρύσσουμε τον νικητή του συγκριτικού μας τεστ που δεν είναι άλλος από το… Photoshop!

Κακά τα ψέματα. Το Photoshop είναι ένα δυνατό εργαλείο που θα ικανοποιήσει κάθε απαίτηση. Αυτό βέβαια δεν μας αποτρέπει σε καμία περίπτωση να χρησιμοποιήσουμε άλλα εργαλεία που και αυτά με το τρόπο τους κάνουν πολύ καλή δουλειά κατά περίπτωση.

Σας εύχομαι καλούς πειραματισμούς.

Μπορεί επίσης να σας αρέσει...

Απάντηση

Αυτός ο ιστότοπος χρησιμοποιεί το Akismet για να μειώσει τα ανεπιθύμητα σχόλια. Μάθετε πώς υφίστανται επεξεργασία τα δεδομένα των σχολίων σας.