Οδηγός συμπίεσης Εικόνων - Photoshop

Για να μάθετε εάν οι εικόνες σας χρειάζονται μια μέθοδο συμπίεσης, δοκιμάστε να εκτελέσετε μια δοκιμή ταχύτητας σελίδας για να μάθετε την απόδοση της σελίδας σας πριν και μετά τις αλλαγές σας.

Δοκιμάστε το Google Page Insight ή το Gtmetrix για τις δοκιμές ιστού σας.

Τύπος αρχείου εικόνας

Υπάρχουν τρεις βασικοί τύποι εικόνων για τον ιστό:

Επιλογή του προγράμματος εικόνας σας

Πολλοί επαγγελματίες εμπιστεύονται το Adobe Photoshop για την επεξεργασία εικόνων, αλλά αν θέλετε ένα δωρεάν πρόγραμμα μπορείτε να χρησιμοποιήσετε το Gimp ή Φωτογραφία συγγένειας. Οποιοδήποτε πρόγραμμα κάνει τα ίδια πράγματα!!

CMYK Vs RGB

CMYK σημαίνει Cyan, Magenta, Yellow και Key, οι χρωστικές που χρησιμοποιούνται σε δοχεία μελάνης για να σχηματίσουν ένα πλήρες φάσμα χρωμάτων. Το RGB σημαίνει κόκκινο, πράσινο και μπλε. Αναφέρεται σε ένα σύστημα αναπαράστασης των χρωμάτων που θα χρησιμοποιηθούν σε οποιαδήποτε οθόνη!! ( Όπως τηλέφωνα, tablet, τηλεόραση κ.λπ. )

8-Bit έναντι 16-bit

8-bit είναι η πιο κοινή επιλογή και περιέχει 16,8 εκατομμύρια συνδυασμούς χρωμάτων. Εάν επιλέξετε 16 ή 32 bit, το μέγεθος του αρχείου αρχίζει να αυξάνεται επειδή περιέχει τρισεκατομμύρια επιλογές χρωμάτων.

PPI Vs. DPI

DPI σημαίνει κουκκίδες ανά ίντσα. Εάν έχετε περισσότερο χρώμα σε ένα pixel, έχετε καλύτερη λεπτομέρεια. Όσο υψηλότερο είναι το DPI, τόσο καλύτερη είναι η τονικότητα και τόσο πιο ομαλή η ανάμειξη χρωμάτων. PPI, ή Pixels Per Inch, είναι ο αριθμός των pixel ανά ίντσα στην οθόνη. Μια εικόνα 72 PPI στον υπολογιστή σας θα μοιάζει ακριβώς με αυτήν με 1000 PPI, επειδή η συσκευή σας έχει ένα καθορισμένο PPI στην οθόνη.

Για εμφάνιση στον ιστό επιλέξτε 72 PPI. Ανατρέξτε σε αυτό το άρθρο για περισσότερες λεπτομέρειες - 99designs.

Συμπίεση των εικόνων σας για τον Ιστό

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

Μπορείτε να μάθετε περισσότερα εδώ.

Lossy vs Lossless Compression

Η συμπίεση με απώλεια αφαιρεί ορισμένα pixel για να μειώσει το μέγεθος του αρχείου. Σε αυτήν την περίπτωση, μικρές παραλλαγές χρωμάτων πετάχτηκαν και η εικόνα δεν αναμειγνύεται πλέον φυσικά. Εάν εφαρμόσετε υψηλότερους λόγους συμπίεσης, θα δείτε την ποιότητα της εικόνας να υποβαθμίζεται. Η ποιότητα γίνεται όλο και πιο φτωχή κάθε φορά που αλλάζει μέγεθος ή συμπιέζεται η εικόνα. Η συμπίεση χωρίς απώλειες θα μειώσει το μέγεθος της εικόνας σας χωρίς να τροποποιήσετε ή να διαγράψετε κανένα από τα δεδομένα του αρχικού αρχείου. Εάν πρέπει να προσαρμόσετε ξανά την εικόνα μετά τη συμπίεση, όλα τα pixel και τα χρώματα θα παραμείνουν. Τα αρχεία ZIP, για παράδειγμα, χρησιμοποιούν συμπίεση χωρίς απώλειες. Τι καλύτερο λοιπόν, με απώλειες ή χωρίς απώλειες; Συνήθως η συμπίεση με απώλειες λειτουργεί καλύτερα για μεγάλες εικόνες JPEG φόντου, παράγοντας ένα πολύ μικρό μέγεθος αρχείου που φορτώνει πολύ γρήγορα. Ωστόσο, η συμπίεση χωρίς απώλειες, διατηρεί την ποιότητα της εικόνας σας και εξακολουθεί να επιτυγχάνει μικρότερο μέγεθος αρχείου.

Συμπίεση 'Αποθήκευση για τον Ιστό'

Προγράμματα όπως π.χ. Το Photoshop συχνά προσφέρει μια επιλογή εξαγωγής 'Αποθήκευση για τον Ιστό', η οποία κάνει μέρος της συμπίεσης αρχείων για εσάς. Εάν χρησιμοποιείτε το Photoshop, προσπαθήστε να εξάγετε το περιεχόμενό σας ως JPEG και επιλέξτε την ποιότητα μεταξύ 60-70-80 για να αποθηκεύσετε την εικόνα σας. ( Εξαρτάται από το μέγεθος του πλάτους του περιεχομένου )

Ονομασία των εικόνων σας

Βάζετε πάντα τις λέξεις-κλειδιά στα ονόματα των εικόνων σας για βελτιωμένο SEO. Χρησιμοποιήστε παύλες ή κάτω παύλες για να διαχωρίσετε τις λέξεις στο όνομα του αρχείου και αποφύγετε τα ερωτηματικά, τα ποσοστά και τα συμπλεκτικά σύμβολα, τα οποία δεν φορτώνονται σωστά και μπορεί να προκαλέσουν απροσδόκητη συμπεριφορά στις γκαλερί εικόνων. Θυμηθείτε να βελτιώσετε το συνολικό σας SEO, είναι σημαντικό!!!