Τι είναι το WebP και πως μπορώ να μετατρέψω τις εικόνες μου στο WordPress;

Το WebP είναι μια web μορφή φωτογραφιών που δημιουργήθηκε από την Google ώστε να παρέχει μικρότερο μέγεθος εικόνων, αλλά σε παρόμοια ποιότητα με τις κλασικές μορφές εικόνων.

Στο σημερινό άρθρο θα δούμε τι είναι το WebP, ποια είναι τα θετικά και τα αρνητικά του να μετατρέπεις τις φωτογραφίες του blog σου σε WebP μορφή, και πως ακριβώς μπορείς να το κάνεις στο WordPress.

Τι είναι το WebP;

Οι WebP φωτογραφίες είναι μια μορφή εικόνων από την Google που έχει σχεδιαστεί για να “συμπιέζει” κατά κάποιο τρόπο τις φωτογραφίες του blog σου, χωρίς ωστόσο να χάνουν ποιότητα. Οι εικόνες σε WebP μορφή όχι απλά φορτώνουν πολύ πιο γρήγορα, αλλά το Google PageSpeed Insights σε επιβραβεύει που χρησιμοποιείς την τεχνολογία της εταιρείας, παρέχοντας σου μεγαλύτερο σκορ ταχυτήτων.

• Οι JPEG εικόνες μπορούν να εμφανίσουν εικόνες με πολύ λεπτομέρεια και πολλά διαφορετικά χρώματα, κάνοντας την JPEG μορφή ιδανική για κάθε φωτογράφο. Την ίδια στιγμή, όμως, τα αρχεία είναι συχνά αρκετά μεγάλα και δεν μπορούν να συμπιεστούν αρκετά χωρίς να χάσουν την ποιότητα τους.
• Οι PNG εικόνες είναι ιδανικές όταν δεν χρειάζεται να υπάρχουν αρκετά δεδομένα σε αυτές. Τα λογότυπα, τα screenshots, τα favicons και πάει λέγοντας, όλα είναι ιδανικά για PNG μορφή. Είναι επίσης η ιδανική μορφή σε όσο αφορά την συμπίεση και υποστηρίζουν την διαφάνεια (transperant).
• Οι GIF εικόνες είναι εξαιρετικές για animations, αλλά συχνά είναι αρκετά βαριές, δεν είναι καλές ως στατικές εικόνες και δεν μπορούν να συμπιεστούν αρκετά χωρίς να χάσουν πάρα πολύ ποιότητα.

Οι WebP μορφή παρέχει μια lossy και μια lossless μορφή συμπίεσης ως επιλογή. Η δεύτερη μορφή διατηρεί περισσότερα δεδομένα, ενώ η δεύτερη σου επιτρέπει να κάνεις ακόμα καλύτερη συμπίεση των φωτογραφιών.

Σύμφωνα με την Google, οι WebP εικόνες είναι περίπου:

• 25-34% μικρότερες σε μέγεθος απ’ ότι οι JPEG εικόνες.
• 26% μικρότερες σε μέγεθος απ’ ότι οι PNGs.

Μπορείς να δεις παραδείγματα δίπλα-δίπλα στην WebP Gallery της Google.

Τα θετικά και τα αρνητικά του να χρησιμοποιείς WebP εικόνες στην ιστοσελίδα σου

Τώρα που γνωρίζεις τι είναι η συγκεκριμένη μορφή εικόνων, ας μιλήσουμε ένα λεπτάκι για τα θετικά και τα αρνητικά του να χρησιμοποιείς την μορφή φωτογραφιών της Google στο blog σου.

Τα θετικά των WebP εικόνων

Όπως ανέφερα και παραπάνω, ίσως το μεγαλύτερο θετικό του να χρησιμοποιείς το WebP στο blog σου είναι η εξαιρετική συμπίεση που κάνει στις φωτογραφίες χωρίς να χάνουν ποιότητα. Είναι ιδανική μορφή και για τις PNG αλλά και για τις JPEG εικόνες.

Οι φωτογραφίες πιάνουν το μεγαλύτερο ποσοστό χώρου σε μια ιστοσελίδα, οπότε όταν τις συμπιέζεις, όχι απλά φορτώνουν όλες πιο γρήγορα, αλλά μειώνεις και τα μηνιαία έξοδα από το web hosting πακέτο που έχεις. Με τις WebP εικόνες θα έχεις επίσης μεγαλύτερη ταχύτητα, κάτι το οποίο θα σε ωφελήσει αρκετά στο συνολικό SEO σκορ του blog σου.

Διάβασε επίσης: Φωτογραφίες για το blog – Που να τις βρεις και πως να τις επεξεργαστείς

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

Σημείωση: Αν έχεις μια JPEG ή PNG φωτογραφία η οποία είναι 1500×2000 pixels και την μετατρέψεις σε WebP, θα παραμείνει στις ίδιες διαστάσεις. Μόνο το βάρος της θα μειωθεί, π.χ. από 1MB στα 100KB.

Τα αρνητικά της WebP μορφής

Εφόσον η WebP μορφή παρέχει τόσα πολλά οφέλη, για ποιο λόγο δεν χρησιμοποιείται από περισσότερους ανθρώπους και ιστοσελίδες; Ο αρχικός λόγος είναι επειδή δεν υποστηρίζεται από όλους τους browsers, αν και όλο και περισσότεροι υποστηρίζουν την συγκεκριμένη μορφή τα τελευταία χρόνια.

