de Zlatan Bekric

O introducere în CSS Image Sprites: sunt ușor de învățat și minunat de știut

0*Y3Jm8RwAhxFsx34
Fotografie de Markus Spiske pe Unsplash

Spriturile de imagine sunt aici din anii 1970. Au fost folosite pentru primele animații pe computer de pe Atari și alte console. Odată cu trecerea timpului, acestea au fost folosite din ce în ce mai puțin de dezvoltatorii front-end care doreau grafică mai avansată (citiți: realistă) pentru 3D și realitate virtuală.

Cu toate acestea, în ultimii ani au revenit.

Sprite este un termen grafic pe computer pentru o hartă de biți bidimensională care este integrată într-o scenă mai mare.

În ultimii ani, Facebook, Twitter, Instagram și multe alte platforme de socializare au crescut ca o nebunie. Odată cu creșterea, a venit nevoia lor de a optimiza ori de câte ori este posibil și de a micșora dimensiunea cererilor serverului. Atunci, spriturile de imagine CSS au revenit în mainstream.

Pentru o platformă precum Facebook – care are mai mult de 1 miliard de utilizatori – afișarea de pictograme, imagini și conținut similar necesită mai multe cereri de server. Solicitările supraîncarcă inutil traficul.

Deci, ce faceți pentru a reduce cererile serverului și lățimea de bandă? Treceți la spriturile de imagine CSS

În loc să faceți o cerere pentru imaginea dvs. de profil, imaginea de profil a prietenului dvs., miniaturile albumului dvs. etc., sprites vă permit să utilizați o singură imagine, ceea ce înseamnă o singură cerere. Puteți manipula acea imagine pentru a afișa acele imagini ca porțiuni ale unei imagini mai mari.

Să vedem un exemplu care implică steaguri:

O introducere in CSS Image Sprites sunt usor de invatat
Imagine originală

Acum să vedem cum funcționează:

După cum puteți vedea în codul de mai sus, am configurat baza care constă din trei divs, unde fiecare div va fi un purtător sprite.

În primul rând, am ales div-ul cu ID-ul primului. Diviziunea noastră va avea o dimensiune de înălțime și lățime care va fi afișată pe pagina noastră. Ca fundal, vom încărca o imagine cu URL („https://i.postimg.cc/R0N7nkH9/flags.png”).

Următorul lucru este să ne micșorăm / micșorăm imaginea de fundal cu fundal-dimensiune: 1400px. (Putem folosi dimensiunea reală a pixelilor, procentul, em sau rem.) Acest parametru ne va permite să „mărim” o imagine până la punctul în care se va afișa doar o anumită parte a imaginii.

În cele din urmă, cei doi params care vin după fundal:

URL („https://i.postimg.cc/R0N7nkH9/flags.png”), va muta porțiunea imaginii principale, care va fi vizibilă de-a lungul axelor X și Y. Ceea ce înseamnă că în acest caz fundal:

URL („https://i.postimg.cc/R0N7nkH9/flags.png”) -86px -87px; vom arăta partea care este decalată din partea de sus a imaginii cu 87 de pixeli din partea de sus și 86 de pixeli din stânga.

Primul număr (-86px) reprezintă axa X în care negativ înseamnă deplasarea de la stânga la dreapta și pozitiv înseamnă a merge de la dreapta la stânga. Al doilea număr (-87px) sunt folosite pentru a compensa de sus în jos, unde se aplică regulile inversate, un număr pozitiv înseamnă a merge de jos în sus și negativ, desigur, merge de sus în jos.

După cum puteți vedea pe imaginea originală, steagul pe care l-am obținut (Bosnia) este într-adevăr al doilea din partea de sus și al doilea din stânga.

Suficient de bun? OK să continuăm.

Acum, să completăm div-ul cu un ID de secundă. Se vor aplica aceleași reguli pentru configurare și singura modificare va fi aceea că, în acest caz, vom rămâne pe axa X originală (0 px), iar direcția Y va merge din partea de jos spre partea de sus (89px). Din nou, dacă verificați imaginea originală, este posibil să vedeți că (Uzbekistan) este primul din partea de jos și primul din stânga.

Și nu în ultimul rând…

Da, în cele din urmă completăm ultima divizare cu un ID al treilea. Regulile sunt aceleași și, dacă ați ghicit că ne-am deplasat de jos în sus, este adevărat.

Acum, momentul adevărului …

În cazul de mai sus, ne deplasam de-a lungul axelor X și Y pentru a afișa anumite porțiuni ale imaginii cu steaguri. Mergând de la dreapta la stânga și în jos am obținut Bosnia (axa X), mergând de jos și la stânga (axa Y) am primit Thailanda și Uzbekistan. După cum ați văzut, folosim o singură imagine și asta înseamnă o singură cerere pentru o imagine.

Este important să știți că atunci când construiți sprite-urile, acea imagine de bază ar trebui să aibă aceleași porțiuni de imagini în interiorul său, pentru confortul dumneavoastră. Ca și în acest caz în care ne deplasăm spre stânga și dreapta, sus și jos, cu dimensiunea porțiunii plus spațiul alb. Uzbekistanul (89 px) și Thailanda (178 px) au o diferență de 89 px, care este dimensiunea lor reală (87 px), plus spațiul alb (1 px + 1 px).

Da, puteți face și animații.

1611923947 780 O introducere in CSS Image Sprites sunt usor de invatat
Imagine originală

Pentru a crea acest stil de animații dulci și reci din vechea școală, avem nevoie doar de proprietăți de animație CSS. În acest caz, mutam imaginea originală de-a lungul axei X și obținem această animație de stil vechi. Crede-mă cu sprite, nu există limite.

Este la fel de ușor ca asta 🙂

Sper că v-a plăcut să citiți acest articol.

Rămâneți la curent pentru mai multe …

1611923948 895 O introducere in CSS Image Sprites sunt usor de invatat