Sprite Sheet Builder

Sites com muitas imagens, algumas até definindo a estrutura do layout, podem ficar extremamente feios dependendo da velocidade da conexão do usuário, que tem influência direta na velocidade em que as imagens são carregadas. Uma solução para isso é utilizar CSS para carregar todas as imagens previamente e só depois mostrá-las na página. O objetivo do Sprite Sheet Builder é justamente automatizar o trabalho que você teria para escrever manualmente o código para cada imagem.

O programa não poderia ser mais simples, bastando que você adicione as imagens à lista, clicando no botão “Add images”, defina o nome que os arquivos receberão, utilizando o campo “Filename prefix” e, por fim, clicando em “Build”. Será exibida uma janela solicitando o local de salvamento de todos os arquivos e, após a escolha, será gerado o código necessário.

CSS só com um botão!

O Sprite Sheet Builder cria para você o arquivo CSS contendo as declarações de variáveis e atributos de cada uma das imagens; o arquivo HTML já com a referência relativa à folha de estilo; copia e renomeia todas as imagens para o título definido por você no campo “Filename prefix”.

Por exemplo: mesmo que você adicione imagens com os mais variados nomes de arquivo, mas digite “siteBaixaki” no campo “Filename prefix”, o Sprite Sheet Builder gerará um arquivo chamado “siteBaixaki.html”, um chamado “siteBaixaki.css”, copiará e renomeara as imagens para “siteBaixakiNNN.xxx”, onde “NNN” é um número que inicia por “001” e “xxx” é a extensão do arquivo referente ao formato da imagem.

*A sequência numérica dependerá daquela que foi usada para adicionar as imagens à lista do programa.

<!-- /* Font Definitions */ @font-face {font-family:"Cambria Math"; panose-1:2 4 5 3 5 4 6 3 2 4; mso-font-charset:0; mso-generic-font-family:roman; mso-font-pitch:variable; mso-font-signature:-1610611985 1107304683 0 0 159 0;} @font-face {font-family:Calibri; panose-1:2 15 5 2 2 2 4 3 2 4; mso-font-charset:0; mso-generic-font-family:swiss; mso-font-pitch:variable; mso-font-signature:-1610611985 1073750139 0 0 159 0;} @font-face {font-family:Verdana; panose-1:2 11 6 4 3 5 4 4 2 4; mso-font-charset:0; mso-generic-font-family:swiss; mso-font-pitch:variable; mso-font-signature:-1593833729 1073750107 16 0 415 0;} /* Style Definitions */ p.MsoNormal, li.MsoNormal, div.MsoNormal {mso-style-unhide:no; mso-style-qformat:yes; mso-style-parent:""; margin-top:0cm; margin-right:0cm; margin-bottom:10.0pt; margin-left:0cm; text-align:justify; line-height:115%; mso-pagination:widow-orphan; font-size:10.0pt; font-family:"Verdana","sans-serif"; mso-fareast-font-family:Calibri; mso-fareast-theme-font:minor-latin; mso-bidi-font-family:"Times New Roman"; mso-bidi-theme-font:minor-bidi; mso-fareast-language:EN-US;} .MsoChpDefault {mso-style-type:export-only; mso-default-props:yes; font-size:10.0pt; mso-ansi-font-size:10.0pt; mso-bidi-font-size:10.0pt; mso-ascii-font-family:Verdana; mso-fareast-font-family:Calibri; mso-fareast-theme-font:minor-latin; mso-hansi-font-family:Verdana; mso-bidi-font-family:"Times New Roman"; mso-bidi-theme-font:minor-bidi; mso-fareast-language:EN-US;} .MsoPapDefault {mso-style-type:export-only; margin-bottom:10.0pt; text-align:justify; line-height:115%;} @page Section1 {size:612.0pt 792.0pt; margin:70.85pt 3.0cm 70.85pt 3.0cm; mso-header-margin:36.0pt; mso-footer-margin:36.0pt; mso-paper-source:0;} div.Section1 {page:Section1;} -->