Gatsby.js: Jak działa Gatsby Image?

2.19.12+

0:00Żeby zrozumieć jak działa gatsby-image najpierw musimy dowiedzieć się czym są fragmenty

0:04w graphql fragmenty są niczym innym jak takim współdzielonym fragmentem

0:08kodu który zawiera jakieś predefiniowane pola w naszym query to

0:13znaczy że wykorzystując jakąś jedną nazwę poprzedzając ją trzykropkiem

0:17możemy dostać się do pewnych danych które dostaniemy w takiej

0:21paczce jakby pod właśnie nazwą którą wykorzystaliśmy i gatsby image

0:26z racji że wykorzystuje właśnie bardzo wiele danych do wyświetlenia

0:30naszego obrazka to wykorzystuje takie fragmenty graphql i

0:34tutaj się zaczynają schody ponieważ nie możemy tych fragmentów wykorzystać w graphql

0:38normalnie wyglądałoby to w ten sposób że mamy sobie na przykład gatsby-image

0:43sharp fixed a nasze query wygląda

0:47w ten sposób jak widzisz graphql od razu nam podświetla to

0:51ponieważ jest w pewien sposób ograniczone i po prostu nie rozumie

0:55o co nam chodzi natomiast w naszym gatsby będzie to działać bez zarzutu więc już teraz możemy

0:59sobie skopiować nasze query ale bez niczego w środku wrzucić je

1:04w tym miejscu i

1:09teraz w to puste miejsce tutaj wkleimy sobie coś co koresponduje

1:13z metodą którą wykorzystaliśmy tutaj mamy akurat fluid więc zatrzymajmy

1:17się przy tym fluid pamiętasz jaka była zasada fluid skaluje się do

1:22szerokości kontenera fixed ma określoną wysokość i szerokość więc

1:26teraz weźmy sobie na przykład to pierwsze z brzegu gatsby image sharp fluid

1:30jeśli wykorzystujemy fixed wszystko musi być zakończone na fixed jeśli wykorzystujemy

1:34fluid wykorzystujemy te które mają po prostu w nazwie fluid prosta zasada

1:39łatwo ją zapamiętać jak zapamiętać tę długą listę rzeczy

1:43ja tego jeszcze do dzisiaj nie zrobiłem i tobie też nie radzę nie wiem czy

1:47ma to jakikolwiek sens więc może po prostu warto odwiedzić stronę z dokumentacją

1:51i za każdym razem sobie skopiować to co potrzebujemy zaraz wyjaśnię ci

1:55na czym polegają te dodatkowe opcje które mamy tutaj bo to też jest również całkiem ciekawe

2:00ale najpierw wykorzystajemy sobie tą podstawową wersję więc teraz tutaj

2:04wykorzystam fragment czyli wykorzystuję wielokropek i

2:09podaję nazwę gatsby image sharp fluid to

2:14wszystko co muszę zrobić następną rzeczą jak zobaczysz jest po prostu wykorzystanie

2:18gatsby image które wygląda

2:24w taki sposób gatsby-image mamy zainstalowane już wcześniej przez

2:28przez gatsby w naszym repozytorium więc wystarczy że pobierzemy sobie

2:32image from gatsby image możemy

2:36to nazwać image a możemy to nazwać img pisane wielką literą jak wolisz

2:41ja na razie zostawię sobie image to

2:47sobie wywalimy podamy

2:52tutaj image i

2:57teraz w przeciwieństwie do tego img które mamy w html czy to w jsx

3:01ale to jest w tym przypadku to samo image

3:06nie przyjmuje src tylko przyjmuje propsa albo fluid albo

3:11fixed zależy co wykorzystujemy w naszym przypadku wykorzystujemy fluid więc

3:15musimy podać fluid i zauważ że nie podajemy

3:19już tego fragmentu który był tutaj podajemy wszystko co znalazło się aż

3:23do tego punktu tutaj akurat mamy przykład z fixed ale my wykorzystamy fluid

3:27więc wkleję sobie to tutaj data file się zgadza child image

3:32sharp też tutaj mamy fluid i to jest wszystko co muszę tutaj wpisać

3:36teraz jak sobie to zapiszę i odpalę

