2.6 Tratamento de Imagens e Midia

📷 Formatos de Imagem

Escolher o formato certo de imagem impacta diretamente a performance e qualidade visual do seu site. Cada formato tem suas vantagens e casos de uso ideais.

📊 Comparacao de Formatos

Formato	Melhor Para	Compressao	Suporte
JPEG	Fotos, imagens complexas	Lossy, bom	Universal
PNG	Transparencia, graficos	Lossless	Universal
WebP	Tudo (fotos + graficos)	Lossy/Lossless, otimo	97%+ browsers
AVIF	Maxima compressao	Lossy, excelente	92%+ browsers
SVG	Icones, logos, graficos vetoriais	Vetor (escalavel)	Universal

🎯 Quando Usar Cada Formato

JPEG / WebP / AVIF

• Fotografias e imagens realistas
• Backgrounds com muitas cores
• Imagens de produto

PNG

• Imagens com transparencia
• Screenshots e UI elements
• Graficos com texto nitido

SVG

• Logos e icones
• Ilustracoes vetoriais
• Graficos animados

GIF / WebP Animado

• Animacoes curtas
• Memes e stickers
• Demos de UI

💻 Codigo HTML - Fallbacks

</picture>

🎯 Vibe Coding Prompt

Use: WebP como formato principal com JPEG fallback, SVG para todos os icones e logos, picture element para servir formatos modernos com fallbacks.

📱 Imagens Responsivas

Servir a imagem certa para cada dispositivo usando srcset, sizes e picture element. Economiza banda e melhora performance drasticamente.

📐 srcset e sizes

srcset - Define as opcoes

Lista de imagens disponiveis com suas larguras reais (w) ou densidade (x)

srcset="img-320.jpg 320w, img-640.jpg 640w, img-1280.jpg 1280w"

sizes - Define quando usar

Diz ao browser o tamanho que a imagem ocupara na tela

sizes="(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 33vw"

💻 Codigo HTML Completo

<img

src="hero-800.jpg"

srcset="hero-400.jpg 400w,

hero-800.jpg 800w,

hero-1200.jpg 1200w,

hero-1600.jpg 1600w"

sizes="(max-width: 640px) 100vw,

(max-width: 1024px) 80vw,

1200px"

alt="Hero image"

🖼️ Picture Element - Art Direction

Use picture quando precisar de imagens diferentes (nao apenas tamanhos) para cada viewport

</picture>

🎯 Vibe Coding Prompt

Use: srcset com 4 breakpoints (400w, 800w, 1200w, 1600w), sizes que reflete o layout real, picture element para art direction mobile/desktop.

⚡ Otimizacao

Compressao, lazy loading e CDN sao as tres tecnicas essenciais para imagens rapidas. A diferenca pode ser de segundos no carregamento.

🚀 Tecnicas de Otimizacao

📦

Compressao

• JPEG: qualidade 80-85%
• WebP: qualidade 75-80%
• Ferramentas: Squoosh, ImageOptim

😴

Lazy Loading

• loading="lazy" nativo
• Carrega so quando visivel
• Nao use em above-the-fold

🌐

CDN

• Cloudflare, Cloudinary
• Resize on-the-fly
• Cache global

💻 Lazy Loading Nativo

<img

src="produto.webp"

alt="Produto"

loading="lazy"

width="400"

height="300"

💡 Dicas de Performance

✓ Sempre defina width e height para evitar layout shift

✓ Use fetchpriority="high" para imagens LCP (above-the-fold)

✓ Use decoding="async" para nao bloquear render

✗ NAO use lazy loading em imagens acima da dobra

🎯 Vibe Coding Prompt

Use: loading="lazy" em todas imagens abaixo da dobra, width e height em todas as imagens para evitar CLS, fetchpriority="high" na imagem hero principal.

📐 Object-fit e Aspect Ratio

object-fit controla como a imagem preenche seu container. aspect-ratio mantem proporcoes consistentes. Essenciais para grids de imagens.

👁️ object-fit em Acao

cover

