Wordpress: Praca z Obrazami

0:00Witaj w kolejnej lekcji! Gdzie możesz znaleźć masę świetnych obrazów na potrzeby Twojej

0:04witryny? Na przykład na pexels.com, aczkolwiek w  komentarzu podrzucam także szereg

0:08innych bardzo podobnych serwisów. Tutaj znajdziemy zdjęcia na licencji

0:13głównie CC0, czyli możesz ich używać nawet bez atrybucji, aczkolwiek

0:17zawsze warto sprawdzić, jaka jest licencja na konkretne zdjęcie. Tutaj

0:22większość tych zdjęć jest darmowych, wyglądają świetnie i możesz z powodzeniem

0:26używać ich w ramach swojej witryny. Także otwieramy

0:30sobie kilka z tych zdjęć, które chcemy wykorzystać. Możemy

0:35pobrać je z pomocą opcji Free Download. Teraz jak takie zdjęcie wstawić do

0:39WordPressa? Istnieje przynajmniej kilka sposobów, jak można to zrobić. Takim

0:43podstawowym sposobem, a znanym również ze starszych wersji WordPressa,

0:47jest biblioteka mediów. Tutaj mamy możliwość przejścia

0:52do całej biblioteki zasobów, z których korzystamy na potrzeby różnych

0:56naszych postów i po prostu dodać sobie takie zdjęcie jako nowy

1:00zasób. Możemy wybrać pliki z naszego komputera, możemy także po prostu przeciągnąć

1:05i upuścić te pliki, aby je dodać. Więc mogę teraz przeciągnąć i upuścić

1:09to zdjęcie i jak widzisz, ono już jest dodane do naszej biblioteki. Możemy rzecz

1:15jasna zrobić to bezpośrednio z takiego wpisu, który edytujemy, czyli

1:19przykładowo dodać sobie tutaj nowy blok, a następnie

1:23znaleźć taki blok, jak przykładowo zdjęcie. Mamy tutaj Obrazek i Galeria. Wybierzmy Obrazek. No i

1:30tutaj mamy kilka opcji. Albo skorzystać z tej biblioteki mediów, o której wspomniałem,

1:34i którą możemy sobie przygotowywać i w niej dodawać różne rzeczy, takie reużywalne

1:39na potrzeby wielu postów. W tym momencie jak wybierzemy tę bibliotekę

1:43i przejdziemy do niej, to to zdjęcie jest już dostępne i mogę je wybrać. Ewentualnie

1:49mogę to zamknąć. Możemy z naszego dysku wysłać

1:53obrazek bezpośrednio na serwer lub też wybrać obrazek z

1:58adresu URL, czyli po prostu skopiować na przykład sobie link, adres z

2:02tego zdjęcia i spróbować wstawić go tutaj. Niestety

2:07w takim przypadku, mimo że zdjęcie nam się pojawi, nie mamy gwarancji,

2:11że to zdjęcie będzie cały czas dostępne, ponieważ jeżeli zniknie albo zmieni się adres

2:16URL na serwisie Pexels, wtedy nie będzie ono wyświetlane.

2:20Plus jest taki, że bardzo łatwo to zrobić i nie musimy hostować tego u siebie. Ale ja mimo

2:24wszystko usuwam ten blok. No i pokazałem Ci, jak można to zrobić z biblioteką

2:28mediów, natomiast takim fajnym sposobem na skróty, który często

2:32wykorzystuję, jest możliwość po prostu przeciągnięcia i upuszczenia tego zdjęcia

2:37do posta. Możesz to zrobić ze swojego dysku, czyli możesz z dowolnego miejsca,

2:41gdy masz to zdjęcie na dysku, po prostu przeciągnąć i je upuścić, jeśli zobaczysz niebieską

2:45linię w poście. Ale to, co jest jeszcze ciekawsze, to

2:49to, że możesz zrobić to, nie zapisując zdjęcia bezpośrednio z przeglądarki. Jeśli

2:54mamy takie zdjęcie otwarte w przeglądarce i wiemy, że ma licencję, z pomocą

2:58której możemy je umieścić u nas na stronie, wystarczy, że przyciągniesz, upuścisz

3:02i to zdjęcie zostało w tym momencie dodane do naszego WordPressa. Pozwól,

