Πώς να συμπιέσετε εικόνες για την ιστοσελίδα με Photoshop ή σε απευθείας σύνδεση

Εάν εκτελείτε ένα ηλεκτρονικό κατάστημα ή έναν ιστότοπο, συμπίεση εικόνας για τον ιστότοπο είναι μια τέχνη που οι προγραμματιστές ιστού πρέπει να κυριαρχήσουν. Σύμφωνα με μια πρόσφατη έρευνα, υπάρχουν πάνω από εκατό μορφές εικόνας. Αναπτύχθηκαν για διαφορετικούς σκοπούς. Μερικά από αυτά είναι φιλικά προς τους ιστότοπους και άλλα δεν είναι κατάλληλα για διανομή στο διαδίκτυο. Αυτό το άρθρο πρόκειται να σας δείξει τους καλύτερους τρόπους συμπίεσης εικόνων για web. Έτσι, μπορείτε να βελτιστοποιήσετε τον ιστότοπό σας και να επιταχύνετε τη φόρτωση της σελίδας.

• Μέρος 1: Τα πλεονεκτήματα για τη συμπίεση εικόνων για το Web
• Μέρος 2: Ο ευκολότερος τρόπος συμπίεσης εικόνων για ιστότοπους
• Μέρος 3: Πώς να συμπιέσετε εικόνες για Web με το Photoshop
• Μέρος 4: Συνήθεις ερωτήσεις σχετικά με τη συμπίεση εικόνων για το Web

Μέρος 1: Τα πλεονεκτήματα για τη συμπίεση εικόνων για το Web

Οι μεγάλες εικόνες μπορούν να επιβραδύνουν τις ιστοσελίδες σας. Αυτό δημιουργεί μια λιγότερο από τη βέλτιστη εμπειρία χρήστη. Η συμπίεση εικόνων για ιστότοπους είναι η διαδικασία μείωσης του μεγέθους του αρχείου τους. Σύμφωνα με το HTTP Archive, οι εικόνες αποτελούν κατά μέσο όρο το 21% του συνολικού βάρους μιας ιστοσελίδας. Τα κύρια οφέλη της συμπίεσης εικόνας για ιστούς περιλαμβάνουν:

• Βελτιώστε την ταχύτητα φόρτωσης ιστοσελίδων.
• Βελτιώστε το SEO σας. Τα μικρότερα αρχεία εικόνας επιταχύνουν τον ιστότοπό σας και κατατάσσονται υψηλότερα στα αποτελέσματα των μηχανών αναζήτησης.
• Δημιουργήστε αντίγραφα ασφαλείας γρήγορα.
• Φιλικό στους επισκέπτες, αφού το μικρότερο μέγεθος του αρχείου χρησιμοποιεί λιγότερο εύρος ζώνης.
• Απαιτήστε λιγότερο χώρο αποθήκευσης στον διακομιστή σας.

Μέρος 2: Ο ευκολότερος τρόπος συμπίεσης εικόνων για ιστότοπους

Τα βοηθητικά προγράμματα που βασίζονται στο Web είναι ο ευκολότερος τρόπος συμπίεσης εικόνων για τον ιστό. Ωστόσο, συνήθως έχουν κάποια μειονεκτήματα, όπως το όριο μεγέθους αρχείου. Από αυτό το σημείο, προτείνουμε Apeaksoft Δωρεάν συμπιεστή εικόνας Online. Μπορεί να καλύψει όλα όσα χρειάζεστε για τη συμπίεση εικόνων ιστότοπου στο διαδίκτυο.

Εν συντομία, ο Free Online Image Compressor είναι ένα καλό σημείο εκκίνησης για αρχάριους και μέσους ανθρώπους για τη συμπίεση εικόνων για web.

Πώς να συμπιέσετε τις εικόνες Ιστού στο Διαδίκτυο

Βήμα 1Ανοίξτε ένα πρόγραμμα περιήγησης ιστού και επισκεφθείτε το ηλεκτρονικό συμπιεστή εικόνας κατευθείαν.

Βήμα 2Κάντε κλικ στο Προσθήκη εικόνων κουμπί για να ενεργοποιήσετε το παράθυρο διαλόγου ανοιχτού αρχείου. Βρείτε και επιλέξτε τις εικόνες που θέλετε να δημοσιεύσετε στον ιστότοπό σας και κάντε κλικ στο Ανοικτό κουμπί για να τα ανεβάσετε. Εναλλακτικά, σύρετε και αποθέστε τις εικόνες από τον σκληρό σας δίσκο στη σελίδα για να τις ανεβάσετε απευθείας.

