Μορφές Εικόνας: Σύγκριση WebP, PNG, JPG & SVG
Η επιλογή της λάθος μορφής εικόνας μπορεί να διογκώσει τους χρόνους φόρτωσης της σελίδας ή να θολώσει τα γραφικά σας. Δείτε πώς συγκρίνονται οι σύγχρονες μορφές ιστού σε συμπίεση, διαφάνεια και ευκρίνεια.
Τα αρχεία σας επεξεργάζονται εξ ολοκλήρου στο πρόγραμμα περιήγησής σας χρησιμοποιώντας HTML5 Canvas και WebAssembly. Κανένα δεδομένο δεν φεύγει ποτέ από τη συσκευή σας.
Παρακάμψτε τις ουρές μεταφόρτωσης και λήψης. Οι μετατροπές γίνονται τοπικά με την πλήρη ταχύτητα υλικού του υπολογιστή σας, χωρίς περιορισμούς διακομιστή.
Συμμορφώνεται με τις επίσημες προδιαγραφές ISO, W3C και IETF για να εγγυάται τη συμβατότητα εξόδου σε σύγχρονα λειτουργικά συστήματα.
Σύγκριση Μορφών & Τεχνικές Προδιαγραφές
| Μορφή Εξόδου | Τύπος MIME | Προδιαγραφή | Τύπος |
|---|---|---|---|
| PNG Εικόνα | image/png | W3C-PNG | Portable Network Graphics |
| JPG Εικόνα JPEG | image/jpeg | ITU-T-T81-JPEG | Joint Photographic Experts Group |
| WebP Εικόνα | image/webp | RFC-6386-VP8 | Σύγχρονη μορφή εικόνας Google WebP |
| SVG Διανυσματικό | image/svg+xml | W3C-SVG | Scalable Vector Graphics |
| HEIC Φωτογραφία | image/heic | ISO-IEC-23008-12-HEIF | High Efficiency Image Container |
| AVIF Εικόνα | image/avif | AOMEDIA-AV1-AVIF | Μορφή αρχείου εικόνας AV1 |
| PSD Photoshop Document | image/vnd.adobe.photoshop | ADOBE-PSD-SPEC | Adobe Photoshop Document |
| PSB Photoshop Large Document | image/vnd.adobe.photoshop | ADOBE-PSD-SPEC | Adobe Photoshop Large Document |
| WMF Windows Metafile | image/x-wmf | MS-WMF-SPEC | Windows Metafile Vector Format |
| EMF Enhanced Metafile | image/x-emf | MS-EMF-SPEC | Enhanced Metafile Vector Format |
| JFIF Image | image/jpeg | ITU-T-T81-JPEG | JPEG File Interchange Format |
| TGA Truevision | image/x-tga | TGA-SPEC | Προηγμένο ραστερικό Truevision |
| PCX ZSoft | image/x-pcx | PCX-SPEC | ZSoft Paintbrush PCX Bitmap |
Τεχνικές Προδιαγραφές & Ανάλυση Codec
Ο Γρήγορος Κανόνας Απόφασης Μορφής
Χρησιμοποιήστε WebP ή AVIF για σύγχρονους ιστότοπους (30% μικρότερα από το JPEG με υποστήριξη διαφάνειας). Χρησιμοποιήστε JPG για φωτογραφίες όπου τα μικρά, ανεπαίσθητα τεχνουργήματα συμπίεσης δεν έχουν σημασία. Χρησιμοποιήστε PNG για στιγμιότυπα οθόνης, γραφικά UI και εικονογραφήσεις που απαιτούν ευκρινές κείμενο ακριβείας pixel. Χρησιμοποιήστε SVG για λογότυπα και εικονίδια που χρειάζονται απεd-ορία κλίμακας.
Raster έναντι Vector: Γιατί τα SVG Δεν Θολώνουν Ποτέ
Οι εικόνες raster (JPG, PNG, WebP) είναι πλέγματα σταθερών εικονοστοιχείων χρώματος - αν κάνετε πολύ μεγάλη ζούμ, γίνονται θολές ή pixelated. Το SVG είναι καθαρό μαθηματικό: αποθηκεύει μαθηματικές γραμμές, καμπύλες και χρώματα, επιτρέποντας στα εικονίδια και τις εικονογραφήσεις να αποδίδονται εξαιρετικά αιχμηρά σε οτιδήποτε, από οθόνες κινητών έως οθόνες 8K με μικρά μεγέθη αρχείων.
Μύθος: 'Το Υψηλότερο DPI Σημαίνει Καλύτερη Ποιότητα Εικόνας Ιστού'
Το DPI (κουκκίδες ανά ίντσα) είναι καθαρά μια φυσική οδηγία εκτύπωσης και αγνοείται εντελώς από τα προγράμματα περιήγησης ιστού. Στα τηλέφωνα και στις οθόνες υπολογιστών, η ευκρίνεια της εικόνας καθορίζεται εξ ολοκλήρου από τις διαστάσεις των εικονοστοιχείων (π.χ. 1920x1080) και την πυκνότητα οθόνης, όχι από τα ενσωματωμένα μεταδεδομένα DPI.
Διαφάνεια Alpha: PNG έναντι WebP
Το παραδοσιακό JPG δεν διαθέτει καθόλου υποστήριξη διαφάνειας - τα διαφανή φόντα γίνονται συμπαγή λευκά ή μαύρα. Το PNG πρωτοπόρησε στην καθαρή διαφάνεια alpha 8-bit, αλλά το WebP προσφέρει πλέον πανομοιότυπη ποιότητα διαφάνειας με έως και 40% μικρότερα μεγέθη αρχείων.
0 byte μεταφορτώθηκαν σε εξωτερικούς διακομιστές. Όλη η επεξεργασία πραγματοποιήθηκε τοπικά στο sandbox του προγράμματος περιήγησής σας.