Codul HTML nou imagine ar putea face ca site-ul dvs. să fie încărcat mai rapid

Cuprins:

Anonim

Ați auzit că Web-ul a devenit mai vizuale și imagini importante în site-ul dvs. de afaceri sunt importante.

Dar acele imagini pot fi flagelul vizitatorilor site-ului tău. Imaginile reprezintă 1MB din cele 1.7MB pe care le conține pagina web medie.

Acest lucru nu ar putea fi o problemă majoră pentru vizitatorii dvs. de pe computerele desktop care utilizează conexiuni de Internet de mare viteză. Cu toate acestea, dacă vedeți sau doriți să vedeți trafic crescut de la utilizatorii mobili, acele imagini ar putea fi o problemă. Paginile Web grele de imagine pot dura mult timp pentru a fi descărcate. Vizitatorii sunt frustrați și părăsesc site-ul.

$config[code] not found

S-ar putea să fi implementat un design web receptiv, gândindu-vă că rezolvă toate problemele dvs. mobile. Și este adevărat că un design web receptiv rezolvă unele probleme. În mod automat aranjează și afișează elementele site-ului dvs. pentru a fi vizualizate pe ecrane mobile mai mici și mai înguste.

Dar designul Web receptiv nu este răspunsul la tot. Nu rezolvă neapărat problema descărcării imaginii. Chiar și cu design receptiv, de multe ori acele imagini grea sunt încă descărcate oricum. Specialistul de performanță Web Yoav Weiss subliniază succint pe site-ul Opera:

"Responsabilitatea Web Design RWD combina capacitățile noi de browser și tehnicile CSS pentru a crea site-uri care se adaptează la dispozitivul care le afișează și arată ideal peste tot. Acest lucru a permis dezvoltatorilor să nu mai fie îngrijorați de detectarea incorectă a dispozitivelor și să se gândească la site-urile lor în ceea ce privește dimensiunile ferestrei de vizualizare.

Dar, chiar dacă site-urile RWD arătau diferit pe fiecare dispozitiv, dedesubt, majoritatea au continuat să descarce aceleași resurse pentru toate dispozitivele. "

Noul Elementul de cod HTML ar putea schimba acest lucru.

Ce este Elementul HTML al imaginii?

Dacă nu știți nimic despre codul HTML, o definiție non-tehnică este: este o limbă specială. Când este utilizat în spatele scenei în codul site-ului dvs., această limbă oferă instrucțiuni pentru modul în care browserul ar trebui să afișeze textul și imaginile.

Noul element Imagine este un tip de limbaj HTML de marcare. Este scris astfel (în funcție de grupul comunitar Responsive Images):

Elementul Imagine este receptiv imagini, nu este receptiv proiecta.

Pentru oamenii de afaceri non-tehnici, această distincție poate părea mică. Dar când vine vorba despre performanța site-ului dvs. pe dispozitivele mobile, ar putea fi semnificativă.

Potrivit unui raport ArsTechnica, noul element de markup abordează problemele cauzate de imaginile care au fost menite să fie văzute pe un monitor de dimensiuni mari - imagini care nu se traduc bine dispozitivelor mobile. codul de marcare indică browserelor Web, cum ar fi Firefox, pentru încărcarea și afișarea imaginilor corecte (citite: mai mici):

"Când browserul întâlnește un element Imagine, acesta evaluează mai întâi toate regulile pe care dezvoltatorul Web le-ar putea specifica. *** Apoi, după evaluarea diferitelor reguli, browserul alege cea mai bună imagine pe baza propriilor criterii. Aceasta este o altă caracteristică frumoasă deoarece criteriile browserului pot include setările dvs. De exemplu, browserele viitoare ar putea oferi o opțiune pentru a opri imaginile de înaltă rezoluție de la încărcare pe 3G, indiferent de ceea ce ar putea spune orice element Imagine de pe pagină. Odată ce browser-ul știe ce imagine este cea mai bună alegere, ea în realitate încarcă și afișează imaginea într-un element img bun vechi.

… ce se întâmplă este Imaginea împachetează o etichetă img. Dacă browserul este prea vechi pentru a ști ce să facă element, apoi încarcă tag-ul fallback img. Toate avantajele de accesibilitate rămân, deoarece atributul alt este încă pe elementul img. "

Nu toți dezvoltatorii au acceptat primul element Imagine la început. Povestea lui Ars Technica subliniază procesul pe care liderii în comunitatea de dezvoltare web a trecut prin a ajunge la punctul unde se află elementul de astăzi. De-a lungul drumului a existat chiar o campanie de succes în cântăreață pe Indiegogo, cu o piesă Weiss.

$config[code] not found

Dar problema apare acum rezolvată, cu noul element HTML de imagine adoptat.

Puncte cheie Despre Element

elementul de marcare se apropie în curând de un browser în apropierea dvs. Până la sfârșitul anului 2014, se așteaptă ca suportul pentru acesta să fie activat în mod prestabilit în browserele Chrome și Firefox. Opera este, de asemenea, pe drum. Și cea mai recentă versiune a browserului Safari de la Apple pare să fie și în fabrică. Microsoft "o consideră" pentru Internet Explorer, potrivit ArsTechnica.

În calitate de oameni de afaceri, este important să știți acest lucru marcajul ar putea accelera site-ul dvs., în special pe dispozitivele mobile. Asta ar fi bine pentru vizitatorii site-ului dvs.

Implementarea elementului Picture HTML pentru imagini este ceva de discutat cu dezvoltatorul dvs. Web. Persoanele care se gândesc la tehnică și do-it-yourself pot merge aici pentru a afla cum să folosească elementul Imagine. Este o scriere excelentă a lui Scott Gilbertson.

Simțiți-vă liber să implementați marcarea în codul site-ului dvs. web acum. Chiar dacă un program de browser nu înțelege noul markup, există o comandă de rezervă pentru a utiliza etichete standard de imagine HTML, scrie Gilbertson.

Imagini: Shutterstock; RICG

9 Comentarii ▼