DEV Community

Cover image for O FUTURO da performance no CSS
Italo Canturil
Italo Canturil

Posted on • Edited on

4 2

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

Do your career a big favor. Join DEV. (The website you're on right now)

It takes one minute, it's free, and is worth it for your career.

Get started

Community matters

Top comments (2)

Collapse
 
dwtoledo profile image
Douglas Toledo • Edited

Cant, logo acima da primeira linha de código há um errinho... "bacground-image" ao invés de "background-image". Adorei o artigo, vou praticar em live!

Collapse
 
italocanturil profile image
Italo Canturil

Vlw dw

Cloudinary image

Zoom pan, gen fill, restore, overlay, upscale, crop, resize...

Chain advanced transformations through a set of image and video APIs while optimizing assets by 90%.

Explore