Πλήρης οδηγός χρήσης της μορφής εικόνας WebP

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

Με λίγα λόγια, εδώ είναι μερικά από τα σημαντικά πράγματα που πρέπει να ξέρετε για αυτή τη μη-τόσο-νέα-αλλά-ακόμα-δροσερή μορφή εικόνας:

• Το WebP πηγαίνει από την επέκταση αρχείου .webp.
• Το WebP υιοθετεί τόσο απώλεια όσο και απώλεια συμπίεσης.
• WebP απώλεια εικόνες είναι δυνητικά 25-34% μικρότερο από το JPEG.
• WebP εικόνες χωρίς απώλειες είναι δυνητικά 25% μικρότερη σε σύγκριση με το PNG.
• Το WebP υποστηρίζει διαφάνεια χωρίς απώλειες, δηλαδή PNG με κανάλι άλφα.
• Το WebP υποστηρίζει κινούμενα σχέδια. δηλ. κινούμενα GIF.

Με λίγα λόγια, το WebP είναι σε θέση να μειώσει σημαντικά το μέγεθος αρχείου εικόνας JPEG, GIF, PNG. Εδώ είναι μια ανανέωση στο WebP θα πρέπει να ελέγξετε πριν πάμε στα πράγματα διασκέδασης.

Ενα πείραμα

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

1. JPEG - Απώλεια εικόνας

Εδώ είναι μια τυχαία εικόνα JPEG που άρπαξα από την Pexels. Αρχικό μέγεθος αρχείου - 165kb. ↓

Η εικόνα βελτιστοποιείται με το JpegMini. Νέο μέγεθος αρχείου - 101kb. ↓

Τέλος, η ίδια εικόνα μετατρέπεται σε μορφή WebP. Τελικό μέγεθος αρχείου - 70kb. ↓

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

• GIF - 285kb
• PNG 8 - 241.2kb
• PNG 24 - 657.6kb

2. PNG - Εικόνα χωρίς απώλειες

Τώρα, ας προσπαθήσουμε με PNG με διαφάνεια. (Πηγή). Αρχικό μέγεθος αρχείου - 587kb. ↓

Εδώ είναι η εικόνα βελτιστοποιηθεί με tinypng. Νέο μέγεθος αρχείου - 278kb. ↓

Τέλος, η εικόνα μετατράπηκε σε μορφή WebP. Τελικό μέγεθος αρχείου - 112kb. ↓

3. Κινούμενο GIF

Όταν μετατράπηκε σε WebP, μια εικόνα JPEG μετατράπηκε από 165kb σε 70kb, ενώ μια εικόνα PNG πήγε από 587kb σε 112kb.

Ας δούμε πώς ένα κινούμενο κόμιστρο GIFs:

• Αρχικό μέγεθος αρχείου - 6.8mb
• Μέγεθος αρχείου WebP - 6.3mb

Περίληψη:

Ακολουθεί ένας πίνακας για να συνοψίσουμε ολόκληρο το πείραμα:

	Απώλεια (JPG)	Χωρίς απώλειες (PNG)	Κινούμενο-GIF
Πρωτότυπο	165kb	587kb	6.8mb
Βελτιστοποιημένη με εργαλεία	101kb	278kb	-
Μορφή WebP	70kb	112kb	6.3mb

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

Μετατροπή σε WebP με εργαλεία

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

WebPonize Για Μακ

Το WebPonize είναι ίσως ο απλούστερος και ταχύτερος τρόπος για να μετατρέψετε τις εικόνες σε μορφή WebP στο Mac. Το μόνο που χρειάζεται να κάνετε είναι να μεταφέρετε και να αποθέσετε τις εικόνες σας στο WebPonize και θα κάνει τη μετατροπή. Θα λάβετε το άροτρο, το μέγεθος πριν, το μέγεθος μετά το μέγεθος και το% της μείωσης του αρχικού αρχείου. [Κατεβάστε το WebPonize]

Webpconv Για Windows

Εάν εκτελείτε Windows, το Webpconv είναι η εφαρμογή που πρέπει να εγκαταστήσετε. Έρχεται επίσης σε φορητή έκδοση, ώστε να μπορείτε να το εκτελέσετε ανεξάρτητα στη μονάδα flash. [Λήψη Webconv]

Μετατροπή με γραμμές γραμμής εντολών

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

Σημείωση: Οι παρακάτω οδηγίες για το Mac OS X. Για χρήστες Windows και Linux, κάντε κλικ εδώ.

Ρύθμιση MacPorts σε Mac OSX

Αρχικά, βεβαιωθείτε ότι έχετε εγκαταστήσει το Xcode, ακολουθήστε τα εξής βήματα:

1. Κάντε λήψη και εγκατάσταση των MacPorts. Εάν έχετε ήδη εγκατεστημένα τα MacPorts στο Mac σας, προχωρήστε στο βήμα 2.
2. Εκτόξευση Τερματικό.
3. Πληκτρολογήστε "sudo λιμάνι αυτοαναπροσαρμογή"και πατήστε enter.Αυτό θα ενημερώσει τα MacPort σας στην πιο πρόσφατη έκδοση.

   

