Tutorial Photoshop: Βελτιστοποίηση εικόνων για χρήση στο Web

βελτιστοποίηση εικόνας ιστού

Ανάλογα με το σκοπό του Οι φωτογραφίες μας θα απαιτήσουν τη μία ή την άλλη θεραπεία. Δεν είναι το ίδιο να διαμορφώσετε μια φωτογραφία που θα εκτυπωθεί, θα εμφανιστεί σε έναν ψηφιακό προβολέα ή θα εμφανιστεί σε μια ιστοσελίδα. Κάθε μέσο έχει διαφορετικές ελλείψεις, χαρακτηριστικά ή ανάγκες. Για αυτόν τον λόγο, είναι απαραίτητο να δώσουμε ιδιαίτερη προσοχή σε αυτούς τους τύπους πτυχών, διαφορετικά θα μπορούσαμε να μειώσουμε την ποιότητα των συνθέσεων μας έμμεσα και χωρίς να το γνωρίζουμε.

Σε αυτήν την περίπτωση, θα δούμε στο παρακάτω φροντιστήριο τις ρυθμίσεις που μας προσφέρει το Adobe Photoshop για να αποθηκεύσουμε τις εικόνες μας με τέτοιο τρόπο ώστε να έχουν τη βέλτιστη επεξεργασία για αναπαραγωγή σε ιστοσελίδες και στο Διαδίκτυο. Με αυτόν τον τρόπο θα προσπαθήσουμε να βρούμε τη φθηνότερη επιλογή λαμβάνοντας υπόψη πτυχές όπως η ποιότητα (κοπή και pixelation) και από την άλλη πλευρά το μέγεθος του αρχείου, γνωρίζετε ήδη ότι όταν πρόκειται να ανεβάσουμε φωτογραφίες ή αρχεία στον ιστότοπό μας, θα πρέπει να ζυγίζουν όσο το δυνατόν λιγότερο, έτσι ώστε η λειτουργία της ιστοσελίδας μας είναι πολύ πιο ευέλικτη. Είναι ενδιαφέρον ότι λαμβάνετε υπόψη αυτές τις βασικές επιλογές, γνωρίζετε ήδη ότι πρέπει να προσπαθήσουμε να φροντίσουμε όλες τις λεπτομέρειες που βρίσκονται στα χέρια μας.

Βελτιστοποίηση εικόνας JPEG

Για να ξεκινήσουμε θα ξεκινήσουμε την εφαρμογή μας και θα εισαγάγουμε τη φωτογραφία με την οποία πρόκειται να εργαστούμε, σε αυτήν την περίπτωση μια μεσαία εικόνα και σε μορφή JPEG.

βελτιστοποίηση-1

Για να αποθηκεύσετε αυτήν τη φωτογραφία με τα κατάλληλα χαρακτηριστικά για εργασία στον Ιστό, θα πρέπει να μεταβείτε στο μενού Αρχείο> Αποθήκευση για Web ... (μπορούμε επίσης να αποκτήσουμε πρόσβαση σε αυτήν την επιλογή μέσω Alt + Shift + Ctrl + S).

βελτιστοποίηση-2

Θα κάνουμε κλικ στην καρτέλα "τέσσερα αντίγραφα" στο επάνω μέρος του διαλόγου Αποθήκευση για Web. Κοιτάζοντας τις τέσσερις διαφορετικές ρυθμίσεις στο αρχείο, μπορούμε να πάρουμε μια καλή ιδέα για το ποια ρύθμιση ταιριάζει καλύτερα στους σκοπούς μας. Χρησιμοποιώντας τις προβολές 4 αντιγράφων, πολλές εκδόσεις μιας εικόνας μπορούν να εμφανιστούν στο ίδιο παράθυρο εικόνας. Θα το κάνουμε αυτό, θα εφαρμόσουμε διαφορετικές μορφές και θα παρατηρήσουμε ποια από αυτές ταιριάζει καλύτερα στις αξιώσεις μας. Στη συνέχεια, μπορείτε να προσαρμόσετε τις αντιστοιχίσεις βελτιστοποίησης για κάθε έκδοση της εικόνας για να επιλέξετε τον καλύτερο συνδυασμό αντιστοιχίσεων.

βελτιστοποίηση-3

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

βελτιστοποίηση-4

