Vix Blog
No Result
View All Result
  • Economia
  • Educação
  • Segurança
  • Mundo
  • Negócios
  • Notícias
  • Tecnologia
  • DMCA
NEWSLETTER
  • Economia
  • Educação
  • Segurança
  • Mundo
  • Negócios
  • Notícias
  • Tecnologia
  • DMCA
No Result
View All Result
Vix Blog
No Result
View All Result
Home Segurança

Um guia para iniciantes para imagens responsivas em HTML

Carolina por Carolina
25 de março de 2022
Tempo de leitura:7min de leitura
0
11 atributos HTML úteis que você deve saber

Uma imagem responsiva é uma imagem que se adapta a diferentes características do dispositivo. Quando muito feitas, as imagens responsivas podem melhorar o desempenho e a experiência do usuário de um site.

Nascente item explora porquê você pode fabricar imagens responsivas em HTML usando srcset e o elemento de imagem.

Por que você deve usar imagens responsivas?

Quando os engenheiros de software estavam criando a web, eles não consideraram porquê os navegadores lidariam com imagens responsivas. Finalmente, os usuários só acessavam a web de desktops ou laptops. Evidente, isso não é verdade hoje.

De conciliação com a Statista, mais de 90% da população global da Internet acessa a Internet usando seu telefone celular. A maioria das páginas da web na internet contém imagens e essas imagens são uma das métricas usadas para medir o desempenho da web. Para melhorar o desempenho, você precisa otimizar suas imagens tornando-as responsivas.

Uma vez que fabricar imagens responsivas em HTML

Você pode abordar imagens responsivas de dois ângulos: veiculando a mesma imagem com tamanhos diferentes ou veiculando imagens diferentes de conciliação com as características de exibição. Você poderia usar ou . Essas duas opções lidam com imagens responsivas de maneira dissemelhante, mas todas exibem uma imagem de determinadas alternativas, dependendo do conjunto de regras.

Relacionado: Uma vez que tornar seu site responsivo e interativo com CSS e JavaScript

Usando srcset

O padrão HTML só permite especificar um registro de imagem. Se você deseja exibir uma imagem dissemelhante dependendo do tamanho do dispositivo, use srcset.

Sintaxe:

<img srcset="" src="" alt="">

MAKEUSEO VÍDEO DO DIA

srcset permite que você forneça arquivos de origem adicionais, e o navegador escolherá a imagem que parece ideal para esse tamanho de imagem.

<img srcset="cute-cat.jpg 480w,
cute-cat.jpg 800w"
src="cute-cat.jpg"
alt="A cute cat">

srcset é formado de três partes: O nome do registro de imagem que especifica o caminho para a imagem de origem, um espaço e a largura intrínseca ou real da imagem.

Usando srcset com tamanhos

A questão de usar srcset é que você não tem controle de qual imagem o navegador escolherá para exibir. Combinando srcset com tamanhos resolve nascente problema. tamanhos defina um conjunto de condições de mídia que indiquem a imagem com o tamanho ideal.


Agora você pode reescrever o etiqueta supra da seguinte forma.

<img srcset="cute-cat.jpg 480w,
cute-cat.jpg 800w"
sizes="(max-width: 600px) 480px,
800px"
src="cute-cat.jpg"
alt="A cute cat">

tamanhos é formado por uma quesito de mídia, neste exemplo é (max-width: 600px) que representa a largura da janela de visualização, o espaço e a largura do slot (480px) especificando o espaço que a imagem preencherá se a quesito de mídia for verdadeira.

Relacionado: Uma vez que usar consultas de mídia em HTML e CSS para fabricar sites responsivos

Cá, o navegador primeiro verificará a largura do dispositivo e a comparará com a quesito da mídia. Se a quesito for verdadeira, ele verificará a largura do slot e carregará uma imagem de srcset com a mesma largura ou o próximo maior.

Observe que você também está incluindo src que fornece a imagem para recorrer a navegadores que não suportam srcset e tamanhos.

srcset também lhe permite para servir imagens em diferentes resoluções usando descritores x.

<img srcset="cute-cat-high.jpg,
cute-cat-high1.jpg 1.5x,
cute-cat-high2.jpg 2x"
src="cute-cat-low.jpg"
alt="A cute cat">

Neste exemplo, se o dispositivo tiver uma solução de dois pixels de dispositivo por CSS ou mais, o navegador carregará a imagem cute-cat-high1.jpg.