3:07że to zamknę i zmniejszę to okno. Co to znaczy, że zostało dodane

3:11do naszego WordPressa? Jeśli przejdziesz znów do biblioteki mediów, okaże się, że

3:15zostało ono wgrane po prostu jako kolejne zdjęcie w bibliotece mediów,

3:19więc musisz też uważać na to, aby nie zduplikować tych zdjęć. W zasadzie

3:23później nie wiesz, z którego korzystasz, w którym wpisie. I gdy będziesz chciał

3:27zrobić porządek, przykładowo usunąć jakieś zdjęcie, bo można łatwo to zrobić z pomocą polecenia

3:31Usuń na zawsze, i niestety może się okazać, że taki zasób, takie zdjęcie było

3:35używane gdzieś w poście i wtedy ono zniknie, a nam będzie bardzo smutno. Dlatego polecam Ci

3:41mieć tutaj porządek, jeśli chodzi bibliotekę mediów. Po

3:45kliknięciu na taki obrazek jest bardzo fajna informacja, bo mamy

3:49też informację o tym, gdzie jest używane dane zdjęcie. I często bardzo

3:54fajnym zabijaczem czasu zamiast przewijania feedu na Instagramie będzie

3:58przewijanie feedu w naszej galerii. Możemy tu z pomocą przycisku w prawo, lewo poruszać

4:02się po poszczególnych zdjęciach i czyścić te zdjęcia, które nie są używane w żadnym

4:07miejscu po pierwsze, a po drugie proponuję zdecydowanie edytować ich

4:11metadane. Metadane to przede wszystkim tytuł i alternatywny tekst. Powinniśmy

4:16zmieniać te rzeczy, ponieważ są one istotne z punktu widzenia pozycjonowania. Więc

4:21jeśli tylko mamy możliwości, powinniśmy ustawić

4:25tytuł i alternatywny tekst. Może to być dokładnie to samo, nie ma problemu,

4:29ale po pierwsze ze względów accessibility, czyli dostępności, jest to ważne,

4:33ponieważ różne programy, które czytają dla osób niedowidzących to,

4:37co jest na stronie, czytają w ten sposób obrazki po alternatywnym tekście, no i

4:42jak również robot indeksujący Google również patrzy na to, czy są tu

4:46słowa kluczowe. Oczywiście nie wpisujmy tutaj tysięcy słów kluczowych, ale jedynie

4:50dokładnie opisujmy to, co znajduje się na obrazku. WordPress co prawda Photoshopem nie

4:55jest, ale można wejść w opcję edycji obrazka, następnie na nim kliknąć i skorzystać z

4:59opcji przycinania, opcji obracania, możemy też przeskalować

5:04obrazek. Oryginalny ma 2000 x 2000 pikseli, ale możemy wybrać sobie tutaj inną wartość. Zostanie

5:09ona przeliczona, a następnie przeskalować i zastosować te zmiany do

5:13wszystkich rozmiarów albo do miniatury, albo do wszystkich rozmiarów poza miniaturą.

5:17Co to w ogóle znaczy? Zamknijmy to na chwilę i przejdźmy na moment

5:21do ustawień. Ustawienia mediów pozwolą nam postawić rozmiary miniatur. Przykładowo

5:26w tym przypadku mamy 150 x 150. Średni rozmiar to 300

5:30x 300 i duży to 1024 x 1024. To znaczy, że pliki,

5:34które będą wysyłane do WordPressa, automatycznie będą generowały się

5:38przynajmniej w trzech rozmiarach. Naprawdę dobrą metodą jest przejście

5:42tutaj, jeśli już wiemy, jakie rozmiary potrzebuje nasz motyw

5:47po to, żeby te zdjęcia później nie były skalowane. Jeżeli przykładowo motyw używa

5:51gdzieś średniego rozmiaru, ale nie w wielkości 300 x 300, tylko 250

5:55x 250, to warto to tutaj zmienić, dlatego że niepotrzebnie nie

6:00będziemy przechowywali większych plików. No i dodatkowo nie będzie wymagane skalowanie

6:04już na etapie renderowania naszej strony takiego pliku. Teraz jeśli wejdziemy

6:08w Media, to mamy tutaj wielkość pliku i to jest coś, co ja już

