Μεταφόρτωση εικόνων

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

Για να εμφανίζονται οι εικόνες στο διαδικτυακό σας κατάστημα ακριβώς όπως θέλετε, πρέπει να χρησιμοποιήσετε τη σωστή αναλογία διαστάσεων εικόνας. Οι εικόνες βελτιστοποιούνται αυτόματα για το ηλεκτρονικό σας κατάστημα με το Shopify Content Delivery Network (CDN).

Μεταφόρτωση εικόνας στο πρόγραμμα επεξεργασίας θεμάτων

Μπορείτε να προσθέσετε εικόνες στο θέμα σας στο πρόγραμμα επεξεργασίας θεμάτων. Μπορείτε επίσης να μεταφορτώσετε εικόνες στην ενότητα Περιεχόμενο > Αρχεία του Διαχειριστή Shopify. Για να μάθετε περισσότερα, ανατρέξτε στο θέμα Μεταφόρτωση και διαχείριση αρχείων.

Βήματα:

Προσθήκη εικόνων με χρήση μετα-πεδίων

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

Ορισμός επίκεντρου σε μια εικόνα

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

Μπορείτε να έχετε μόνο ένα επίκεντρο ανά εικόνα, αλλά μπορείτε να αλλάξετε το επίκεντρο ή να το καταργήσετε ανά πάσα στιγμή.

Συμβατότητα επίκεντρου με τα δωρεάν θέματα του Shopify

Μπορείτε να ορίσετε ένα επίκεντρο στις ακόλουθες εκδόσεις των δωρεάν θεμάτων του Shopify:

• Όλα τα θέματα της οικογένειας Horizon
• Colorblock έκδοση 3.0.0 και νεότερη
• Craft έκδοση 5.0.0 και νεότερη
• Crave έκδοση 5.0.0 και νεότερη
• Dawn έκδοση 7.0.0 και νεότερη
• Origin εκδόσεις 1.0.0 και άνω
• Publisher έκδοση 1.0.0 και νεότερη
• Refresh έκδοση 2.0.0 και νεότερη
• Ride έκδοση 3.0.0 και νεότερη
• Rise έκδοση 1.0.0 και νεότερη
• Sense έκδοση 5.0.0 και νεότερη
• Spotlight έκδοση 0.0.1 και νεότερη
• Studio έκδοση 4.0.0 και νεότερη
• Taste έκδοση 4.0.0 και νεότερη
• Trade έκδοση 1.0.0 και νεότερη

Αν χρησιμοποιείτε θέμα τρίτου μέρους, ελέγξτε την τεκμηρίωση του θέματός σας για να διαπιστώσετε αν το θέμα σας υποστηρίζει τη χρήση επίκεντρων.

Προσθήκη επίκεντρου σε μια εικόνα

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

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

Βήματα:

1. Κάντε κλικ σε μια εικόνα από οποιαδήποτε από τις ακόλουθες τοποθεσίες στη διαχείριση του Shopify:
   • Στην ενότητα Περιεχόμενο > Αρχεία.
   • Στο πρόγραμμα επεξεργασίας θέματος.
   • Στην ενότητα Πολυμέσα των καταχωρίσεων των προϊόντων σας, στην ενότητα Προϊόντα.
   • Στο πρόγραμμα επεξεργασίας email του Shopify Messaging.
   • Στην ενότητα Μετα-πεδία οποιουδήποτε πόρου που έχει ένα μετα-πεδίο τύπου Αναφορά αρχείου για την προσθήκη μιας εικόνας.
2. Για να επιλέξετε το τμήμα της εικόνας στο οποίο θέλετε να ορίσετε ένα επίκεντρο, κάντε κλικ στην εικόνα ή σύρετε την μπλε κουκκίδα.
3. Κάντε κλικ στην επιλογή Αποθήκευση.

Κατάργηση επίκεντρου από μια εικόνα

Βήματα:

1. Κάντε κλικ σε μια εικόνα από οποιαδήποτε από τις ακόλουθες τοποθεσίες στη διαχείριση του Shopify:
   • Στην ενότητα Περιεχόμενο > Αρχεία.
   • Στο πρόγραμμα επεξεργασίας θέματος.
   • Στην ενότητα Πολυμέσα των καταχωρίσεων των προϊόντων σας, στην ενότητα Προϊόντα.
   • Στο πρόγραμμα επεξεργασίας email του Shopify Messaging.
   • Στην ενότητα Μετα-πεδία οποιουδήποτε πόρου που έχει ένα μετα-πεδίο τύπου Αναφορά αρχείου για την προσθήκη μιας εικόνας.
2. Κάντε κλικ στην επιλογή Κατάργηση.
3. Κάντε κλικ στην επιλογή Αποθήκευση ως νέο.

Μορφές εικόνας

Υποστηρίζονται οι ακόλουθες μορφές εικόνας:

• JPEG
• Προοδευτικό JPEG
• PNG
• GIF
• HEIC
• WebP

Χρήση εικόνων JPEG

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

• προϊόντα
• banner ή προβολές διαφανειών
• σελίδες και αναρτήσεις ιστολογίου

Χρήση εικόνων PNG

Οι εικόνες PNG είναι ιδανικές για γραφικά και εικονίδια με επίπεδα χρώματα και χωρίς διαβαθμίσεις. Ο μορφότυπος PNG υποστηρίζει επίσης τη διαφάνεια στις εικόνες. Χρησιμοποιήστε τον μορφότυπο PNG για τους παρακάτω τύπους εικόνων:

• λογότυπα
• εικονίδια
• περιγράμματα και διακοσμητικά στοιχεία

Αυτόματη συμπίεση και επιλογή μορφότυπου εικόνας

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

• Όταν οι εικόνες προβάλλονται μέσω του θέματος του καταστήματός σας, ενδέχεται να υποστούν συμπίεση για εικόνες υψηλής ποιότητας
• Το Shopify καθορίζει αυτόματα τον καλύτερο δυνατό μορφότυπο αρχείου για χρήση κατά την προβολή των εικόνων σας
• Όταν το πρόγραμμα περιήγησης ενός πελάτη υποστηρίζει σύγχρονους μορφότυπους εικόνων, όπως WebP και AVIF (AV1 Image File Format), οι εικόνες σας παραδίδονται σε αυτούς τους μορφότυπους
• Τα αρχεία GIF μετατρέπονται αυτόματα σε μορφότυπο κινούμενης εικόνας WebP για τη βελτίωση της απόδοσης μέσω της μείωσης του μεγέθους του αρχείου

Εξετάστε τις παρακάτω ενέργειες για την καλύτερη ποιότητα εικόνας:

• Μεταφορτώστε εικόνες υψηλότερης ανάλυσης έως 5000 px x 5000 px ή 25 megapixel
• Επιλέξτε τύπους εικόνων με λιγότερες απώλειες, όπως PNG, για γραμμικά σχέδια, κείμενο και εικονικά γραφικά με διαφάνεια
• Χρησιμοποιήστε JPEG για εικόνες προϊόντων ή προβολές διαφανειών
• Τα αρχεία SVG υποστηρίζονται αλλά έχουν περιορισμούς - δεν μπορούν να μετασχηματιστούν (αλλαγή μεγέθους, περικοπή κ.λπ.) χωρίς να ζητηθεί ένας μορφότυπος raster (JPEG, WebP, PNG)

Άλλοι τύποι αρχείων όπως PSD (Photoshop Document), TIFF (Tagged Image File Format) και BMP (Bitmap) γίνονται αποδεκτοί, αλλά θα μετατραπούν σε JPEG/PNG κατά τη μεταφόρτωση.

Όρια μεταφόρτωσης εικόνας

Οι μεταφορτώσεις εικόνων στο Shopify έχουν περιορισμούς τόσο σε megapixel (MP) όσο και σε μέγεθος αρχείου, το οποίο μετριέται σε megabyte (MB). Τα megapixel χρησιμοποιούνται για να υποδείξουν πόσα εκατομμύρια pixel αποτελούν μια εικόνα. Τα megabyte χρησιμοποιούνται για να υποδείξουν πόσα εκατομμύρια byte μνήμης ή χώρου στον δίσκο καταλαμβάνει μια εικόνα.

Οι εικόνες που μεταφορτώνονται στο Shopify δεν μπορούν να υπερβαίνουν κανένα από τα ακόλουθα όρια:

• 20 megapixel
• 20 megabyte

Για να βρείτε την τιμή των megapixel της εικόνας σας, μπορείτε να χρησιμοποιήσετε την παρακάτω εξίσωση:

(πλάτος σε pixel x ύψος σε pixel)/1.000.000

Για παράδειγμα, μια εικόνα με ανάλυση 4900 px επί 6930 px είναι 33,9 megapixel βάσει της εξίσωσης: (4900x6930)/1.000.000 = 33,9 MP.

Προφίλ χρώματος εικόνας

Όταν βλέπετε μια εικόνα στο διαδικτυακό σας κατάστημα, τα χρώματα στην εικόνα ενδέχεται να εμφανίζονται διαφορετικά από αυτά της αρχικής εικόνας που μεταφορτώνετε στο Shopify. Αυτό μπορεί να συμβεί όταν μια εικόνα έχει προφίλ χρώματος, το οποίο είναι ένα σύνολο δεδομένων που αποθηκεύονται σε ένα αρχείο με επέκταση .ICC ή .ICM.

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

Τα προφίλ χρώματος αφαιρούνται για τους ακόλουθους λόγους:

• Δεν είναι όλες οι συσκευές σε θέση να διαβάσουν προφίλ χρώματος .ICC ή .ICM, επομένως η διατήρησή τους μπορεί να οδηγήσει σε ασυνέπειες στα χρώματα της εικόνας μεταξύ των συσκευών.
• Όταν μια εικόνα που έχει μεταφορτωθεί δεν περιλαμβάνει προφίλ χρώματος, τότε το πρόγραμμα περιήγησης ιστού υποθέτει ότι χρησιμοποιείται το sRGB, το οποίο είναι το πιο κοινό προφίλ χρώματος που χρησιμοποιείται για την εμφάνιση εικόνων στον ιστό. Αυτό διασφαλίζει ότι οι εικόνες σας εμφανίζονται το ίδιο σε όλα τα μεγάλα προγράμματα περιήγησης ιστού και τις συσκευές.
• Τα προφίλ χρώματος μπορούν να καταλαμβάνουν μεγάλο χώρο στον δίσκο, γεγονός που μπορεί να οδηγήσει σε μεγαλύτερους χρόνους φόρτωσης της σελίδας.

Κατάργηση του προφίλ χρώματος από μια εικόνα

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

Δείτε την τεκμηρίωση της Adobe σχετικά με τον τρόπο Αντιστοίχισης ή κατάργησης ενός προφίλ χρώματος (Illustrator, Photoshop) και Αντιστοίχισης ή κατάργησης ενός προφίλ χρώματος (InDesign).

Βέλτιστες πρακτικές για προβολές διαφανειών, banner εικόνας και εικόνες πλήρους πλάτους

Πολλά θέματα του Shopify διαθέτουν μεγάλες εικόνες ή προβολές διαφανειών που προσαρμόζουν την κλίμακα τους στο ύψος του προγράμματος περιήγησής σας ή προσαρμόζονται στο μέγεθος της οθόνης σας.

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

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

Ζητήματα προς εξέταση για τη χρήση εικόνων σε προβολές διαφανειών ή banner εικόνας

Για να βεβαιωθείτε ότι οι εικόνες σας λειτουργούν καλά με το θέμα σας, λάβετε υπόψη τα ακόλουθα σημεία:

• Οι εικόνες που χρησιμοποιείτε για προβολές διαφανειών ή φόντο δεν θα πρέπει να περιέχουν κείμενο. Αν το κείμενο είναι μέρος της ίδιας της εικόνας, τότε μπορεί να μετακινηθεί, να περικοπεί ή να προσαρμοστεί ανάλογα με το θέμα σας. Χρησιμοποιήστε το πρόγραμμα επεξεργασίας θέματος για να προσθέσετε κείμενο και συνδέσμους στις προβολές διαφανειών και στο φόντο σας.

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

Πλατιές εικόνες σε ψηλές οθόνες

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

Ψηλές εικόνες σε πλατιές οθόνες

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

Συμπεριφορά φόρτωσης εικόνας

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

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

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

Αντιμετώπιση προβλημάτων με τις εικόνες