6.1 Usando o atributo srcset e sizes
Telas com alta densidade de pixels, como os displays Retina da Apple, viraram padrão para muitos dispositivos modernos. Essas telas têm muito mais pixels por polegada (PPI), oferecendo uma imagem mais nítida e detalhada. Para desenvolvedores web, é importante otimizar gráficos para essas telas, garantindo uma experiência top para o usuário. Vamos ver como fazer isso.
Problemas relacionados a telas de alta densidade
Em telas de alta densidade, imagens padrão podem ficar desfocadas ou pixeladas porque um pixel da imagem é esticado para vários pixels da tela. Para resolver isso, precisamos usar imagens de alta resolução que podem ser escaladas pelo navegador para exibição em telas de alta densidade.
Os atributos srcset e sizes permitem especificar diferentes versões de imagens para diferentes densidades de pixels. Isso ajuda o navegador a escolher a imagem mais adequada para o dispositivo específico.
Exemplo de uso de srcset e sizes:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Otimização para Displays Retina</title>
</head>
<body>
<img
src="images/default.jpg"
srcset="images/image-1x.jpg 1x,
images/image-2x.jpg 2x,
images/image-3x.jpg 3x"
sizes="(max-width: 600px) 100vw,
(max-width: 1200px) 50vw, 33vw"
alt="Exemplo de imagem para Displays Retina">
</body>
</html>
Explicação do código:
srcset: especifica três versões da imagem para diferentes densidades de pixels (1x,2x,3x)-
sizes: define a largura da imagem para diferentes condições de exibição:- Até
600px— a imagem ocupa100%da largura da viewport - Até
1200px— a imagem ocupa50%da largura da viewport - Em todos os outros casos — a imagem ocupa
33%da largura da viewport
- Até
6.2 Uso de gráficos vetoriais (SVG)
Gráficos vetoriais (SVG) são uma ótima solução para telas de alta densidade porque os arquivos SVG podem ser redimensionados sem perder qualidade. Eles são ideais para logotipos, ícones e outros elementos de interface.
Exemplo de uso de SVG:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Usando SVG para Displays Retina</title>
</head>
<body>
<img src="images/logo.svg" alt="Logotipo">
</body>
</html>
Explicação do código:
src="images/logo.svg": especifica o caminho para o arquivo SVG, que será redimensionado para qualquer tamanho sem perder qualidade
6.3 Uso de CSS
Para imagens de fundo, podemos usar media queries e propriedades CSS para carregar diferentes versões de imagens dependendo da densidade de pixels do dispositivo.
Exemplo de uso de CSS para imagens de fundo:
.background {
background-image: url('images/background-1x.jpg');
}
@media only screen and (min-resolution: 2dppx) {
.background {
background-image: url('images/background-2x.jpg');
}
}
@media only screen and (min-resolution: 3dppx) {
.background {
background-image: url('images/background-3x.jpg');
}
}
Explicação do código:
.background: define a imagem de fundo básica@media only screen and (min-resolution: 2dppx): substitui a imagem de fundo por uma versão para telas com densidade2x@media only screen and (min-resolution: 3dppx): substitui a imagem de fundo por uma versão para telas com densidade3x
6.4 Elemento picture
A tag <picture> permite especificar várias fontes de imagem com diferentes condições de exibição.
Isso é útil para casos mais complexos de adaptação de imagens.
Exemplo de uso de <picture>:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Usando <picture> para Displays Retina</title>
</head>
<body>
<picture>
<source srcset="images/image-3x.jpg" media="(min-resolution: 3dppx)">
<source srcset="images/image-2x.jpg" media="(min-resolution: 2dppx)">
<img src="images/image-1x.jpg" alt="Exemplo de imagem para Displays Retina">
</picture>
</body>
</html>
Explicação do código:
<source>: especifica diferentes fontes de imagem com condições de exibição<img>: define a imagem padrão para dispositivos que não suportam<picture>
6.5 Exemplos de otimização de imagens
Exemplo 1: Imagem adaptativa de alta resolução
Vamos criar um exemplo onde a imagem é otimizada para telas de alta densidade usando os atributos srcset e sizes:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Imagem adaptativa para Displays Retina</title>
</head>
<body>
<img
src="images/default.jpg"
srcset="images/image-1x.jpg 1x,
images/image-2x.jpg 2x,
images/image-3x.jpg 3x"
sizes="(max-width: 600px) 100vw,
(max-width: 1200px) 50vw, 33vw"
alt="Exemplo de imagem para Displays Retina">
</body>
</html>
Explicação do código:
srcset: define três versões da imagem para diferentes densidades de pixels (1x,2x,3x)-
sizes: define a largura da imagem para diferentes condições de exibição:- Até
600px— a imagem ocupa100%da largura da viewport - Até
1200px— a imagem ocupa50%da largura da viewport - Em todos os outros casos — a imagem ocupa
33%da largura da viewport
- Até
Exemplo 2: Usando SVG para imagens escaláveis
Vamos criar um exemplo que usa SVG para garantir uma exibição de qualidade em qualquer dispositivo:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Usando SVG para Displays Retina</title>
</head>
<body>
<img src="images/logo.svg" alt="Logotipo">
</body>
</html>
Explicação do código:
src="images/logo.svg": especifica o caminho para o arquivo SVG, que será redimensionado para qualquer tamanho sem perder qualidade
GO TO FULL VERSION