Imagens responsivas e dinâmicas com sizes e srcset

-
Quando o assunto é otimização de sites, as imagens são as que devem receber uma maior atenção, pois elas são responsáveis por grande parte do tempo de carregamento das páginas.
Com a chegada do HTML5, novos recursos foram adicionados para facilitar o trabalho de otimização das imagens, e dois deles são os atributos sizes e srcset da tag img do HTML.
Imagine um celular com tela de 360px de largura e DPR 1. Não faz sentido carregar uma imagem com 1500px, feita para acesso desktop e internet rápida, certo?
A ideia deste post é mostrar na prática (vou deixar tudo pra download) como carregar imagens de forma inteligente, que se adaptam ao tamanho de tela, e pra isso vamos falar também de viewport, resolução, pixel, DPR, além dos atributos sizes e srcset. Eu considero também que você possui conhecimento de HTML e CSS.
Se preferir, acesse “Imagens responsivas e dinâmicas com sizes e srcset (atributos HTML)” no YouTube.

Os atributos srcset e sizes

O atributo srcset permite definir um conjunto de imagens e não apenas uma, como o src faz, deixando o …

Comentários

Postar um comentário

Postagens mais visitadas deste blog

O que são Usuários, Sessões e PageViews no Google Analytics

-
Imagem
  Acesse o conteúdo original sobre “ O que são Usuários, Sessões e PageViews no Google Analytics ” no site oficial do Aylton Inacio. Se você tem um site comum, blog ou ecommerce, com certeza precisa medir e analisar o tráfego que ele recebe, e uma das melhores ferramentas para fazer isso é o  Google Analytics . Ao  configurar o Google Analytics no seu site , diversos dados são capturados em cada acesso do usuário e transformados em relatórios estratégicos, compostos por dimensões e métricas. Uma métrica é o que você deseja mensurar, já uma dimensão é a perspectiva de análise. Por exemplo, nos últimos 30 dias o meu site teve 10.000 usuários do estado do Rio de Janeiro. Neste caso temos a métrica Usuários e as dimensões Data e Estado.  Se preferir, acesse  “O que são Usuários, Sessões e PageViews no Google Analytics”  no YouTube. Dentro do Google Analytics existem diversas Métricas e Dimensões, e neste post você vai entender as diferenças entre  Usuários...
Leia mais

Como criar um mapa preenchido no Looker Studio

-
  Os mapas do   Looker Data Studio   permitem que você apresente seus dados separados por regiões geográficas, no Brasil ou mundo, de forma gráfica e interativa. O Google aproveitou uma ferramenta que tem há muito tempo, que é o Google Maps, e integrou com o Looker, assim temos recursos realmente valiosos de mapas. Hoje são 5 tipos de mapas para usar: Mapa de balão Mapa preenchido Mapa de calor Mapa de linhas Gráfico de mapa Neste tutorial vamos focar no  Mapa Preenchido  que permite a apresentação dos seus dados até o nível de cidade e preenchendo as áreas com cores, criando marcações bem visíveis e limitadoras. ▶ Se preferir, acesse  "Como criar um mapa preenchido no Looker Studio"  no YouTube. Acesse o conteúdo completo e original sobre “ Como criar um mapa preenchido no Looker Studio ” no site oficial do  Aylton Inacio .
Leia mais

Testes condicionais com Datas no Looker Data Studio

-
  O Looker Studio (Data Studio) permite a manipulação de campos Data de várias maneiras e é fundamental entender as possibilidades de testes condicionais. Neste post você vai aprender como fazer testes com operadores condicionais entre campos; entre um campo e uma data criada com função Date; funções como DATETIME_ADD para adicionar dias. ▶ Se preferir, acesse  "Testes condicionais com Datas no Looker Data Studio"  no YouTube. Para nossos exemplos, considere a seguinte tabela já com dois camp...   Acesse o conteúdo completo e original sobre “ Testes condicionais com Datas no Looker Data Studio ” no site oficial do  Aylton Inacio .
Leia mais