Combinând mai multe imagini într-un sprite css

Combinați imaginile într-un sprite CSS

Nevoia de a combina mai multe imagini într-un singur sprite CSS a venit pentru mine pentru optimizarea internă a site-ului. Combinarea mai multor imagini într-un singur sprite în termeni de optimizare este o mișcare foarte importantă, deoarece browserul utilizatorului va cere doar o singură imagine de pe serverul dvs., în loc de mai multe. În loc de zeci de cereri către serverul dvs., browserul va trimite o singură cerere și va primi doar o singură imagine care va fi stocată în memoria cache a calculatorului. Toate imaginile ulterioare pe care le va scoate din acest sprite, nu se mai referă la serverul tău. Când utilizați sprite în plus, există ambele părți:

Utilizatorul va primi o deschidere mai rapidă a paginii.
Webmasterul va reduce încărcarea pe serverul dvs.

Crearea unui sprite CSS

Descărcați pe computer toate imaginile mici care sunt utilizate în proiectarea site-ului dvs.
Pe baza dimensiunilor aproximative ale imaginilor, este mai bine să reglați lățimea și înălțimea zonei de lucru simultan. Pentru aceasta, faceți clic pe SpriteMap -> MapSize. Apoi, specificați lățimea și lungimea în pixeli.
Glisați câte o imagine la un moment dat pe scenă. Trageți fiecare imagine, aranjați-o astfel încât nicio imagine să nu sară pe cealaltă. Și este de dorit să minimalizăm pierderile, adică să încercați să echipați în zona minimă, deoarece nu este nevoie de kilobyte suplimentare.
Când toate imaginile sunt adăugate, faceți clic pe butonul Fit Documemts. Acest buton taie automat întreaga zonă neutilizată, așa că nu vă temeți de al doilea paragraf pentru a specifica o zonă extinsă.
După toate acestea, faceți clic pe butonul Descărcare. În schimb, veți primi o arhivă care conține un CSS-sprite în format PNG. În plus, în arhivă veți găsi un fișier CSS, care conține toate informațiile importante: coordonatele începutului imaginii, lățimea și lungimea acesteia. Acest serviciu sprite și-a făcut deja treaba, dar recomand să nu îl închid.
Sprite-ul rezultat, unul în format PNG, este adăugat pe site-ul dvs. utilizând un server FTP sau un alt manager de descărcări. De asemenea, salvați calea pentru acest fișier pentru dvs.
Apoi, trebuie să intervenim în codul foarte de design al site-ului dvs. Pot exista două opțiuni:
1. Imaginea din desen este adăugată prin fișierul CSS.
2. O imagine în desen este adăugată prin intermediul HTML printr-o etichetă .
În cel de-al doilea caz, vă rugăm să citiți intrarea mea anterioară despre cum să adăugați o imagine prin CSS. Când toate imaginile sunt adăugate la design prin CSS. puteți merge la următorul element.
Și următorul articol pe care îl voi descrie mai departe.

Adăugarea de imagini la design de la sprite CSS

De exemplu, voi lua un exemplu din postarea anterioară:

Acest bloc de fișiere CSS determină locația emblemei aceluiași site. Aici este dat în versiunea originală, înainte de a folosi sprite. După cum puteți vedea, aici este imaginea logo.png. Se specifică și lățimea și lungimea imaginii. Trebuie să modificăm puțin acest bloc într-o astfel de condiție:

Acesta este modul în care combinați mai multe imagini într-un singur sprite CSS. Singurul lucru pe care aș vrea să vă avertizez despre: folosiți sprites doar pentru imagini statice. Utilizarea spritelor pentru imagini dinamice este puțin mai dificilă, voi scrie despre asta mai târziu. Deocamdată, rețineți dacă nu se specifică nicio repetare lângă locația imaginii. atunci totul este bine. Și dacă se specifică repetarea-x sau repetarea-y. Nu le includeți în sprite-ul principal.

Faceți clic dacă vă pot ajuta