Não podemos enfatizar o suficiente a importância da multimídia como imagens, infográficos e vídeos em desenvolvimento. No entanto, o tamanho das imagens afeta o desempenho geral de um aplicativo e sua usabilidade.
HTML (linguagem de marcação de hipertexto) é a linguagem mais utilizada para projetar e criar a estrutura de páginas web. Como desenvolvedor, você pode adicionar imagens de produtos, logotipos e outros gráficos ao seu documento HTML para melhorar a experiência do usuário e o apelo visual.
No entanto, se você precisa que o aplicativo funcione de maneira ideal, você deve redimensionar e otimizar suas imagens. Neste artigo explicarei a importância do redimensionamento de imagens, as diferentes abordagens para redimensionar imagens em HTML e as melhores práticas.
últimas postagens
Qual é a importância de redimensionar imagens em HTML?
Redimensionar uma imagem é aumentar ou diminuir o tamanho de uma imagem. Imagens típicas são armazenadas em diferentes formatos e você pode obtê-las com seu fotógrafo, evento ou designer ou baixá-las de fontes online.
Você pode ficar tentado a usar imagens em seus formatos originais. Contudo, na maioria dos casos, isto não é desejável. Estas são algumas das razões pelas quais você deve redimensionar imagens em seu documento HTML:
- Velocidade de carregamento da página: embora se saiba que as imagens melhoram a experiência do usuário, imagens grandes podem afetar negativamente a velocidade de carregamento. A otimização dessas imagens fará com que suas páginas da web carreguem mais rapidamente.
- Torne seu site responsivo: um web/aplicativo típico recebe visitas de pessoas que usam diversos dispositivos. O redimensionamento de imagens torna uma página da web responsiva a dispositivos móveis, desktops e tablets.
- Uso de largura de banda: a maioria dos hosts de sites limita a largura de banda ao vender pacotes de hospedagem aos proprietários de sites. Ao otimizar imagens, você ganha mais espaço para outros tipos de conteúdo em seu site.
- Finalidades de SEO: A velocidade de carregamento da página é um dos fatores de classificação que os motores de busca consideram. Redimensionar suas imagens melhora a velocidade de carregamento, o que eventualmente aumenta seu SEO.
- Maximize o armazenamento: O tamanho do espaço de armazenamento é um dos fatores a serem considerados ao selecionar um host. O upload de imagens grandes e de alta resolução pode consumir muito espaço de armazenamento nos servidores.
- Melhore a experiência do usuário: os usuários do site não precisam esperar muito antes que as imagens sejam carregadas em uma página da web. Você pode otimizar suas imagens para que apareçam simultaneamente com o restante do conteúdo.
Estas são as diferentes maneiras de redimensionar imagens em HTML
Usando atributos HTML
Podemos criar um aplicativo simples para demonstrar como redimensionar imagens. Usarei imagens de Pixabay no meu aplicativo da web. vou usar isso imagem. Você pode baixá-lo e movê-lo para o seu projeto para facilitar a demonstração.
Este é o meu código HTML:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="description" content="Your website description"> <meta name="keywords" content="your, keywords, here"> <meta name="author" content="Your Name"> <title>Resize HTML Images</title> </head> <body> <h1>My Cat</h1> <img src="https://wilku.top/how-to-resize-image-in-html-and-scale-up-your-web-design/images/cat-2536662_1280.jpg" > </body> </html>
Quando renderizo a imagem original sem redimensioná-la, ela fica espalhada por toda a página da web e você nem consegue ver a imagem.
Posso dar à imagem do meu gato uma altura de 175 e uma largura de 300.
Vou alterar meu código na tag 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 você pode ver que a imagem está visível e otimizada.
Usando estilos CSS
Podemos criar uma folha de estilos separada em vez do estilo embutido que aplicamos na etapa acima. Criarei uma folha de estilos e a chamarei de estilos.css. Colocaremos uma tag na seção
do nosso documento HTML para vincular a folha de estilo ao documento HTML.<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="description" content="Your website description"> <meta name="keywords" content="your, keywords, here"> <meta name="author" content="Your Name"> <title>Resize HTML Images</title> <link rel="stylesheet" href="https://wilku.top/how-to-resize-image-in-html-and-scale-up-your-web-design/styles.css"> </head> <body> <h1>My Cat</h1> <img src="https://wilku.top/how-to-resize-image-in-html-and-scale-up-your-web-design/images/cat-2536662_1280.jpg" > </body> </html>
Podemos adicionar estilo à nossa imagem por meio da planilha estilos.css. Este é o nosso código:
img {
width:300px;
height:200px
}
A imagem renderizada aparecerá da seguinte forma:
Usamos o seletor para localizar nossa imagem no documento HTML. Demos à nossa imagem uma largura de 300px e uma altura de 200px.
Usando porcentagem
No exemplo anterior, usamos pixels (px) para redimensionar nossa imagem. Também podemos usar porcentagens para otimizar nossa imagem. Por exemplo, podemos definir a largura e a altura da nossa imagem em 65%.
Usaremos nosso código HTML anterior. Porém, exclua o que está no arquivo estilos.css e adicione este código:
img {
width:65%;
height:65%
}
Ao renderizar a imagem, você obterá o seguinte:
Redimensionando imagens para design responsivo
Uma boa imagem deve responder a diferentes tamanhos de tela. Você também pode otimizar sua imagem para responder a diferentes tamanhos de tela. Usando o mesmo código HTML, podemos adicionar isto ao nosso arquivo estilos.css:
img {
max-width: 100%;
height: auto;
}
A propriedade max-width: 100% garante que a imagem nunca excederá a largura de seu contêiner. Como tal, a imagem será sempre reduzida proporcionalmente em ecrãs mais pequenos.
A propriedade height: auto garante que a imagem mantenha sua proporção à medida que aumenta e diminui.
Por proporção
No design de web/aplicativos, a proporção é a relação proporcional entre altura e largura. Manter a proporção ao redimensionar ou otimizar suas imagens garante que elas mantenham a consistência visual; as imagens não são distorcidas e respondem a diferentes tamanhos de tela.
Usaremos o mesmo código HTML para demonstrar como manter a proporção ao redimensionar nossas imagens.
Adicione este código ao seu arquivo estilos.css:
img {
width: 300px;
height: auto;
}
Usei o seletor ‘img’ para localizar nossa imagem no documento HTML. Definimos nossa largura como 300px. A propriedade height: auto permite que diferentes navegadores calculem automaticamente a altura da imagem, mantendo a proporção da imagem. Isso garante que as imagens não sejam esticadas durante a renderização em tamanhos de tela diferentes.
Redimensionando imagens de fundo
Você pode inserir imagens em elementos para servirem como imagens de fundo. Redimensionar uma imagem de fundo garante que ela caiba em seu contêiner. Este é um exemplo de documento HTML com um parágrafo e algum texto:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="description" content="Your website description"> <meta name="keywords" content="your, keywords, here"> <meta name="author" content="Your Name"> <title>Resize HTML Images</title> <!-- Link to external CSS file --> <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>This is our cat image</p> </div> </div> </body> </html>
Agora podemos adicionar uma imagem de fundo por meio da planilha estilos.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. Criei um contêiner com texto centralizado e uma imagem de fundo de um gato.
Você pode usar diferentes ferramentas para redimensionar e otimizar suas imagens. Algumas dessas ferramentas oferecem apenas um recurso de redimensionamento. No entanto, alguns também permitirão armazenar imagens e veicular em seu arquivo HTML usando um URL.
Nublado é um bom exemplo de ferramenta que redimensiona a imagem no servidor antes de entregá-la aos usuários. Esta ferramenta foi projetada para redimensionar imagens automaticamente sem afetar o desempenho do site.
Melhores práticas para redimensionar imagens em HTML
Embora tenhamos discutido várias abordagens para redimensionar imagens em HTML, você deve sempre seguir estas práticas recomendadas para obter os melhores resultados:
- Evite estilos embutidos: você pode ficar tentado a estilizar imagens rapidamente de seus documentos HTML e passar para a próxima parte. No entanto, esta abordagem pode afetar negativamente a velocidade de carregamento da página web. Use uma folha de estilo CSS separada e torne seu código fácil de ler e manter.
- Use os atributos ‘largura’ e ‘altura’: certifique-se de especificar a largura e a altura das suas imagens. Essa abordagem orienta o navegador a alocar automaticamente o espaço da imagem à medida que o restante do conteúdo é carregado.
- Use os formatos de imagem corretos: as imagens vêm em formatos diferentes, como JPEG, PNG e SVG. Por exemplo, PNG é um formato perfeito para uma imagem transparente, enquanto SVG é adequado para logotipos.
- Torne suas imagens responsivas: talvez você nunca saiba a natureza dos dispositivos dos visitantes do seu site para acessar seu conteúdo. Sempre otimize as imagens para diferentes tamanhos de tela e garanta uniformidade na exibição.
- Otimize os tamanhos dos arquivos: imagens brutas de alta qualidade podem vir em arquivos grandes. No entanto, essas imagens podem ocupar muito espaço no servidor e afetar o tempo de carregamento da página. Você pode reduzir o tamanho dessas imagens usando várias ferramentas sem diminuir sua qualidade.
Conclusão
Redimensionar suas imagens em HTML melhora a experiência do usuário, torna sua página da web responsiva e economiza espaço no servidor. Apresentamos várias abordagens para redimensionar imagens em HTML.
Embora todos sejam eficazes, adoro usar propriedades CSS em um arquivo CSS separado para redimensionar as imagens. No entanto, às vezes você pode adicionar CSS embutido se seu aplicativo for pequeno e você tiver algumas imagens.
Você também pode ler nosso artigo sobre Recursos CSS e obter uma compreensão mais profunda dessa linguagem de estilo.