El codi HTML de la nova imatge podria fer que el vostre lloc web carregui més ràpidament

Heu sentit que la web s'ha convertit en imatges més visuals i grans al lloc web de la vostra empresa.

Però aquestes imatges poden ser el flagell dels visitants del vostre lloc web. Les imatges representen 1 MB de 1.7 MB la pàgina web mitjana conté.

Pot ser que això no sigui un problema per als visitants en equips d'escriptori que utilitzin connexions d'alta velocitat a Internet. Tanmateix, si veieu o voleu veure un augment del trànsit dels visitants mòbils, aquestes poden ser un problema. Les pàgines web amb imatges molt pesades poden trigar molt a descarregar. Els visitants es frustren i deixen el vostre lloc.

$config[code] not found

És possible que hàgiu implementat un disseny web sensible, pensant que soluciona tots els vostres problemes mòbils. I és cert que un disseny web sensible soluciona alguns problemes. Automàticament organitza i mostra els elements del vostre lloc per veure's a pantalles mòbils més petites i estretes.

Però el disseny web sensible no és la resposta a tot. No soluciona necessàriament el problema de la baixada d'imatges. Fins i tot amb un disseny sensible, moltes vegades, aquestes imatges de pes pesat encara es descarreguen de totes maneres. Com l'especialista en rendiment web, Yoav Weiss, assenyala succintament el lloc web de l'Opera:

"Responsive Web Design RWD combina les noves capacitats del navegador i les tècniques de CSS per crear llocs web que s'adaptin al dispositiu que els mostri i que sembli ideal a tot arreu. Això va permetre als desenvolupadors deixar de preocupar-se per la detecció de dispositius no fiables i pensar en els seus llocs web en termes de dimensions de viewport.

Però, tot i que els llocs de RWD semblaven diferents a cada dispositiu, a sota, la majoria d'ells seguien descarregant els mateixos recursos per a tots els dispositius ".

El nou L'element del codi HTML podria canviar-ho.

Què és l'element HTML de la imatge?

Si no sabeu res sobre el codi HTML, una definició no tècnica és: és un idioma especial. Quan s'utilitza darrere de l'escena del codi del lloc web, aquest llenguatge ofereix instruccions sobre com el navegador ha de mostrar el text i les imatges.

El nou element Picture és un tipus de llenguatge de marcat HTML. Està escrit així (per el grup comunitari Responsive Images):

L'element Imatge és sensible imatges, no respon disseny.

Per als empresaris no tècnics, aquesta distinció pot semblar petita. Però pel que fa al rendiment del vostre lloc en dispositius mòbils, podria ser significatiu.

Segons un informe d'ArsTechnica, el nou element de marcat tracta els problemes causats per les imatges que es veien en un monitor de mida completa: imatges que no es tradueixen bé en dispositius mòbils. El El codi de marcat indica als navegadors web com Firefox que es carreguin i mostrin les imatges correctes (llegir: més petit):

"Quan el navegador troba un element Picture, primer s'avalua les regles que el desenvolupador web pugui especificar. *** Després, després d'avaluar les diferents regles, el navegador selecciona la millor imatge segons els seus propis criteris. Aquesta és una altra característica, ja que els criteris del navegador poden incloure la vostra configuració. Per exemple, els navegadors futurs poden oferir una opció per evitar que les imatges d'alta resolució es carreguin a través de 3G, independentment del que pugui dir qualsevol element d'imatge de la pàgina. Una vegada que el navegador sap quina imatge és la millor opció, realment carrega i mostra aquesta imatge en un bon i antic img element.

… què passa és la imatge s'embolica una etiqueta img. Si el navegador és massa antic per saber què fer d'un element, llavors carrega l'etiqueta img de devolució. Es mantenen tots els beneficis d'accessibilitat ja que l'atribut alt encara està en l'element img ".
No tots els desenvolupadors van acceptar el nou element Picture al principi. La història d'Ars Technica descriu el procés que van tenir els líders en la comunitat de desenvolupament web per arribar fins al punt d'on es troba el l'element es troba avui. Al llarg del camí hi va haver fins i tot una exitosa campanya de crowdfunding a Indiegogo amb una guitarra de Weiss.
$config[code] not found
Però el problema ara es resol, amb el nou element HTML d'imatge que s'està adoptant.

Punts clau sobre el Element

El L'element de marcat aviat arribarà a un cercle proper. A finals de 2014, s'espera que el seu suport estigui activat de manera predeterminada als navegadors Chrome i Firefox. L'òpera també està en camí. I també sembla que l'última versió del navegador Safari d'Apple apareix a les obres. Microsoft està "considerant" per a Internet Explorer, segons ArsTechnica.

Com a empresaris, és important saber-ho El marcat pot accelerar el vostre lloc web, especialment en dispositius mòbils. Això seria bo per als visitants del vostre lloc.
La implementació de l'element Imatge HTML per a les imatges és alguna cosa per discutir amb el vostre desenvolupador web. Els experts tecnològics i els responsables poden anar aquí per aprendre a utilitzar l'element Picture. És una excel·lent escriptura de Scott Gilbertson.

Siéntase lliure d'implementar marqueu al codi del vostre lloc web ara. Fins i tot si un programa del navegador no entén el nou marcatge, hi ha una ordre de devolució per utilitzar etiquetes HTML estàndard, Gilbertson escriu.

Imatges: Shutterstock; RICG
9 Comentaris ▼