Preenche, corta

contain

Cabe inteira

fill

Estica

none

Tamanho original

💻 Codigo CSS

/* object-fit */

.img-cover {

width: 100%;

height: 200px;

object-fit: cover; /* mais comum */

object-position: center; /* controla o foco */

}

/* aspect-ratio (moderno) */

.card-img {

width: 100%;

aspect-ratio: 16 / 9; /* ou 1/1, 4/3, 3/2 */

object-fit: cover;

}

/* Tailwind */

class="w-full aspect-video object-cover"

class="w-full aspect-square object-cover"

Aspect Ratios Comuns

1:1

Avatar, Instagram

16:9

Video, YouTube

4:3

Foto classica

3:2

DSLR, cards

🎯 Vibe Coding Prompt

Use: object-fit: cover para todas imagens em cards, aspect-ratio: 16/9 para thumbnails de video, aspect-ratio: 1/1 para avatares em circulos.

🎨 Backgrounds e Overlays

background-image, gradients e blend modes criam efeitos visuais impactantes. Essenciais para hero sections e cards com texto sobre imagem.

✨ Exemplos de Overlays

Gradient Overlay

De baixo para cima

Color Overlay

Cor solida com opacidade

Dual Gradient

Dos lados para centro

💻 Codigo CSS

/* Background image basico */

.hero {

background-image: url('hero.jpg');

background-size: cover;

background-position: center;

background-repeat: no-repeat;

}

/* Gradient overlay (metodo moderno) */

.hero-overlay {

background:

linear-gradient(to top, rgba(0,0,0,0.8), transparent),

url('hero.jpg') center/cover;

}

/* Blend mode */

.blend-overlay {

background-color: #3B82F6;

background-blend-mode: multiply;

}

Blend Modes Uteis

multiply

Escurece, intensifica

overlay

Contraste + cor

soft-light

Sutil, elegante

color

Tinge a imagem

🎯 Vibe Coding Prompt

Use: gradient overlay de baixo para cima em hero sections, background-size: cover para imagens de fundo, blend-mode: multiply para efeito duotone.

🎬 Video e Embed

Video HTML5 para conteudo proprio, iframes responsivos para YouTube/Vimeo. A tecnica do aspect-ratio container e essencial para embeds.

📹 Video HTML5

<video

src="video.mp4"

poster="thumbnail.jpg"

controls

playsinline

preload="metadata"

class="w-full rounded-lg"

Seu navegador nao suporta video HTML5.

</video>

controls

Mostra controles

autoplay

Auto-inicia (muted)

loop

Repete infinito

muted

Sem som (req. autoplay)

📺 Iframe Responsivo (YouTube, Vimeo)

<iframe

src="https://www.youtube.com/embed/VIDEO_ID"

class="w-full h-full rounded-lg"

frameborder="0"

allowfullscreen

loading="lazy"

></iframe>

</div>

<iframe

class="absolute top-0 left-0 w-full h-full"

...

></iframe>

</div>

🎥 Video como Background

<video

autoplay muted loop playsinline

class="absolute inset-0 w-full h-full object-cover"

</video>

</div>

🎯 Vibe Coding Prompt

Use: aspect-video container para embeds de YouTube, loading="lazy" em iframes, video background com autoplay muted loop para hero.

📝 Resumo do Modulo

✓

Formatos de Imagem - JPEG para fotos, PNG para transparencia, WebP/AVIF para performance, SVG para vetores

✓

Imagens Responsivas - srcset + sizes para economia de banda, picture para art direction

✓

Otimizacao - Compressao, lazy loading, width/height para evitar CLS

✓

Object-fit e Aspect Ratio - cover para preencher, contain para caber, aspect-ratio para proporcoes

✓

Backgrounds e Overlays - Gradients, blend modes, texto sobre imagem

✓

Video e Embed - Video HTML5, iframes responsivos, video backgrounds

Proximo Modulo:

2.7 - Tecnicas avancadas de layout e componentes reutilizaveis

← Modulo Anterior Proximo Modulo →