3:40naszą stronę to nasz obrazek pojawił się na dole wynika

3:50to z faktu że po prostu te style nie są zaaplikowane więc spróbujmy zaaplikować

3:55te style do styled component wykorzystując image

3:59który zaimportowaliśmy sobie do tego pliku nie

4:05jestem pewien co się stanie bo tak jak mówiłem pozycjonowanie tych obrazków nie jest

4:09najprzyjemniejsze na świecie i tak jak myślałem wydarzyło coś czego nie chciałem zauważ że

4:21jak dodałem important do position absolute to ten obrazek się wczytał

4:25i teraz właśnie ocho teraz jest coś najlepszego tutaj w tym wszystkim już

4:30pewnie to widziałeś widziałaś ale jeszcze raz to zrobię tylko sobie włączę

4:34network i jakieś throttle tutaj zapodamy slow

4:413g odświeżam stronę i zauważ że nasz

4:45obrazek przez chwilkę był faktycznie taki niewyraźny taki zblurowany

4:49i oczywiście jesteśmy teraz w środowisku deweloperskim więc to

4:53nie jest jeszcze jakoś super zoptymalizowane ale kiedy wjadę już te wszystkie optymalizacji od gatsbiego

4:57które spowodują że ta strona wczytuje się jeszcze szybciej to doładowanie obrazków

5:02naprawdę robi robotę problem pojawia się jednak w momencie kiedy zobaczymy sobie

5:06co tutaj się znajduje i tutaj mamy kilka rzeczy które mi się osobiście nie za

5:10bardzo podobają na przykład mamy obrazek w formacie base 64 który w przypadku

5:14takich zdjęć jest po prostu nie za dobry ponieważ mocno obciąża procesor i

5:18żeby to wyświetlić to z reguły jest około 16 razy wolniejsza od zwykłych

5:22obrazków więc no niekoniecznie chciałbym to wykorzystywać nie wiem w sumie po

5:27co oni to wykorzystują tutaj w gatsby-image też jakoś specjalnie w to nie wnikałem

5:31po prostu tego nie używam ale mamy za to specjalne fragmenty które mają na przykład no

5:35base 64 i teraz jak sobie to wykorzystamy

5:39tutaj

5:44oczywiście nic nie zmieniam bo fluid jak był tak był a

5:50mądre gatsby mówi że nie mogę wykorzystać fixed ponieważ używam fluid

5:54no tak zagapiłem się fluid i

6:01teraz jak sobie tu wrócimy to już nie będzie tego base 64

6:05i mamy z głowy a ładowanie jak było tak

6:09było że jak było base 64 to

6:14jeszcze był taki fajny blur a teraz jest tylko takie mleczne po prostu pojawienie się

6:18i mamy jeszcze bardzo ciekawą opcję tracedSVG

6:22zaraz ci pokażę jak to działa jak sobie wpiszemy gatsby

6:26image tracedSVG to zobaczysz tutaj na przykład przykład strony

6:30który właśnie robi coś takiego jak najadę teraz na ten obrazek to

6:34zobaczysz jak wygląda tracedSVG dla dla danego obrazka i zauważ że

6:38to jest po prostu kształt tego jak ten obrazek wygląda przed

6:42wczytaniem jak wiadomo pliki svg są dużo lżejsze

6:47od plików rastrowych czyli obrazków z reguły oczywiście

6:51chyba są jakoś super skomplikowane ale z reguły są szybsze bo są po prostu

6:55pliki tekstowe więc jeśli teraz wrócimy sobie tutaj i

6:59wpiszemy no właśnie musimy zerknąć na dokumentację tracedSVG

7:03mamy gatsby image sharp fluid

7:09podkreślnik tracedSVG i

7:16teraz jeśli zapodamy sobie to tutaj zwiększyłem trochę wymiary

7:20żeby ten obrazek się wolniej ładował a

7:24przy okazji zrobimy sobie jeszcze jakiś throttle może fast 3g zobaczymy

7:28to zobacz co się wydarzy zauważ że

7:33najpierw ładuje nam się tracedSVG a później dopiero nasz obrazek i to jest

7:37z punktu widzenia ux uczyli user experience bardzo fajna

