Μετατροπή SVG σε WebP
Αποδώστε ένα διανυσματικό αρχείο ως WebP ακριβώς στο πλάτος σε pixel που χρειάζεται η διάταξή σας. Είναι χρήσιμο όταν ένα CMS δεν δέχεται ανέβασμα SVG, όταν μια προεπισκόπηση για τα social χρειάζεται εικόνα bitmap ή όταν μια εικονογράφηση έχει τόσες διαδρομές που το πρόγραμμα περιήγησης τη σχεδιάζει αργά.
Μετατροπέας εικόνων
ή σύρετε Αρχεία JPG, JPEG, JPE … εδώ ·
Έως 95 MB ανά αρχείο· Έως 20 αρχεία· Διαγραφή μετά από 30 λεπτά
Τα αρχεία επεξεργάζονται στους διακομιστές μας και διαγράφονται μετά από 30 λεπτά.
Το 85 κρατά τις φωτογραφίες οπτικά ίδιες με το πρωτότυπο. Μειώστε το μόνο αν χρειάζεστε μικρότερο αρχείο.
Τα JPG, BMP και EPS δεν έχουν διαφάνεια. Τα διάφανα pixel γεμίζουν με αυτό το χρώμα.
Δεκαεξαδικό χρώμα πίσω από τα διάφανα pixel, π.χ. #FFFFFF.
Αυτή η μορφή κρατά μία μόνο εικόνα. Επιλέξτε έξοδο GIF ή WebP αν θέλετε να διατηρηθεί το κινούμενο σχέδιο.
Ένα εικονίδιο πολλών μεγεθών περιέχει αρκετές αναλύσεις σε ένα αρχείο· τα προγράμματα περιήγησης και τα λειτουργικά συστήματα διαλέγουν αυτή που χρειάζονται.
Κρατήστε τις αρχικές διαστάσεις ή εισαγάγετε τη μία πλευρά και η αναλογία διατηρείται.
Pixel για την πλευρά που επιλέξατε παραπάνω.
Ποσοστό των αρχικών διαστάσεων.
Το sRGB είναι κατάλληλο για οθόνες και το διαδίκτυο. Κρατήστε το αρχικό για ροές εκτύπωσης· οι αποχρώσεις του γκρι απορρίπτουν το χρώμα.
Μόνο μεταδεδομένα, το 0 κρατά την αρχική τιμή. Οι εκτυπωτές και ορισμένες πύλες διαβάζουν αυτόν τον αριθμό· δεν αλλάζει τις διαστάσεις σε pixel.
Πώς να χρησιμοποιήσετε αυτό το εργαλείο
- 1
Ανεβάστε το SVG
Προσθέστε έως 20 αρχεία .svg που έχουν εξαχθεί από Figma, Illustrator, Inkscape ή βιβλιοθήκη γραφημάτων, έως 95 MB το καθένα.
- 2
Ορίστε το πλάτος εξόδου
Η επιλογή Αλλαγή μεγέθους τελικής εικόνας ξεκινά με πλάτος 1200 px· αλλάξτε το σε διπλάσιο από το πλάτος που θα καταλαμβάνει η εικόνα στη σελίδα. Η Ποιότητα είναι 90, ή επιλέξτε Χωρίς απώλειες στις Σύνθετες ρυθμίσεις για επίπεδα λογότυπα και εικονίδια.
- 3
Μετατροπή σε WebP
Πατήστε Μετατροπή σε WebP και κατεβάστε τα αρχεία ή ένα ZIP. Οι διαφανείς περιοχές παραμένουν διαφανείς.
Πώς μετατρέπω SVG σε WebP με συγκεκριμένο μέγεθος;
Ανεβάστε το SVG, ορίστε στην επιλογή Αλλαγή μεγέθους τελικής εικόνας το πλάτος σε pixel που χρειάζεστε (1200 px από προεπιλογή) και πατήστε Μετατροπή σε WebP. Το διάνυσμα σχεδιάζεται από την αρχή σε αυτό το πλάτος, οπότε τίποτα δεν μεγεθύνεται ούτε θολώνει.
Πότε ένα SVG πρέπει να γίνει WebP
Το SVG έγινε Σύσταση του W3C το 2001 και είναι η σωστή μορφή για τα περισσότερα λογότυπα και εικονίδια: λίγα kilobyte κειμένου που μένουν ευκρινή σε κάθε ζουμ. Το πρόβλημα ξεκινά όταν το αρχείο φεύγει από τον δικό σας κώδικα. Το WordPress και πολλά φιλοξενούμενα εργαλεία καταστημάτων αρνούνται μεταφορτώσεις SVG, οι προεπισκοπήσεις συνδέσμων στο Facebook, το LinkedIn και το X φορτώνονται ως bitmap, και τα εργαλεία σχεδίασης εξάγουν εικονογραφήσεις με ενσωματωμένα εφέ raster που μετατρέπουν ένα διανυσματικό αρχείο σε αρκετά megabyte κώδικα.
Το WebP, που κυκλοφόρησε η Google το 2010 και το Safari υποστήριξε επιτέλους στην έκδοση 14 το 2020, είναι το bitmap που φτιάχτηκε γι' αυτή τη δουλειά: μικρότερο από το PNG με την ίδια εμφάνιση και με πραγματικό κανάλι άλφα. Η απόδοση του SVG απευθείας σε WebP στο τελικό μέγεθος παρακάμπτει τη συνηθισμένη παράκαμψη μέσω μεγάλου PNG. Αν θέλετε και την αντίστροφη πορεία, η σελίδα μας για το WebP σε SVG εξηγεί γιατί εκεί χρειάζεται διανυσματοποίηση και όχι μετατροπή.
Μεγέθη για μετατροπή SVG σε WebP στις συνήθεις θέσεις του web
1200 × 630 px
Προεπισκόπηση συνδέσμου Open Graph
Εικόνα που εμφανίζεται όταν κοινοποιείται η σελίδα
1920 × 1080 px
Εικονογράφηση hero πλήρους πλάτους
Καλύπτει τις περισσότερες οθόνες υπολογιστών στο 1×
1600 × 900 px
Εικόνα στήλης blog στο 2×
Για στήλη περιεχομένου 800 px
400 × 100 px
Λογότυπο κεφαλίδας στο 2×
Για θέση λογοτύπου 200 × 50 px
SVG
Scalable Vector Graphics
Το SVG είναι μορφή διανυσμάτων βασισμένη σε XML, που τυποποιήθηκε από το W3C το 2001. Αντί για pixel περιγράφει σχήματα, διαδρομές και κείμενο, οπότε παραμένει καθαρό σε κάθε μέγεθος και συνήθως είναι πολύ μικρό για λογότυπα και εικονίδια. Υποστηρίζει διαφάνεια, στυλ CSS, σενάρια και κινούμενα σχέδια, και κάθε πρόγραμμα περιήγησης το εμφανίζει εγγενώς. Το SVG δεν ενδείκνυται για φωτογραφίες και οι σύνθετες εικονογραφήσεις μπορεί να αργούν να αποδοθούν. Μπορείτε να το ανοίξετε και να το επεξεργαστείτε με Illustrator, Inkscape, Figma και προγράμματα περιήγησης.
- Συμπίεση
- –
- Διαφάνεια
- Ναι
- Κινούμενη εικόνα
- Ναι
- Έτος εισαγωγής
- 2001 · W3C
WEBP
Εικόνα WebP
Το WebP είναι μορφή εικόνας που κυκλοφόρησε η Google το 2010 για να φορτώνουν πιο γρήγορα οι ιστοσελίδες. Υποστηρίζει συμπίεση με και χωρίς απώλειες, διαφάνεια άλφα και animation σε μία μορφή. Τα αρχεία WebP με απώλειες είναι συνήθως 25–35% μικρότερα από JPEG παρόμοιας οπτικής ποιότητας και το WebP χωρίς απώλειες είναι συνήθως μικρότερο από το PNG. Το υποστηρίζουν όλα τα σημερινά προγράμματα περιήγησης, αλλά ορισμένο παλαιότερο λογισμικό επιτραπέζιου υπολογιστή, υπηρεσίες εκτύπωσης και φόρμες μεταφόρτωσης εξακολουθούν να το απορρίπτουν. Τα Windows, το macOS και τα περισσότερα σύγχρονα προγράμματα επεξεργασίας εικόνας ανοίγουν αρχεία WebP.
- Συμπίεση
- Με ή χωρίς απώλειες
- Διαφάνεια
- Ναι
- Κινούμενη εικόνα
- Ναι
- Έτος εισαγωγής
- 2010 · Google
Μετατρέπουν SVG σε WebP για να αποκτήσουν ένα ελαφρύ bitmap σταθερού μεγέθους για μέρη που δεν δέχονται διανυσματικά αρχεία ή τα σχεδιάζουν αργά, όπως ένα CMS, μια προεπισκόπηση στα social ή μια φορτωμένη σελίδα προορισμού· το WebP σε SVG είναι διανυσματοποίηση, όχι απλή αλλαγή μορφής.
Πώς γίνεται η ψηφιοποίηση του SVG και τι να ελέγξετε
Ο μετατροπέας διαβάζει το πλάτος, το ύψος και το viewBox του ίδιου του SVG και σχεδιάζει κάθε διαδρομή στο πλάτος που ορίζετε· το ύψος προκύπτει από την αναλογία διαστάσεων. Επειδή η σχεδίαση γίνεται στο τελικό μέγεθος, οι λεπτές γραμμές και τα μικρά κείμενα εξομαλύνονται μία φορά, στη σωστή κλίμακα. Η μεγέθυνση ενός μικρού PNG αργότερα δεν βγαίνει ποτέ το ίδιο καθαρή.
Οι γραμματοσειρές είναι η συνηθισμένη έκπληξη. Αν το SVG ορίζει γραμματοσειρά που δεν είναι ενσωματωμένη ή μετατραπεί σε περιγράμματα, χρησιμοποιείται εφεδρική και αλλάζουν τα μήκη των γραμμών. Μετατρέψτε το κείμενο σε περιγράμματα στο εργαλείο σχεδίασης πριν την εξαγωγή. Οι εξωτερικές εικόνες που συνδέονται με URL μέσα στο SVG δεν φορτώνονται, οπότε ενσωματώστε τες ή ισοπεδώστε πρώτα το γραφικό.
Μετατροπή SVG σε WebP: τι να κάνετε και τι να αποφύγετε
| Κάντε | Μην κάνετε |
|---|---|
| Αποδώστε στο 2× του εμφανιζόμενου πλάτους CSS | Μην μετατρέπετε απλά ενσωματωμένα εικονίδια που είναι μικρότερα ως SVG |
| Χρησιμοποιήστε Χωρίς απώλειες για επίπεδα λογότυπα με λίγα χρώματα | Μην αποδίδετε στα 4000 px για θέση 600 px |
| Κρατήστε το πρωτότυπο SVG για μελλοντικά μεγέθη | Μην στέλνετε WebP σε ενημερωτικά email |
| Σερβίρετε το WebP με χαρακτηριστικά πλάτους και ύψους για να αποφύγετε μετατοπίσεις διάταξης | Μην περιμένετε ζωντανό κείμενο: το WebP είναι pixel, όχι επιλέξιμη γραφή |
Ερωτήσεις για τη μετατροπή SVG σε WebP
Τι πλάτος σε pixel να επιλέξω για τη μετατροπή SVG σε WebP;
Πάρτε το πλάτος με το οποίο εμφανίζεται η εικόνα σε pixel CSS και διπλασιάστε το, ώστε να μένει ευκρινής σε οθόνες υψηλής πυκνότητας κινητών και φορητών. Μια εικονογράφηση σε στήλη 800 px πρέπει να αποδοθεί στα 1600 px. Το 3× σπάνια αξίζει στο web, γιατί το αρχείο μεγαλώνει ενώ το ορατό όφελος είναι μικρό.
Είναι το WebP καλύτερο από το SVG για έναν ιστότοπο;
Όχι για απλά λογότυπα, εικονίδια και διαγράμματα: ένα καθαρό SVG είναι μικρό και ευκρινές σε κάθε μέγεθος, οπότε κρατήστε το. Το WebP υπερέχει σε σύνθετες εικονογραφήσεις με διαβαθμίσεις, φίλτρα ή χιλιάδες διαδρομές, και παντού όπου γίνονται δεκτά μόνο bitmap, όπως οι προεπισκοπήσεις στα social ή ένα CMS χωρίς υποστήριξη SVG.
Διατηρεί το WebP το διαφανές φόντο του SVG μου;
Ναι. Το WebP έχει πλήρες κανάλι άλφα τόσο σε λειτουργία με απώλειες όσο και χωρίς, οπότε οι περιοχές χωρίς γέμισμα στο SVG παραμένουν διαφανείς. Οι άκρες των σχημάτων εξομαλύνονται ως προς τη διαφάνεια, κάτι που φαίνεται σωστό σε οποιοδήποτε χρώμα φόντου.
WebP με ή χωρίς απώλειες για διανυσματικά γραφικά;
Η λειτουργία χωρίς απώλειες ταιριάζει σε επίπεδα λογότυπα, εικονίδια και γραφήματα με λίγα ενιαία χρώματα· συμπιέζονται πολύ καλά και διατηρούν απόλυτα καθαρές άκρες. Η λειτουργία με απώλειες σε ποιότητα 85 έως 90 ταιριάζει σε εικονογραφήσεις με διαβαθμίσεις, σκιές ή υφές, όπου τα αρχεία χωρίς απώλειες βαραίνουν. Δοκιμάστε και τις δύο σε ένα αρχείο και κρατήστε το μικρότερο αποτέλεσμα που φαίνεται καθαρό.
Γιατί δεν μπορώ να ανεβάσω SVG στο WordPress;
Το WordPress αφήνει το SVG εκτός των επιτρεπόμενων τύπων μεταφόρτωσης, επειδή ένα SVG μπορεί να περιέχει scripts. Δέχεται WebP από την έκδοση 5.8, που κυκλοφόρησε το 2021, οπότε με τη μετατροπή παίρνετε αρχείο που η βιβλιοθήκη πολυμέσων δέχεται χωρίς πρόσθετο ασφαλείας. Οι ιστότοποι που χρειάζονται πραγματικά διανύσματα μπορούν να προσθέσουν υποστήριξη SVG μέσω πρόσθετου που απολυμαίνει τον κώδικα.
Μπορώ να χρησιμοποιήσω το WebP σε ενημερωτικό δελτίο email;
Αποφύγετέ το. Αρκετά προγράμματα email, μεταξύ αυτών το Outlook για υπολογιστές με Windows, δεν εμφανίζουν WebP, ενώ το Gmail δεν αποδίδει ούτε SVG. Για email αποδώστε το γραφικό με το SVG σε PNG.
