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.
Top comments (2)
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!
Vlw dw