Cross-Browser – Imagens no Lugar de Flash

Estava mostrando um site que eu realizei um trabalho para um amigo e me deparei com um espaço em branco bem grande no site. Na hora eu achei que o Pop-Up que eu criei de propagando estava dando problemas no layout do site, mas não demorei a perceber que o problema era outro: O navegador Safari do Iphone não roda Flash (existem forma de rodar flash no IOS, mas não vou falar delas aqui).

Fazer um Check-List para o Front-End é a melhor forma de evitar esses problemas, vou fazer uma pra vocês depois, porem hoje eu quero falar de imagens como background.

Imagine um processo retroativo em 3 etapas (contando com o flsh daria 3):

<div class="CorDeFundo">
   <div class="ImagemDeFundo">
      <div class="Flash">
      </div>
   </div>
</div>

Funciona assim: Meu Flash > Se não houver flash vai ser Minha Imagem > Se não houver imagem vai ser Cor de Fundo.

Como eu vou me prolongar na explicação da imagem com flash, vai aqui a dica: “Sempre use uma cor de fundo e um tamanho definido (width e height) caso sua imagem não apareça!”. É uma técnica padrão para não deixar espaços esquisitos ou quebrar o layout do site caso a imagem não abra (ou enquanto a imagem AINDA não abriu).  

Ao ponto negativo: querendo ou não o usuário vai baixar a imagem, tendo ele flash ou não (em geral ele vai baixar o flash também, apenas vai dar erro na hora de abrir, mas o download será feito de qualquer jeito). Isso é ruim pois o usuário está consumindo banda do site para o download de uma imagem que ele não verá caso tenha flash e ele mesmo se tiver usando dados moveis com limite de download diário baixará uma imagem desnecessária.

Acredito que muitos vão dar dicas com Javascript e Media Queries com CSS, mas eu gostaria de desencorajar você a fazê-lo.

Primeiro, usando javascript em um smarthphone mais antigos faz com que ele fique mais lerdo, independente da complexidade do código, pior ainda se você fizer em Jquery, e existe um problema maior ainda, já vi diversas vezes um link para um site ser postado na linha do tempo de alguém em uma rede social e só aparecer o texto padrão do site e não aparecer a imagem, ou seja, em muitos lugares não irá aparecer NENHUMA imagem bonitinha do site porque o site não abre javascript (por questões de segurança, imagino eu). “Ah, mas existem meta tag’s especificas dessas redes sociais para mostrar imagens quando você posta na sua linha do tempo!”...  Ok, sua ideia é válida e funcional, mas você terá sempre um trabalho gigantesco. Ponha em uma balança o custo benefício e se valer a pena faça-o.

Segundo, CSS Media Queries é uma opção que funciona para uns e não funciona para outros, em geral quando você uma um media querie e define uma imagem como background-image, boa parte dos navegadores (em suas versões mais atualizadas) não irão baixar a tal imagem, mas estamos falando de substituir o flash. Você talvez consigo fazer de forma eficiente uma media querie para um navegador em especifico e assim inserir uma imagem em background. Aqui vale o mesmo que eu falei usando javascript, em alguns lugares isso não vai funcionar porque o sistema que lê o site procurando imagens para adiciona-las automaticamente vai ter outro resultado (o inverso do desejado pela sua media query) e também não vai abrir flash.

Resumindo, para abranger “quase” todos os navegadores é melhor sacrificar um pouco da banda do servidor e do cliente, e você, programador, terá menos trabalho (Lembre-se “Menos é Mais”).

Essa foi mais uma dica de Front-End de Renan Rolo.
Até a próxima!