Transforma automat imaginile folosite in CSS intr-un stylesheet separat

Citeste imaginile folosite in stylesheet si creeaza un nou stylesheet cu imaginile convertite in base64 pt. a reduce request-urile HTTP sau adaugarea manuala a imaginilor intr-un CSS sprite, exemplu.

EDIT:

Se poate combina cu imagemin pt. compresie

2 Likes

Nice. Nu imi dau seama cum il poti integra intr-un workflow simplu.

Pentru imaginile foarte mici (si care nu nu se preteaza pentru un sprite) le pun cu inline-image din compass.

1 Like

Eu folosesc rework pt. CSS, incerc sa nu folosesc preprocessors, in cazul meu, nu am o metoda inline-image.

Ai mentionat ca totusi folosesti un sprite, ideea e sa renunti la sprite unde trebuie ai grija cum pozitionezi fiecare imagine si sa folosesti un stylesheet separat cu toate imaginile embeded.

Nu prea am inteles de ce ar trebui sa scap de spriteuri. Le generez automat din scss cu compass.

In ceea ce priveste inlineul, apar probleme daca ai 4mb pentru tot siteul. Ce faci? Le incarci pe toate la fiecare rendare de pagina? Nu zic ca e o idee rea, dar nu inteleg procesul prea bine.

Nu stiam ca poti genera sprite-uri din scss (compass), probabil sus este o alternativa.

M-am uitat acum pe o aplicatie destul de complexa, +30,000 linii de cod (js + stylesheets) ~874.65 KB (minified). N-am lucrat la niciun proiect la care sa ajung aproape de 4mb. Fiind un stylesheet separat, browserul face cache ca la orice alt fisier CSS.

Implementez sus intr-un proiect la care se lucreaza deja, si am zis orice mai mic de 200px intra inline in stylesheet separat, restul CDN. Momentan sunt ~245 imagini, 90% sunt sub 200px. Folosesc si imagemin pt. compresie inainte de inline.

1 Like

Exact, in compass eu nu lucrez cu spriteul direct. Ii spun ca un set de imagini e sprite. In cod eu lucrez cu fiecare imagine in parte. Cel mai simplu ar fi asa:

@import "nav-icons/*.png";
@include all-nav-icons-sprites;

Pentru fiecare imagine se creeaza o clasa separata. Ma rog lucrurile se schimba cand lucrezi si apar diferite flavor-uri la solutie.

O sa verific sus caci nu stiam de ea.

Super imagemin, eu lucram cu fiecare tool in parte. Vad ca le integreaza pe toate.