Θα τοποθετήσουμε το δρομέα του ποντικιού πάνω από την πάνω δεξιά έκδοση της εικόνας (που είναι η ενεργή έκδοση όπως δείχνει το πιο σκοτεινό περίγραμμα). Ο δρομέας θα έχει τη μορφή ενός χεριού, το οποίο δείχνει ότι μπορούμε να το σύρουμε για να μετακινήσουμε την εικόνα. Θα σύρουμε για να αλλάξουμε τη θέση της εικόνας έτσι ώστε να βρούμε την πιο κατάλληλη περιοχή της εικόνας, εκείνη όπου βρίσκουμε τη μεγαλύτερη ποσότητα αποχρώσεων και αντιθέσεων.

βελτιστοποίηση-5

Από το αναπτυσσόμενο μενού Preset στον πίνακα Optimized, θα επιλέξουμε το GIF 128 με το Dither. Παρατηρήστε πόσο άμεσα στην έκδοση της εικόνας που επιλέξαμε (σε αυτήν την περίπτωση πάνω δεξιά) υπήρξαν αλλαγές που κάνουν τις σκοτεινότερες περιοχές πιο ορατές. Στη συνέχεια, θα συνεχίσουμε να βλέπουμε τις ρυθμίσεις JPEG και PNG στους ακόλουθους πίνακες.

βελτιστοποίηση-6

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

βελτιστοποίηση-7

Θα επιλέξουμε ξανά JPEG High από το αναπτυσσόμενο μενού ρυθμίσεων. Αυτό βελτιώνει σημαντικά την ποιότητα της εικόνας, αλλά επίσης προκαλεί σημαντική αύξηση του μεγέθους του αρχείου.

βελτιστοποίηση-8

Τέλος, η καλύτερη επιλογή θα είναι το μεσαίο έδαφος. Θα επιλέξουμε ξανά JPEG Media από το αναπτυσσόμενο μενού Preset. Η ποιότητα της εικόνας είναι πλέον αποδεκτή, ενώ το μέγεθος του αρχείου είναι πολύ μικρότερο από την έκδοση JPEG High ή την έκδοση GIF.

βελτιστοποίηση-9

Τέλος θα επιλέξουμε το κάτω δεξί πλαίσιο. Θα επιλέξουμε και πάλι το PNG-8 128 με εκκόλαψη από το αναπτυσσόμενο μενού. Αν και αυτή η επιλογή παρέχει μικρότερο μέγεθος αρχείου από την αρχική εικόνα, η ποιότητα της εικόνας δεν είναι τόσο καλή όσο η έκδοση JPEG Medium, η οποία θα έχει επίσης μικρότερο μέγεθος αρχείου.

βελτιστοποίηση-10

Τέλος θα κάνουμε κλικ στην έκδοση JPEG, δηλαδή αυτή που έχουμε στην κάτω αριστερή πλευρά. Στον Βελτιστοποιημένο Πίνακα (στα δεξιά του διαλόγου) βεβαιωθείτε ότι η επιλογή Progressive είναι ενεργοποιημένη (αυτό θα κάνει τη λήψη της εικόνας σε πολλά περάσματα, καθένα από τα οποία αυξάνει την ποιότητα της εικόνας) και κάντε κλικ στο Ok.

βελτιστοποίηση-11

Τέλος, στο παράθυρο διαλόγου Save Optimized As, θα χρησιμοποιήσουμε το αρχικό όνομα και θα κάνουμε κλικ στο Save. Με αυτόν τον τρόπο θα αποθηκεύσουμε μια έκδοση JPEG του αρχικού αρχείου στον επιθυμητό φάκελο. Τέλος, θα κλείσουμε αυτό το έργο χωρίς να αποθηκεύσουμε αλλαγές.


Αφήστε το σχόλιό σας

Η διεύθυνση email σας δεν θα δημοσιευθεί. Τα υποχρεωτικά πεδία σημειώνονται με *

*

*

  1. Υπεύθυνος για τα δεδομένα: Miguel Ángel Gatón
  2. Σκοπός των δεδομένων: Έλεγχος SPAM, διαχείριση σχολίων.
  3. Νομιμοποίηση: Η συγκατάθεσή σας
  4. Κοινοποίηση των δεδομένων: Τα δεδομένα δεν θα κοινοποιούνται σε τρίτους, εκτός από νομική υποχρέωση.
  5. Αποθήκευση δεδομένων: Βάση δεδομένων που φιλοξενείται από τα δίκτυα Occentus (ΕΕ)
  6. Δικαιώματα: Ανά πάσα στιγμή μπορείτε να περιορίσετε, να ανακτήσετε και να διαγράψετε τις πληροφορίες σας.