Download sob demanda das imagens no HTML #1

Activity

1. ramalho

   added

   melhoriamelhoria na tipografia, layout, usabilidade do HTML do livromelhoria na tipografia, layout, usabilidade do HTML do livro

   on Mar 14, 2023
2. arturo32 commented on Mar 22, 2023

   

   arturo32

   on Mar 22, 2023

   Last edited by arturo32

   Contributor

   More actions

   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.

   👍React with 👍1Reacted by Henrique Sant'Anna
3. arturo32 commented on Apr 22, 2023

   

   arturo32

   on Apr 22, 2023

   Contributor

   More actions

   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.
4. ramalho

   added a commit that references this issue on Aug 25, 2025

   Merge pull request #1 from pythonfluente/main

   ...

   490cf97