 Cześć! Nazywam się Marcin Pietrzak. Pracuję w firmie WP Mudew, w której jestem robotnikiem. Ja wiem, niektórzy... A, no tak, zapomniałem. W którym jestem... Może się to komuś nie spodobać, robotnikiem, tak? Mogę wytłumaczyć potem, dlaczego tak? Tak uważam. Zajmuję się tam kilkoma wtyczkami, dla których jestem prowadzącym tych wtyczek. Są cztery wtyczki. No i na co dzień zajmuję się po prostu WordPressem. WordPressem zajmuję się od wielu, wielu lat. Wstyd się przyznać, ludzie tyle nie żyją. I chciałem wam dzisiaj opowiedzieć o braskach. Moja prezentacja jest w ścieżce technicznej, ale wydaje mi się, że nie powinna być w ścieżce technicznej. Natomiast na początku, jak o niej myślałem, to myślałem o tym, żeby była w ścieżce technicznej. Ale po tym, jak spędziłem trochę czasu na dekranem, na której była szybka transformata furiera, to stwierdziłem, że to za trudne jest nawet dla mnie. Więc chyba byśmy wtedy mieli, no, no, no, nie fajne wrażenie. To są moje dane. Jeszcze je wyświetlę. Te świetne zdjęcie zrobił Wojtek, więc jak chcecie mieć świetne zdjęcie, to do naszego fotografa nadwornego. Halo, a, dobra. I tyle, no, już byłem opowiedziany. Przedstawiam się znowu. Możemy, możemy, możemy zaczynać, tak? Co jest z całym tej prezentacji? Chciałem wam powiedzieć, jakie typy obrazów używamy na stronach, jakie typy obrazów używacie na stronach. Kiedy i który z tych typów powinniśmy używać, jak to się dzieje w WordPressie, chociaż tego będzie może trochę najmniej, i jak ten proces optymalizacji i wyboru zrobić tak, żebyśmy go nie widzieli. Bo nikt nie chce mieć więcej pracy, tak? Najlepsza optymalizacja jest ręczna, o tym będę mówił, ale nikt z nas tego nie chce robić. Tak, przynajmniej mi się wydaje, oprócz Wojtka. Popatrzcie na te logo. Jest sobie logo. Ono specjalnie jest takie małe. To nie jest błąd prezentacji. Ono jest naprawdę specjalnie takie małe, dlatego że to jest rzeczywisty rozmiar. Po lewej widzicie logo, który jest podpisany jako raster, a po drugiej stronie jako wektor. To jest podstawowa pierwsza różnica między obrazkami, które możecie używać, czyli możecie używać albo obrazów rastrowych, czyli obrazów, które składają się z punkcików, z rastrów, które mają odpowiednie właściwości, że jeden jest czarny, drugi biały, trzeci przezroczysty, lub mogą się składać z linii, które odpowiednio powyginane, tworzą jakieś krzywe i te krzywe mogą mieć jakieś właściwości typu, mogą mieć jakieś wypełnienie, lub nie mieć tego wypełnienia, mogą być wypełnione. I tak jak widzicie, to po lewej, to jest obrazek typu PNG i ta liczba pod spodem to jest liczba bajtów, jaką ten obrazek ma. To są 202 bajty, 2 tysiące, słusznie, czujnie, ktoś mnie słucha, i logo wektorowe po prawej stronie, które ma 1323 i w nawiasie 615. Dlaczego 615? Puszczenie grafiki typu PNG przez GZIP, który może nam zmniejszyć wielkość serwowanego contentu, nic nie daje, natomiast przepuszczenie pliku wektorowego, który jest plikiem tekstowym, przez wbudowany serwer, tego wy nie widzicie, ani wy tego nie widzicie, ale czuję to serwer i czuję to przeglądarka użytkownika, plik SVG, bo to jest plik SVG, skompresowany GZIP ma tylko 615 znaków. Różnica jest widoczna. I teraz to jest właśnie wielkość naturalna, ale co się stanie? Na pewno to jużście widzieli na stronach, jak sobie powiększycie obrazek. To jest ten sam obrazek, tylko po prostu zrobiony większy, nieprawidłową metodą, że powiększamy sobie obrazek, zapisujemy go w większej rozdzielucie, tylko to jest ten sam obrazek, co przed chwilą, tylko na danemu są sztywno dużo większe wymiary zewnętrzne. Jak widzicie, obrazek składający się z pikseli, on już jest widoczny, że się składa z pikseli, prawda, jest brzydki w ogóle. Logo wektorowe zachowało wszystkie swoje kształty, czyli podstawowa różnica między grafiką wektorową a grafiką rastrową jest taka, raster wygląda tylko dobrze do jakiegoś powiększenia w górę i w dół, ale w dół ze względu na różnicę w sposobie wyświetlania mogą się pojawić artefakty, tak. Wiecie dobrze, że zdjęcie wielkie na cały ekran można w połowie ekranu wyświetlić i wygląda dobrze, tak, nic się nie dzieje. Natomiast drugą stronę nie jest już tak dobrze i tutaj mamy podstawowe różnice. Ja o tych różnicach jeszcze będę dalej opowiadał, bo omawiałem poszczególne rodzaje plików. To jest te pięć rodzajów plików, które mniej lub bardziej używacie. Tutaj zapisałem dla uproszczenia nie ich nazwy, tylko ich rozszerzenia, tak żebyśmy nie mieli wątpliwości, że takie są i to są tak jak widzicie na liście, jest to GIF, PNG, JPEG, SVG i czcionki. Tak, czcionki też są plikami graficznymi. Mało tego czcionki są bardzo sprytnym plikiem graficznym, bo tak naprawdę jest to plik, który zawiera dziesiątki plików graficznych zwane GIF-ami, znakami czy jakkolwiek tam. I to są te pięć plików, tych pięć rozszerzeń prawdopodobnie znajduje się w każdym waszym, no może nie na każdej, ale na sporej ilości stron. Jeżeli używacie motywów domyślnych, a już jeżeli używacie 2017, to wszystkie występują. Czym jest plik GIF? Plik GIF jest najstarszym używanym plikiem w internecie. To jest wszystkie te nazwy plików, to są jakieś skróty, ale ja ich nie potrafiłem się nauczyć, więc dla chętnych zadanie sprawdzić, jak się nazywają te, jak te skróty się rozszerzają. Jakie są zalety i wady pliku GIF? Plik GIF powinniśmy przede wszystkim używać do niewielkich elementów graficznych strony, do logotypów, dlatego że jest to plik dostosowany do tego. Troszeczkę jest z tym plikiem związany pewien mit, który jest nieprawdziwy. Wszyscy myślą, przyznam się szczerze jeszcze tydzień temu też tak myślałem, że plik GIF może mieć tylko 256 kolorów. Tak, plik GIF może mieć, nie plik GIF, tylko blok pliku GIF może mieć 256 kolorów, ale plik GIF możemy sobie podzielić na wiele bloków, ekstremalnie rzecz ujmując możemy sobie podzielić plik GIF na tyle bloków, żeby żaden blok nie zawierał więcej niż 256 pikseli i wtedy każdy z tych bloków 256 pikseli może mieć własną paletę. W związku z tym możemy w jednym GIFie zmieścić całą 24 bitową paletę kolorów, czyli te 16 milionów kolorów możemy umieścić w GIFie. To nie ma sensu, to jest takie ćwiczenie akademickie, ten plik będzie gigantyczny i właściwie chyba nic go nie wyświetli, ale mówię, ja jeszcze tydzień temu myślałem, że można tylko w GIFie 256 kolorów wyświetlić, myliłem się, można wyświetlić dowolną, bo plik można podzielić na bloki. Plik GIF umożliwia też stworzenie animacji. To było szaleństwo lat 90., gdzie strony miały strzałki, szlaczki, ramki, podkreślenia, jakieś animowane telefoninki, animowane ikonki. 99% tego było realizowane przez animowane GIFy. 1% przez pliki filmu MPG. To było szaleństwo, taka mała ikonka, 4M i nr 20, 21, 22. Z GIFem jest pewna ciekawa historia związana z kompresją LZ2. To jest kolejny skrót, który występuje w tej prezentacji, którego wam nie rozwinę, bo go nie pamiętam. To jest nazwiska trzech badaczy, trzech chyba matematyków, którzy stworzyli ten tent. To jest kompresja w GIFie, trochę technicznego będzie też. Kompresja w GIFie jest to strumieniowa kompresja słownikowa. Co to oznacza? To oznacza, że ta kompresja wyszukuje podobne ciągi znaków, zapisując słowo, nie słowo rozumiane w języku naturalnym, tylko w języku maszynowym, czyli jakiś ciąg znaków, a potem stara się znaleźć jak najwięcej wystąpię takiego słownikowego słowa i wtedy zamienia ten ciąg znaków, który może być długi, na przykład, nie wiem, 15 znakowy, tylko jakimś znacznikiem jednoznakowym. Tu wstaw pierwszy znak, pierwszy ciąg znaków, tu wstaw drugi ciąg znaków itd. To jest metoda strumieniowa słownikowa kompresji. Wracając do tych praw patentowych, gdzieś w okolicach 1994 roku jakaś firma amerykańska uzyskała patent, który bardzo szybko przeniosła do Europy, patentując kompresję LZW we Francji, Niemczech, Anglii, po kolei liczących się wtedy w internecie krajach, co spowodowało i zaczęli oczywiście roszczenia patentowe wysuwać w stosunku do dużych firm, do Yahoo. Wtedy były, nie wiem, nie pamiętam już, jak były przeglądarki, Alta Vista w świetnie, żeby im zaczęli płacić. Jak to wyświetlacie nasze płacić? To bezpośrednio spowodowało, że powstał plik PNG. Ostatnim punktem tutaj na tej prezentacji, znaczy na tym slajdzie tej prezentacji, jest przezroczystość, co to oznacza. W GIFie możemy sobie wybrać, żeby jeden z tych dwustu sześciu barw, którą mamy, żeby ona była, ona możemy jej nadać bit przezroczystość. Czyli wyobraźcie sobie, tak jak mieliśmy tam te logo of five of five, że ono jest czarno-białe, to możemy powiedzieć, że białe ma być przezroczysty. I wtedy przeglądarka albo browser systemowy renderuje to jako przezroczystość. I tak, podsumowując, GIFa używamy do małych elementów graficznych, do logotypów, do tego typu rzeczy, a jeszcze wracając na chwilę do tego patentu, wszystkie te patenty do roku 2006 wygasły, więc GIF jest z powrotem wolnym i nieobciążonym prawem patentowym formatem. Te patenty wygasały stopniowo, więc w krajach wcześniej, niektórych później, ale od 2006 jest to format wolny od patentu. I tu jest pokazane prezentacje takie z Wikipedia, animacja, która właśnie, nie wiem, czy to widać, widzicie takie gradienty, a potem, jak są wymieniane przez bloki, to te gradienty znikają. I tu jest 1880 kolorów, jest to GIF, który ma 1880 kolorów, czyli ten mit o tym, że GIFy mają tylko 256 kolorów, jest jakby nieprawdziwy. Bezpośrednio z powodu właśnie praw patentowych rozpoczęto pracę nad alternatywnym formatem i tym alternatywnym formatem jest PNG, Portable Network Graphics, to pamiętam, to jest chyba jedyne, który podobnie jak GIF operuje na bezstratnej kompresji, którego paleta, może być paletą dowolną, to jest bardzo otwarty format, ponieważ możemy zacząć od paleta, może być jednobitowa, jednobitowa paleta oznacza, że mamy tylko dwa kolory, pełne pusty, dwubitowa, czyli cztery kolory i tak dalej, i tak dalej, aż do pełnej 24-bitowej palety, czyli 16 milionów kolorów. Jeżeli tu jest połoła facetów, to i tak z tych 16 milionów pewnie PNG używa kompresji, z tym, że tu już nie popełniono tego błędu i użyto kompresji Deflate, czyli kompresji na otwartym kodzie, na licencji w bodajże BSD, to jest chyba jedyna, znaczy moim skromnym zdaniem to jest jedyna licencja, która jest licencją prawdziwie wolną, bo GPL nakłada za dużo obowiązków, żeby był wolny. Bardzo ciekawą funkcją zainplementowaną w PNG, a potem dopiero w GIFie jest przeplot. Przeplot zastosowany w pliku PNG polega na tym, że grupy pikseli są zapisywane najpierw. Więc najpierw na górze pliku zapisujemy co 16 piksel. Potem zapisujemy co 8, co 4, co 2 i całą resztę. Dzięki czemu na powolnych łączach, kiedyś, teraz to już jest coś, co nie istnieje, to warto tym wspomnieć, to jest algoryt, Adam 7 się nazywa. Dzięki temu taki plik po wczytaniu pierwszego bloku, czyli po wczytaniu 1.16 wielkości pliku, plus minus, bo tam jeszcze nagłówki, inne rzeczy, już można go było wyświetlić na ekranie. I potem z każdą minutą on się robił taki wyraźniejszy. To na jakichś takich filmach hakerskich widać, jak się pojawia obrazek, po tym coraz ładniejszym, coraz ładniejszym, to właśnie to oferuje również format PNG. Do czego używać tego formatu? Formatu PNG możemy używać do tego, czego żeśmy używali GIF-a, czyli do małych znaków graficznych do logotypów, strzałek. Możemy też użyć do zdjęć, ale pamiętajmy, że PNG jest formatem bezstratnym, czyli pozwala odtworzenie całkowite informacji bez jej utraty. W związku z tym, on jest duży. Bardzo często w obróbce A, i jeszcze jest jedna rzecz, ponieważ PNG został stworzony od początku do końca jako webowa wersja grafiki, obsługuje tylko paletę RGB. Czyli nie nadaje się do wydruków, nie można go przenieść w łatwy sposób i wydrukować sobie wizytówek z takich plików. Znaczy, to się dzieje, ale są to zawsze kłopoty. Jedną rzeczą w pliku PNG jest dodatkowa warstwa, którą ten plik może zawierać, warstwa maska przezroczystości i to jest nie w przeciwieństwie do gifa, ta maska przezroczystości jest maską płynną, czyli ona może być kodowana tam przez ileś bitów w związku z tymi odcieni szaleści jest bardzo dużo. I jak to działa? Działa to tak, że tylko ty nie wiem, czy w tą stronę, czy w drugą, ale to chodzi o idee, że jeżeli jest na przykład biały piksel, to w 100% przezroczysta, jeżeli jest szary do połowy, 50% to to jest 50% przezroczystość, jeżeli jest czarny to jest w 100% przezroczysty. A biały nie przezroczysty. Rozumiecie o co chodzi? Już nie pamiętam, zapomniałem to sprawdzić tak naprawdę. Ok, czyli biały pokazuje, czarny ukrywa, czyli biały to jest zero czarnego, to jest nie przezroczystość, 50% czarnego, czyli jakiś szary to jest 50% i całkowicie czarny przezroczystość, co pozwala nam tworzyć wygładzone krawędzie grafik, logotypów, strzałek i do tego się bardzo długo pliku PNG używało no chyba praktycznie do momentu, jak się nie pojawiły porządnie formaty graficzne oparte o czcionki, o pliki czcionek. JPEG akronim JPEGa jest w ogóle dla mnie niezapamiętywalny, bo to jest jakieś połączona grupa dosprawczego jakaś organizacja niemalże hydra. To jest najczęściej przesyłany plik w internecie. Największe obciążenie internetu generują pliki JPEG, nie filmy pliki JPEG. W związku z tym chcemy mieć szybkie strony, każdy by chciał. Chcemy mieć wysoki page rank czy nie page rank, tylko page speed. W związku z tym musimy powinniśmy zwrócić na to uwagę. Trochę technikali. Kompresja używana w JPEG jest kompresją stratną. Co to oznacza? Oznacza, że sposób w jaki informacja jest kodowana w takim pliku powoduje, że nie możemy odzyskać go w całości takiego, jaki był po raz pierwszy. Jak widać ustawiając wysoki stopień kompresji w programie graficznym zapisując obrazek, zamykając program graficzny, otwierając ten sam obrazek zapisując go znowu, zostawiając kroki aż zobaczcie, jak paskudny się staje. Wynika to z tego, że ta kompresja w JPEG jest taką bardzo sprytnym zabiegiem. To znaczy po pierwsze JPEG obcina kilka kolorów, które są mało rozróżniane dla człowieka konwertuje wszystko w ogóle na tylko dwa kolory i kanał jasności. Czyli to jest ten, ja już nie wiem jak się ten profil nazywa, ale dlaczego? Dlatego, że człowiek dużo więcej dużo bardziej i dużo lepiej rozpoznaje nasycenie światłem niż barwy. I potem jeszcze to sobie przelicza. Dzieli to na bloki 8x8 pikseli licząc średnią dla danego bloku i licząc o ile kolor pozostałych element wszystkich pikseli różni się od koloru średniego. Nadal taki zapis jest do tego momentu nadal jest zapisem bezstratnym, a jest już mniejsze od oryginału, ale niewiele mniejsze, bo to są liczby zmiennoprzecinkowe o dużej precyzji, więc one one są mniejsze, ale niewiele mniejsze. I w tym momencie trafiamy w ten moment, w którym zaczynamy tracić informacje. Te liczby zmiennoprzecinkowe, czyli jakieś tam 13, cały sznur liczb są obcinane do liczby całkowitej, tylko zostaje 13. I tak jest zapisywane. Od zależności z tego jaki stopień kompresji ustawicie, to tam przez inną liczbę jest dzielone, w związku z tym tak najprościej. To nie będziemy się właśnie wybiegać, bo tam tak jak wspominałem w samym początku to była szybka transformata furiera i jeszcze kilka takich dziwnych nazw, gdzie nie wiadomo czy się bać, płakać. Gigantyczną zaletą tego formatu jest jego powszechność. 99 pewnie aparatów tutaj, oprócz aparatu Wojtka, pewnie zapisuje wszystko w JPG. Wszystkie telefony zapisują w JPG. To wszystko jest gotowe do użycia. No i prostota tego pliku, to że ze względu na to, że on już był, jego specyfikacja powstawała wtedy, kiedy już dość dużo wiedzieliśmy o sieci, czyli którzy to oczywiście robili, to on działa wszędzie. Nawet najstarsze przeglądarki, no powiedzmy najstarsze, ale gdzieś tak w okolicach Internet Explorer 4 i Netscape navigatora 4, one już umiały bez kłopotu te formaty pokazywać. Tu macie te samo zdjęcie. Zdjęcie po lewej jak widzicie na górze, ma tylko 82 kilo. Nie widać z daleka, zapewne nie widać artefaktów, które się pojawiły przy tak silnej kompresji, bo to jest bardzo silna kompresja. No widać, ale to zaraz, zaraz pokażę wam zbliżenie, więc to mało widać porównając tym, jak paskudne jest to zdjęcie, jak byście oglądali jakby przed sobą to wtedy byście to widzieli bardziej. Natomiast pokazuję wam różnicę wielkości. Oba zdjęcia do szybkiego oglądania są tak samo dobre do oglądania. Jak tam ktoś wam pokazuje zdjęcia dzieci z wakacji no fajne, fajne, tak, tak. Właściwie one się nie różnią, tak. Rzucicie okiem, zobaczycie dziecko na łódce, jedziemy dalej. 82 kilo, 440 kilo. Jest różnica? Oczywiście nie polecam wam używania tak wysokich stopni kompresji, bo to nie ma sensu, te zdjęcia są obrzydliwe. Tam gdzieś taka rozsądna granica WordPress defaultowo wam re-kompresuje zdjęcia do poziomu 85%. Jest na to specjalny filtr, ale to nie o tym. I teraz zobaczcie jak wygląda to samo zdjęcie po powiększeniu. Zobaczcie, że tutaj po lewej stronie dokładnie widać te bloki uśrednione, tak i utraty informacji, jak gigantyczną ilość informacji, żeśmy utracili. Tak. Więc z tym kompresowaniem zdjęć no nie należy przesadzić. Bo takie są właśnie efekt. Pliki SVG. Pliki SVG to są pliki grafiki wektorowej, którą one samym początku już pokazywałem. To są pliki tekstowe. Jest co prawda format również kompresowalny również kompresowalny za pomocą gzipa, ale on nie jest jakoś szczególnie mocno używany dużo części po prostu przeglądarki kompresują ten plik jako plik tekstowy. On się świetnie kompresuje dlatego, że taki plik to jest XML formalnie rzecz ujmując. Czyli widzieliście na pewno strony, źródła strony, które są HTML HTML do pewnego przybliżenia też jest XML. I pliki SVG wyglądają po prostu w ten sposób, że oprócz kilku nagłówków, które coś tam definiują, to reszta tego pliku to są liczby z przecinkami. Więc tak jak widzieliście na samym początku przez algorytm gzipa na tak małym pliku on się super fajnie kompresuje. Ale on się nie nadaje do niczego więcej niż logotypy, jakieś proste rzeczy, grafiki elementy takie wystroju, strony generalnie proste rzeczy. Można oczywiście tam, te samo zdjęcie tego dziecka na łódce można by było przerobić na grafikę wektorową, ale to nie miałoby żadnego sensu, bo tutaj każdy piksel musiałby być oddzielną krzywą, więc prawdopodobnie plik byłby większy niż plik graficzny. Oczywiście by się ładnie powiększał do momentu, żebyśmy nie zaczęli widzieć tych kwadracików pikseli. Ale jeżeli mamy nawet wielokolorowe loga, które składają się z ograniczonej liczby kolorów, to może być i 1000 tak, jeżeli to są odpowiednie krzywe, ale normalne logotypy to pli, jednak pliki svg. Motyw 2017 używa tych plików, jak zrobicie sobie menu z ikonkami serwisów społecznościowych, to dokładnie te ikonki, które są wyświetlane, to są pliki svg. Dynamiczne co ulica może znaczyć dynamiczne w tym formacie pliku? Czy oglądacie czasem statystyki użycia wtyczek na stronie wtyczki? Tak? Nie? Tak. Ten wykres jest plikiem svg wygenerowany dynamicznie. Bardzo prosto i bardzo łatwo robi się krzywę za pomocą żawaskryptu, są gotowe do tego biblioteki mówimy tylko narysuj mi krzywę taką i taką i to jedzie. Więc to jest bardzo fajna możliwość wykorzystania tego formatu plików. Tu macie cztery te cztery logotypy. Wielkość naturalna tych plików to jest 225 pikseli na 300. Oczywiście mówienie o wielkości naturalnej dla pliku wektorowego nie ma absolutnie zradnego znaczenia, bo on jest tak samo dokładny jeżeli będzie zajmował jeden piksel oczywiście nic nie będziemy widzieć poza jednym pikselem. I również dobrze będzie jak byśmy chcieli ten logotyp svg, czyli który jest pierwszy powiększyć tak żeby sobie cały samochód będzie nadal linia będzie się zawsze nadal kończyć tam gdzie linia ma się kończyć. Pozostałe formaty zobaczcie gif, który widać po nim takie poszarpanie dlatego, że ten gif jest gifem dwukolorowym i ma bardzo ostre końce zobaczcie, że on prawie jest tak mały jak plik svg. Następnie mamy png który już ma wygładzone krawędzie ale zobaczcie, że jest cztery razy większy u svg i na koniec jpeg, który zupełnie nie nadaje się do logotypów zupełnie nie nadaje się do elementów strony on nie lubi takich powierzchni i jego zysk na powierzchniach o jednym kolorze takiego zysku nie ma w tym pliku on nie potrafi po prostu służyć dużej przestrzeni jednego koloru. Jak widzicie zobaczcie jest 8 największy od pierwotnego svg a nawet jest większy od pęga w związku z tym logotypy to są pliki svg gify i pęgi to są logotypy to jest svg najlepiej jakieś ikony które możemy powtórzyć to jest pliki svg to samo dotyczy pęgów i gifów gify oczywiście również pewne animacje które możemy dokonać jpeg i zdecydowanie zdjęcia tam gdzie mamy przejścia tonalne, dużo kolorów i jak widzicie z dnia tam te pliki są najlepsze i porównanie tego samego zdjęcia 500x500 jako gif 256 kolorów ponieważ nie dzieliłem go na bloki pęg bez straty te zdjęcia zostały wygenerowane z oryginału czyli z takiego zdjęcia z nikona z roła więc tam nie ma żadnych strat i żadnej kompresji i jak widzicie gif żaden zysk w porównaniu do jpega 80% to jest bardzo dobre zdjęcie bez artefaktów praktycznie na tym gifie widać artefakty jak się na komputerze blisko ogląda to widać że tam jest utrata kolorów i tam nie widać części rzeczy, tam zanika nam ta informacja png to jest plik jak widzicie gigantyczny w którym nie ma żadnych utraty żadnej utraty informacji którą tam mamy no i coś co używacie wszyscy chyba że macie nieaktualnego wordpressa proszę go zaktualizować czyli pliki graficzne z plików czcionek tak to jest dashikon ze wszystkimi ikonkami które aktualnie są dostępne wyciągnięte po prostu z repozytorium wszystkie elementy istniejące on łączy w sobie znaczy formalnie rzecz mówiąc te gliwy te znaki to są malutkie pliki wektorowe które możecie dowolnie powiększać wiecie że jak powiększacie treść na stronie bo litery to też są to też jest format wektorowy z małymi wyjątkami ale to nas interesuje też możemy to powiększać dowolnie to się świetnie nadaje kiedy mamy właśnie tego typu znaki do wyświetlenia jedna wada tego że tu krzywa może być tylko wypełniona lub niewypełniona koniec nie zarządzamy kolorem one nie mają w ogóle formalnie w pliku koloru to dopiero program wyświetlający mówi że krzywa jest wypełniona albo niewypełniona my możemy oczywiście zdefiniować że tekst jest czerwony, zielony, żółty i tak dalej ale one fizycznie czyli nie możemy na przykład utworzyć logotypu firmy która ma dwa kolory czerwony, żółty, zielony to co jest tylko do monochromatycznych zastosowań i teraz jak to wszystko ogarnąć tak żeby te pliki były mniejsze najlepszą metodą oczywiście najkot kosztowniejszą jest użycie jakiegoś programu może być to Photoshop, może być to GIMP przy zapisie plików możemy wybrać przy zapisie plików JPEG możemy wybrać stopień kompresji tam jest jeszcze jeden paramet jaka wielkość bloku ma być jakie rozmycia tego bloku generalnie jest tych parametrów kilka ale generalnie trzeba to robić ręcznie to samo dotyczy GIMP GIMP przy każdym zapisie pliku JPEG on się wyskakuje takie okienko w którym można zdefiniować te rzeczy online jest mnóstwo serwisu które pozwalają wrzucić nam zdjęcie i dostajemy na wyjściu zdjęcie to jest skompresowane niektóre są tak fajne że się pawiłem nimi wrzucacie zdjęcie i macie słowaczki lepiej, gorzej od razu jest podgląd jak wygląda takie zdjęcie część z nich jest bezpłatna część limitowana, część wymaga rejestracji, część nie ale to jest nadal ręczna robota to jest nadal coś co musicie wykonać samodzielnie nie wiem jak wy ale jestem strasznym leniem i ja nie lubię pracować ja lubię żeby wszystko było zrobione celi to wchodzimy tutaj taki drobny kawałek hardcore czyli commonline interface w linkach w tej prezentacji ona będzie dostępna potem w internecie w linkach w tej prezentacji jest link do gista gista to jest taki jeden z podserwisów githaba, którym już pewnie żeście tutaj słyszeli na którym można fragmenty kodu prezentować i tam jest link do gista i tym jest kilka poleceń command lineowych optymalizujących i zmieniających wielkość pliku który ja używam do przeróbek wielkich galerii żeby je móc wrzucić na serwis jeszcze przed kompresją i tam ten plik można sobie na końcu w tej prezentacji kliknąć i zobaczycie jak wygląda taki z command line wywoływany jeden plik wywołuje i mi cały katalog zdjęć przerawia obcina ich wielkość do 2000 pikseli wycina im dane egzif i zmniejsza ich kompresję ustawia im kompresję na 85% i to co nas najbardziej interesuje co jest najfajniejsze to są wtyczki po prostu wrzucamy zdjęcie i się w ogóle nie martwimy wszystko jest zrobione podoba wam się? fajna sprawa, naprawdę działa wybrałem dla was kilka wtyczek takich które są jakby dostępne z różnym stopniem limitowania niektóre z nich mają wymagę rejestracji niektóre pozwalają 50 zdjęć miesięcznie innemo pozwalają tylko 5 megowe źródło wrzucić inne jeszcze wymagają klucza api jedna z nich wymaga rejestracji i trzeba zapłacić dolara za tysiąc obrazków to też nie jest jakaś opcja straszliwa i ostatnia z nich którą polecam, to jest wtyczka od nas dostępna w dwóch wersjach w wersji całkowicie darmowej zgodnej z GPL z repozytorium oraz wersja Pro, która ma troszeczkę więcej opcji dostępna dla naszych członków gdzie 30 dniowo można ją sobie wykorzystać do testów bez ponoszenia żadnych kosztów i na koniec chciałem wam kilka ciekawostek z pracy tej wtyczki przedstawić największe przesłane zdjęcie to jest stan na maj 2018 ale logii mamy tylko z czterech lat więc mogło się zdarzyć coś większego 40 megowe zdjęcie to było największe zdjęcie które zostało przesłane do serwisu ponieważ my te zdjęcia pobieramy przerabiamy i odsyłamy 69 terabajtów to jest liczba o ile została zmniejszone wszystkie obrazki które używają naszej wtyczki smaż rekord dzienny to było 86 tysięcy serwisów które w ciągu jednego dnia to nie jest jeden dzień z naszego punktu widzenia tylko 24 godziny aż serwis jest dostępny na całym świecie 45 milionów obrazków w ciągu 24 godziny zostało przerobione od początku działania przerobiliśmy 19 miliardów zwieć to tak na zakończenie kilka ciekawostek w kasie Miegoni