Pixels de hardware e software

O problema com esta solução é que as imagens são responsivas somente em termos de densidade de pixels do dispositivo. Esta é a proporção dos pixels de hardware para os pixels de software ou CSS. Um pixel de hardware é o ponto de luz real na tela, enquanto o pixel de software ou pixel CSS é uma unidade de medida. A densidade de pixels determina a solução do dispositivo.

Ao renderizar imagens responsivas, não considere somente a solução; o tamanho da tela também é importante. Caso contrário, você pode completar carregando desnecessariamente imagens grandes ou imagens muito pixelizadas.

<img srcset="cute-cat-high1-480w.jpg 1.5x,
cute-cat-high2-640w.jpg 2x"
src="cute-cat-low.jpg"
alt="A cute cat">

Usando

é um elemento HTML que envolve vários elementos contendo diferentes arquivos de origem e um elemento. Enquanto torna as imagens responsivas ao servir diferentes tamanhos da mesma imagem, permite que você altere a imagem exibida.

Sintaxe:

<picture>
<source media="" srcset="">
<source media="" srcset="">
<img src="" alt="">
</picture>

Considere uma situação em que você tem uma grande imagem de paisagem. A imagem é exibida e parece proporcional em um desktop, mas diminui significativamente em dispositivos móveis, de modo que os elementos da imagem se tornam minúsculos. A imagem não responsiva contribui para uma experiência ruim do usuário. Com você pode expressar ao seu navegador para mudar para uma imagem de retrato em close-up quando estiver no celular.


<picture>
<source media="(max-width: 639px)" srcset="cute-cat-480w.jpg">
<source media="(min-width: 640px)" srcset="cute-cat-640w.jpg">
<img src="elva-640w.jpg" alt="A cute cat">
</picture>

Uma vez que na primeira abordagem, contém um atributo de mídia que você pode usar para fornecer a quesito de mídia. Por exemplo, o navegador exibirá o “cute-cat-480w.jpg” se a largura da janela de visualização for 639px ou menos. O srcset contém o caminho do registro de imagem que você deseja exibir e src especifica a imagem padrão.

Relacionado: 7 novos recursos CSS para fabricar um site responsivo

Fallback para o formato de imagem WebP

Outra coisa que lida muito é fornecer um substituto para formatos de imagem modernos porquê WebP. As imagens WebP têm cumeeira desempenho, são pequenas e oferecem uma experiência web rápida. Você pode, portanto, sentenciar usá-los em seus sites. Um repto que você pode enfrentar é que nem todos os navegadores suportam imagens WebP. Com você não enfrentará esse problema, pois seu navegador poderá carregar uma imagem opção se não for comportável com WebP.


<picture>
<source type="image/webp" srcset="cute-cat.webp">
<img src="cute-cat.jpg" alt="A cute cat.">
</picture>

Por que fabricar imagens responsivas em HTML e não em CSS?

CSS oferece opções robustas para mourejar com imagens responsivas. Logo por que não usá-lo? O navegador pré-carrega as imagens antes de estudar o CSS. Portanto, antes que o JavaScript do seu site detecte a largura da janela de visualização para fazer as alterações apropriadas nas imagens, as imagens originais já foram pré-carregadas. Devido a isso, é melhor mourejar com imagens responsivas usando HTML.

Indicar para a melhor qualidade de imagem provável

Você viu porquê pode fabricar imagens responsivas em HTML usando > e neste item. A veiculação de imagens responsivas geralmente envolve considerar o tamanho da imagem e a solução da imagem em relação ao tamanho da tela. Se feito de forma errada, a qualidade da imagem pode suportar. Certifique-se de escolher uma imagem que forneça usabilidade ideal usando o menor número de recursos.

RELATED POSTS

6 editores de imagem online verdadeiramente gratuitos para efeitos do Photoshop (sem limitações)

O que é vazamento? Aqui está o que você precisa saber

Como inserir uma linha horizontal ou vertical no Microsoft Word


Princípios de Web Design Responsivo - em destaque
Princípios de Web Design Responsivo

Os web designers defendem o design responsivo há anos, mas o que é e porquê ele pode produzir páginas da web superiores?

Leia a seguir


Sobre o responsável

Maria Gathoni
(5 artigos publicados)

