Como Mudar o Tamanho das Imagens no HTML:
Dominando width, height e a Responsividade
E aí, futuro(a) ninja do Front-End! Tudo tranquilo?
No tutorial passado do nosso curso de HTML, nós demos um salto gigante: aprendemos como colocar fotos e imagens em um site através da tag <img>. Nossos projetos estão finalmente deixando de ser apenas um bloco de texto sem graça para se tornarem páginas atraentes e visuais.
Mas aposto que você esbarrou em um problema: quando você joga a imagem na tela, ela aparece no tamanho original. Às vezes, gigante demais; outras, minúscula. Neste artigo, vamos assumir o controle do viewport e aprender a manipular a altura e a largura dos nossos elementos visuais usando as propriedades do HTML e as melhores práticas do mercado atual.
Por que mudar a altura e largura de uma imagem?
Posição Zero (Snippet): Como redimensionar imagens no HTML? Para alterar o tamanho de uma imagem, utilizamos os atributos width (largura) e height (altura) na tag <img>. Atualmente, o HTML5 exige que esses valores sejam em pixels estritos, servindo para reservar o espaço da mídia na renderização e evitar quebras de layout.
Lembra que no artigo passado usamos dois logotipos (do Google e da linguagem PHP)? Eles apareceram na tela exatamente do jeito que foram criados. O navegador (Chrome, Edge, Firefox) é obediente: se você não especifica o tamanho na tag <img>, ele vai lá no servidor, pega a foto e joga na sua cara com o tamanho original.
Porém, a função do HTML e do CSS é justamente formatar e decidir como a informação será consumida pelo usuário. Imagine que você foi contratado para criar um portal de notícias (como G1 ou UOL).
Na página principal (Home), você vai exibir apenas um resumo da notícia e uma miniatura da foto (thumbnail). Quando a pessoa clicar, ela entra na matéria e vê a foto em alta resolução, ocupando quase a tela toda.
Se você não souber redimensionar imagens via código, teria que abrir o Photoshop ou o Paint toda vez, criando dois arquivos diferentes para a mesma foto. Um pesadelo de produtividade, certo? É aí que a mágica acontece com o HTML.
A Sintaxe Clássica: Usando width e height
No desenvolvimento Web, nós chamamos as dimensões pelos seus nomes em inglês:
width: Significa Largura (eixo horizontal).height: Significa Altura (eixo vertical).
A estrutura base para definir essas medidas é em pixels (px). A sintaxe oficial fica assim:
<img src="URL_DA_IMAGEM.jpg" width="largura_em_numeros" height="altura_em_numeros" alt="Descrição">Vamos para a prática. A imagem do nosso portal (HTML-Progressivo.png) tem originalmente 388 pixels de largura e 66 pixels de altura. Digamos que para encaixar no cabeçalho, precisamos reduzi-la para 300 de largura por 50 de altura. O código ficaria assim:
<!-- A ordem dos atributos não altera o resultado final! -->
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpF0qAYbxagFbV6ZsWp0hQGnRilE8Qbhy2031cfBzp_uET4Scb0FGsY0HqEsoCSscsrE9lYGa7LwSjKqcsYGzJH0XV4_qmw0Iap2v4z77RKKjRpsRCBMPl_YFJdHS6W1Mq4PIa1WOOsPQ/s1600/HTML-Progressivo.png"
width="300"
height="50"
alt="Curso de HTML online grátis">Resultado renderizado no seu site:
width e height no HTML. Isso evita o chamado Cumulative Layout Shift (CLS). Se o navegador já souber o tamanho da imagem, ele reserva aquele "buraco" vazio na tela enquanto ela baixa, impedindo que os textos fiquem pulando enquanto a página carrega.
Seu Código Quebra Quando Tenta Alinhar Imagens? 🛑
Compreender a diferença entre HTML estrutural e CSS visual é o que separa os amadores dos Devs Sêniores. Domine responsividade, Flexbox, Grid e pare de "chutar valores" com a Apostila HTML & CSS Progressivo. Estude offline, no seu tempo.
"Eu sempre sofria com imagens esticadas e layouts que quebravam no celular. A didática dessa apostila foi um divisor de águas na minha carreira Front-End!"🚀 QUERO DOMINAR O FRONT-END AGORA
— Marina S., Desenvolvedora Web
É do time da velha guarda? Compre o Livro Físico e receba em casa!
A Treta da Distorção (Cuidado com o Aspect Ratio)
Existe um perigo gigantesco ao manipular a largura e a altura na mão: a proporção (Aspect Ratio).
Por exemplo, se uma imagem tem 800x600 originais. Se você quiser reduzir pela metade, precisa calcular a metade exata dos dois lados: 400x300. Se quiser dobrar, 1600x1200.
width="900" e height="100"? A imagem vai ficar espremida e horrorosa! Se você altera um eixo sem calcular o eixo correspondente, você amassa o conteúdo.
Exercício: Imagens Dobradas
Vamos pegar o logotipo do PHP, que tem exatamente 200 de largura por 106 de altura originais, e criar um HTML que exiba primeiro a imagem original, e depois a versão com o dobro do tamanho (400x212).
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title>Brincando com Altura e Largura</title>
</head>
<body>
<h3>Imagem em tamanho original (200x106)</h3>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsisKyTvNVsVfLmwh7aD6qbUlblOi-alrIFimVb5g23WYPTAiLM-moykO-bXjrXE2esC4_fiSakVG7Lonuka0zOHRsCKtYvBQg7of8oXsyDIECT6-lqEgU_rAwpX_p8JpjUPqLWn1uttk/s1600/PHP-logo.png"
width="200" height="106" alt="Logo PHP">
<h3>Imagem com o dobro do tamanho (400x212)</h3>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsisKyTvNVsVfLmwh7aD6qbUlblOi-alrIFimVb5g23WYPTAiLM-moykO-bXjrXE2esC4_fiSakVG7Lonuka0zOHRsCKtYvBQg7of8oXsyDIECT6-lqEgU_rAwpX_p8JpjUPqLWn1uttk/s1600/PHP-logo.png"
width="400" height="212" alt="Logo PHP Ampliado">
</body>
</html>Resultado prático:
Original:
Dobrada (Atenção à perda de resolução natural):
Antes vs. Depois: O Fim das Porcentagens no HTML e a Era do CSS
Antigamente, quando a internet era mato (na era do HTML4), os monitores eram grandes caixotes brancos, todos com mais ou menos a mesma resolução fixa. Naquela época, os desenvolvedores tinham um truque: colocar porcentagens direto na tag HTML, como width="50%" ou width="100%" para fazer a imagem ocupar o tamanho da tela.
O Problema: Hoje temos smartphones, tablets, TVs de 50 polegadas e relógios que acessam a internet. Inserir `%` dentro do HTML virou uma prática condenada (obsoleta) pela documentação oficial da MDN Web Docs. O atributo HTML suporta apenas números inteiros (pixels).
style.
Veja como é o padrão atual do mercado. Vamos mandar a imagem nunca ultrapassar 100% da caixa onde ela está inserida, garantindo que o celular do usuário não exploda o layout da página para os lados:
<!-- A Forma Certa no HTML5 Moderno -->
<!-- width e height originais pro Google carregar rápido, style (CSS) para responsividade! -->
<img src="imagens/foto.jpg"
width="800"
height="600"
style="max-width: 100%; height: auto;"
alt="Imagem moderna e responsiva">O max-width: 100% diz: "Pode diminuir o tamanho se a tela for pequena". E o height: auto diz: "Calcule a altura matematicamente para que a foto não fique esticada/amassada". Bem-vindo ao Web Design Moderno!
Perguntas Frequentes (FAQ)
Devo definir o tamanho da imagem no HTML ou no CSS?
A melhor prática atual é usar os dois em conjunto. Use os atributos estritos width e height na tag HTML com os tamanhos originais do arquivo (para otimização de renderização/CLS do Google), e utilize o CSS (via classes ou estilo embutido) para forçar o comportamento responsivo visual na tela final.
Por que minha imagem ficou distorcida (esticada ou achatada) no site?
Isso acontece quando você quebra a proporção natural (Aspect Ratio) da foto. Se você alterar manualmente a largura de uma imagem sem alterar a altura usando o mesmo multiplicador matemático, a imagem deforma. A solução rápida é definir uma das medidas e usar CSS height: auto; na outra.
O que é Cumulative Layout Shift (CLS) relacionado a imagens?
É uma métrica de experiência do Google. Se o seu HTML não disser a largura e altura da imagem antes dela baixar (omissão de width/height), o texto da página vai "pular" repentinamente para baixo quando a foto terminar de carregar, causando cliques acidentais e penalizando seu SEO.
🚀 O que estudar a seguir:
O front-end moderno é uma construção passo a passo. Prepare-se para os próximos níveis no nosso Sumário:
- Alinhamento avançado: Deixando Imagens e Textos lado a lado.
- Imagens Interativas: Como transformar a tag img em um hiperlink clicável.
- Desvendando a tag
<picture>e formatos de nova geração (WebP).
Nenhum comentário:
Postar um comentário