Τα καλά νέα, είναι πως αν είσαι στο WordPress, υπάρχουν εργαλεία τα οποία θα παρέχουν WebP μορφή στους browsers που την υποστηρίζουν, και την κανονική μορφή των εικόνων στους browsers που δεν την υποστηρίζουν. Ακριβώς όπως συμβαίνει και με το Inkstory, του οποίου οι εικόνες είναι σε WebP μορφή.

Οπότε, ενώ οι περισσότεροι browsers υποστηρίζουν πλέον την WebP μορφή, ορισμένοι δεν την υποστηρίζουν ακόμα, όπως ο Safari για παράδειγμα.

Ευτυχώς, όπως ανέφερα και παραπάνω, μπορείς να χρησιμοποιείς την WebP μορφή στο blog σου και να παρέχεις αυτές τις εικόνες μόνο στους browsers που την υποστηρίζουν. Φυσικά, με αυτόν τον τρόπο δεν γλιτώνεις χώρο από τον server σου, αλλά τουλάχιστον αυξάνεις αρκετά την ταχύτητα του blog σου.

Πως να χρησιμοποιείς WebP εικόνες στο WordPress

Το WordPress κάνει την διαδικασία της WebP μορφής παιχνιδάκι. Επιλέγοντας ένα plugin της επιλογής σου, μπορείς γρήγορα και εύκολα να μετατρέψεις όλες τις εικόνες του blog σου σε WebP.

Jetpack

Ο πιο εύκολος και απλός τρόπος για να χρησιμοποιήσεις την WebP μορφή στο WordPress είναι με την χρήση του JetPack plugin.

Το JetPack σου δίνει πρόσβαση στην Image CDN υπηρεσία του, η οποία υποστηρίζει την WebP μορφή από προεπιλογή. Μπορείς να ενεργοποιήσεις αυτή την επιλογή από τις Ρυθμίσεις του JetPack στο WordPress σου, επιλέγοντας να γίνεται serve των εικόνων από το Global CDN.

Αυτή η επιλογή θα εμφανίζει τις WebP εικόνες μόνο στους browsers που την υποστηρίζουν, και θα παρέχει την κανονική μορφή εικόνων στους browsers που δεν υποστηρίζουν την τεχνολογία WebP.

ShortPixel / EWWW Image Optimizer / Optimus Image Optimizer σε συνδυασμό με το Cache Enabler

Αν είσαι σαν εμένα, τότε το τελευταίο που θέλεις να κάνεις είναι να εγκαταστήσεις το JetPack στο WordPress σου. Προσωπικά, το απεχθάνομαι. Είναι βαρύ, πολύ βαρύ. Αργεί απίστευτα πολύ το Dashboard του WordPress και υπάρχουν αρκετά plugins και themes που χαλάνε εξαιτίας του. Επίσης, πρέπει να ξέρεις πως να το ρυθμίζεις σωστά, εναλλακτικά θα δεις την ταχύτητα του blog σου να πέφτει για πλάκα. Το πιο απλό παράδειγμα είναι όταν τα themes παρέχουν sharing κουμπιά από προεπιλογή, βάζεις και αυτά του JetPack, και ξαφνικά φορτώνονται ένα σωρό κώδικες στο Google PageSpeed Insights και σου βγάζει χαμηλό σκορ ταχύτητας.

Στο Inkstory χρησιμοποιώ το Optimus Image Optimizer HQ, το οποίο πληρώνω περίπου 25 ευρώ κάθε χρόνο, και σε συνδυασμό με το Cache Enabler, παρέχω WebP εικόνες στους browsers που υποστηρίζουν αυτή την μορφή. Άλλα plugins που υποστηρίζουν την WebP λειτουργία είναι το ShortPixel και το EWWW Image Optimizer, εξίσου σε συνδυασμό με το Cache Enabler.

Ο λόγος που επέλεξα το Optimus είναι χάρη στο χαμηλό του κόστος και λόγο του ότι είναι της KeyCDN, μια πολύ δημοφιλής εταιρεία η οποία έχει φτιάξει επίσης και το Cache Enabler. Αν αναρωτιέσαι, ωστόσο, για ποιο λόγο χρησιμοποιώ το Cache Enabler και όχι κάποιο άλλο cache plugin, είναι επειδή προς το παρόν είναι το μοναδικό που έχω βρει να υποστηρίζει τις WebP εικόνες. Τόσα χρόνια χρησιμοποιώ το WP Rocket, αλλά σύμφωνα με το support τους, η υποστήριξη για WebP θα είναι σύντομα διαθέσιμη (αναμένουμε λοιπόν).

Σύνοψη..

Τι είναι το WebP; Είναι μια μορφή εικόνων που θα αυξήσει την ταχύτητα του blog σου, θα σου γλιτώσει χώρο από τον server, θα κάνει αυτόματη συμπίεση εικόνων χωρίς να χάνουν την ποιότητα τους και, το καλύτερο απ’ όλα, δεν θα μπορεί κανείς να σου κλέψει τις εικόνες. Όταν χρησιμοποιείς WebP εικόνες, όταν προσπαθεί να τις κατεβάσει κάποιος, κατεβαίνουν ως .webp αρχεία και όχι ως εικόνες.

Εσύ χρησιμοποιείς WebP εικόνες στο blog σου; Άκουσες στο παρελθόν για την συγκεκριμένη μορφή ή αυτή είναι η πρώτη φορά που ακούς για τη νέα τεχνολογία της Google; Θα χαρώ να ακούσω τις απόψεις σου στα σχόλια παρακάτω.