6:12i tak zmniejszyłem na 2000 x 2000, a dalej ma 461 KB.

6:16Czy to jest dużo, czy mało? Skopiujmy sobie adres URL. Kliknę na nim i

6:21otworzę ten adres w osobnej karcie. Pokażę Ci, jak wygląda ta

6:25karta. W ten sposób możemy się dostać do takiego pliku. Teraz kliknij

6:29prawym przyciskiem myszy, przynajmniej jeśli jesteś w Chromie. Możesz tutaj wybrać narzędzia

6:33inspekcji, a następnie przejdź do zakładki Network, czyli

6:37Sieć. Tutaj będziesz mógł podejrzeć ładowane obrazki a po

6:42odświeżeniu dostaniesz informację o tym, jaka jest waga tego pliku. I

6:46okazuje się, że nie, wcale nie 460 KB, tylko aż 2 MB

6:50są ładowane. I o ile w moim przypadku ładowało się to jedną

6:54trzecią sekundy, to było to ładowane z mojego lokalnego dysku. W związku tym pokażę Ci

6:58jeszcze jedną ciekawostkę. Mianowicie jeśli przejdziesz tutaj do sekcji Online

7:03i wybierzesz na przykład szybkie łącze 3G i zasymulujesz

7:08tym samym ładowanie tego obrazka na takim łączu, to zobacz, ile

7:13będzie się ten obrazek musiał ładować. Jeśli mamy na przykład dziesięć

7:17takich obrazków na naszej stronie, nie ma szans, żeby ktokolwiek przetrwał

7:21ładowanie. Tutaj mamy jedenaście sekund na jeden obrazek. W związku

7:25tym, mimo że WordPress zmniejsza te obrazki, mimo że serwuje je często

7:30w odpowiednim, mniejszym formacie, jeśli są na przykład na stronach listingów,

7:34to warto żebyś wiedział, gdzie możesz to sprawdzić, jak przebiega ładowanie. Ja

7:38teraz wyłączę sobie ten Throttling tak zwany i dodatkowo

7:42warto, żebyś wiedział, jak można takie obrazki, jeszcze nawet przed wgraniem do WordPressa,

7:46trochę zoptymalizować. Polecam Ci stronę tinypng.com -

7:50ale znajdziesz w komentarzu jeszcze szereg innych linków - ponieważ pozwala

7:55ona tak pobrany plik jpg - no niestety wtedy odpada to przeciąganie i

7:59upuszczanie bezpośrednio do WordPressa - ale jeśli pobierzesz sobie plik

8:03na dysk, a następnie wrzucisz go tutaj, do Tinypng, to

8:08zobaczysz, że z 2 MB, które są tutaj ładowane tego pliku, Tinypng

8:12jest w stanie, gwarantuje Ci bez praktycznie żadnej widocznej utraty

8:16jakości tego pliku, skompresować go w tym przypadku aż

8:21o 67%, czyli zrobić z tego 684 KB. To i

8:25tak jest dużo na przykład na łącze 3G, ale spokojnie. Jesteśmy już bliżej celu, więc panda

8:29się nieźle napracowała, ale całkiem dobrze jej poszło. My możemy teraz pobrać sobie tak

8:34stworzymy obrazek, czyli to jest ten nasz nowy, mniejszy obrazek. I to,

8:38co z nim robimy, to teraz przechodzimy do biblioteki mediów. Te możemy

8:42już sobie podarować, po prostu wybiorę polecenie Usuń na zawsze. Przerzucę teraz i upuszczę

8:47ten nowy plik. Zostaje on dodany i zaraz zobaczymy, jak to wygląda. Ma

8:51rozmiar 4000, nawet jest większy, bo tamten już wcześniej zmieniłem i ma

8:56669 KB. To jest tak naprawdę jedyny sposób, w jaki my

9:00jesteśmy w stanie jeszcze bardziej zoptymalizować grafiki w

9:04ramach WordPressa i jeszcze bardziej przyspieszyć działanie naszej strony. Ponieważ później

9:08WordPress już naprawdę bardzo dobrze radzi sobie z generowaniem odpowiedniej

9:13wielkości miniaturek. Jedyne co jeszcze możesz ustawić, to jeżeli rzeczywiście wiesz,

