O FUTURO da performance no CSS

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 background-image, um exemplo de uso:

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

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);
}

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.