Inclusão de imagens e vídeos dentro dos conteúdos

Imagens​

O site permite inclusão de imagens em vários espaços;

  • No cabeçalho de documentos: imagens de menor tamanho
  • No conteúdo: fotos e imagens ilustrativas nos textos
  • Em barras de navegação, rodapés ou páginas de entrada: logos, imagens decorativas

Para facilitar a renderização e organização do site, as imagens que serão usadas no site devem ser salvas em algum espaço de armazenamento externo: nuvem, ou idealmente um sistema de armazenamento de objetos. A partir desse armazenamento podem ser criados links que são incluídos no site.

Como incluir uma imagem dentro dos documentos?​

Existem duas opções

  1. Formato de markdown:
![Nome da imagem](https://nuvem.multifarm.top/s/TMtCj9tnydyZM5M/preview "descrição da imagem")
**Figura 1.** Descrição da figura aqui
  1. Formato HTML
No seguinte exemplo a imagem é configurada para:
  • Centralizar
  • Definir largura (400 px)
  • Incluir uma mensagem ("alt") para facilitar a descrição para motores de busca
  • Ter uma legenda
  • Carregar de maneira mais eficiente (usando "lazy loading")
Exemplo de inclusão de imagem usando HTML
<!-- Imagem centralizada (esse aqui é um comentário e não aparece no texto) -->

<div align="center">
  <img src="https://nuvem.multifarm.top/s/TMtCj9tnydyZM5M/preview"
       width="400"
       alt="Logo Projeto"
       loading="lazy" />

  **Figura 1.** Descrição da figura aqui

</div>

Importante

É importante sempre incluir uma imagem com tamanho apropriado, usando sempre descrição explícita ("Figura x ... ") e um comentário ("alt")

Formato das imagens​

As imagens para o site podem estar nos seguintes formatos

  • png: para gráficos, logos, permite transparência (maior tamanho que jpg - raster)
  • jpg: para fotos e imagens coloridas (menor tamanho que png - raster)
  • webp: formato mais leve para renderização rápida (tamanho menor que as anteriores - raster)
  • svg: para logos e íconos (imagens muito leves - vector)

Preparação das imagens para publicação​

As imagens devem ser conferidas antes de publicar e editadas, se necessário. As imagens podem ser recortadas, ou podem ser retirados os metadados e mesmo apagar rostos, se for necessário. É valioso incluir nomes intuitivos. Mas, principalmente, é necessário reduzir o tamanho das imagens que serão publicadas para garantir rapidez no funcionamento do site.

Dica: reduza o tamanho das imagens
100 a 200 kb

Uma recomendação importante é reduzir o peso das imagens para serem publicadas no site. Imagens mais leves, permitem que o site funcione mais rápido, por que as imagens renderizam rapidamente, o que demanda menos largura de banda e permite maior agilidade na publicação e consumo dos conteúdos.

Imagens de 100, 200 e até 500 kb (para casos específicos) são apropriadas para rápida renderização

Exemplo de redução de tamanho de imagens (usando a linha de comando)​

Abrir um terminal e conferir tamanho de um diretório com imagens com extensão jpg:

Ir a diretório e explorar tamanho

cd Lano_Alto
du -h Lano_Alto

# Resultado:
# 71M     Lano_Alto

Nesse caso o diretório "Lano_Alto" pesa 71 M

Reduzir o tamanho das imagens até 10%, usando "magick", com a seguinte instrução dentro do diretório:

Usar _magick_ para reduzir qualidade de imagens
magick '*.jpg' -set filename:fn '%[basename]-small' -quality 10%  '%[filename:fn].jpg'
# Renomeia as imagens com sufixo "-small" e reduz a qualidade a 10%

As imagens são transferidas a um diretório novo "novo_diretorio"

Renomear e verificar tamanho de diretório em bash
mv **small** novo_diretorio
du -h novo_diretorio

# Resultado:
# 16M     novo_diretorio/

Assim, a compressão das imagens permite redução expressiva (de 71 Megabites para 16 Megabites em 17 imagens)

PS: devem ser conferidas as imagens para saber se a renderização é apropriada. Caso contrário, deve ser aumentada a qualidade.

Como incluir vídeos dentro dos conteúdos do site​

Ir no site onde está hospedado o vídeo e clicar em cima usando o botão direito do mouse e escolher a opção "copiar código embed" ("copy embed code") ou iframe (código HTML para o vídeo). Depois, incluir esse código dentro da página onde quiser incluir o vídeo:

Exemplo de uso de 'iframe' copiado de site para incluir videos em markdown no site

<iframe
  width="560"
  height="315"
  src="https://www.youtube.com/embed/q9_8befJmP8?si=dYnh390k0gXyCdQ1"
  title="YouTube video player"
  frameborder="0"
  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
  referrerpolicy="strict-origin-when-cross-origin" allowfullscreen>
</iframe>

Última atualização em por Equipe