A relevância de elementos multimédia, como imagens, infográficos e vídeos, no desenvolvimento é indiscutível. Contudo, o tamanho das imagens impacta diretamente o desempenho e a usabilidade de uma aplicação.
HTML (HyperText Markup Language) é a linguagem fundamental na criação da estrutura de páginas web. Um desenvolvedor pode integrar imagens de produtos, logotipos e outros elementos gráficos num documento HTML, elevando a experiência do utilizador e o apelo visual.
Para assegurar o funcionamento ideal de uma aplicação, é crucial redimensionar e otimizar as imagens. Neste artigo, abordaremos a importância do redimensionamento de imagens, as diversas formas de o fazer em HTML, e as melhores práticas.
Qual a Importância de Redimensionar Imagens em HTML?
Redimensionar uma imagem significa ajustar o seu tamanho, seja aumentando ou diminuindo as suas dimensões. As imagens podem ser obtidas em diversos formatos, seja através de um fotógrafo, de eventos, de um designer, ou descarregadas de fontes online.
Embora possa existir a tentação de utilizar imagens nos seus formatos originais, esta prática é desaconselhada na maioria dos casos. Eis algumas razões pelas quais é essencial redimensionar imagens num documento HTML:
- Velocidade de Carregamento da Página: Imagens enriquecem a experiência do utilizador, mas ficheiros grandes podem prejudicar a velocidade de carregamento. Otimizar estas imagens acelera o carregamento das páginas web.
- Responsividade do Site: Um site/aplicação é acedido por utilizadores em diversos dispositivos. O redimensionamento de imagens garante a responsividade em dispositivos móveis, desktops e tablets.
- Utilização de Largura de Banda: Muitos serviços de alojamento de sites limitam a largura de banda. Otimizar imagens liberta espaço para outros conteúdos no site.
- Objetivos de SEO: A velocidade de carregamento é um fator de classificação nos motores de busca. Redimensionar imagens melhora essa velocidade, impactando positivamente o SEO.
- Otimização do Armazenamento: O espaço de armazenamento é um fator importante na escolha de um serviço de alojamento. Imagens grandes podem consumir muito espaço nos servidores.
- Melhoria da Experiência do Utilizador: Os utilizadores não devem esperar muito pelo carregamento das imagens. Otimizá-las permite que surjam em simultâneo com o resto do conteúdo.
A seguir, apresentamos diferentes métodos para redimensionar imagens em HTML.
Utilizando Atributos HTML
Vamos criar uma aplicação simples para ilustrar o redimensionamento de imagens. Utilizaremos imagens do Pixabay. Para o exemplo, usaremos esta imagem. Descarregue-a e mova-a para o seu projeto para facilitar a demonstração.
Eis o código HTML:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Descrição do seu website">
<meta name="keywords" content="palavras, chave, aqui">
<meta name="author" content="Seu Nome">
<title>Redimensionar Imagens HTML</title>
</head>
<body>
<h2>O Meu Gato</h2>
<img src="https://wilku.top/how-to-resize-image-in-html-and-scale-up-your-web-design/images/cat-2536662_1280.jpg">
</body>
</html>
Ao renderizar a imagem original sem redimensionamento, ela surge desproporcional na página web.
Podemos definir a altura da imagem do gato para 175 e a largura para 300.
Alteraremos o código na tag <img> da seguinte forma:
<img src="https://wilku.top/how-to-resize-image-in-html-and-scale-up-your-web-design/images/cat-2536662_1280.jpg" width="300" height="175">
Agora, a imagem é visível e otimizada.
Utilizando Estilos CSS
Em vez de aplicar estilos embutidos, como no exemplo anterior, podemos criar uma folha de estilos separada, que nomearemos de `styles.css`. Na secção <head> do documento HTML, incluiremos uma tag <link> para associar a folha de estilos ao documento HTML.
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Descrição do seu website">
<meta name="keywords" content="palavras, chave, aqui">
<meta name="author" content="Seu Nome">
<title>Redimensionar Imagens HTML</title>
<link rel="stylesheet" href="https://wilku.top/how-to-resize-image-in-html-and-scale-up-your-web-design/styles.css">
</head>
<body>
<h2>O Meu Gato</h2>
<img src="https://wilku.top/how-to-resize-image-in-html-and-scale-up-your-web-design/images/cat-2536662_1280.jpg">
</body>
</html>
Agora, podemos estilizar a imagem através do ficheiro `styles.css`. Eis o código:
img {
width:300px;
height:200px
}
A imagem renderizada aparecerá da seguinte forma:
Usamos o seletor <img> para identificar a imagem no documento HTML. Definimos a largura para 300px e a altura para 200px.
Utilizando Percentagens
No exemplo anterior, usamos pixels (px) para redimensionar a imagem. Também podemos utilizar percentagens. Por exemplo, podemos definir a largura e a altura para 65%.
Utilizaremos o código HTML anterior. No entanto, limpe o conteúdo do ficheiro `styles.css` e adicione o seguinte código:
img {
width:65%;
height:65%
}
Ao renderizar a imagem, obterá o seguinte:
Redimensionamento de Imagens para Design Responsivo
Uma boa imagem deve adaptar-se a diferentes tamanhos de ecrã. Para otimizar a imagem para se ajustar a vários tamanhos de ecrã, usando o mesmo código HTML, podemos adicionar o seguinte ao ficheiro `styles.css`:
img {
max-width: 100%;
height: auto;
}
A propriedade `max-width: 100%` assegura que a imagem nunca exceda a largura do seu contêiner. Assim, a imagem será sempre reduzida proporcionalmente em ecrãs mais pequenos.
A propriedade `height: auto` garante que a imagem mantenha a sua proporção ao aumentar ou diminuir.
Por Proporção
No design de web/aplicações, a proporção é a relação entre altura e largura. Manter a proporção ao redimensionar ou otimizar as imagens assegura a consistência visual; as imagens não são distorcidas e adaptam-se a diferentes tamanhos de ecrã.
Utilizaremos o mesmo código HTML para demonstrar como manter a proporção ao redimensionar as imagens.
Adicione este código ao ficheiro `styles.css`:
img {
width: 300px;
height: auto;
}
Usei o seletor `img` para localizar a imagem no documento HTML. Definimos a largura para 300px. A propriedade `height: auto` permite que os navegadores calculem automaticamente a altura da imagem, mantendo a sua proporção. Isso garante que as imagens não sejam esticadas ao renderizar em diferentes tamanhos de ecrã.
Redimensionamento de Imagens de Fundo
Pode inserir imagens em elementos para funcionarem como imagens de fundo. Redimensionar uma imagem de fundo garante que esta caiba no seu contêiner. Eis um exemplo de um documento HTML com um parágrafo e algum texto:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Descrição do seu website">
<meta name="keywords" content="palavras, chave, aqui">
<meta name="author" content="Seu Nome">
<title>Redimensionar Imagens HTML</title>
<link rel="stylesheet" href="https://wilku.top/how-to-resize-image-in-html-and-scale-up-your-web-design/styles.css">
</head>
<body>
<div class="container">
<div class="text">
<p>Esta é a imagem do nosso gato</p>
</div>
</div>
</body>
</html>
Agora, podemos adicionar uma imagem de fundo através do ficheiro `styles.css`.
.container {
position: relative;
text-align: center;
color: #ffffff;
padding: 100px;
background-image: url("https://wilku.top/how-to-resize-image-in-html-and-scale-up-your-web-design/images/cat-2536662_1280.jpg");
background-position: center;
width: 75%;
}
.text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 24px;
color: orangered;
}
Uma imagem de fundo só pode ser adicionada usando CSS. Criamos um contêiner com texto centralizado e uma imagem de fundo de um gato.
Pode utilizar diferentes ferramentas para redimensionar e otimizar as suas imagens. Algumas ferramentas oferecem apenas a funcionalidade de redimensionamento, enquanto outras permitem o armazenamento e veiculação das imagens através de um URL.
Cloudinary é uma ferramenta que redimensiona a imagem no servidor antes de a apresentar aos utilizadores. Esta ferramenta foi criada para redimensionar imagens automaticamente, sem afetar o desempenho do site.
Melhores Práticas para Redimensionar Imagens em HTML
Embora tenhamos explorado várias abordagens para redimensionar imagens em HTML, deve seguir estas práticas para obter os melhores resultados:
- Evitar Estilos Embutidos: Embora possa ser tentador estilizar rapidamente imagens diretamente no código HTML, esta abordagem pode afetar negativamente a velocidade de carregamento da página. Utilize uma folha de estilos CSS separada para um código mais limpo e fácil de manter.
- Utilizar os Atributos `largura` e `altura`: Certifique-se de especificar a largura e a altura das imagens. Esta abordagem orienta o navegador a alocar o espaço necessário para a imagem enquanto o restante do conteúdo é carregado.
- Utilizar os Formatos de Imagem Corretos: As imagens estão disponíveis em diversos formatos, como JPEG, PNG e SVG. Por exemplo, PNG é ideal para imagens transparentes, enquanto SVG é adequado para logotipos.
- Tornar as Imagens Responsivas: Nunca se sabe a natureza dos dispositivos que os visitantes do seu site usam para aceder ao seu conteúdo. Otimize as imagens para diferentes tamanhos de ecrã para garantir a uniformidade na exibição.
- Otimizar o Tamanho dos Ficheiros: Imagens brutas de alta qualidade podem resultar em ficheiros grandes, que podem ocupar muito espaço no servidor e afetar o tempo de carregamento da página. Reduza o tamanho dessas imagens com ferramentas adequadas sem diminuir a qualidade.
Conclusão
Redimensionar as imagens em HTML melhora a experiência do utilizador, torna a página web responsiva e poupa espaço no servidor. Apresentámos várias abordagens para redimensionar imagens em HTML.
Apesar de todas serem eficazes, aconselhamos o uso de propriedades CSS num ficheiro CSS separado. No entanto, em aplicações mais pequenas e com poucas imagens, a utilização de CSS embutido pode ser uma solução.
Pode ainda consultar outros recursos sobre CSS para uma compreensão mais profunda desta linguagem de estilo.