📁 Documentação: Boas Práticas para Galeria de Imagens

🖼️ Sobre o uso de .jpg com menos de 100 KB

🧪 Dica extra

Mesmo com arquivos leves, você pode aplicar loading="lazy" para adiar o carregamento de imagens fora da tela:

<img src="galeria/bosses.jpg" alt="Boss lendário" loading="lazy" />

🖼️ Formatos de Imagem: Qual usar?

Formato Ideal para Vantagens Desvantagens
.webp Imagens gerais e arte Alta compressão + qualidade Nem todos editores suportam nativamente
.jpg Fotos e artes complexas Boa qualidade com compressão razoável Perde qualidade em compressão alta
.png Ícones, logos, transparência Alta fidelidade, suporta transparência Tamanho maior
.svg Ícones vetoriais Escalável sem perda de qualidade Não ideal para fotos ou artes pintadas
.avif Alta performance moderna Compressão superior ao WebP Suporte ainda limitado em alguns navegadores

Recomendação: Use .webp sempre que possível para imagens grandes. Mantenha .png para elementos com transparência e .svg para ícones.

🔍 SEO e Acessibilidade

📱 Responsividade

🧱 Estrutura HTML Básica

<section class="galeria">
  <h2>Galeria de Imagens</h2>
  <div class="grid-galeria">
    <figure>
      <img
        src="assets/images/lordran.webp"
        alt="Vista de Lordran ao entardecer"
      />
      <figcaption>Lordran em sua glória decadente</figcaption>
    </figure>
    <figure>
      <img
        src="assets/images/anor-londo.webp"
        alt="Catedral de Anor Londo iluminada pelo sol"
      />
      <figcaption>Anor Londo — a cidade dos deuses</figcaption>
    </figure>
    <!-- Mais imagens -->
  </div>
</section>

🎨 Estilização com CSS

.grid-galeria {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5rem;
  padding: 2rem;
}

figure {
  margin: 0;
  text-align: center;
}

img {
  width: 100%;
  height: auto;
  border-radius: 8px;
  object-fit: cover;
}

🧱 Explicação Detalhada: Usando CSS Grid em Galerias

🎯 Por que usar Grid?

O CSS Grid Layout é uma das ferramentas mais poderosas e flexíveis para criar layouts responsivos e organizados. Ele permite dividir o espaço em linhas e colunas, posicionar elementos com precisão e adaptar o conteúdo automaticamente ao tamanho da tela — ideal para galerias de imagens.

🧩 Estrutura Básica

.grid-galeria {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5rem;
  padding: 2rem;
}

Explicando cada parte:

📐 Visualização Responsiva

Tamanho da tela Quantidade de colunas
Desktop (>1200px) 4 ou mais
Tablet (~768px) 2 a 3
Mobile (<480px) 1

O Grid se adapta automaticamente, sem precisar de media queries, graças ao uso de auto-fit e minmax.

🧠 Explicação do Código JavaScript

const modal = document.getElementById("modal");
const modalImg = document.getElementById("img-modal");
const fechar = document.querySelector(".fechar");
const imagens = document.querySelectorAll(".galeria-img");
const setaEsquerda = document.querySelector(".seta-esquerda");
const setaDireita = document.querySelector(".seta-direita");

let indiceAtual = 0;

function abrirModal(indice) {
  modal.style.display = "block";
  modalImg.src = imagens[indice].src;
  modalImg.alt = imagens[indice].alt;
  indiceAtual = indice;
}

imagens.forEach((img, i) => {
  img.addEventListener("click", () => abrirModal(i));
});

fechar.addEventListener("click", () => {
  modal.style.display = "none";
});

window.addEventListener("click", e => {
  if (e.target === modal) {
    modal.style.display = "none";
  }
});

setaDireita.addEventListener("click", () => {
  indiceAtual = (indiceAtual + 1) % imagens.length;
  abrirModal(indiceAtual);
});

setaEsquerda.addEventListener("click", () => {
  indiceAtual = (indiceAtual - 1 + imagens.length) % imagens.length;
  abrirModal(indiceAtual);
});

Explicando linha a linha

// Seleciona o elemento do modal
const modal = document.getElementById("modal");

🔹 Pega o elemento <div id="modal"> para poder mostrar ou esconder o modal.

const modalImg = document.getElementById("img-modal");

🔹 Seleciona a imagem dentro do modal (<img id="img-modal">) que será atualizada com a imagem clicada.

const fechar = document.querySelector(".fechar");

🔹 Seleciona o botão de fechar (<span class="fechar">) para permitir que o usuário feche o modal.

const imagens = document.querySelectorAll(".galeria-img");

🔹 Seleciona todas as imagens da galeria que têm a classe .galeria-img. Isso cria uma lista (NodeList) com todas as imagens clicáveis.

const setaEsquerda = document.querySelector(".seta-esquerda");
const setaDireita = document.querySelector(".seta-direita");

🔹 Seleciona as setas de navegação esquerda e direita dentro do modal.

let indiceAtual = 0;

🔹 Variável que guarda o índice da imagem atualmente exibida no modal. Isso permite saber qual imagem está sendo mostrada e navegar entre elas.

function abrirModal(indice) {
  modal.style.display = "block";
  modalImg.src = imagens[indice].src;
  modalImg.alt = imagens[indice].alt;
  indiceAtual = indice;
}

🔍 Função que abre o modal e exibe a imagem correspondente ao índice clicado:

imagens.forEach((img, i) => {
  img.addEventListener("click", () => abrirModal(i));
});

🔹 Para cada imagem da galeria:

fechar.addEventListener("click", () => {
  modal.style.display = "none";
});

🔹 Quando o botão de fechar é clicado, o modal é escondido.

window.addEventListener("click", e => {
  if (e.target === modal) {
    modal.style.display = "none";
  }
});

🔹 Permite fechar o modal ao clicar fora da imagem (na área escura):

setaDireita.addEventListener("click", () => {
  indiceAtual = (indiceAtual + 1) % imagens.length;
  abrirModal(indiceAtual);
});

🔹 Quando a seta direita é clicada:

setaEsquerda.addEventListener("click", () => {
  indiceAtual = (indiceAtual - 1 + imagens.length) % imagens.length;
  abrirModal(indiceAtual);
});

🔹 Quando a seta esquerda é clicada:

✅ Resultado