4. Στη συνέχεια, πληκτρολογήστε "sudo λιμάνι εγκατάσταση webp"και πατήστε enter. Αυτό θα εγκατασταθεί libwebp (Βιβλιοθήκη WebP).

   

Αυτό είναι. Τώρα ας ρίξουμε μια ματιά πώς να μετατρέψετε τις εικόνες σε WebP χρησιμοποιώντας τη γραμμή εντολών.

Εντολές για Μετατροπή / Επαναφορά

Ακολουθούν οι εντολές για:

I - Μετατροπή αρχείων εικόνας JPEG / PNG σε μορφή WebP

Μορφή: cwebp -q [image_quality] [JPEG / PNG_filename] -o [WebP_filename]

Παράδειγμα:

cwebp -q 80 παράδειγμα.png -α παράδειγμα.webp 

II - Τα κρυφά αρχεία εικόνας WebP επιστρέφουν στο PNG

Μορφή: dwebp [WebP_filename] -o [PNG_filename]

Παράδειγμα:

dwebp image.webp -o image.png 

Περισσότερο: Εάν προσφέρετε μετατροπή μέσω άλλων μέσων, ακολουθούν οδηγίες για τη χρήση εργασιών Grunt και Gulp για τη μετατροπή αρχείων JPG / PNG στο WebP.

Μετατροπή με εργαλεία ηλεκτρονικού ταχυδρομείου

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

• Online-converter.com
• Webp-convertor.com
• Zamzar

Υπόδειξη: Αν είστε google μετατροπή webp online , πιθανότατα θα βρείτε περισσότερες επιλογές.

Προσθήκη Plugin του Photoshop

Ίσως να είστε ευτυχείς να ξέρετε ότι υπάρχει επίσης ένα πρόσθετο Photoshop που σας επιτρέπει να αποθηκεύετε εικόνες σε μορφή WebP μέσω του Photoshop. Αυτό το πρόσθετο υποστηρίζει Mac OS X (CS-CS 6) και Windows (32 bit & 64 bit). [Κατεβάστε το plugin εδώ.]

Σημείωση: Σκεφτείτε ότι πρέπει να ξέρετε ότι το δοκίμασα στο Photoshop CC. Δεν δούλευε εκεί.

Υποστήριξη προγράμματος περιήγησης WebP

Τέλος, ας μιλήσουμε για τη συμβατότητα. Αυτήν τη στιγμή, μπορείτε να προβάλετε εικόνες μορφής WebP στα ακόλουθα προγράμματα περιήγησης (ref):

• Chrome / Chrome για iOS
• Opera / Opera Mini

Δεν είναι τόσο καλή τύχη για FireFox και Σαφάρι, που εξακολουθούν να μην υποστηρίζουν εγγενώς τη μορφή WebP. Ωστόσο, μπορείτε να χρησιμοποιήσετε τη βιβλιοθήκη Javascript του WebPJS μετατρέψτε τις εικόνες WebP σε string string στο χώρο του πελάτη.

Επιστρέψτε σε άλλες μορφές εικόνας

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

  πηγή srcset = "example.webp 1x" type = "image / webp">   

Για αυτόν τον κωδικό, εικόνες / πλήρης-οδηγός-προς-χρήση-webp-image-format_13.jpg θα φορτωθεί εάν ο χρήστης χρησιμοποίησε τον Firefox ή το Safari.

Προεπισκόπηση των εικόνων WebP

Μπορείτε να κάνετε προεπισκόπηση των εικόνων WebP σε προγράμματα περιήγησης Chrome και Opera. Αλλά αν θέλετε να το κάνετε τοπικά στο μηχάνημά σας, θα χρειαστείτε μερικά εργαλεία.

Οι χρήστες Mac μπορούν να χρησιμοποιήσουν το WebPQuickLook για να προεπισκόπηση εικόνων WebP χρησιμοποιώντας τη λειτουργία Quick Look (με την εικόνα επιλεγμένη ή επισημασμένη, πατώντας το πλήκτρο διαστήματος).

Για τους χρήστες Windows, το WebPCodec θα εμφανίσει μια προεπισκόπηση μικρογραφιών των εικόνων WebP στο File Explorer. Τόσο τα ισοδύναμα WebP όσο και τα JPEG θα εμφανίζονται. Σε ορισμένα υποστηριζόμενα λειτουργικά συστήματα παραθύρων (Vista, 7, 8), η εικόνα WebP μπορεί να εμφανιστεί και στο πρόγραμμα προβολής φωτογραφιών των Windows.

Περισσότερο: Το ReSCR.it παράγει αυτόματα εικόνες σε μορφή WeBP και είναι διαθέσιμο αν αποθηκεύσετε τις εικόνες σας με το MaxCDN. (Διαβάστε περισσότερα)

Περαιτέρω αναφορές

• Μετατροπή κινούμενων GIF σε WebP
• Πώς λειτουργεί το WebP
• Ανάπτυξη του WebP μέσω της αποδοχής διαπραγμάτευσης περιεχομένου
• Ταχύτερος, μικρότερος και πιο όμορφος ιστός με το WebP
• Ανάπτυξη νέων μορφών εικόνας στον ιστό
• WebPP API Documentation