Download sob demanda das imagens no HTML

[ramalho]

Seria excelente se o HTML gerado pelo asciidoctor tivesse um JS para baixar uma imagem somente quando a pessoa está vendo aquela parte da página. Assim economiza banda.

[arturo32]

Já existe uma issue no asciidoctor sobre possibilitar adicionar o atributo HTML loading="lazy" nas imagens. Pelo visto só vai ser adicionado nas versões 2.1.x...

Umas das pessoas presentes na discussão da issue (que inclusive fez até um PR para a nova função) mostrou um comando (GNU/MAC) para substituir com regex as expressões <img para <img loading="lazy" no arquivo HTML. Eu pensei, então, em incluir o seguinte comando no workflow do github:

- name: Add lazy loading to images
  run: sed -i -e 's/<img/& loading="lazy" /g' index.html

# Pode ser no mesmo estágio do Build também

Para funcionar, as imagens teria que deixar de serem embutidas no HTML como "data URI" e usarem o atributo src com um caminho mesmo. Isso é facilmente feito removendo a linha que contém :data-uri: no arquivo livro.adoc.

Eu testei aqui e deu tudo certo. Se você aprovar essa maneira, eu posso fazer um PR com essas modificações. O único perigo que vejo é se, por algum motivo, existir um código HTML sendo usado como exemplo no seu livro.

Posso explicar com detalhes o que cada parte do comando faz, se isso for uma questão.

[arturo32]

Eu não sei direito ainda como você "builda" o projeto atualmente (já que aparentemente o workflow do github não está funcionando). Supondo que você usa o script build.sh eu proponho três soluções diferentes (incluindo a do comentário anterior) que eu acabei transformando em 3 PR diferentes para melhor visualização:

1. Para alterar a solução do meu comentário anterior para funcionar no arquivo bash.rc basta adicionar o comando sed logo após a geração do arquivo HTML pelo asciidoctor. Esta solução seria a mais simples e a menos robusta. (PR torna carregamento de imagens "lazy" com regex (comando sed) #30)

2. Um passo em direção a mais segurança e boas práticas seria criar usar uma extensão de pós-processamento do asciidoctor. Ela ainda utiliza regex, o que pode gerar comportamentos imprevisíveis. (PR Torna carregamento de imagens "lazy" com extensão do asciidoctor (extensão asciidoctor) #29)

3. A solução mais robusta que proponho é a de criar um conversor customizado do asciidoctor. Ele tem acesso direto aos elementos parseados pelo asciidoctor e consegue adicionar facilmente novos atributos. O código foi copiado quase que inteiramente de uma das pessoas da comunidade do asciidoctor (que por sua vez possui alterações mínimas em relação ao código fonte original) (PR Torna carregamento de imagens "lazy" por padrão (conversor customizado asciidoctor) #28).

Todas soluções são discutidas mais profundamente em seus respectivos PRs.