Ο κώδικας HTML της νέας εικόνας θα μπορούσε να κάνει τον ιστοτόπο σας να φορτώσει πιο γρήγορα

Πίνακας περιεχομένων:

Anonim

Έχετε ακούσει ότι ο Ιστός έχει γίνει πιο οπτική και οι σπουδαίες εικόνες στην ιστοσελίδα της επιχείρησής σας είναι σημαντικές.

Αλλά αυτές οι εικόνες μπορεί να είναι η μάστιγα των επισκεπτών του ιστοτόπου σας. Οι εικόνες αντιστοιχούν σε 1MB από τα 1,7MB που περιέχει η μέση ιστοσελίδα.

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

$config[code] not found

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

Αλλά ο ευαίσθητος σχεδιασμός ιστοσελίδων δεν είναι η απάντηση στα πάντα. Δεν είναι απαραίτητο να επιλύσετε το πρόβλημα λήψης εικόνων. Ακόμη και με την αποκρινόμενη σχεδίαση, πολλές φορές αυτές οι εικόνες βαρέων βαρών εξακολουθούν να κατεβαίνουν ούτως ή άλλως. Όπως επεσήμανε συνοπτικά ο ειδικός Web Performance Yoav Weiss στην ιστοσελίδα της Opera:

"Το Responsive Web Design RWD συνδυάζει τις νέες δυνατότητες των browsers και τις τεχνικές CSS για να δημιουργούν ιστότοπους που προσαρμόζονται στη συσκευή που τις εμφανίζει και φαίνονται ιδανικοί παντού. Αυτό επέτρεψε στους προγραμματιστές να σταματήσουν να ανησυχούν για την αναξιόπιστη ανίχνευση συσκευών και να σκεφτούν τους ιστοτόπους τους όσον αφορά τις διαστάσεις του παραθύρου προβολής.

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

Το νέο Το στοιχείο κώδικα HTML μπορεί να το αλλάξει.

Τι είναι το στοιχείο HTML εικόνας;

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

Το νέο στοιχείο Εικόνα είναι ένας τύπος γλώσσας σήμανσης HTML. Γράφεται με τον τρόπο αυτό (ανά ομάδα κοινοτήτων Responsive Images):

Το στοιχείο Εικόνα είναι σχετικά ευαίσθητο εικόνες, δεν ανταποκρίνεται σχέδιο.

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

Σύμφωνα με μια έκθεση ArsTechnica, το νέο στοιχείο σήμανσης αντιμετωπίζει τα προβλήματα που προκαλούνται από εικόνες που προορίζονταν να προβληθούν σε οθόνη πλήρους μεγέθους - εικόνες που δεν μεταφράζονται καλά σε κινητές συσκευές. ο ο κώδικας σήμανσης λέει στους browsers του Web, όπως το Firefox, να φορτώσει και να εμφανίσει τις σωστές (ανάγνωση: μικρότερες) εικόνες:

"Όταν το πρόγραμμα περιήγησης συναντά ένα στοιχείο Εικόνα, πρώτα αξιολογεί τυχόν κανόνες που μπορεί να ορίσει ο προγραμματιστής Ιστού. *** Στη συνέχεια, μετά την αξιολόγηση των διαφόρων κανόνων, ο browser επιλέγει την καλύτερη εικόνα με βάση τα δικά του κριτήρια. Αυτό είναι ένα άλλο ωραίο χαρακτηριστικό αφού τα κριτήρια του προγράμματος περιήγησης μπορούν να περιλαμβάνουν τις ρυθμίσεις σας. Για παράδειγμα, τα μελλοντικά προγράμματα περιήγησης θα μπορούσαν να προσφέρουν μια επιλογή για να σταματήσουν οι εικόνες υψηλής ανάλυσης από τη φόρτωση μέσω 3G, ανεξάρτητα από το τι θα μπορούσε να πει οποιοδήποτε στοιχείο εικόνας στη σελίδα. Μόλις το πρόγραμμα περιήγησης γνωρίζει ποια εικόνα είναι η καλύτερη επιλογή, φορτώνει και εμφανίζει αυτήν την εικόνα σε ένα παλιό καλό στοιχείο img.

… τι συμβαίνει είναι η εικόνα τυλίγει μια ετικέτα IMG. Εάν το πρόγραμμα περιήγησης είναι πολύ παλιό για να μάθετε τι να κάνετε στοιχείο, τότε φορτώνει την εφεδρική ετικέτα img. Όλα τα οφέλη προσβασιμότητας παραμένουν αφού το χαρακτηριστικό alt βρίσκεται ακόμα στο στοιχείο img. "

Όλοι οι προγραμματιστές δεν δέχτηκαν πρώτα το νέο στοιχείο Εικόνας. Η ιστορία του Ars Technica σκιαγραφεί τη διαδικασία που οι ηγέτες στην κοινότητα ανάπτυξης του Διαδικτύου διέσχισαν για να φτάσουν στο σημείο όπου βρίσκονται στοιχείο σήμερα. Στην πορεία υπήρξε ακόμα μια επιτυχημένη εκστρατεία για το crowdfunding στο Indiegogo με μια κιθάρα Weiss.

$config[code] not found

Ωστόσο, το ζήτημα εμφανίζεται πλέον σταθερό, με την υιοθέτηση του νέου στοιχείου HTML εικόνας.

Βασικά σημεία για το Στοιχείο

ο το στοιχείο σήμανσης έρχεται σύντομα σε ένα πρόγραμμα περιήγησης κοντά σας. Μέχρι το τέλος του 2014, η υποστήριξη για αυτό αναμένεται να ενεργοποιηθεί από προεπιλογή στα προγράμματα περιήγησης Chrome και Firefox. Η όπερα είναι επίσης στο δρόμο. Και η τελευταία έκδοση του προγράμματος περιήγησης Safari της Apple φαίνεται να είναι και στις δουλειές. Η Microsoft «το εξετάζει» για τον Internet Explorer, σύμφωνα με την ArsTechnica.

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

Εφαρμογή του στοιχείου εικόνας HTML για εικόνες είναι κάτι που πρέπει να συζητήσετε με τον προγραμματιστή σας στο Web. Οι τεχνικοί και οι ιδιοκτήτες σπιτιού μπορούν να πάνε εδώ για να μάθουν πώς να χρησιμοποιήσουν το στοιχείο Εικόνα. Είναι μια εξαιρετική αναγραφή από τον Scott Gilbertson.

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

Εικόνες: Shutterstock; RICG

9 Σχόλια ▼