Βήμα 3Μόλις ολοκληρωθεί η μεταφόρτωση, η εφαρμογή Ιστού αρχίζει να τα συμπιέζει αμέσως. Μετά τη συμπίεση εικόνων web, μπορείτε να κάνετε λήψη των μικρότερων εικόνων πατώντας το Λήψη σε κάθε αρχείο. Ή κάντε κλικ στο Κατεβάστε όλα κουμπί για λήψη όλων των συμπιεσμένων εικόνων ως αρχείο ZIP.

Μέρος 3: Πώς να συμπιέσετε εικόνες για Web με το Photoshop

Το Photoshop είναι ένας άλλος τρόπος συμπίεσης εικόνων για ιστότοπους. Σε σύγκριση με τους διαδικτυακούς συμπιεστές εικόνων, το Photoshop προσφέρει εκτεταμένες προσαρμοσμένες επιλογές και εργαλεία επεξεργασίας εικόνας. Επομένως, είναι πιο κατάλληλο για προχωρημένους χρήστες. Εάν έχετε ήδη Photoshop στον υπολογιστή σας, τα παρακάτω βήματα διευκρινίζουν τη ροή εργασίας.

Βήμα 1Εκτελέστε το Photoshop και ανοίξτε μια εικόνα που θέλετε να χρησιμοποιήσετε για τον ιστότοπό σας. Ανοιξε το Αρχεία μενού στην επάνω κορδέλα και επιλέξτε Αποθήκευση για ιστό. Για ορισμένες εκδόσεις του Photoshop, το Αποθήκευση για ιστό η επιλογή είναι κρυμμένη σε εξαγωγή Στην καρτέλα Αρχεία μενού.

Βήμα 2Στο παράθυρο διαλόγου Αποθήκευση για Web, μπορείτε να κάνετε προεπισκόπηση της αρχικής εικόνας και του συμπιεσμένου αποτελέσματος Πρωτότυπο και βελτιστοποιημένη καρτέλες. Εντοπίστε το σωστό πλαίσιο και θα έχετε μερικές επιλογές.

Βήμα 3Αρχικά, ρυθμίστε το μορφή αρχείου στην επάνω δεξιά γωνία. Από προεπιλογή, είναι JPEG, αλλά μπορείτε να το αλλάξετε σε άλλες μορφές εικόνας. Όταν πρόκειται για Ποιότητα, προσαρμόστε την τιμή με βάση τις ανάγκες σας. Όσο υψηλότερο, το μέγεθος του αρχείου είναι μεγαλύτερο. Εάν συμπιέσετε υπερβολικά την ποιότητα της εικόνας, θα γίνει θολή.

Βήμα 4Στη συνέχεια, επιλέξτε το πλαίσιο δίπλα στο βελτιστοποιημένη. Στη συνέχεια, αποφασίστε εάν θα γίνει μετατροπή σε sRGB. Για να μειώσετε το μέγεθος της εικόνας, μπορείτε να αλλάξετε το Πλάτος και Ύψος επιλογές Μέγεθος εικόνας περιοχή.

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

Μέρος 4: Συνήθεις ερωτήσεις σχετικά με τη συμπίεση εικόνων για το Web

Ερώτηση 1: Τι είναι το καλό μέγεθος εικόνας για τον ιστό;

Απάντηση: Εκτός από τη συμπίεση εικόνας για ιστότοπους, η διάσταση της εικόνας είναι ένα σημαντικό στοιχείο. Μπορεί να έχει μεγάλο αντίκτυπο στον τρόπο εμφάνισης του στο διαδίκτυο. Σας προτείνουμε να χρησιμοποιήσετε εικόνες με πλάτος μεταξύ 1500 και 2500 pixel. Οι εικόνες μικρότερες από 1500 pixel μπορεί να είναι θολές ή pixel όταν είναι τεντωμένες.

Ερώτηση 2: Πόσες KB πρέπει να είναι μια εικόνα ιστού;

Απάντηση: Υπάρχει κανόνας 200KB. Οι περισσότεροι προγραμματιστές ιστού συμφωνούν ότι τα 200 KB είναι το μέγιστο μέγεθος αρχείου για μια εικόνα. Αυτός ο αριθμός έχει δοκιμαστεί και κατέληξε σε συνδυασμό πολλών παραγόντων, όπως οι μέσες διαστάσεις των εικόνων, η μορφή, ο αριθμός των εικόνων ανά ιστοσελίδα. Όταν συμπιέζετε εικόνες για τον ιστό, μπορείτε επίσης να ακολουθήσετε αυτόν τον κανόνα.

Ερώτηση 3: Ποιο είναι το καλύτερο για web, JPG ή PNG;

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