Srcset

Τι είναι το Srcset;

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

Ακολουθεί ένα παράδειγμα του τρόπου λειτουργίας του srcset:

<img srcset="example-image-480w.jpg 480w, example-image-800w.jpg 800w" sizes="(max-width: 600px) 480px, 800px" src="example-image-800w.jpg" alt="Παράδειγμα απεικόνισης">

Σε αυτό το παράδειγμα, το srcset λέει στο πρόγραμμα περιήγησης να φορτώσει μια εικόνα πλάτους 480 pixel αν το πλάτος του παραθύρου προβολής είναι μικρότερο από 600 pixel. Εάν το πλάτος του παραθύρου προβολής είναι μεγαλύτερο από 600 εικονοστοιχεία, το πρόγραμμα περιήγησης θα φορτώσει τη μεγαλύτερη εικόνα πλάτους 800 εικονοστοιχείων.

Εναλλακτικά, μπορείτε να ορίσετε την πυκνότητα εικονοστοιχείων ως συνθήκη αντί για το μέγεθος:

<img srcset="example-image-1x.jpg 1x, example-image-2x.jpg 2x" src="example-image-1x.jpg" alt="Ένα άλλο παράδειγμα απεικόνισης">

Γιατί το Srcset είναι σημαντικό για το SEO;

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

• Βελτιωμένη ταχύτητα φόρτωσης: Οι μεγαλύτερες εικόνες έχουν μεγαλύτερο μέγεθος αρχείου, το οποίο μπορεί να επιβραδύνει τους χρόνους φόρτωσης της σελίδας. Φορτώνοντας εικόνες κατάλληλου μεγέθους για διαφορετικές συσκευές, το srcset συμβάλλει στην εξοικονόμηση εύρους ζώνης και στη μείωση του χρόνου φόρτωσης της σελίδας.
• Καλύτερη εμπειρία χρήστη: Οι ταχύτεροι χρόνοι φόρτωσης σελίδων βελτιώνουν την εμπειρία του χρήστη, οδηγώντας σε χαμηλότερα ποσοστά αναπήδησης και υψηλότερη δέσμευση.
• Οφέλη SEO: Η ταχύτητα φόρτωσης της σελίδας αποτελεί άμεσο παράγοντα κατάταξης τόσο για τις αναζητήσεις μέσω κινητού όσο και για τις αναζητήσεις μέσω υπολογιστή. Η βελτιστοποίηση των εικόνων με τη χρήση srcset μπορεί να επηρεάσει θετικά την κατάταξή σας στις μηχανές αναζήτησης.

Βέλτιστες πρακτικές για Responsive εικόνες

1. Ελέγξτε το PageSpeed Insights για συστάσεις

ΤοPageSpeed Insights είναι ένα δωρεάν εργαλείο της Google που παρέχει προτάσεις για τη βελτιστοποίηση της ταχύτητας του ιστότοπού σας. Εισάγοντας τη διεύθυνση URL της ιστοσελίδας σας, μπορείτε να λάβετε συγκεκριμένες συστάσεις για τη βελτιστοποίηση της εικόνας, όπως:

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

2. Χρήση του στοιχείου εικόνας για καλλιτεχνική διεύθυνση

Το στοιχείο <picture> επιτρέπει στα προγράμματα περιήγησης να εμφανίζουν διαφορετικές εικόνες ανάλογα με τα χαρακτηριστικά της συσκευής. Αυτό είναι χρήσιμο όταν θέλετε να εμφανίσετε εντελώς διαφορετικές εικόνες και όχι απλώς διαφορετικά μεγέθη της ίδιας εικόνας.

Ακολουθεί ένα παράδειγμα χρήσης του στοιχείου <picture>:

<picture> <source media="(min-width: 600px)" srcset="example-image.jpg, example-image-2x.jpg 2x"> <img src="example-image.jpg" alt="Παράδειγμα απεικόνισης"> </picture>

Σε αυτό το παράδειγμα, το αρχείο example-image.jpg ή το αρχείο example-image-2x.jpg θα εμφανιστεί σε πλάτος προγράμματος περιήγησης 600px ή περισσότερο, ανάλογα με την πυκνότητα εικονοστοιχείων της συσκευής. Για πλάτη οθόνης μικρότερα από 600px ή αν το στοιχείο <picture> δεν υποστηρίζεται, θα αποδοθεί αντ' αυτού το στοιχείο <img>. Περιλαμβάνετε πάντα το στοιχείο <img> για να διασφαλίσετε τη συμβατότητα.

3. Διασφάλιση κατάλληλων Fallbacks

Παρέχετε πάντα μια εφεδρική εικόνα με το χαρακτηριστικό src σε περίπτωση που το πρόγραμμα περιήγησης δεν υποστηρίζει το srcset ή το στοιχείο <picture>. Αυτό διασφαλίζει ότι μια εικόνα εμφανίζεται πάντα, ανεξάρτητα από τις δυνατότητες του προγράμματος περιήγησης.

4. Χρήση περιγραφικού κειμένου Alt

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

Συμπέρασμα

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