7:41rzecz bo jeśli mamy dużo obrazków na naszej stronie tak jak na przykład właśnie

7:45mieliśmy tutaj to one się ładują najpierw ale już widzimy jakieś

7:49takie placeholdery dla obrazków które za chwilkę się wczytają więc to jest naprawdę mega

7:53spoko bo użytkownik nie musisz czekać na ten content ten content też nie

7:57lata po naszej stronie on po prostu gdzieś tam jest i zaraz będzie wczytany to jest taka

8:01obietnica dla użytkownika słuchaj tutaj za chwilę pojawi się obrazek na

8:05razie masz tutaj taki kształt który może ci po prostu powiedzieć co tam mniej więcej może być

8:09moim zdaniem mega fajne rozwiązanie i to jest akurat przewaga ogromna

8:14przewaga gatsby image nad takim zwykłym tagiem img więc

8:18tobie pozostawiam wybór kiedy i gdzie to wykorzystywać w trakcie tego kursu jeszcze zobaczysz

8:22sobie właśnie różne zastosowania tego rozwiązania a

8:27teraz wróćmy jeszcze na chwilę do naszego obrazka wywalmy

8:31sobie może ten styled image po prostu wykorzystajmy tutaj zwykły image i

8:36chcemy tym razem użyć fixed jedyne co muszę

8:40zrobić to zastąpić fluid na fixed i max width zamienić

8:44width height i powiedzmy

8:49że tu będzie 100 na 160 nawet no to może

8:53trochę więcej i tutaj też musi być fixed

8:57oczywiście nasz obrazek się rozleci będzie tym razem na dole

9:01ale chciałem ci pokazać o co tutaj chodzi że w momencie kiedy mamy

9:05podane wymiary czyli width i height to ten obrazek

9:09nie dość że się skaluje do tych wymiarów bez css to

9:14jeszcze wykorzystuje

9:18wszystko tutaj to co mamy po drodze więc teoretycznie moglibyśmy nasze obrazki

9:23pozycjonować i stylować bez użycia css

9:27więc na przykład jeśli teraz wywalę sobie height i

9:31będziemy mieć tylko width na przykład 300 to ten obrazek będzie miał 300

9:35szerokości a wysokość zostanie dopasowana automatycznie o

9:41i mamy proporcje obrazka odpowiednio zachowanie i w taki sposób działa fixed

9:45z reguły wtedy no nie wiem czy jest sens używania wtedy jakichś

9:50styled component dla takich obrazków na bo jednak deklarujemy jego wielkość

9:54w innym miejscu moglibyśmy ewentualnie zrobić coś takiego że

9:59nie deklarujemy wtedy width i height dlatego tylko i

10:03nawet tego nie musimy deklarować tylko deklarujemy pozycję

10:08i wtedy faktycznie ten obrazek fixed również działa

10:12ale tak jak mówię go się wykorzystuje

10:16w momentach kiedy wiemy jaka ma być wielkość danego obrazka a tutaj no

10:21nie wiemy jaka ona będzie no bo zależnie od tego jaka jest szerokość ekranu

10:25to ten hero ma się zmieniać trochę wiadomo że tu nie mamy wersji mobilnej ale mimo wszystko

10:29jest to dla nas nie wiadoma jaki ten hero image będzie duży więc to

10:33tyle jeśli chodzi o wykorzystywanie gatsby image mam nadzieję że ci to dobrze

10:37wytłumaczyłem dla mnie na samym początku kiedy się tego uczyłem to było naprawdę dość

10:41trudne do zrozumienia ale też dokumentacja nie była tak dobrze przygotowana jak w tym momencie teraz

10:45mamy tutaj wszystko wylistowane elegancko po tym jak ci to wyjaśniłem po zabawach

10:49w graphql ze zwykłymi queries które były w poprzedniej lekcji wydaje

10:54mi się że będziesz spokojnie mógł mogła wykorzystać teraz gatsby image do

10:58tego żeby trochę poeksperymentować i zobaczyć jak to wszystko działa a już w następnym

11:03rozdziale pokażę ci jak ogarniamy data flow w gatsby i jak

11:07możemy zarządzać nim z poziomu takiego podstawowego cms