Uma imagem para múltiplas substituições

Publicado em: 08/01/2006

Autor: Alessandro Fulciniti
URL do original: https://web-graphics.com/mtarchive/001683.php
Título original: Single Image Multi Replacement
Traduzido com autorização do autor

Introdução

Nos tempos atuais diminuiu significativamente a atenção para as técnicas de substituição de imagens, graças a flexibilidade e a facilidade de soluções como as sIFR.

Contudo, em alguns casos, considerando-se razões de design, a técnica de substituição de imagem ainda se constitue em uma boa opção. Entre as inúmeras técnicas existentes, a que eu sempre mais gostei é a solução criada por Gilder e Levin, que usa uma marcação extra (um elemento span vazio que não interfere com o conteúdo) sem complicar as CSS, sem necessidade de hacks e acima de tudo mantém a acessibilidade intacta no caso de as imagens serem desabilitadas.

Ao procurar uma solução simplista para manter tanto as CSS como as imagens o mais leve possível eu desenvolvi o que chamo de SIMR (que é uma abreviatura para Single Image Multi Replacement - Uma imagem para múltiplas substituições), que se utiliza de uma única imagem para substituir textos de mais de um cabeçalho. Nada excepcionalmente novo, uma vez que combining images in one for rollovers ou construir whole menu com uma só imagem são opções já conhecidas. Mas eu penso que vale a pena compartilhar minha solução uma vez que reunir em uma só imagem todas as imagens para cabeçalhos pode ser uma novidade para alguns de vocês. SIMR não tem a pretensão de ser uma nova técnica de substituição de imagem mas sim uma metotologia de projeto com um enfoque diferente.

Assim, eis aqui o exemplo que eu preparei, e no qual cada texto do elemento h2 na página é substituido por uma imagem usando-se uma única imagem. A seguir um trecho do código de marcação:

<div id="content">
    <h2 id="what"><span></span>What? A single image?</h2>
    <h2 id="benefit"><span></span>Bandwidth benefits</h2>
</div>

Como você pode ver, cada elemento h2 dentro da DIV content tem sua ID e mais um elemento span vazio, antes do texto do cabeçalho. Agora vamos ver as CSS. Primeiro as regras de estilo para os elementos h2. Nós iremos declarar um posicionamento relativo para eles de modo a criar um contexto para posicionamento absoluto dentro deles. As dimensões serão iguais as dimensões de uma imagem a ser usada para o cabeçalho. Ajustaremos margens e estilizaremos fontes para o caso de as imagens serem desabilitadas. Uma cor diferente da cor de fundo para textos, uma fonte pequena e small-caps, será suficiente:

div#content h2 {
    position: relative;
    width: 350px;
    height: 40px;
    margin: 2em 0 0;
    color: #847FB7;
    font: bold small-caps 90% Arial,sans-serif;
}

Agora vamos ao elemento span que será absolutamente posicionado e com as mesmas dimensões do elemento h2 e com a imagem para todos os cabeçalhos colocada como fundo, background-image:

div#content h2 span {
    position: absolute;
    width: 100%; 
    height: 100%;
    background-image: url(simr.jpg);
}

E para terminar posicionaremos a imagem de fundo para cada cabeçalho:

h2#what span{background-position: 0 0;}
    h2#benefit span{background-position: 0 -40px;}
    h2#intact span{background-position: 0 -80px;}
    h2#easier span{background-position: 0 -120px;}
    h2#updates span{background-position: 0 -160px;
}

É isso aí. Você pode ver outra vez o exemplo. Esta técnica é compatível com qualquer navegador com um mínimo de suporte para CSS e foi testada no IE5.x, IE6, Opera, Firefox e Safari. Agora você poderá ver como a página será renderizada quando as imagens estiverem desabilitadas no navegador. Algumas considerações sobre prós e contras desta técnica.

Como prós podemos citar que os conteúdos substituidos são acessíveis aos leitores de tela, aos navegadores de texto e a navegadores com imagens desabilitadas. Adicionalmente, uma imagem pesa menos do que por exemplo cinco imagens e requer um só carregamento em lugar de cinco. As CSS são mais leves e simples e eu penso que esta técnica pode trazer economia de tempo no processo de desenvolvimento.

Um contra, é o tempo de carregamento: o tempo de espera para renderização do primeiro cabeçalho é realmente maior que aquele quando se usa uma imagem para cada cabeçalho. Ainda mais a manutenção para atualizações não é fácil. Por esta razão eu sugiro o uso desta técnica para sites com baixa frequência de atualizações ou quando a necessidade de cabeçalhos adicionais for rara.

Finalmente, diversas estratégias de uso de SIMR podem ser consideradas. Você pode substituir por exemplo todos os cabeçalhos principais das diferentes páginas ou usar uma imagem por página quando houver mais de um cabeçalho na página. Como regra geral uma imagem não deve pesar mais do que 30Kb e você pode prever uma imagem por página. Nestes casos você pode atribuir uma ID para o elemento body e atingir um outro nível de personalização com uso de seletor descendente. Por exemplo:

div#content h2 span {
    position: absolute;
    width: 350px;
    height: 40px;
}
body#home div#content h2 span {
    background: url(home.jpg);
}
body#portfolio div#content h2 span {
    background: url(folio.jpg);
}

As regras para span e cabeçalhos permanecem as mesmas mostradas acima. Obviamente soluções mais complexas ou variações podem ser aperfeiçoadas para cada caso, mas eu acredito que a metodologia está clara. Divirta-se!