A maioria das imagens na web é supérflua. Se eu poderia ser um idiota um pouco, 99% deles nem são tão úteis (embora haja raras exceções). Isso ocorre porque as imagens não costumam complementar o texto que deveriam suportar e, em vez disso, hurra usuários, levando uma eternidade para carregar e explodir tampas de dados como algum tipo de imposto sobre desempenho.

Felizmente, isso é principalmente um problema de design hoje, porque tornar imagens performant e mais amigável é muito mais fácil do que era antes. Temos melhores formatos de imagem como Webp (e em breve, talvez, JPEG XL). Temos as imagens mágicas de responsivas ao claro. E existem toneladas de ótimas ferramentas por aí, como o ImageOptim, bem como recursos como o novo livro de Addy Osmani.

Embora talvez minha maneira favorita de melhorar o desempenho da imagem seja WithLazy Carreging:

Esta imagem será carregada apenas quando um usuário rola na página para que seja visível para o usuário - o que a remove da carga inicial da página e isso é ótimo! Fazer essa carga inicial de uma página da web é um grande negócio.

Mas talvez haja imagens que devam nunca carregar em qualquer outro. Talvez haja situações em que seria melhor se uma pessoa pudesse optar por vê-la. Aqui está um exemplo: pegue a versão somente de texto do NPRAND, clique um pouco. Não é ... tão bom?! É legível! Não há lixo em todo o lugar, ele me respeita como um usuário e - céus doces - é rápido .

Então! E se pudéssemos mostrar imagens em um site, mas apenas uma vez que elas forem clicadas ou tocadas? Não seria legal se pudéssemos mostrar um espaço reservado e trocá -lo pela imagem real do clique? Algo assim:

Bem, tive dois pensamentos aqui sobre como construir este sujeito (a regra de ouro é que nunca há uma maneira de construir algo na web).

Método 1: Usando sem um atributo src

Podemos remover o atributo SRC de uma tag para ocultar uma imagem. Poderíamos então colocar o arquivo de imagem em um atributo, como dados-src ou algo assim, assim:

Por padrão, a maioria dos navegadores mostrará um ícone de imagem quebrado com o qual você provavelmente está familiarizado:

ok, então é meio acessível. Eu acho? Você pode ver a tag alt renderizada na tela automaticamente, mas com uma luz leve de JavaScript, podemos trocar o SRC com esse atributo:

document.querySelectorAll("img").forEach((item) => {
  item.addEventListener("click", (event) => {
    const image = event.target.getAttribute("data-src");
    event.target.setAttribute("src", image);
  });
});

agora podemos adicionar alguns estilos e ugh, oh não:

Eca. Em alguns navegadores, haverá um pequeno ícone de imagem quebrada na parte inferior quando a imagem não estiver carregada. O problema aqui é que os navegadores não lhe dão uma maneira de remover o ícone de imagem quebrada com CSS (e provavelmente não devemos ter permissão de qualquer maneira). É um pouco irritante também estilizar o texto alt. Mas se removermos completamente o atributo alt, o ícone de imagem quebrado desaparecerá, embora isso torne o inutilizável sem JavaScript. Então, remover esse texto alt é um não ir.

como eu disse: ugh . Eu não acho que exista uma maneira de fazer esse método funcionar (embora por favor me prove errado!).

Método 2: Usando links para criar uma imagem

A outra opção que temos é começar com o hiperlink humilde, assim:

Photograph of hot air balloons by Musab Al Rawahi. 144kb

que, sim, nada de inteligente acontecendo ainda - isso apenas renderizará um link para uma imagem:

que funciona em termos de acessibilidade, certo? Se não tivermos nenhum JavaScript, tudo o que temos é apenas um link que as pessoas podem clicar opcionalmente. Em termos de desempenho, não pode ficar muito mais rápido que o texto simples!

Mas a partir daqui, podemos procurar JavaScript para impedir que o link carregue no clique, pegue o atributo href nesse link, crie um elemento de imagem e, finalmente, jogue essa imagem na página e remova o link antigo quando terminarmos:

document.querySelectorAll(".load-image").forEach((item) => {
  item.addEventListener("click", (event) => {
    const href = event.target.getAttribute("href");
    const newImage = document.createElement("img");
    event.preventDefault();
    newImage.setAttribute("src", href);
    document.body.insertBefore(newImage, event.target);
    event.target.remove();
  });
});

provavelmente poderíamos estilizar esse link de espaço reservado para fazê -lo parecer um pouco melhor do que o que eu tenho abaixo. Mas este é apenas um exemplo. Vá em frente e clique no link para carregar a imagem novamente:

e aí está! Não é inovador nem nada, e tenho certeza de que alguém já fez isso antes em algum momento ou outro. Mas se quiséssemos ser extremamente radicais com o desempenho além da primeira tinta e carga inicial, acho que essa é uma solução boa. Se estamos fazendo um site somente de texto, acho que esse é definitivamente o caminho a percorrer.

talvez também possamos criar um componente da web com isso, ou até detectar se alguém houver-se-dados-dados e, então, carregue apenas imagens se alguém tiver dados suficientes ou algo assim. O que você acha?