Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Responsywne obrazki. Media queries to hack?

1,828 views

Published on

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

Published in: Software
  • Be the first to comment

  • Be the first to like this

Responsywne obrazki. Media queries to hack?

  1. 1. RESPONSYWNE OBRAZKI. MEDIA QUERIESTO HACK? Krystian Parma The Software House
  2. 2. RESPONSYWNE OBRAZKI Czyli co zrobić, żeby mój kot wyglądał 
 dobrze na każdym urządzeniu?
  3. 3. Duży i puchaty Malutki i łysy Duży plik, duży rozmiar Mały plik, mały rozmiar
  4. 4. DLACZEGO DBANIE 
 O ZDJĘCIA KOTÓW JESTTAKIE WAŻNE?
  5. 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. 6. ~60% INTERNETÓWTO OBRAZKI* 37% 63% *httparchive.org, 1 lipca 2015
  7. 7. ZDJĘCIA KOTÓWTO 
 10% INTERNETU!
  8. 8. JAK SPRAWIĆ ŻEBY MÓJ KOT WYGLĄDAŁ DOBRZE?
  9. 9. CZEGO CHCEMY? • dobra jakość • odpowiednia rozdzielczość 
 w zależności od ekranu
  10. 10. JAK BYŁO KIEDYŚ <img src="koteł.jpg" alt="miau miau">
  11. 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. 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. 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. 14. LET’S CZEKIRAŁT
  15. 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. 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. 17. SIZES sizes="(min-width: 36em) 33.3vw, 
 (min-width: 40em) calc(100vw - 300px),
 100vw" warunek @media rozmiar obrazka 
 na ekranie
  18. 18. KIEDY JEDEN 
 KOTTO ZA MAŁO… CZYLI SŁOWO O ART DIRECTINGU
  19. 19. 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>
  20. 20. IMG source source source source so much rules! hard choices
  21. 21. PODSUMOWUJĄC <img> + srcset/sizes • dokładnie ten sam obrazek • prostota użycia <picture> • art directing, • dobór formatu pliku, • więcej kodu
  22. 22. WSPARCIE PRZEGLĄDAREK IE 11 Firefox 39 Chrome 43 Safari 8 iOS Safari 8.3 Chrome for Android 42 picture ✓ ✓ ✓ srcset (w Edge) ✓ ✓ ✓* ✓* ✓
  23. 23. CZEGO UŻYĆ W ZAMIAN • https://github.com/scottjehl/picturefill
  24. 24. JAKIEŚ PYTANIA 
 DOTEJ CZĘŚCI?
  25. 25. DLACZEGO MQ NIE SĄ ROZWIĄZANIEM? • brak modułowości, • nieprzenoszalny kod, • kiepska zarządzalność
  26. 26. CZY MEDIA QUERIES 
 TO HACK?
  27. 27. @media screen and (min-width: 3000px) { background: pink; font-family: ‘Comic Sans’; }
  28. 28. Lorem ipsum dolor 12.03.2015 Lorem ipsum dolor 12.03.2015
  29. 29. 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!!!
  30. 30. MEDIA QUERIES • zachowanie elementu zależy tylko od wielkości okna przeglądarki • nie można stworzyć biblioteki responsywnych, przenośnych modułów
  31. 31. ELEMENT QUERY
  32. 32. .element:media( min-width: 30em ) { background: pink; font-family: ‘Comic Sans’; }
  33. 33. .element:media( max-width: 399px ) { width: 400px; } .element:media( min-width: 400px ) { width: 399px; }
  34. 34. CONTAINER QUERY
  35. 35. .container:media( min-width: 30em ) { .element{ background: pink; font-family: ‘Comic Sans’; } }
  36. 36. CZEGO UŻYĆ W ZAMIAN • https://github.com/marcj/css-element-queries
  37. 37. CZEGO UŻYĆ W ZAMIAN • https://github.com/tysonmatanich/elementQuery
  38. 38. CZEGO UŻYĆ W ZAMIAN • https://github.com/ResponsiveImagesCG/cq-demos
  39. 39. DZIĘKUJĘ ZA UWAGĘ Macie jakieś pytania?

×