DEV Community

loading...
Cover image for O FUTURO da performance no CSS

O FUTURO da performance no CSS

Italo Canturil
Sou um desenvolvedor Front-End Junior, comecei a me aprofundar nas tecnologias Front-End em Maio de 2020 e desde então venho colocando os estudos em pratica com projetos pessoais e open source.
・2 min read

Para fazer uma imagem responsiva sempre foi um desafio, é ideal que imagens sempre tenha a mesma resolução do dispositivo do usuário.
Uma maneira de solucionar esse desafio é usando a função CSS image-set() , os navegadores baseados no Chromium já tinha suporte para ela desde 2012 e o Safari desde o Safari 6. Recentemente o Firefox passou a dar suporte a partir da versão 88, então vamos aprender mais sobre essa função que será a próxima geração de performance do CSS.

No HTML já se tinha o atributo srcset, o image-set() é equivalente a esse atributo onde confiamos no próprio navegador decidir qual melhor imagem para a resolução que o usuário está.

Image-set pode ser usado em três propriedades CSS diferentes, que são:

  • content
  • cursor
  • background-image

O mais usado é o bacground-image, um exemplo de uso:

.point {
  background-image: image-set("inflection.png" 1x, "inflection-2x.png" 2x);
}
Enter fullscreen mode Exit fullscreen mode

Sendo o "1x" para telas com menores resoluções e o "2x" para telas com maiores resoluções. x vem de dppx que em inglês é dots per pixel unit, traduzindo seria algo em torno de pontos por pixel.
No Chrome/Edge/Opera e Samsung Internet é necessário adicionar o prefixo -webkit-. Já no Safari não precisa utilizar esse prefixo porém necessita usar a função url() para adicionar o caminho da imagem.

.point {
  /* Safari */
  background-image: url("platypus.png");

  /* Chrome/Edge/Opera/Samsung, Safari com função url() */
  background-image: -webkit-image-set(url("inflection.png") 1x, url("inflection-2x.png") 2x);

  /* Padrão */
  background-image: image-set("inflection.png" 1x, "inflection-2x.png" 2x);
}
Enter fullscreen mode Exit fullscreen mode

Essa funcionalidade não é tão nova porém com o aumento do suporte é considerada a próxima geração de performance no CSS e que vai possibilitar usuários com dispositivos mais caros visualizarem a imagem mais nitidamente e também melhorar a performance para usuários que tem uma internet mais lenta ou com telas que requerem uma resolução menor.

Discussion (0)