JPG, PNG ή WebP: ποια μορφή να χρησιμοποιήσετε;

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

Το JPG (γράφεται και JPEG) αποθηκεύει τις φωτογραφίες σε μικρό χώρο, απορρίπτοντας λεπτές λεπτομέρειες που το μάτι σπάνια προσέχει. Το δέχονται σχεδόν όλοι οι ιστότοποι, οι εφαρμογές, οι υπηρεσίες email και οι πλατφόρμες πωλήσεων, γι’ αυτό είναι η ασφαλέστερη επιλογή όταν δεν είστε σίγουροι.

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

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

Το PNG είναι χωρίς απώλειες: κάθε pixel διατηρείται ακριβώς όπως ήταν. Γι’ αυτό ταιριάζει σε λογότυπα, εικονίδια, στιγμιότυπα οθόνης εφαρμογών και οτιδήποτε περιέχει κείμενο, ενώ υποστηρίζει πλήρη διαφάνεια, μαζί με απαλές άκρες και σκιές.

Το τίμημα είναι το μέγεθος. Μια φωτογραφία αποθηκευμένη ως PNG είναι συνήθως αρκετές φορές μεγαλύτερη από ένα καλό JPG. Στο Web Almanac 2024 του HTTP Archive, το διάμεσο PNG στον ιστό χρησιμοποιούσε 3,8 bit ανά pixel, έναντι 2,0 για το JPG και 1,3 για το WebP.

Αν ένα PNG περιέχει φωτογραφία, μετατρέψτε το. Αν περιέχει γραφικό, συμπιέστε το ως PNG ή δοκιμάστε τη Μετατροπή PNG σε WebP, που διατηρεί τη διαφάνεια.

Η Google σχεδίασε το WebP για το web, και λειτουργεί και με τους δύο τρόπους: με απώλειες όπως το JPG ή χωρίς απώλειες όπως το PNG, με διαφάνεια και στις δύο περιπτώσεις. Σύμφωνα με τη Google, τα αρχεία WebP χωρίς απώλειες είναι 26% μικρότερα από τα PNG, και τα αρχεία WebP με απώλειες είναι 25–34% μικρότερα από αντίστοιχα JPG.

Όλα τα σημερινά μεγάλα προγράμματα περιήγησης εμφανίζουν WebP: περίπου το 97% των προγραμμάτων περιήγησης σε χρήση, μαζί με το Safari από την έκδοση 14. Η παγίδα βρίσκεται έξω από το πρόγραμμα περιήγησης. Ορισμένες πλατφόρμες ακόμη δεν δέχονται μεταφορτώσεις WebP: το Amazon, το Etsy και το Mailchimp, για παράδειγμα, αναφέρουν JPG και PNG αλλά όχι WebP.

Ούτε η μετατροπή είναι εγγυημένο κέρδος. Ένα απλό λογότυπο ή ένα στιγμιότυπο οθόνης με λίγα χρώματα μπορεί να είναι μικρότερο ως PNG. Κάντε τη μετατροπή, συγκρίνετε τα δύο αρχεία και κρατήστε το μικρότερο.

1. 01Χρειάζεται η εικόνα διαφάνεια; Χρησιμοποιήστε PNG ή WebP όπου γίνεται δεκτό.
2. 02Είναι φωτογραφία ή ρεαλιστική εικόνα; Χρησιμοποιήστε JPG ή WebP στον δικό σας ιστότοπο.
3. 03Είναι στιγμιότυπο οθόνης, γράφημα, λογότυπο ή κείμενο; Χρησιμοποιήστε PNG, μετά δοκιμάστε WebP και συγκρίνετε τα αρχεία.
4. 04Πού θα μεταφορτωθεί; Βεβαιωθείτε ότι η πλατφόρμα δέχεται τη μορφή· αν όχι, μείνετε σε JPG ή PNG.
5. 05Συμπιέστε το τελικό αρχείο, όποια κι αν είναι η μορφή του.

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

Το AVIF είναι μια νεότερη μορφή που μπορεί να δώσει ακόμη μικρότερα αρχεία, αλλά η δημιουργία του είναι πιο αργή και το δέχονται λιγότερα εργαλεία και πλατφόρμες. Στον ιστό παραμένει σπάνιο: στο Web Almanac 2025, το AVIF αντιστοιχούσε στο 0,7% των εικόνων LCP, έναντι 11% για το WebP, 26% για το PNG και 57% για το JPG. Για τους περισσότερους ιστότοπους σήμερα, τα JPG, PNG και WebP καλύπτουν τα πάντα.

• Αποθηκεύετε φωτογραφίες ως PNG για καλύτερη ποιότητα. Το PNG κρατά τις λεπτομέρειες που ήδη υπάρχουν, αλλά δεν μπορεί να προσθέσει καμία, και το αρχείο γίνεται αρκετές φορές μεγαλύτερο.
• Μετατρέπετε ένα JPG σε PNG για να διορθώσετε θολές άκρες. Η ζημιά υπάρχει ήδη στο JPG· γυρίστε καλύτερα στο πρωτότυπο.
• Περνάτε τα πάντα σε WebP χωρίς έλεγχο. Ο ιστότοπός σας μπορεί να το δέχεται με χαρά, ενώ η πλατφόρμα του καταστήματός σας ή το εργαλείο email το απορρίπτει.
• Σταματάτε μόλις διαλέξετε μορφή. Η μορφή ορίζει το σημείο εκκίνησης· τα υπόλοιπα τα κάνει η συμπίεση του τελικού αρχείου.

Στη συνέχεια: πώς να συμπιέσετε εικόνες για ιστότοπο, βήμα βήμα.