PNG σε WebP
Το PNG είναι χωρίς απώλειες αλλά ογκώδες για τον ιστό. Το WebP υποστηρίζει τη διαφάνεια και συχνά παρέχει πολύ μικρότερα αρχεία για λογότυπα, εικονίδια και απεικονίσεις. Μετατρέψτε τα στοιχεία PNG τοπικά πριν από την ανάπτυξη στην παραγωγή.
Πώς να μετατρέψετε το PNG σε WebP
1. Ανεβάστε το PNG σας (με ή χωρίς alpha).
2. Επιλέξτε ρυθμίσεις WebP με απώλειες ή χωρίς απώλειες, εάν προσφέρονται.
3. Συγκρίνετε το μέγεθος εξόδου με το αρχικό PNG.
4. Κατεβάστε το αρχείο WebP.
Παραδείγματα
Λογότυπο στον ιστότοπο μάρκετινγκ
Ένα λογότυπο PNG 120 KB μπορεί να γίνει ένα WebP 40 KB με πανομοιότυπη διαφάνεια — ταχύτερα φορτία κεφαλίδων.
Φύλλο sprite παιχνιδιού
Τα επίπεδα χρώματα sprites χωρίς περιορισμένη συμπίεση σε σύγκριση με το Web PNG.
Γραφικά καταστήματος εφαρμογών
Αντικαταστήστε μεγάλα στιγμιότυπα οθόνης PNG σε ομαδικά στοιχεία όπου ο χρόνος εκτέλεσης υποστηρίζει WebP.
Πότε να χρησιμοποιήσετε αυτό το εργαλείο
• Όταν χρειάζεστε διαφάνεια στον ιστό με μικρή διαφάνεια byte.
• Κατά τη μετεγκατάσταση διεπαφής με βαρύ PNG σε σύγχρονες μορφές.
• Όταν το Lighthouse επισημαίνει μεγάλα στοιχεία PNG.
Πότε να επιλέξετε κάτι άλλο
• Όταν τα περιβάλλοντα στόχου δέχονται μόνο PNG (ορισμένοι αγωγοί ηλεκτρονικού ταχυδρομείου και PDF).
• Όταν οι σχεδιαστές χρειάζονται καθολική ανταλλαγή επεξεργασίας χωρίς απώλειες.
• Όταν η υποστήριξη Safari-on-old-iOS είναι μια δύσκολη απαίτηση χωρίς εναλλακτικές λύσεις.
PNG έναντι WebP για στοιχεία διεπαφής χρήστη
Οι σχεδιαστές εξάγουν PNG από συνήθεια. Για τον ιστό παραγωγής, το WebP με διαφάνεια συχνά μειώνει στο μισό το μέγεθος μεταφοράς. Αυτοματοποιήστε τη μετατροπή σε CI ή χρησιμοποιήστε αυτό το εργαλείο για ad-hoc στοιχεία.
Επικουρικές στρατηγικές
Χρησιμοποιήστε σύνολα εικόνων/πηγών: WebP πρώτα, PNG μετά. Εναλλακτικά, εντοπίστε την υποστήριξη από την πλευρά του server μέσω της Αποδοχής κεφαλίδων. Μην προβάλλετε το WebP σε πελάτες που δεν μπορούν να το αποκωδικοποιήσουν.
Επεξεργασία ροής εργασιών
Διατηρήστε τα κύρια PNG στα repos σχεδίασης. Δημιουργήστε WebP μόνο για ανάπτυξη τεχνουργημάτων — η επαναφορά των επεξεργασιών είναι ευκολότερη από πηγές PNG χωρίς απώλειες.
Συχνές ερωτήσεις
Διατηρείται η διαφάνεια;
Ναι — Το WebP υποστηρίζει ένα κανάλι άλφα παρόμοιο με το PNG.
WebP χωρίς απώλειες ή χωρίς απώλειες;
Τα γραφικά με επίπεδα χρώματα ταιριάζουν συχνά στο WebP χωρίς απώλειες. Οι φωτογραφίες που είναι ενσωματωμένες σε PNG ενδέχεται να χρησιμοποιούν WebP με απώλειες για μικρότερο μέγεθος.
Θα αλλάξουν τα χρώματα;
Η λειτουργία χωρίς απώλειες θα πρέπει να ταιριάζει ακριβώς με το PNG. Η λειτουργία απώλειας ενδέχεται να παρουσιάζει μικρές διαφορές στις διαβαθμίσεις.
Μπορώ να χρησιμοποιήσω το WebP σε εικόνα φόντου CSS;
Ναι σε όλα τα σύγχρονα προγράμματα περιήγησης. Παρέχετε εναλλακτικό PNG μόνο εάν τα αναλυτικά στοιχεία δείχνουν επισκεψιμότητα παλαιού τύπου.
Τοπική επεξεργασία;
Ναι — τα αρχεία δεν φεύγουν ποτέ από το πρόγραμμα περιήγησής σας.
Καλύτερα από το SVG;
Για απλά λογότυπα, το SVG είναι συχνά μικρότερο Το WebP ταιριάζει σε έργα τέχνης ράστερ και φωτογραφίες με alpha.