fbpx

OWL Studio

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

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

Γενικά μεγέθη εικόνας για ιστοσελίδες σε υπολογιστές (desktop - laptops)

Σε αυτή την ενότητα παρουσιάζεται σε μορφή πίνακα, το τυπικό μέγεθος μιας εικόνας σε ιστοσελίδα που εμφανίζεται σε οθόνη σταθερού ή φορητού υπολογιστή με ανάλυση 1920 x 1080 px. Ο λόγος που επιλέχθηκε αυτή η ανάλυση είναι γιατί σύμφωνα με τα στατιστικά στοιχεία του stat counter είναι το δημοφιλέστερο μέγεθος οθόνης σε υπολογιστές για το 2023.

Τύπος εικόνας ιστοσελίδας

Διαστάσεις εικόνας
(Πλάτος x Ύψος)

Αναλογία εικόνας
(Aspect ratio)

Εικόνα φόντου (background)

1920 x 1080 pixel

16:9

Hero image

1280 x 720 pixel

16:9

Banner ιστοσελίδας

250 x 250 pixel

1:1

Εικόνα blog

1200 x 630 pixel

3:2

Λογότυπο (Logo) (Ορθογώνιο)

250 x 100 pixel

2:3

Λογότυπο (Logo) (Τετράγωνο)

100 x 100 pixel

1:1

Favicon

16 x 16 pixel

1:1

Εικονίδια μέσων κοινωνικής δικτύωσης

32 x 32 pixel

1:1

Εικόνες Lightbox
(Πλήρης οθόνη)

1600 x 500 pixel

16:9

Μικρογραφία εικόνας

150 x 150 pixel

1:1

Στοιχεία από tiny img 

1. Προδιαγραφές εικόνας φόντου (background)

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

Ύψος: 1080 Pixel
Πλάτος: 1920 Pixel
Αναλογία (Aspect ratio): 16:9
ppi: 72

Προσοχή: Ανάλογα με τη σχεδίαση της ιστοσελίδας σας, η εικόνα φόντου μπορεί να έχει μεγαλύτερες διαστάσεις, έως 2400×1600 px, και το μέγεθος του αρχείου κάτω από 20 MB.

παράδειγμα background

2. Διαστάσεις Hero image

Ύψος: 720 Pixel
Πλάτος: 1280 Pixel
Αναλογία (Aspect ratio): 16:9
ppi: 72

Φυσικά, ανάλογα με την σχεδίαση της ιστοσελίδας σας, η hero image μπορεί να είναι μεγαλύτερη σε διαστάσεις και να χρησιμοποιηθούν εικόνες έως και 1800 Pixel σε πλάτος. Πρέπει επίσης να σημειωθεί ότι μια hero image μπορεί να καταλαμβάνει ολόκληρο το ύψος της οθόνης ή τη μισή σελίδα. Σε κάθε περίπτωση είναι σημαντικό να 72 ppi για την εικόνες σας, έτσι ώστε να μπορέσετε να διατηρήσετε την ταχύτητα φόρτωσης της ιστοσελίδας σας.

Παράδειγμα hero image

3. Διαστάσεις διαφημιστικού Banner ιστοσελίδας

Ύψος: 250 Pixel
Πλάτος: 250 Pixel
Αναλογία (Aspect ratio):  1:1
ppi: 72

Τα διαφημιστικά Banner σε μια ιστοσελίδα μπορούν να τοποθετηθούν σε διαφορετικά μεγέθη και σημεία της ιστοσελίδας. Ωστόσο, οι δημοφιλέστερες διαστάσεις είναι 250×250 px, δηλαδή με αναλογία 1:1.

Επίσης δημοφιλείς είναι οι διαστάσεις 160px επί 600px, όταν τα banner παρουσιάζονται κατακόρυφα.

Για τις κινητές συσκευές, οι ιδανικότερες αναλογίες  1:9, 1:1, 1:1 ή 4:5.

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

παράδειγμα διαφημιστικού banner

4. Διαστάσεις εικόνας Blog

Ύψος:  630 Pixel
Πλάτος:  1200 Pixel
Αναλογία (Aspect ratio):  3:2
ppi: 72

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

Σε γενικές γραμμές μια εικόνα για το blog λειτουργεί καλά με διαστάσεις 1200×630 px. Ωστόσο, καλές είναι αναλογίες 1200×900 για ένα blog. Για τις εικόνες των blog το ιδανικότερο είναι το μέγεθος αρχείου εικόνας να μην είναι μεγαλύτερο από 150KB.

Έξτρα tip: εστιάστε το σημαντικό περιεχόμενο στο κέντρο της εικόνας.

παράδειγμα εικόνας blog

5. Διαστάσεις λογότυπου (logo) ιστοσελίδας

ΟΡΘΟΓΩΝΙΟ

Ύψος:  100 Pixel
Πλάτος:  250 Pixel
Αναλογία (Aspect ratio):  2:3
ppi: 72

ΤΕΤΡΑΓΩΝΟ

Ύψος:  100 Pixel
Πλάτος:  100 Pixel
Αναλογία (Aspect ratio):  1:1
ppi: 72

 

Η εικόνα του λογότυπου σε μια ιστοσελίδα θα πρέπει να είναι τετράγωνη ή ορθογώνια με αναλογία διαστάσεων 1:1 ή 2:3 αντίστοιχα. Η ιδανικότερη μορφή για το λογότυπο της ιστοσελίδας είναι σε .png, καθώς αυτή η μορφή αρχείου υποστηρίζει το διάφανο φόντο.

6. Διαστάσεις favicon

Ύψος:  16 ή 32 Pixel
Πλάτος:  16 ή 32 Pixel
Αναλογία (Aspect ratio):  1:1
ppi: 72

Το καταλληλότερο μέγεθος favicon είναι 16×16 px ή 32x32px, καθώς αυτό το μέγεθος χρησιμοποιείτε από τα περισσότερα προγράμματα περιήγησης (browsers). Ωστόσο, για την αποφυγή της προβολής μιας εκτεταμένης έκδοσης του favicon, δημιουργούνται πολλαπλά μεγέθη favicon αναλογίας 1:1.

Οι τυπικές μορφές favicon είναι ico και png, έτσι ώστε να υποστηρίζεται οι συμβατότητα με τους browsers.

παράδειγμα favicon

Γενικά μεγέθη εικόνας για κινητές συσκευές

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

Οι εικόνες με αναλογίες διαστάσεων 1:1 δεν θα έχουν κανένα πρόβλημα κατά την εμφάνιση τους στις κινητές συσκευές. Ωστόσο, μια εικόνα με αναλογία 16:9 ή 3:2 είναι πιθανό να περικοπή στην οθόνη μιας κινητής συσκευής.

Επίλογος

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

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

Διαβάστε το σχετικό άρθρο για την βελτιστοποίηση εικόνας.

Χρειάζεστε βοήθεια?

Επικοινωνήστε μαζί μας

We Build, You Grow

Αφήστε μια απάντηση

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