Ao implantar um site, os desenvolvedores geralmente utilizam a mesma imagem para todos os tamanhos de tela, o que não é uma boa prática, pois não se pode confiar no navegador para redimensionar. Nessa situação, as imagens responsivas entram em vigor garantindo que a imagem seja baixada no tamanho e qualidade adequados para o dispositivo correspondente, aumentando assim a velocidade de carregamento da página.
Como aumentar a velocidade de carregamento da página usando imagens responsivas?
Para aumentar a velocidade de carregamento da página por meio de imagens responsivas, considere as seguintes metodologias:
Exemplo 1: Aumente a velocidade de carregamento da página por meio de imagens responsivas usando o atributo “srcset”
A abordagem mais conveniente para aplicar imagens responsivas pode ser utilizar o “ conjunto de dados ”atributo acumulado no“ ' marcação. Este atributo permite ao programador especificar vários tamanhos de imagem, e o navegador opta automaticamente pela imagem mais adequada em relação ao tamanho da tela do usuário. Segue a demonstração:
DOCTYPEHTML >
< HTML >
< cabeça >
< meta conjunto de caracteres = 'utf-8' >
< meta nome = 'janela de exibição' contente = 'largura=largura do dispositivo, escala inicial=1' >
< título título >
cabeça >
< corpo >
< imagem fonte = 'F:\ARTIGOS TÉCNICOS DE TRABALHO\imgre.png' tudo = 'Imagem Responsiva'
conjunto de dados = 'F:\ARTIGOS TÉCNICOS DE TRABALHO\imgre.png 400w, F:\ARTIGOS TÉCNICOS DE TRABALHO\imgre.png 800w, F:\ARTIGOS TÉCNICOS DE TRABALHO\imgre.png 1200w'
/>
corpo >
HTML >
Neste código:
- O ' conjunto de dados ”Está incluído o atributo que compreende o caminho da imagem e larguras diferentes a cada vez.
- É tal que a imagem “ F:\ARTIGOS TÉCNICOS DE TRABALHO\imgre.png 400w ”representa um caminho de imagem com largura de“ 400 ' píxeis.
- Com base nessas informações, o navegador analisa a imagem mais adequada para download com base no tamanho da tela do usuário, de forma que telas menores exibam imagens menores, conservando assim a largura de banda.
Saída
Exemplo 2: Aumente a velocidade de carregamento da página por meio de imagens responsivas, especificando diferentes densidades de pixels
Neste exemplo, o caminho da imagem será especificado juntamente com diferentes densidades de pixels para exibições de alta resolução. Isto pode ser alcançado através do “ conjunto de dados ”atributo, demonstrado abaixo:
DOCTYPEHTML >< HTML >
< cabeça >
< meta conjunto de caracteres = 'utf-8' >
< meta nome = 'janela de exibição' contente = 'largura=largura do dispositivo, escala inicial=1' >
< título título >
cabeça >
< corpo >
< imagem fonte = 'F:\ARTIGOS TÉCNICOS DE TRABALHO\imgre.png' tudo = 'Imagem Responsiva' conjunto de dados = 'F:\ARTIGOS TÉCNICOS DE TRABALHO\imgre.png 1x, F:\ARTIGOS TÉCNICOS DE TRABALHO\imgre.png 1.5x, F:\ARTIGOS TÉCNICOS DE TRABALHO\imgre.png 2x'
/>
corpo >
HTML >
Neste trecho de código, especifique o caminho da imagem três vezes com densidades de pixel variadas. É para que o navegador opte pela imagem mais adequada/adequada para garantir a máxima qualidade nos diversos ecrãs.
Observação: O ' 1x ”Pixel é o valor padrão, portanto é uma escolha do usuário associar ou não ao caminho da imagem.
Saída
Exemplo 3: Aumente a velocidade de carregamento da página por meio de imagens responsivas usando o atributo “tamanhos”
Em algumas situações, pode haver uma limitação em que o tamanho real da imagem na tela varia em relação à largura da tela. Para resolver esse problema, o “ tamanhos ”O atributo pode ser utilizado para incluir o tamanho da imagem em relação às consultas de mídia ou a um tamanho fixo. Abaixo está a demonstração do código:
DOCTYPEHTML >< HTML >
< cabeça >
< meta conjunto de caracteres = 'utf-8' >
< meta nome = 'janela de exibição' contente = 'largura=largura do dispositivo, escala inicial=1' >
< título título >
cabeça >
< corpo >
< imagem fonte = 'F:\ARTIGOS TÉCNICOS DE TRABALHO\imgre.png' tudo = 'Imagem Responsiva' conjunto de dados = 'F:\ARTIGOS TÉCNICOS DE TRABALHO\imgre.png 50w, F:\ARTIGOS TÉCNICOS DE TRABALHO\imgre.png 800w, F:\ARTIGOS TÉCNICOS DE TRABALHO\imgre.png 1200w'
tamanhos = '(largura máxima: 800px) 100vw, 800px'
/>
corpo >
HTML >
Neste bloco de código, o “ tamanhos ”O atributo integra as consultas e tamanhos de mídia. É tal que orienta o navegador a optar pelo tamanho da imagem em relação à largura da tela do usuário. Isso garante que as imagens não excedam a largura máxima desejada.
Saída
Considerações importantes ao usar o atributo “tamanhos”
Existem algumas limitações no uso do “ tamanhos ”Atributo também listado abaixo:
- Ao utilizar múltiplas consultas de mídia no “ tamanhos ”, certifique-se de que a primeira consulta de mídia verdadeira esteja selecionada. Além disso, certifique-se de que as consultas de mídia estejam ordenadas da mais específica para a menos específica.
- O atributo “tamanhos” não suporta tamanhos percentuais, pois o navegador não tem conhecimento da largura de algo especificado em porcentagens até que esteja ciente da largura do elemento pai.
Exemplo 4: Aumente a velocidade de carregamento da página por meio de imagens responsivas usando o elemento “
O '
< HTML >
< cabeça >
< meta conjunto de caracteres = 'utf-8' >
< meta nome = 'janela de exibição' contente = 'largura=largura do dispositivo, escala inicial=1' >
< título título >
cabeça >
< corpo >
< foto >
< fonte meios de comunicação = '(largura máxima: 100px)' conjunto de dados = 'F:\ARTIGOS TÉCNICOS DE TRABALHO\imgbanner.png' />
< imagem fonte = 'F:\ARTIGOS TÉCNICOS DE TRABALHO\imgre.png' tudo = 'Imagem Responsiva' />
foto >
corpo >
HTML >
De acordo com estas linhas de código:
- Especifique o '
”Elemento que acumula o“ ”Elementos para imagens diferentes e permitir que o navegador opte pelo apropriado com base no tamanho da tela do usuário. - Além disso, se nenhum dos “
”Os elementos são adequados para o tamanho da tela, a imagem especificada no“ ”A tag serve como um substituto.
- Como resultado, isso adiciona uma imagem alternativa em um caso imprevisto, mantendo assim a velocidade aprimorada de carregamento da página.
Saída
Conclusão
A velocidade de carregamento da página pode ser aprimorada por meio de imagens responsivas usando o “ conjunto de dados ”Atributo, especificando diferentes densidades de pixel, usando o“ tamanhos ”Atributo, ou através do“