Mary Gathoni é uma desenvolvedora de software apaixonada por fabricar teor técnico que não seja somente informativo, mas também envolvente. Quando ela não está codificando ou escrevendo, ela gosta de trespassar com os amigos e estar ao ar livre.

Mais de Mary Gathoni

Assine a nossa newsletter

Junte-se à nossa newsletter para dicas de tecnologia, análises, e-books gratuitos e ofertas exclusivas!

Clique cá para assinar

Novidades no seu e-mail!

Não enviamos spam! Leia mais em nossa Política de privacidade

Verifique sua caixa de entrada ou a pasta de spam para confirmar sua assinatura.

ShareTweetPin
Carolina

Carolina

Relacionado Posts

6 editores de imagem online verdadeiramente gratuitos para efeitos do Photoshop (sem limitações)
Segurança

6 editores de imagem online verdadeiramente gratuitos para efeitos do Photoshop (sem limitações)

2 de julho de 2022
O que é vazamento?  Aqui está o que você precisa saber
Segurança

O que é vazamento? Aqui está o que você precisa saber

1 de julho de 2022
Como inserir uma linha horizontal ou vertical no Microsoft Word
Segurança

Como inserir uma linha horizontal ou vertical no Microsoft Word

1 de julho de 2022
Spotify diz qual música te salvaria de Vecna ​​em Stranger Things
Segurança

Spotify diz qual música te salvaria de Vecna ​​em Stranger Things

1 de julho de 2022
7 maneiras pelas quais o GNOME é o principal ambiente de desktop Linux
Segurança

7 maneiras pelas quais o GNOME é o principal ambiente de desktop Linux

1 de julho de 2022
Por que o Microsoft Excel imprime páginas em branco e como corrigir o problema
Segurança

Por que o Microsoft Excel imprime páginas em branco e como corrigir o problema

1 de julho de 2022
Next Post
Uma vez que encontrar comunidades de suporte para trabalhadores remotos

Uma vez que encontrar comunidades de suporte para trabalhadores remotos

Uma vez que encontrar comunidades de suporte para trabalhadores remotos

Uma vez que encontrar comunidades de suporte para trabalhadores remotos

Deixe um comentário Cancelar resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

No Result
View All Result

Últimas Notícias

6 editores de imagem online verdadeiramente gratuitos para efeitos do Photoshop (sem limitações)

6 editores de imagem online verdadeiramente gratuitos para efeitos do Photoshop (sem limitações)

2 de julho de 2022
4 lições que os TikTokers iniciantes podem aprender com o sucesso de Khaby Lame

4 lições que os TikTokers iniciantes podem aprender com o sucesso de Khaby Lame

1 de julho de 2022
Como ler livros Kindle no modo paisagem

Como ler livros Kindle no modo paisagem

1 de julho de 2022
O que é vazamento?  Aqui está o que você precisa saber

O que é vazamento? Aqui está o que você precisa saber

1 de julho de 2022
O dispositivo completo de monitoramento da saúde do coração

O dispositivo completo de monitoramento da saúde do coração

1 de julho de 2022

Novidades no seu e-mail!

Não enviamos spam! Leia mais em nossa Política de privacidade

Verifique sua caixa de entrada ou a pasta de spam para confirmar sua assinatura.

Categorias

  • Entretenimento
  • Mundo
  • Notícias
  • Segurança
Vix Blog

Somos entusiastas da tecnologia com a missão de ensinar ao mundo como usar e compreender a tecnologia em suas vidas.
SAIBA MAIS »

Entre em contato conosco enviando um e-mail para [email protected]

Posts recentes

  • 6 editores de imagem online verdadeiramente gratuitos para efeitos do Photoshop (sem limitações)
  • 4 lições que os TikTokers iniciantes podem aprender com o sucesso de Khaby Lame
  • Como ler livros Kindle no modo paisagem

Categorias

  • Entretenimento
  • Mundo
  • Notícias
  • Segurança

Links Importantes

  • Quem Somos
  • Blog
  • Fale Conosco
  • Política de Privacidade
  • DMCA

© 2021 VixBlog - Notícias e dicas para o seu dia dia.

No Result
View All Result
  • Economia
  • Educação
  • Segurança
  • Mundo
  • Negócios
  • Notícias
  • Tecnologia
  • DMCA

© 2021 VixBlog - Notícias e dicas para o seu dia dia.