Jak sprawić, żeby zdjęcia kotków wyglądały dobrze na każdym urządzeniu? Kiedy media queries nie wystarczają - czyli o element queries słów kilka. Kod źródłowy do prezentacji: https://github.com/UszanowankoProgramowanko/responsive-images-examples

1. RESPONSYWNE OBRAZKI.
MEDIA QUERIESTO HACK?
Krystian Parma
The Software House

2. RESPONSYWNE OBRAZKI
Czyli co zrobić, żeby mój kot wyglądał
dobrze na każdym urządzeniu?

3. Duży i puchaty
Malutki i łysy
Duży plik, duży rozmiar
Mały plik, mały rozmiar

4. DLACZEGO DBANIE
O ZDJĘCIA KOTÓW
JESTTAKIE WAŻNE?

5. 15% RUCHU W SIECI
DOTYCZY KOTÓW
http://www.breitbart.com/blog/2013/09/02/15-of-all-internet-traffic-is-cat-related/

6. ~60% INTERNETÓWTO OBRAZKI*
37%
63%
*httparchive.org, 1 lipca 2015

7. ZDJĘCIA KOTÓWTO
10% INTERNETU!

8. JAK SPRAWIĆ ŻEBY MÓJ KOT
WYGLĄDAŁ DOBRZE?

9. CZEGO CHCEMY?
• dobra jakość
• odpowiednia rozdzielczość
w zależności od ekranu

10. JAK BYŁO KIEDYŚ
<img src="koteł.jpg" alt="miau miau">

11. O CZYM WIE…
developer przeglądarka
rozmiar okna nie tak
rozmiar obrazka w zależności
od rozmiaru okna tak nie
gęstość pikseli ekranu nie tak
rozmiar obrazka tak nie
https://ericportis.com/posts/2014/srcset-sizes/

12. JAK JEST DZIŚ
<img srcset="lg.jpg 1024w, md.jpg 640w, sm.jpg 320w"
sizes="(min-width: 36em) 33.3vw,
(min-width: 40em) calc(100vw - 300px),
100vw”
src=“fallback.jpg"
alt=“Hello!”>
<picture>
<source media="(min-width: 40em)"
type="image/webp"
srcset="big.webp 1x, big-hd.webp 2x”>
<source type="image/webp"
srcset="small.webp 1x, small-hd.webp 2x”>
<source media="(min-width: 40em)"
srcset="big.jpg 1x, big-hd.jpg 2x">
<source srcset="small.jpg 1x, small-hd.jpg 2x”>
<img src="fallback.jpg" alt=“Hello!">
</picture>
img + srcset picture

13. O CZYM WIE…
developer przeglądarka
rozmiar okna nie tak
rozmiar obrazka w zależności
od rozmiaru okna tak
nie
tak (dzięki sizes)
gęstość pikseli ekranu nie tak
rozmiar obrazka tak
nie
tak (dzięki srcset)
https://ericportis.com/posts/2014/srcset-sizes/

14. LET’S
CZEKIRAŁT

15. NOWY IMG
<img srcset="lg.jpg 1024w, md.jpg 640w, sm.jpg 320w"
sizes="(min-width: 36em) 33.3vw,
(min-width: 40em) calc(100vw - 300px),
100vw”
src=“fallback.jpg"
alt="Hello!">

16. SRCSET
Wielkość obrazka źródłowego
srcset="lg.jpg 1024w, md.jpg 640w, sm.jpg 320w"
Gęstość ekranu
srcset="normal.jpg 1x, retina.jpg 2x"

17. SIZES
sizes="(min-width: 36em) 33.3vw,
(min-width: 40em) calc(100vw - 300px),
100vw"
warunek @media rozmiar obrazka
na ekranie

18. KIEDY JEDEN
KOTTO ZA MAŁO…
CZYLI SŁOWO O ART DIRECTINGU

23. PICTURE
<picture>
<source media="(min-width: 40em)"
type="image/webp"
srcset="big.webp 1x, big-hd.webp 2x”>
<source type="image/webp"
srcset="small.webp 1x, small-hd.webp 2x”>
<source media="(min-width: 40em)"
srcset="big.jpg 1x, big-hd.jpg 2x">
<source srcset="small.jpg 1x, small-hd.jpg 2x”>
<img src="fallback.jpg" alt=“Hello!">
</picture>

24. IMG
source
source
source
source
so much
rules!
hard
choices

25. PODSUMOWUJĄC
<img> + srcset/sizes
• dokładnie ten sam
obrazek
• prostota użycia
<picture>
• art directing,
• dobór formatu pliku,
• więcej kodu

26. WSPARCIE PRZEGLĄDAREK
IE 11 Firefox 39 Chrome 43 Safari 8 iOS Safari 8.3
Chrome for
Android 42
picture ✓ ✓ ✓
srcset (w Edge) ✓ ✓ ✓* ✓* ✓

27. CZEGO UŻYĆ W ZAMIAN
• https://github.com/scottjehl/picturefill

28. JAKIEŚ PYTANIA
DOTEJ CZĘŚCI?

30. DLACZEGO MQ NIE SĄ ROZWIĄZANIEM?
• brak modułowości,
• nieprzenoszalny kod,
• kiepska zarządzalność

31. CZY MEDIA QUERIES
TO HACK?

32. @media screen and (min-width: 3000px)
{
background: pink;
font-family: ‘Comic Sans’;
}

33. Lorem ipsum dolor
12.03.2015
Lorem ipsum dolor
12.03.2015

34. Lorem ipsum dolor
12.03.2015
Lorem ipsum dolor
12.03.2015
Lorem ipsum dolor
12.03.2015
Lorem ipsum dolor
12.03.2015
CAT FOUND ON THE PLUTO!!!
BREAKING NEWS!!! BREAKING NEWS!!! BREAKING NEWS!!!

35. MEDIA QUERIES
• zachowanie elementu zależy tylko od wielkości
okna przeglądarki
• nie można stworzyć biblioteki responsywnych,
przenośnych modułów

36. ELEMENT QUERY

37. .element:media( min-width: 30em ) {
background: pink;
font-family: ‘Comic Sans’;
}

39. .element:media( max-width: 399px ) {
width: 400px;
}
.element:media( min-width: 400px ) {
width: 399px;
}

42. CONTAINER QUERY

43. .container:media( min-width: 30em )
{
.element{
background: pink;
font-family: ‘Comic Sans’;
}
}

44. CZEGO UŻYĆ W ZAMIAN
• https://github.com/marcj/css-element-queries

45. CZEGO UŻYĆ W ZAMIAN
• https://github.com/tysonmatanich/elementQuery

46. CZEGO UŻYĆ W ZAMIAN
• https://github.com/ResponsiveImagesCG/cq-demos

47. DZIĘKUJĘ ZA UWAGĘ
Macie jakieś pytania?