RESPONSYWNE OBRAZKI. MEDIA QUERIES TO HACK?

Krystian ParmaThe Software House

RESPONSYWNE OBRAZKICzyli co zrobić, żeby mój kot wyglądał

dobrze na każdym urządzeniu?

Duży i puchaty

Malutki i łysy

Duży plik, duży rozmiar

Mały plik, mały rozmiar

DLACZEGO DBANIE O ZDJĘCIA KOTÓW JEST TAKIE WAŻNE?

15% RUCHU W SIECI DOTYCZY KOTÓW

http://www.breitbart.com/blog/2013/09/02/15-of-all-internet-traffic-is-cat-related/

~60% INTERNETÓW TO OBRAZKI*

37%

63%

*httparchive.org, 1 lipca 2015

ZDJĘCIA KOTÓW TO 10% INTERNETU!

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

CZEGO CHCEMY?

• dobra jakość

• odpowiednia rozdzielczość w zależności od ekranu

JAK BYŁO KIEDYŚ

<img src="koteł.jpg" alt="miau miau">

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/

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

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 taknie

tak (dzięki srcset)

https://ericportis.com/posts/2014/srcset-sizes/

LET’SCZEKIRAŁT

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!">

SRCSET

Wielkość obrazka źródłowegosrcset="lg.jpg 1024w, md.jpg 640w, sm.jpg 320w"

Gęstość ekranusrcset="normal.jpg 1x, retina.jpg 2x"

SIZES

sizes="(min-width: 36em) 33.3vw, (min-width: 40em) calc(100vw - 300px), 100vw"

warunek @media rozmiar obrazka na ekranie

KIEDY JEDEN KOT TO ZA MAŁO…

CZYLI SŁOWO O ART DIRECTINGU

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>

IMG

sourcesource

source source

so much rules!hard

choices

PODSUMOWUJĄC<img> + srcset/sizes

• dokładnie ten sam obrazek

• prostota użycia

<picture>

• art directing,

• dobór formatu pliku,

• więcej kodu

WSPARCIE PRZEGLĄDAREK

IE 11 Firefox 39 Chrome 43 Safari 8 iOS Safari 8.3 Chrome for Android 42

picture ✓ ✓ ✓

srcset (w Edge) ✓ ✓ ✓* ✓* ✓

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

JAKIEŚ PYTANIA DO TEJ CZĘŚCI?

DLACZEGO MQ NIE SĄ ROZWIĄZANIEM?

• brak modułowości,

• nieprzenoszalny kod,

• kiepska zarządzalność

CZY MEDIA QUERIES TO HACK?

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

Lorem ipsum dolor12.03.2015

Lorem ipsum dolor12.03.2015

Lorem ipsum dolor12.03.2015

Lorem ipsum dolor12.03.2015

Lorem ipsum dolor12.03.2015

Lorem ipsum dolor12.03.2015

CAT FOUND ON THE PLUTO!!!

BREAKING NEWS!!! BREAKING NEWS!!! BREAKING NEWS!!!

MEDIA QUERIES

• zachowanie elementu zależy tylko od wielkości okna przeglądarki

• nie można stworzyć biblioteki responsywnych, przenośnych modułów

ELEMENT QUERY

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

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

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

CONTAINER QUERY

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

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

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

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

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