Images fix (#198)

* Add assets

* Move images to local

* Prettier

* Fix

* Fix images

Author: typeofweb

README.md

@@ -1,7 +1,9 @@
 # typeofweb.com (beta)
 
 <!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section -->
+
 [![All Contributors](https://img.shields.io/badge/all_contributors-9-orange.svg?style=flat-square)](#contributors-)
+
 <!-- ALL-CONTRIBUTORS-BADGE:END -->
 
 [![YouTube Channel Subscribers](https://img.shields.io/youtube/channel/subscribers/UCR4qSQa8JFh6zeR5Idvnewg?label=YouTube&style=social)](https://youtube.com/c/typeofweb)

_pages/michal-miszczyszyn-uses.mdx

@@ -23,9 +23,9 @@ Całkiem często dostaję pytania o to, czego używam, jak pracuję i na czym. J
 - Używam [oh-my-zsh](https://github.com/ohmyzsh/ohmyzsh) z motywem "af-magic" i wtyczkami `macos gitfast git npm yarn gpg-agent history-substring-search`
 - Praktycznie wszędzie, gdzie to możliwe do kodu ustawiłem font [Fira Code](https://github.com/tonsky/FiraCode) z włączonymi ligaturami. Co to takiego? Połączenie niektórych znaków wygląda u mnie lepiej, np. <code style="font-variant-ligatures: none">=></code> albo <code style="font-variant-ligatures: none">===</code> może wyglądać tak:
 
-<a href="https://res.cloudinary.com/type-of-web/wp-content/uploads/2020/01/Screenshot-2020-01-14-at-17.08.56.png">
+<a href="/public/assets/wp-content/uploads/2020/01/Screenshot-2020-01-14-at-17.08.56.png">
   <img
-    src="https://res.cloudinary.com/type-of-web/wp-content/uploads/2020/01/Screenshot-2020-01-14-at-17.08.56-300x115.png"
+    src="/public/assets/wp-content/uploads/2020/01/Screenshot-2020-01-14-at-17.08.56-300x115.png"
     alt=""
     width="300"
     height="115"
@@ -66,9 +66,9 @@ Every day I get these questions: What computer do you use? Which editor? What pl
 - [oh-my-zsh](https://github.com/ohmyzsh/ohmyzsh) with "af-magic" theme and following plugins: `macos gitfast git npm yarn gpg-agent history-substring-search`
 - I use the [Fira Code](https://github.com/tonsky/FiraCode) font with ligatures virtually everywhere. What are ligatures? They make combinations of certain characters look better eg. <code style="font-variant-ligatures: none">=></code> or <code style="font-variant-ligatures: none">===</code> looks like this:
 
-<a href="https://res.cloudinary.com/type-of-web/wp-content/uploads/2020/01/Screenshot-2020-01-14-at-17.08.56.png">
+<a href="/public/assets/wp-content/uploads/2020/01/Screenshot-2020-01-14-at-17.08.56.png">
   <img
-    src="https://res.cloudinary.com/type-of-web/wp-content/uploads/2020/01/Screenshot-2020-01-14-at-17.08.56-300x115.png"
+    src="/public/assets/wp-content/uploads/2020/01/Screenshot-2020-01-14-at-17.08.56-300x115.png"
     alt=""
     width="300"
     height="115"

_pages/polski-frontend-discord.mdx

@@ -4,7 +4,7 @@ date: 2018-05-01T16:29:35.000Z
 permalink: polski-frontend-discord
 type: page
 thumbnail:
-  url: https://res.cloudinary.com/type-of-web/wp-content/uploads/2018/05/Discord-Feature-Graphic.png
+  url: /public/assets/wp-content/uploads/2018/05/Discord-Feature-Graphic.png
   width: 1024
   height: 500
 seo: {}
@@ -16,7 +16,7 @@ Połączmy początkujących z ekspertami, grafików z programistami, a UX-ów ze
 
 <a href="https://discord.gg/va2NhBv" style="display: block; margin: 0 auto; width: 250px; height: 80px;">
   <img
-    src="https://res.cloudinary.com/type-of-web/wp-content/uploads/2018/05/discord-join-button-300x96.png"
+    src="/public/assets/wp-content/uploads/2018/05/discord-join-button-300x96.png"
     alt="Dołącz do Discorda Type of Web!"
     title="Dołącz do Discorda Type of Web!"
     width="300"

_pages/wspolpraca.mdx

@@ -4,7 +4,7 @@ date: 2017-08-29T23:48:13.000Z
 permalink: wspolpraca
 type: page
 thumbnail:
-  url: https://res.cloudinary.com/type-of-web/image/upload/v1631025822/wspolpraca_typeofweb_michal-miszczyszyn_oig5ha.png
+  url: /assets/wspolpraca_typeofweb_michal-miszczyszyn_oig5ha.png
   width: 1920
   height: 1005
 seo:
@@ -30,7 +30,7 @@ Na co dzień buduję aplikacje internetowe (Full-Stack JavaScript). Współpracu
 ## Inicjatywy
 
 <img
-  src="https://res.cloudinary.com/type-of-web/wp-content/uploads/2018/03/21686839_1666666120073907_3679910495411732745_o.jpg"
+  src="/public/assets/wp-content/uploads/2018/03/21686839_1666666120073907_3679910495411732745_o.jpg"
   alt=""
   width="200"
   height="300"
@@ -43,7 +43,7 @@ Od kilku lat prowadzę również darmowe konsultacje z programowania za [pośred
 
 ### TypeScript na poważnie
 
-![](https://res.cloudinary.com/type-of-web/image/upload/v1632757229/typescript-na-powaznie_begja5.webp '#width=300;height=289;title=')
+<img src="/public/assets/typescript-na-powaznie_begja5.webp" width="300" height="289" title="" />
 
 W 2021 napisałem i wydałem książkę [„TypeScript na poważnie”](https://typescriptnapowaznie.pl/), która zawiera kurs i kompletny przewodnik po TypeScripcie od zera do poziomu zaawansowanego. Cały nakład został wyprzedany w bardzo krótkim czasie, a książka ma miano bestsellera. Książkę można znaleźć w bibliotekach w całym kraju, a w sprzedaży nadal [jest e-book](https://sklep.typeofweb.com/produkt/e-book-typescript-na-powaznie/).
 
@@ -55,13 +55,13 @@ Powołałem do życia grupę [Praca dla programistów i programistek powyżej 2
 
 ### Polskifrontend.pl
 
-![](https://res.cloudinary.com/type-of-web/image/upload/c_fill,w_300,h_150/v1633822527/logo_og_lvi5da.png '#width=300;height=150;title=')
+<img src="/public/assets/logo_og_lvi5da.png" width="200" height="200" title="" />
 
 Jestem współtwórcą, a także zarządzam i moderuję agregatorem treści frontendowych [Polskifrontend.pl](https://polskifrontend.pl).
 
 ### DevFAQ.pl
 
-![](https://res.cloudinary.com/type-of-web/image/upload/v1632756285/devfaq.pl_kysqe5.png '#width=300;height=168;title=')
+<img src="/public/assets/devfaq.pl_kysqe5.png" width="300" height="168" title="" />
 
 Jestem pomysłodawcą i twórcą serwisu [DevFAQ.pl](https://devfaq.pl), który zbiera pytania rekrutacyjne na temat programowania.
 

_pages/znajdz-prace-zdalna-tymi-serwisami.mdx

@@ -4,7 +4,7 @@ date: 2018-01-28T00:59:33.000Z
 permalink: znajdz-prace-zdalna-tymi-serwisami
 type: page
 thumbnail:
-  url: https://res.cloudinary.com/type-of-web/wp-content/uploads/2018/01/pexels-photo-297755.jpeg
+  url: /public/assets/wp-content/uploads/2018/01/pexels-photo-297755.jpeg
   width: 1280
   height: 835
 seo:

_posts/2021/09/ktory-hosting-jest-najszybszy-9-rzeczy-ktore-maja-najwieksze-znaczenie.mdx

@@ -24,11 +24,23 @@ No cóż – jeżeli wątpisz, czy hosting powinien być szybki, to mam dla Cieb
 
 - **wolna strona przekłada się na mniej konwersji** - ponad połowa użytkowników [opuści stronę, która ładuje się dłużej niż 3 sekundy](https://www.hobo-web.co.uk/your-website-design-should-load-in-4-seconds/), a wskaźnik konwersji [spada o prawie 4,5% z każdą sekundą ładowania](https://www.portent.com/blog/analytics/research-site-speed-hurting-everyones-revenue.htm);
 
-![Czas ładowania się strony a współczynnik konwersji](https://res.cloudinary.com/type-of-web/image/upload/v1629820828/uploads/2021/08/cloudflare-konwersja_nn6yw3.png '#width=451;height=210;title=fot. cloudflare.com')
+<img
+  src="/public/assets/uploads/2021/08/cloudflare-konwersja_nn6yw3.png"
+  width="451"
+  height="210"
+  title="fot. cloudflare.com"
+  alt="Czas ładowania się strony a współczynnik konwersji"
+/>
 
 - **szybkość ma wpływ na Core Web Vitals** - czyli na czynniki brane pod uwagę przez Google podczas ratingu strony (szybki serwer może poprawić wyniki w LCP czyli czasie ładowania największego elementu na stronie oraz FID - czyli czasie potrzebnym do uzyskania pełnej interaktywności przez stronę);
 
-![Core Web Vitals](https://res.cloudinary.com/type-of-web/image/upload/v1629820829/uploads/2021/08/core-web-vitals_yloypb.png '#width=600;height=300;title=fot. webspec.com')
+<img
+  src="/public/assets/uploads/2021/08/core-web-vitals_yloypb.png"
+  width="600"
+  height="300"
+  title="fot. webspec.com"
+  alt="Core Web Vitals"
+/>
 
 - **szybko działająca strona może mieć wpływ na mniejsze koszty marketingowe** - nie tylko dzięki wysokim wynikom organicznym w indeksach Google, ale także dzięki wyższej jakości reklam, przekładającej się na wyższą klikalność w Google Ads.
 
@@ -44,7 +56,13 @@ Wiele hostingów opiera się na dyskach talerzowych HDD. To już nieco archaiczn
 
 **Jeżeli zdecydujesz się na hosting oparty na dyskach SSD, możesz liczyć nawet na kilkakrotnie szybszy odczyt i zapis plików**. Natomiast [nośniki typu SSD NVMe są nawet 10-11 razy szybsze od standardowych dysków talerzowych](https://jakwybrachosting.pl/hosting-ssd/).
 
-![Szybkość dysków HDD, SSD i SSD NVMe](https://res.cloudinary.com/type-of-web/image/upload/v1629820831/uploads/2021/08/hdd-ssd-nvme-speed_rbjb9l.png '#width=572;height=185;title=fot. reddit.com')
+<img
+  src="/public/assets/uploads/2021/08/hdd-ssd-nvme-speed_rbjb9l.png"
+  width="572"
+  height="185"
+  title="fot. reddit.com"
+  alt="Szybkość dysków HDD, SSD i SSD NVMe"
+/>
 
 Szukasz dobrego i szybkiego hostingu? Zamiast patrzeć na jego pojemność, sprawdź z jakich dysków korzysta.
 
@@ -56,7 +74,13 @@ Po stronie serwera działa interpreter PHP, który na bieżąco odczytuje polece
 
 Nawet po tak skrótowym przedstawieniu roli PHP, nietrudno zauważyć, że jest to kluczowy element dla poprawnego działania strony. **Jeżeli interpreter PHP działa szybko i wydajnie - to minimalizuje to opóźnienia w wyświetlaniu witryny**.
 
-![PHP Benchmark](https://res.cloudinary.com/type-of-web/image/upload/v1629820828/uploads/2021/08/php-benchmark_hrpmdg.png '#width=450;height=284;title=fot. openbenchmarking.org')
+<img
+  src="/public/assets/uploads/2021/08/php-benchmark_hrpmdg.png"
+  width="450"
+  height="284"
+  title="fot. openbenchmarking.org"
+  alt="PHP Benchmark"
+/>
 
 Dlatego też tak ważne jest, aby na serwerze była zainstalowana najnowsza wersja PHP. Każda aktualizacja tego języka niesie ze sobą liczne poprawki w zakresie bezpieczeństwa - ale także właśnie szybkości i wydajności. Porównując benchmarki poszczególnych wersji PHP doskonale widać różnice - na korzyść każdej z nowszej wersji.
 
@@ -97,7 +121,13 @@ Jednak prawda jest taka, że w przypadku dynamicznych stron internetowych - a w
 
 [LiteSpeed jest nawet 84 razy bardziej wydajny od Apache](https://jakwybrachosting.pl/hosting-litespeed/). **Dzięki zmniejszeniu obciążenia PHP strona może działa szybciej, być bardziej stabilna oraz cechować się znacznie większą odpornością na ataki typu DDoS** (skutkujące paraliżem strony podczas nagłego zwiększenia wykorzystania zasobów serwera). Gdy priorytetem jest szybkość - zdecydowanie warto wybrać hosting, który obsługuje LiteSpeed.
 
-![LiteSpeed Benchmark](https://res.cloudinary.com/type-of-web/image/upload/v1629820828/uploads/2021/08/litespeed-benchmark_r7uozn.png '#width=451;height=226;title=fot. litespeedtech.com')
+<img
+  src="/public/assets/uploads/2021/08/litespeed-benchmark_r7uozn.png"
+  width="451"
+  height="226"
+  title="fot. litespeedtech.com"
+  alt="LiteSpeed Benchmark"
+/>
 
 ## 7. Redis/Memcached
 

_posts/2021/09/x-team-po-5-latach-odchodze.mdx

@@ -7,7 +7,7 @@ authors:
   - michal-miszczyszyn
 category: praca-zdalna
 thumbnail:
-  url: https://res.cloudinary.com/type-of-web/image/upload/v1633097002/xteam_x-team_odchodze_kemjkp.png
+  url: /public/assets/xteam_x-team_odchodze_kemjkp.png
   width: 1920
   height: 1005
 ---
@@ -16,7 +16,11 @@ X-Teamu nikomu chyba przedstawiać nie trzeba, a większość z Was pewnie mnie
 
 ---
 
-![](https://res.cloudinary.com/type-of-web/f_auto,c_limit,w_1536,q_auto/wp-content/uploads/2018/02/x-team-logo-large.png '#width=400;height=180;title=')
+<img
+  src="/public/assets/f_auto,c_limit,w_1536,q_auto/wp-content/uploads/2018/02/x-team-logo-large.png"
+  width="400"
+  height="180"
+/>
 
 Dobra, może jednak niektórym trzeba X-Team przedstawić, a więc: X-Team to pośrednik pomiędzy programistami i programistkami, a klientami z całego świata. Więcej o tym, czym X-Team jest, a czym nie jest, pisałem już tutaj: [X-Team — opis, rekrutacja, moja opinia](https://typeofweb.com/x-team-opis-rekrutacja-opinia)
 
@@ -45,7 +49,12 @@ Wszystko, co ma początek, ma też koniec[^1]. Po 4,5-roku zdecydowałem się *
 
 X-Team jest super. Naprawdę. To jedna z najlepszych firm, w jakiej możesz szukać roboty i szczerze ją polecam.
 
-![Michał Miszczyszyn pracujący na szczycie Góry Stołowej w Kapsztadzie (Republika Południowej Afryki)](https://res.cloudinary.com/type-of-web/image/upload/v1633820724/IMG_3272_2_uv3hrj.jpg '#width=768;height=576;title=Michał Miszczyszyn pracujący na szczycie Góry Stołowej w Kapsztadzie (Republika Południowej Afryki)')
+<img
+  src="/public/assets/IMG_3272_2_uv3hrj.jpg"
+  width="768"
+  height="576"
+  alt="Michał Miszczyszyn pracujący na szczycie Góry Stołowej w Kapsztadzie (Republika Południowej Afryki)"
+/>
 
 Więc skąd moja decyzja o zmianie?
 

_posts/2021/09/zatrudnianie-juniorow-i-seniorow-a-produktywnosc-model-i-symulacja.mdx

@@ -45,7 +45,7 @@ Oczywiście, to jest ogromne uproszczenie, ale już z niego płynie ciekawy wnio
 |        9        |       9B        |        +13%         |
 |       10        |       10B       |        +11%         |
 
-![](https://res.cloudinary.com/type-of-web/image/upload/v1632301578/Screenshot_2021-09-22_at_11.05.27_bbjg7x.png '#width=600;height=370;title=')
+<img src="/public/assets/Screenshot_2021-09-22_at_11.05.27_bbjg7x.png" width="600" height="370" />
 
 Wynika z tego wprost, że **zatrudniając dwudziestą osobę do pracy mamy znacznie mniejszą motywację, niż zatrudniając drugą**.
 
@@ -76,7 +76,7 @@ Spróbujmy uwzględnić ten fakt w naszych wyliczeniach. Załóżmy, że komunik
 
 Teraz wszystko zależy od obranej stałej $ d $. Myślę, że optymistycznie będzie przyjąć, że każda nowa osoba spowalnia naszą pracę o ok. 10%
 
-![](https://res.cloudinary.com/type-of-web/image/upload/v1632301732/Screenshot_2021-09-22_at_11.08.41_fdwc8a.png '#width=600;height=370;title=')
+<img src="/public/assets/Screenshot_2021-09-22_at_11.08.41_fdwc8a.png" width="600" height="370" />
 
 Kształt krzywej w zasadzie się nie zmienia, ale możemy wyciągnąć już wniosek na temat maksymalnej liczby osób w zespole: **Przy tych założeniach, w zespole nie powinno się znaleźć nigdy więcej niż 6 osób.**
 

_posts/2021/12/iot1.mdx

@@ -7,7 +7,7 @@ authors:
   - michal-miszczyszyn
 category: opinie
 thumbnail:
-  url: https://res.cloudinary.com/type-of-web/image/upload/v1638480696/iot-smart-home-zigbee-z-wave-wifi_zuurdh.png
+  url: /public/assets/iot-smart-home-zigbee-z-wave-wifi_zuurdh.png
   width: 1920
   height: 1004
 ---
@@ -47,7 +47,7 @@ Oznacza częstotliwość komunikacji 433 MHz. Jest to prawdopodobnie najbardziej
 
 ### zigbee
 
-![](https://res.cloudinary.com/type-of-web/image/upload/v1638473919/iu_nimiqe.png '#width=368;height=104;title=')
+<img src="/public/assets/iu_nimiqe.png" width="368" height="104" />
 
 To kolejny standard bezprzewodowej komunikacji. Wykorzystane jest pasmo 2,4GHz. Połączenia są szyfrowane, a urządzenia **można łączyć w _mesh_**. Ponadto, sprzęt korzystający z zigbee jest bardzo szeroko dostępny i przez to **tani**. Wadą natomiast jest krótszy zasięg i potencjalna interferencja z innymi domowymi urządzeniami korzystającymi z tej samej częstotliwości 2,4GHz, czyli bluetooth i wifi.
 
@@ -61,7 +61,7 @@ Prawdę mówiąc w ogóle nie brałem tego pod uwagę. Pomimo, że jest BLE (Blu
 
 ### z-wave
 
-![](https://res.cloudinary.com/type-of-web/image/upload/v1638473754/logo_oghlyc.svg '#width=181;height=80;title=')
+<img src="/public/assets/logo_oghlyc.svg" width="181" height="80" />
 
 To standard komunikacji na częstotliwościach w okolicach 900MHz (w UE jest to konkretnie 868,42MHz). Zaletami są **większy zasięg** (w porównaniu do zigbee), **niski pobór energii** (w porównaniu do wifi), **szyfrowane połączenie** i możliwość łączenia urządzeń w siatkę. Wada to nieco droższe urządzenia.
 
@@ -82,7 +82,7 @@ Zdecydowałem się na zbudowanie większości elementów inteligentnego domu w
 
 <figure>
   <img
-    src="https://res.cloudinary.com/type-of-web/image/upload/v1638479159/iu_saea08.jpg"
+    src="/public/assets/iu_saea08.jpg"
     alt="Przykładowe urządzenie Fibaro (z-wave) obok linijki. Urządzenie mierzy około 4cm."
     width="600"
     height="400"

_posts/2021/12/iot2.mdx

@@ -7,7 +7,7 @@ authors:
   - michal-miszczyszyn
 category: opinie
 thumbnail:
-  url: https://res.cloudinary.com/type-of-web/image/upload/v1639002639/iot-smart-home-architektura-z-wave-i-zastosowania_hwnco8.png
+  url: /public/assets/iot-smart-home-architektura-z-wave-i-zastosowania_hwnco8.png
   width: 1920
   height: 1004
 ---
@@ -22,7 +22,7 @@ Z-wave daje możliwość tworzenia **częściowo rozproszonej** sieci urządzeń
 
 <Gallery columns="2">
   <img
-    src="https://res.cloudinary.com/type-of-web/image/upload/v1638734057/L_packshot_HC3_3_RGB_rflno8.jpg"
+    src="/public/assets/L_packshot_HC3_3_RGB_rflno8.jpg"
     alt="Centrala inteligentnego domu Fibaro Home Center 3"
     width="660"
     height="440"
@@ -31,7 +31,7 @@ Z-wave daje możliwość tworzenia **częściowo rozproszonej** sieci urządzeń
   {'\n'}Zdjęcie pochodzi ze strony fibaro.com
 
   <img
-    src="https://res.cloudinary.com/type-of-web/image/upload/v1638734062/201007_Ezlo_Secure_Podium_1_2400x1500.png_mdmfli.webp"
+    src="/public/assets/201007_Ezlo_Secure_Podium_1_2400x1500.png"
     alt="Centrala inteligentnego domu Ezlo Secure (dawniej Vera)"
     width="704"
     height="440"
@@ -46,7 +46,7 @@ Chwila, chwila – ale to przecież brzmi jak całkowicie scentralizowane rozwi
 
 <Gallery columns="1">
   <img
-    src="https://res.cloudinary.com/type-of-web/image/upload/v1639000805/web_slika-1-1170x658_b2pbza.jpg"
+    src="/public/assets/web_slika-1-1170x658_b2pbza.jpg"
     alt="Schemat siatki (mesh) w z-wave"
     width="585"
     height="329"
@@ -104,12 +104,7 @@ Gdy mamy już rozpisane mniej więcej nasze potrzeby na automatyzację i znamy m
 Rolety mają silniki elektryczne i przycisk pozwalający na sterowanie nimi. Gdy wciskamy klawisz ze strzałką w górę, to roleta się otwiera, a gdy drugi przycisk, to rolet się zamyka. Pytanie, czy da się to zautomatyzować?
 
 <Gallery columns="1">
-  <img
-    src="https://res.cloudinary.com/type-of-web/image/upload/v1639000885/main_r1huaw.jpg"
-    alt="Typowy łącznik roletowy"
-    width="300"
-    height="300"
-  />
+  <img src="/public/assets/main_r1huaw.jpg" alt="Typowy łącznik roletowy" width="300" height="300" />
   Typowy łącznik roletowy
   {'\n'}Zdjęcie pochodzi ze strony leroymerlin.pl
 </Gallery>
@@ -118,7 +113,7 @@ Odpowiedź to: oczywiście, że tak. Możemy wykorzystać odpowiednio zaprogramo
 
 <Gallery columns="1">
   <img
-    src="https://res.cloudinary.com/type-of-web/image/upload/v1639001315/Screenshot_2021-12-08_at_23.07.26_rzt8iu.png"
+    src="/public/assets/Screenshot_2021-12-08_at_23.07.26_rzt8iu.png"
     alt="Zamontowany roller shutter bez problemu mieści się w puszcze w ścianie"
     width="403"
     height="271"
@@ -147,7 +142,7 @@ Niezależnie od wybranej opcji, przycisk jest „aktorem”, którego wciśnięc
 
 <Gallery columns="1">
   <img
-    src="https://res.cloudinary.com/type-of-web/image/upload/v1639001399/Screenshot_2021-12-05_at_20.47.36_qbjrs9.png"
+    src="/public/assets/Screenshot_2021-12-05_at_20.47.36_qbjrs9.png"
     alt="Blokowy edytor scen pozwala na tworzenie scenariuszy nawet osobom niepotrafiącym programować"
     width="1004"
     height="563"

_wordpress_posts/2016/04/asi-czyli-automatyczne-wstawianie-srednikow.md

@@ -9,7 +9,7 @@ authors:
   - michal-miszczyszyn
 type: post
 thumbnail:
-  url: https://res.cloudinary.com/type-of-web/wp-content/uploads/2016/04/business-2717066_1280.jpg
+  url: /public/assets/wp-content/uploads/2016/04/business-2717066_1280.jpg
   width: 1280
   height: 847
 categories:

_wordpress_posts/2016/04/typescript-na-serwerze.md

@@ -8,7 +8,7 @@ authors:
   - michal-miszczyszyn
 type: post
 thumbnail:
-  url: https://res.cloudinary.com/type-of-web/wp-content/uploads/2016/04/pexels-photo-574073.jpeg
+  url: /public/assets/wp-content/uploads/2016/04/pexels-photo-574073.jpeg
   width: 1920
   height: 1271
 categories: