Com implementar Sprites CSS per millorar les pàgines web

Aquest article us proporcionarà un coneixement detallat i exhaustiu de CSS SPrites i de com es pot utilitzar per suavitzar els llocs web.

El concepte de sprites existeix des de fa un temps. És una de les tècniques més utilitzades a la indústria del joc per accelerar el procés de visualització d’animacions en una pantalla. En aquest article, analitzarem particularment com aquesta tècnica ens pot ajudar a millorar l’experiència de l’usuari a les pàgines web amb l’ajut de CSS Sprites en l’ordre següent:

Què és un Sprite?

Un sprite és una imatge única que forma part d’una escena més gran d’un joc. A continuació, es combinen diversos sprites en una imatge gran anomenada full de sprite. Un cop es carrega un full sprite a la memòria, es representen diferents sprites successivament per donar la il·lusió d’animació. Això es fa simultàniament entre desenes i centenars de sprites diferents per generar una escena al joc.





CSS Sprites

La idea bàsica és que és molt més ràpid carregar una imatge i mostrar-ne una part allà on sigui necessari, en comparació amb la càrrega i visualització de diverses imatges.



Què és CSS Sprite: una visió general ràpida?

Un sprite CSS és una tècnica que els desenvolupadors web solen utilitzar per optimitzar el rendiment de les pàgines web. En aquesta tècnica, diverses imatges més petites, normalment de les mateixes dimensions, es combinen en una sola imatge gran anomenada a full de sprite o bé joc de rajoles . Aquest full sprite s'utilitza per mostrar elements individuals allà on els necessitem.

Normalment, elements com els logotips, les fletxes de navegació i els botons s’inclouen al full sprite, ja que tenen gairebé les mateixes dimensions i s’utilitzen amb freqüència en una pàgina web.

Exemple de com ajuda al desenvolupament web?

En general, mentre es dissenyen pàgines web, les imatges s’emmagatzemen i s’utilitzen com a fitxers individuals. Per tant, quan un usuari obre una pàgina web, el navegador ha de fer una sol·licitud HTTP per a cadascun d’aquests fitxers, descarregar-los per separat i mostrar-los. Això condueix a temps de càrrega de pàgina més elevats, ja que una pàgina web concreta pot tenir un gran nombre d'imatges més petites com botons, icones i logotips.



Els sprites CSS ajuden els desenvolupadors a combinar aquestes imatges petites utilitzades amb freqüència en una imatge gran. Aleshores, el navegador només ha de descarregar un fitxer al que s’utilitzavavisualitzeu la secció requerida compensant la imatge.

Avantatges d'utilitzar CSS Sprites

Hi ha dos avantatges principals d’utilitzar sprites CSS sobre les imatges normals:

  • Càrrega de pàgina més ràpida: Millora el temps de càrrega de la pàgina a mesura que apareixen imatges utilitzades a la pàgina web tan bon punt es descarrega el full.

  • Major rendiment i menor ús de recursos: No només aquesta tècnica millora l’experiència de l’usuari final fent que la pàgina es carregui més ràpidament,però també redueix la congestió de la xarxa a mesura que es fa un nombre menor de sol·licituds HTTP.

Què ha de fer un desenvolupador quan treballa amb CSS Sprites?

Quan es treballa amb imatges individuals, el desenvolupador només pot treballar amb etiquetes HTML i estileu-lo en CSS si cal. Però quan treballa amb CSS Sprites, un desenvolupador ha de fer dues coses específiques:

  • Creació de Sprite Sheet

Mentre desenvolupa una pàgina web si el desenvolupador decideix utilitzar sprites CSS, primer ha de crear el full sprite fusionant tots els elements desitjats com botons, logotips, etc. en un patró semblant a una quadrícula. Això es pot fer mitjançant qualsevol programa d’edició d’imatges com Photoshop o Gimp. També hi ha moltes eines en línia disponibles que us ajudaran a fer el full de sprite. Aquestes eines es tractaran més endavant en aquest article.

  • Accediu a un element concret del sprite mitjançant el fitxer Posició de fons CSS propietat

Un cop el full sprite estigui llest, el desenvolupador ha d’utilitzar atributs CSS per accedir a diferents parts del full.

  • amplada: Amplada del sprite
  • alçada: Alçada del sprite
  • antecedents: Referència al full sprite
  • Posició de fons: Valors de desplaçament (en píxels) per accedir només a la part necessària del full sprite

Com es crea un full de Sprite CSS?

Podeu utilitzar qualsevol programari d’edició d’imatges per organitzar les vostres imatges més petites en una quadrícula, però a continuació es detallen dos mètodes més senzills:

1. Eina de creació de fulls de Sprite en línia

ENLLAÇ: toptal.com/developers/css/sprite-generator/

Aquesta eina no només és gratuïta, sinó que també us proporciona el codi CSS requerit que es pot utilitzar mentre feu referència al full de sprite. A més, podeu jugar amb diferents propietats, com ara encoixinar-se entre els elements i canviar-ne l'alineació.

2. Generació de fulls Sprite amb Sprity

Si utilitzeu Grunt, Node o Gulp, podeu instal·lar un paquet anomenat Sprity que us ajudarà a crear un full de sprite en diversos formats com PNG, JPG, etc.

En primer lloc, haureu d’instal·lar Sprity mitjançant:

npm instal·lar sprity -g

A continuació, per generar full de sprite, utilitzeu l'ordre següent:

sprity ./output-directory/ ./input-directory/*.png

Com treballar amb CSS Sprites?

En aquest exemple, utilitzarem el següent full de sprite:

Com podeu veure a la imatge anterior, sis icones (Instagram, Twitter i Facebook) s’han disposat en forma de quadrícula. A la primera fila, tenim un estat normal i, a la segona fila, tenim el seu estat de posicionament (la imatge que apareix una vegada que hi posem el cursor del ratolí).

Si heu fet el full de sprite amb les eines que hem comentat anteriorment, ja coneixeu els desplaçaments necessaris al CSS, però si heu utilitzat alguna altra eina o simplement us han donat algun full de sprite, no us preocupeu, parlarem d’un mètode que us ajudarà a obtenir compensacions per a l'element requerit.

Ara veiem una manera molt senzilla d’obtenir les compensacions necessàries per a cadascuna de les sis icones mitjançant MS Paint. Potser no és una solució ideal per treballar amb sprites, però com que té la característica que proporciona les coordenades del cursor del ratolí, es pot utilitzar per obtenir les coordenades X i Y necessàries.

Primer, obriu la imatge del full de sprite (quadrícula que conté totes les imatges més petites) i porteu el cursor del ratolí a la cantonada superior esquerra del sprite que voleu agafar.

Un cop tingueu les coordenades del punt superior esquerre del vostre sprite (imatge superior esquerra d'Instagram), podeu mostrar aquest sprite específic sempre que sigui necessari mitjançant el codi CSS:

longitud d'un javascript de matriu

background: url ('img_sprites.png')
posició de fons: 0 0
amplada: 125 px
alçada: 125 px

Estem fent servir amplada i alçada de 125 píxels, ja que les nostres icones tenen aquesta dimensió. Per obtenir la següent imatge (Twitter) a la mateixa fila, fem servir el codi següent:

background: url ('img_sprites.png')
posició de fons: -128px 0px
amplada: 125 px
alçada: 125 px

Tingueu en compte l’atribut de posició de fons al fragment anterior. (-128px, 0) significa que estem compensant el nostre full sprite a l'esquerra per 128 píxels (tenint en compte el farciment entre elements) i 0 píxels a l'eix Y. Si accedíssim a la icona del cursor de Twitter, el nostre atribut background-position seria:

posició en segon pla: -128px -128px

D'aquesta manera, ara podem accedir a cada component del nostre full de sprite mitjançant CSS. Vegem un codi HTML i CSS complet sobre com fer-ho.

Pas 1: Escrivint el codi HTML requerit

Al codi següent, simplement afegim tres enllaços. A més, enllaçarem el nostre HTML amb el full d’estils (screen.css).

classe='icona d'instagram'> href='#'>Instagram

classe='icona de twitter'> href='#'>Twitter

classe='icona de Facebook'> href='#'>Facebook

Pas 2: Redacció del CSS necessari. Primer, donarem estil a la nostra classe d’icones compartides. Aquí podeu veure que fem referència al full de sprite que hem creat.

/ * Icona compartida Classe * /

span.icon a: enllaç,

span.icon a: visitat{

visualització:bloc

sagnat de text:-9999 px

imatge de fons: url (./ img_sprites.png)

repetir fons:sense repetir

}

Pas 3: Obtenir les icones individuals del full sprite mitjançant els desplaçaments.

/ * Icona d'Instagram * /

span.instagram a: enllaç,

span.instagram a: visitat{

amplada:125 píxels

alçada:125 píxels

posició de fons:0 0

}

/ * Icona de Twitter * /

span.twitter a: enllaç,

span.twitter a: visitat{

amplada:125 píxels

alçada:125 píxels

posició de fons:-128px 0

}

/ * Icona de Facebook * /

span.facebook a: enllaç,

span.facebook a: visitat{

amplada:125 píxels

alçada:125 píxels

posició de fons:-257px 0

}

Pas 4: Obtenir les icones del cursor del full sprite mitjançant els desplaçaments.

span.instagram a: planegeu{posició de fons:0 -128px}

span.twitter a: planegeu{posició de fons:-128px -128px}

span.facebook a: planegeu{posició de fons:-255px -128px}

Empreses que fan servir CSS Sprites

Molts grans noms de la indústria utilitzen CSS Sprites per millorar la capacitat de resposta dels seus llocs web. Empreses com Google, Facebook i Amazon utilitzen extensament aquest mètode, ja que els ajuda a reduir el nombre de sol·licituds HTTP per sessió per a un usuari concret. Això suposa un gran avantatge si tenim en compte que aquestes empreses donen servei a milions de clients en cada moment.

Ara que ja coneixeu què són els sprites CSS i com treballar-hi, esteu un pas més a prop del vostre viatge per aprendre CSS. Conceptes com els sprites canvien el joc en l’actualitat, ja que ha esdevingut molt important per als desenvolupadors extreure tots els trets de rendiment d’una pàgina web.

Consulteu el nostre que inclou formació en viu dirigida per un instructor i experiència en projectes reals. Aquesta formació us permet dominar les habilitats necessàries per treballar amb tecnologies web front-end i front-end. Inclou formació sobre desenvolupament web, jQuery, Angular, NodeJS, ExpressJS i MongoDB.

Tens alguna pregunta? Esmenteu-lo a la secció de comentaris del bloc 'Imatges HTML' i us respondrem.