9:17że obrazy średnio są wyświetlane w takiej i takiej wielkości innej niż te, które

9:21są wygenerowane - te trzy rozmiary miniaturek w sekcji Media - to możesz

9:25tutaj zmienić te rozmiary. Na przykład jeśli wiesz, że zwykle 1400

9:30na przykład ma rozmiar Twojego obrazka albo średni będzie też trochę większy czy mniejszy, możesz

9:34to zmienić w zależności od szablonów. Ale tak naprawdę teraz, jeśli wejdziemy do

9:38wpisów, nie będzie miało to aż tak dużego znaczenia w kontekście

9:42tego, jak ten obrazek będzie się wyświetlał, ponieważ WordPress automatycznie,

9:47w zależności od szerokości ekranu i motywów, wybierze sobie i załaduje

9:51odpowiedni rozmiar. Czyli tutaj załadował duży do tej aktualnie

9:55ramki, w której się znajdujemy, czyli wziął po prostu najbliższy z możliwych rozmiarów, który będzie

10:00nam tutaj pasował. No bo średni byłby już za mały. No

10:04i miniaturka zdecydowanie odpada w związku z tym ten duży rozmiar

10:08będzie tutaj odpowiedni, a pełny, gdybyśmy wybrali, zauważ, że on się nie

10:12zmienił, tylko zmienił się jeśli chodzi o jakość, ale tak naprawdę 100% tego pełnego rozmiaru

10:16to jest bardzo duży obraz. W związku z tym tutaj możemy wybrać po

10:20prostu ten najbliższy temu, co będzie prezentowane, a następnie

10:25zapisać i opublikować taki post. Teraz jeśli zobaczymy ten wpis,

10:29to okaże się że WordPress naprawdę świetnie sobie radzi z tym, żeby

10:33jeśli wybierzemy narzędzia inspekcji i przejdziemy do sekcji Network,

10:38następnie Cmd+R sobie odświeżymy, on świetnie radzi sobie z

10:42tym. A tutaj akurat już ładowane to jest z cache na dysku, więc upewnijmy się, że

10:47mamy opcję Disable cache, żeby wszystko zostało jeszcze raz załadowane. I załadował on

10:52rozmiar 311 KB, więc prawdopodobnie ten rozmiar

10:56duży właśnie został tutaj odpowiednio załadowany. Natomiast może się okazać,

11:00że w przypadku gdybyśmy mieli zdecydowanie mniejszy viewport i aż

11:04tak duży obrazek nie były potrzebny, wybierzemy Cmd+R i ten

11:08obrazek zostanie przeładowany na wielkość 163 KB, czyli WordPress już

11:13rozpoznaje te rozmiary i ładuje w zależności od tego, jaka jest

11:17wielkość ekranu, ten odpowiedni obrazek. Także to jest super, ale

11:22tak jak wspomniałem, jeżeli my na wejściu damy mu obrazek, który

11:26ma 2 MB, no to on z tego zrobi... odpowiednio go skompresuje,

11:30ale zrobi odpowiednio większy obrazek. A jeśli na początku zmienimy

11:34jego rozmiary z pomocą na przykład Tinypng i dopiero zaimportujemy do WordPressa, uzyskamy

11:38znacznie lepsze wyniki wydajności. Przy okazji pokazałem Ci, jak testować Twoją

11:43stronę. Wbrew pozorom jest to bardzo ważne, ponieważ przechodząc do

11:47tej zakładki Network, wyłączając sobie cache, aby wszystko było wymuszane

11:52przeładowanie i ewentualnie jeszcze przełączając się na jakąś

11:56prędkość sieci, możesz tutaj sobie dodać jakieś customowe profile. Nawet w prędkości

12:01sieci będziesz mógł zasymulować, jak Twoja strona, jak Twój WordPress

12:05będzie działał. Zwłaszcza w przypadku tego, gdy pracujemy lokalnie, jest

12:09to ważne. No, ponieważ okaże się, że lokalnie to wszystko naprawdę super szybko

12:13się ładuje, tymczasem na przykład na jakimś w miarę szybkim łączu 3G

12:17może ładowanie naszej strony już tym momencie przekroczyć trzy i pół sekundy. To

12:22wszystko, co chciałem pokazać Ci w tej lekcji. Do usłyszenia!