Mais conteúdo relacionado Tudo que você precisa saber sobre picture e srcset19. .foto { background-image: url('img_360px.jpg'); }
.foto { background-image: url('img_720px.jpg'); }
.foto { background-image: url('img_1440px.jpg'); }
.foto { background-image: url('img_2560px.jpg'); }
20. .foto { background-image: url('img_360px.jpg'); }
@media (min-width: 361px) {
.foto { background-image: url('img_720px.jpg'); }
}
@media (min-width: 721px) {
.foto { background-image: url('img_1440px.jpg'); }
}
@media (min-width: 1441px) {
.foto { background-image: url('img_2560px.jpg'); }
}
21. .foto { background-image: url('img_360px.jpg'); }
@media (min-width: 361px),
(min-resolution: 2dppx) {
.foto { background-image: url('img_720px.jpg'); }
}
@media (min-width: 721px),
(min-resolution: 2dppx) and (min-width: 361px) {
.foto { background-image: url('img_1440px.jpg'); }
}
@media (min-width: 1441px),
(min-resolution: 2dppx) and (min-width: 721px) {
.foto { background-image: url('img_2560px.jpg'); }
}
22. .foto { background-image: url('img_360px.jpg'); }
@media (min-width: 361px),
(min-resolution: 2dppx) {
.foto { background-image: url('img_720px.jpg'); }
}
@media (min-width: 721px),
(min-resolution: 2dppx) and (min-width: 361px),
(min-resolution: 3dppx) {
.foto { background-image: url('img_1440px.jpg'); }
}
@media (min-width: 1441px),
(min-resolution: 2dppx) and (min-width: 721px),
(min-resolution: 3dppx) and (min-width: 481px) {
.foto { background-image: url('img_2560px.jpg'); }
}
23. @media (min-width: 1600px) {
.foto { width: 33%; }
}
.foto { width: 100%;}
@media (min-width: 1024px) {
.foto { width: 50%; }
}
24. .foto { background-image: url('img_360px.jpg'); }
@media (min-width: 361px),
(min-resolution: 2dppx) {
.foto { background-image: url('img_720px.jpg'); }
}
@media (min-width: 721px) and (max-width: 1023px),
(min-width: 1441px) and (max-width: 1599px),
(min-width: 2160px),
(min-resolution: 2dppx) and (min-width: 361px) {
.foto { background-image: url('img_1440px.jpg'); }
}
@media (min-resolution: 2dppx) and (min-width: 721px) and (max-width: 1023px),
(min-resolution: 2dppx) and (min-width: 1441px) and (max-width: 1599px),
(min-resolution: 2dppx) and (min-width: 2160px) {
.foto { background-image: url('img_2560px.jpg'); }
}
25. .foto { background-image: url('img_360px.jpg'); }
@media (min-width: 361px),
(min-resolution: 2dppx) {
.foto { background-image: url('img_720px.jpg'); }
}
@media (min-width: 721px) and (max-width: 1023px),
(min-width: 1441px) and (max-width: 1599px),
(min-width: 2160px),
(min-resolution: 2dppx) and (min-width: 361px) {
.foto { background-image: url('img_1440px.jpg'); }
}
@media (min-resolution: 2dppx) and (min-width: 721px) and (max-width: 1023px),
(min-resolution: 2dppx) and (min-width: 1441px) and (max-width: 1599px),
(min-resolution: 2dppx) and (min-width: 2160px) {
.foto { background-image: url('img_2560px.jpg'); }
}
MEDIA QUERIES
SÃO
COMPLICADAS
28. tamanho img na pg
dimensões do arquivo
×
✓
✓
×
×
img_360.jpg
img_720.jpg
img_1440.jpg
img_2560.jpg
360px
720px
1440px
2560px
100% 100vw
30. tamanho aproximado na pg
lista imagens e tamanho dos arquivos
<img srcset="img_360.jpg 360w,
img_720.jpg 720w,
img_1440.jpg 1440w,
img_2560.jpg 2560w"
sizes="100vw">
31. Celular img_360.jpg
Celular Retina img_720.jpg
iPad Retina img_2560.jpg
Notebook comum img_1440.jpg
MacBook Retina img_2560.jpg
<img srcset="img_360.jpg 360w,
img_720.jpg 720w,
img_1440.jpg 1440w,
img_2560.jpg 2560w"
sizes="100vw">
32. @media (min-width: 1600px) {
.foto { width: 33%; }
}
.foto { width: 100%;}
@media (min-width: 1024px) {
.foto { width: 50%; }
}
34. <img src="fallback.jpg" alt="Foto da ponte"
srcset="img_360.jpg 360w,
img_720.jpg 720w,
img_1440.jpg 1440w,
img_2560.jpg 2560w"
sizes="(min-width: 1600px) calc(33vw - 6em),
(min-width: 1024px) 50vw,
calc(100vw - 2em)">
35. SRCSET
Escolha imagem pra fallback no src
Só use para mesma imagem, tamanhos diferentes
Se usar w, use o sizes
É UMA DICA PARA O BROWSER
48. imagem full
recorte 2 colunas
1 coluna retina
foto.jpg
recorte.jpg
<picture>
<source>
100vw
50vw
<img sizes>
responsivo
foto_800.jpg
foto_1200.jpg
foto_1600.jpg
recorte_320.jpg
recorte_600.jpg
recorte_1100.jpg
srcset
67. COLADensidade de tela (retina)
<img srcset> com 1x/2x
Tamanhos & densidades diferentes
<img srcset sizes> com w
Direção de arte
<picture> + <source media="(min-width)">
Media queries (print, monochrome, color…)
<picture> + <source media="print">
Formatos (mime type)
<picture> + <source type="image/webp">
Tamanhos e densidade diferentes, com direção de arte, formatos
diferentes e imagens pra impressão
<picture> + srcset + sizes + <source media> + <source type> !!