From cf96977273347cef223f53c35376391270d1b8dc Mon Sep 17 00:00:00 2001
From: Anxhelo Lushka <anxhelo1995@gmail.com>
Date: Sun, 14 Oct 2018 14:15:10 +0200
Subject: [PATCH] new lazyload and FontAwesome, more updates

---
 _includes/footer.html                         |  8 ++
 _includes/head.html                           |  6 +-
 .../01/03/Hello-open-source-design-world.html | 14 +++-
 ...ject-has-a-logo-guess-who-designed-it.html | 14 +++-
 ...workshop-open-labs-hackerspace-tirana.html | 14 +++-
 _site/2017/08/25/ura-sha-2017.html            | 14 +++-
 .../01/09/ura-work-week-november-2017.html    | 14 +++-
 .../15/chaos-communication-congress-2017.html | 14 +++-
 _site/2018/02/09/ura-fosdem-2018.html         | 14 +++-
 .../2018/02/23/inkscape-workshop-tirana.html  | 14 +++-
 ...ow-part-open-tech-funds-usability-lab.html | 14 +++-
 _site/2018/03/19/new-ura-website.html         | 14 +++-
 ...ucing-cryptopayments-for-our-services.html | 14 +++-
 _site/2018/05/31/oscal-18-we-were-there.html  | 14 +++-
 .../06/13/reproducible-builds-styleguide.html | 14 +++-
 ...ming-renata-uras-usability-researcher.html | 14 +++-
 .../02/style-guides-go-beyond-aesthetics.html | 14 +++-
 _site/2018/07/05/thunderbird-style-guide.html | 14 +++-
 _site/404.html                                | 14 +++-
 _site/about.html                              | 34 ++++----
 _site/blog/index.html                         | 26 ++++---
 _site/blog/page2/index.html                   | 26 ++++---
 _site/blog/page3/index.html                   | 22 ++++--
 _site/contact.html                            | 14 +++-
 _site/events/fosdem-2017.html                 | 14 +++-
 _site/events/fosdem-2018.html                 | 14 +++-
 _site/events/index.html                       | 14 +++-
 _site/events/oscal-2017.html                  | 14 +++-
 _site/events/oscal-2018.html                  | 14 +++-
 _site/events/osd-workshop-1-in-tirana.html    | 14 +++-
 _site/events/osd-workshop-2-tirana.html       | 14 +++-
 _site/events/osd-workshop-3-tirana.html       | 14 +++-
 _site/feed.xml                                |  4 +-
 _site/index.html                              | 46 ++++++-----
 _site/jobs/frontend.html                      | 14 +++-
 _site/jobs/full-stack.html                    | 14 +++-
 _site/jobs/index.html                         | 14 +++-
 _site/js/lazyload.min.js                      |  1 +
 _site/logobridge.html                         | 78 ++++++++++---------
 _site/portfolio-item-2.html                   | 14 +++-
 _site/privacy-policy.html                     | 14 +++-
 _site/projects/enigmail.html                  | 26 ++++---
 _site/projects/index.html                     | 32 ++++----
 _site/projects/libocon.html                   | 26 ++++---
 _site/projects/mozilla-l10n.html              | 28 ++++---
 _site/projects/openchain.html                 | 24 +++---
 _site/projects/openlabs.html                  | 38 +++++----
 _site/projects/reproducible-builds.html       | 34 ++++----
 _site/projects/sfk16.html                     | 26 ++++---
 _site/projects/thunderbird.html               | 32 ++++----
 _site/projects/tor-style-guide.html           | 34 ++++----
 _site/request.html                            | 14 +++-
 _site/services.html                           | 14 +++-
 _site/support-us.html                         | 22 ++++--
 _site/tags/index.html                         | 14 +++-
 about.html                                    |  4 +-
 blog/index.html                               |  2 +-
 index.html                                    | 14 ++--
 js/lazyload.min.js                            |  1 +
 logobridge.html                               | 64 +++++++--------
 projects/enigmail.html                        | 12 +--
 projects/index.html                           |  6 +-
 projects/libocon.html                         | 12 +--
 projects/mozilla-l10n.html                    | 14 ++--
 projects/openchain.html                       | 10 +--
 projects/openlabs.html                        | 24 +++---
 projects/reproducible-builds.html             | 20 ++---
 projects/sfk16.html                           | 12 +--
 projects/thunderbird.html                     | 18 ++---
 projects/tor-style-guide.html                 | 20 ++---
 support-us.html                               |  8 +-
 71 files changed, 802 insertions(+), 488 deletions(-)
 create mode 100644 _site/js/lazyload.min.js
 create mode 100644 js/lazyload.min.js

diff --git a/_includes/footer.html b/_includes/footer.html
index 5391422..ae94578 100644
--- a/_includes/footer.html
+++ b/_includes/footer.html
@@ -27,9 +27,17 @@
 <script src="{{ "/js/jquery.validate.js" | prepend: site.baseurl }}"></script>
 <!-- <script src="{{ "/bower_components/countto/jquery.countTo.js" | prepend: site.baseurl }}"></script> -->
 <script src="{{ "/bower_components/appear/jquery.appear.js" | prepend: site.baseurl }}"></script>
+<script src="{{ "/bower_components/modernizr/modernizr.js" | prepend: site.baseurl }}"></script>
 <script src="{{ "/js/app.js" | prepend: site.baseurl }}"></script>
 <script src="{{ "/js/svg.js" | prepend: site.baseurl }}"></script>
 <script src="{{ "/js/cookie.js" | prepend: site.baseurl }}"></script>
+<script src="{{ "/js/lazyload.min.js" | prepend: site.baseurl }}"></script>
+
+<script>
+var myLazyLoad = new LazyLoad({
+    elements_selector: ".lazy"
+});
+</script>
 
 <!-- Matomo -->
 <script type="text/javascript">
diff --git a/_includes/head.html b/_includes/head.html
index ca9070c..a5b8c31 100644
--- a/_includes/head.html
+++ b/_includes/head.html
@@ -38,7 +38,7 @@
   <meta name="twitter:image:src" content="https://ura.design/{{ page.images }}" />
   
   <link rel="stylesheet" href="{{ "/css/app.css" | prepend: site.baseurl }}">
-  <link href="{{ "/fonts/overpass/overpass.css" | prepend: site.baseurl }}" rel="stylesheet">
+  <link rel="stylesheet" href="{{ "/fonts/overpass/overpass.css" | prepend: site.baseurl }}">
   <link rel="stylesheet" href="{{ "/css/superslides.css" | prepend: site.baseurl }}"/>
   <link rel="stylesheet" href="{{ "/css/slick-theme.css" | prepend: site.baseurl }}"/>
   <link rel="stylesheet" href="{{ "/css/slick.css" | prepend: site.baseurl }}"/>
@@ -48,9 +48,7 @@
   <link rel="stylesheet" href="{{ "/css/fontawesome-all.css" | prepend: site.baseurl }}"/>
   <link rel="stylesheet" href="{{ "/css/style.css" | prepend: site.baseurl }}"/>
   <link rel="stylesheet" href="{{ "/css/responsive.css" | prepend: site.baseurl }}"/>
-
-  <script src="{{ "/bower_components/modernizr/modernizr.js" | prepend: site.baseurl }}"></script>
-  
+    
   <link rel="canonical" href="{{ page.url | replace:'index.html','' | prepend: site.baseurl | prepend: site.url }}">
   <link rel="alternate" type="application/rss+xml" title="{{ site.title }}" href="{{ "/feed.xml" | prepend: site.baseurl | prepend: site.url }}">
 </head>
diff --git a/_site/2017/01/03/Hello-open-source-design-world.html b/_site/2017/01/03/Hello-open-source-design-world.html
index e5cd771..9efa110 100644
--- a/_site/2017/01/03/Hello-open-source-design-world.html
+++ b/_site/2017/01/03/Hello-open-source-design-world.html
@@ -39,7 +39,7 @@
   <meta name="twitter:image:src" content="https://ura.design/images/blog/hello_world.png" />
   
   <link rel="stylesheet" href="/css/app.css">
-  <link href="/fonts/overpass/overpass.css" rel="stylesheet">
+  <link rel="stylesheet" href="/fonts/overpass/overpass.css">
   <link rel="stylesheet" href="/css/superslides.css"/>
   <link rel="stylesheet" href="/css/slick-theme.css"/>
   <link rel="stylesheet" href="/css/slick.css"/>
@@ -49,9 +49,7 @@
   <link rel="stylesheet" href="/css/fontawesome-all.css"/>
   <link rel="stylesheet" href="/css/style.css"/>
   <link rel="stylesheet" href="/css/responsive.css"/>
-
-  <script src="/bower_components/modernizr/modernizr.js"></script>
-  
+    
   <link rel="canonical" href="http://localhost:4000/2017/01/03/Hello-open-source-design-world.html">
   <link rel="alternate" type="application/rss+xml" title="Ura Design" href="http://localhost:4000/feed.xml">
 </head>
@@ -231,9 +229,17 @@ This will be our own space in the big ocean of chaotic, decentralized, beautiful
 <script src="/js/jquery.validate.js"></script>
 <!-- <script src="/bower_components/countto/jquery.countTo.js"></script> -->
 <script src="/bower_components/appear/jquery.appear.js"></script>
+<script src="/bower_components/modernizr/modernizr.js"></script>
 <script src="/js/app.js"></script>
 <script src="/js/svg.js"></script>
 <script src="/js/cookie.js"></script>
+<script src="/js/lazyload.min.js"></script>
+
+<script>
+var myLazyLoad = new LazyLoad({
+    elements_selector: ".lazy"
+});
+</script>
 
 <!-- Matomo -->
 <script type="text/javascript">
diff --git a/_site/2017/01/24/wikispeech-wikimedia-project-has-a-logo-guess-who-designed-it.html b/_site/2017/01/24/wikispeech-wikimedia-project-has-a-logo-guess-who-designed-it.html
index 8937bd5..dd1e964 100644
--- a/_site/2017/01/24/wikispeech-wikimedia-project-has-a-logo-guess-who-designed-it.html
+++ b/_site/2017/01/24/wikispeech-wikimedia-project-has-a-logo-guess-who-designed-it.html
@@ -41,7 +41,7 @@
   <meta name="twitter:image:src" content="https://ura.design/images/blog/ura-wikispeech.png" />
   
   <link rel="stylesheet" href="/css/app.css">
-  <link href="/fonts/overpass/overpass.css" rel="stylesheet">
+  <link rel="stylesheet" href="/fonts/overpass/overpass.css">
   <link rel="stylesheet" href="/css/superslides.css"/>
   <link rel="stylesheet" href="/css/slick-theme.css"/>
   <link rel="stylesheet" href="/css/slick.css"/>
@@ -51,9 +51,7 @@
   <link rel="stylesheet" href="/css/fontawesome-all.css"/>
   <link rel="stylesheet" href="/css/style.css"/>
   <link rel="stylesheet" href="/css/responsive.css"/>
-
-  <script src="/bower_components/modernizr/modernizr.js"></script>
-  
+    
   <link rel="canonical" href="http://localhost:4000/2017/01/24/wikispeech-wikimedia-project-has-a-logo-guess-who-designed-it.html">
   <link rel="alternate" type="application/rss+xml" title="Ura Design" href="http://localhost:4000/feed.xml">
 </head>
@@ -250,9 +248,17 @@ Help us hep floss initiatives communicate better with their audiences through op
 <script src="/js/jquery.validate.js"></script>
 <!-- <script src="/bower_components/countto/jquery.countTo.js"></script> -->
 <script src="/bower_components/appear/jquery.appear.js"></script>
+<script src="/bower_components/modernizr/modernizr.js"></script>
 <script src="/js/app.js"></script>
 <script src="/js/svg.js"></script>
 <script src="/js/cookie.js"></script>
+<script src="/js/lazyload.min.js"></script>
+
+<script>
+var myLazyLoad = new LazyLoad({
+    elements_selector: ".lazy"
+});
+</script>
 
 <!-- Matomo -->
 <script type="text/javascript">
diff --git a/_site/2017/02/11/open-source-design-workshop-open-labs-hackerspace-tirana.html b/_site/2017/02/11/open-source-design-workshop-open-labs-hackerspace-tirana.html
index 2d5c550..25870d3 100644
--- a/_site/2017/02/11/open-source-design-workshop-open-labs-hackerspace-tirana.html
+++ b/_site/2017/02/11/open-source-design-workshop-open-labs-hackerspace-tirana.html
@@ -39,7 +39,7 @@
   <meta name="twitter:image:src" content="https://ura.design/images/blog/osd_event.png" />
   
   <link rel="stylesheet" href="/css/app.css">
-  <link href="/fonts/overpass/overpass.css" rel="stylesheet">
+  <link rel="stylesheet" href="/fonts/overpass/overpass.css">
   <link rel="stylesheet" href="/css/superslides.css"/>
   <link rel="stylesheet" href="/css/slick-theme.css"/>
   <link rel="stylesheet" href="/css/slick.css"/>
@@ -49,9 +49,7 @@
   <link rel="stylesheet" href="/css/fontawesome-all.css"/>
   <link rel="stylesheet" href="/css/style.css"/>
   <link rel="stylesheet" href="/css/responsive.css"/>
-
-  <script src="/bower_components/modernizr/modernizr.js"></script>
-  
+    
   <link rel="canonical" href="http://localhost:4000/2017/02/11/open-source-design-workshop-open-labs-hackerspace-tirana.html">
   <link rel="alternate" type="application/rss+xml" title="Ura Design" href="http://localhost:4000/feed.xml">
 </head>
@@ -277,9 +275,17 @@ During the presentation the participants had the opportunity to:
 <script src="/js/jquery.validate.js"></script>
 <!-- <script src="/bower_components/countto/jquery.countTo.js"></script> -->
 <script src="/bower_components/appear/jquery.appear.js"></script>
+<script src="/bower_components/modernizr/modernizr.js"></script>
 <script src="/js/app.js"></script>
 <script src="/js/svg.js"></script>
 <script src="/js/cookie.js"></script>
+<script src="/js/lazyload.min.js"></script>
+
+<script>
+var myLazyLoad = new LazyLoad({
+    elements_selector: ".lazy"
+});
+</script>
 
 <!-- Matomo -->
 <script type="text/javascript">
diff --git a/_site/2017/08/25/ura-sha-2017.html b/_site/2017/08/25/ura-sha-2017.html
index 4ba740d..c598bb5 100644
--- a/_site/2017/08/25/ura-sha-2017.html
+++ b/_site/2017/08/25/ura-sha-2017.html
@@ -37,7 +37,7 @@
   <meta name="twitter:image:src" content="https://ura.design/images/blog/sha1-thumb.jpg" />
   
   <link rel="stylesheet" href="/css/app.css">
-  <link href="/fonts/overpass/overpass.css" rel="stylesheet">
+  <link rel="stylesheet" href="/fonts/overpass/overpass.css">
   <link rel="stylesheet" href="/css/superslides.css"/>
   <link rel="stylesheet" href="/css/slick-theme.css"/>
   <link rel="stylesheet" href="/css/slick.css"/>
@@ -47,9 +47,7 @@
   <link rel="stylesheet" href="/css/fontawesome-all.css"/>
   <link rel="stylesheet" href="/css/style.css"/>
   <link rel="stylesheet" href="/css/responsive.css"/>
-
-  <script src="/bower_components/modernizr/modernizr.js"></script>
-  
+    
   <link rel="canonical" href="http://localhost:4000/2017/08/25/ura-sha-2017.html">
   <link rel="alternate" type="application/rss+xml" title="Ura Design" href="http://localhost:4000/feed.xml">
 </head>
@@ -267,9 +265,17 @@ For those of you who haven’t heard of SHA before: this is an outdoor hacker ca
 <script src="/js/jquery.validate.js"></script>
 <!-- <script src="/bower_components/countto/jquery.countTo.js"></script> -->
 <script src="/bower_components/appear/jquery.appear.js"></script>
+<script src="/bower_components/modernizr/modernizr.js"></script>
 <script src="/js/app.js"></script>
 <script src="/js/svg.js"></script>
 <script src="/js/cookie.js"></script>
+<script src="/js/lazyload.min.js"></script>
+
+<script>
+var myLazyLoad = new LazyLoad({
+    elements_selector: ".lazy"
+});
+</script>
 
 <!-- Matomo -->
 <script type="text/javascript">
diff --git a/_site/2018/01/09/ura-work-week-november-2017.html b/_site/2018/01/09/ura-work-week-november-2017.html
index 0685dc1..c133078 100644
--- a/_site/2018/01/09/ura-work-week-november-2017.html
+++ b/_site/2018/01/09/ura-work-week-november-2017.html
@@ -37,7 +37,7 @@
   <meta name="twitter:image:src" content="https://ura.design/images/blog/work_week_2017.png" />
   
   <link rel="stylesheet" href="/css/app.css">
-  <link href="/fonts/overpass/overpass.css" rel="stylesheet">
+  <link rel="stylesheet" href="/fonts/overpass/overpass.css">
   <link rel="stylesheet" href="/css/superslides.css"/>
   <link rel="stylesheet" href="/css/slick-theme.css"/>
   <link rel="stylesheet" href="/css/slick.css"/>
@@ -47,9 +47,7 @@
   <link rel="stylesheet" href="/css/fontawesome-all.css"/>
   <link rel="stylesheet" href="/css/style.css"/>
   <link rel="stylesheet" href="/css/responsive.css"/>
-
-  <script src="/bower_components/modernizr/modernizr.js"></script>
-  
+    
   <link rel="canonical" href="http://localhost:4000/2018/01/09/ura-work-week-november-2017.html">
   <link rel="alternate" type="application/rss+xml" title="Ura Design" href="http://localhost:4000/feed.xml">
 </head>
@@ -250,9 +248,17 @@ We had our first working week this November where all gathered in the city of Ti
 <script src="/js/jquery.validate.js"></script>
 <!-- <script src="/bower_components/countto/jquery.countTo.js"></script> -->
 <script src="/bower_components/appear/jquery.appear.js"></script>
+<script src="/bower_components/modernizr/modernizr.js"></script>
 <script src="/js/app.js"></script>
 <script src="/js/svg.js"></script>
 <script src="/js/cookie.js"></script>
+<script src="/js/lazyload.min.js"></script>
+
+<script>
+var myLazyLoad = new LazyLoad({
+    elements_selector: ".lazy"
+});
+</script>
 
 <!-- Matomo -->
 <script type="text/javascript">
diff --git a/_site/2018/01/15/chaos-communication-congress-2017.html b/_site/2018/01/15/chaos-communication-congress-2017.html
index 24fa863..9b5e680 100644
--- a/_site/2018/01/15/chaos-communication-congress-2017.html
+++ b/_site/2018/01/15/chaos-communication-congress-2017.html
@@ -39,7 +39,7 @@
   <meta name="twitter:image:src" content="https://ura.design/images/blog/34c3_thumb.png" />
   
   <link rel="stylesheet" href="/css/app.css">
-  <link href="/fonts/overpass/overpass.css" rel="stylesheet">
+  <link rel="stylesheet" href="/fonts/overpass/overpass.css">
   <link rel="stylesheet" href="/css/superslides.css"/>
   <link rel="stylesheet" href="/css/slick-theme.css"/>
   <link rel="stylesheet" href="/css/slick.css"/>
@@ -49,9 +49,7 @@
   <link rel="stylesheet" href="/css/fontawesome-all.css"/>
   <link rel="stylesheet" href="/css/style.css"/>
   <link rel="stylesheet" href="/css/responsive.css"/>
-
-  <script src="/bower_components/modernizr/modernizr.js"></script>
-  
+    
   <link rel="canonical" href="http://localhost:4000/2018/01/15/chaos-communication-congress-2017.html">
   <link rel="alternate" type="application/rss+xml" title="Ura Design" href="http://localhost:4000/feed.xml">
 </head>
@@ -248,9 +246,17 @@
 <script src="/js/jquery.validate.js"></script>
 <!-- <script src="/bower_components/countto/jquery.countTo.js"></script> -->
 <script src="/bower_components/appear/jquery.appear.js"></script>
+<script src="/bower_components/modernizr/modernizr.js"></script>
 <script src="/js/app.js"></script>
 <script src="/js/svg.js"></script>
 <script src="/js/cookie.js"></script>
+<script src="/js/lazyload.min.js"></script>
+
+<script>
+var myLazyLoad = new LazyLoad({
+    elements_selector: ".lazy"
+});
+</script>
 
 <!-- Matomo -->
 <script type="text/javascript">
diff --git a/_site/2018/02/09/ura-fosdem-2018.html b/_site/2018/02/09/ura-fosdem-2018.html
index b06a4c1..f73acc2 100644
--- a/_site/2018/02/09/ura-fosdem-2018.html
+++ b/_site/2018/02/09/ura-fosdem-2018.html
@@ -41,7 +41,7 @@
   <meta name="twitter:image:src" content="https://ura.design/images/blog/Elio-FOSDEM2018-thumb.jpg" />
   
   <link rel="stylesheet" href="/css/app.css">
-  <link href="/fonts/overpass/overpass.css" rel="stylesheet">
+  <link rel="stylesheet" href="/fonts/overpass/overpass.css">
   <link rel="stylesheet" href="/css/superslides.css"/>
   <link rel="stylesheet" href="/css/slick-theme.css"/>
   <link rel="stylesheet" href="/css/slick.css"/>
@@ -51,9 +51,7 @@
   <link rel="stylesheet" href="/css/fontawesome-all.css"/>
   <link rel="stylesheet" href="/css/style.css"/>
   <link rel="stylesheet" href="/css/responsive.css"/>
-
-  <script src="/bower_components/modernizr/modernizr.js"></script>
-  
+    
   <link rel="canonical" href="http://localhost:4000/2018/02/09/ura-fosdem-2018.html">
   <link rel="alternate" type="application/rss+xml" title="Ura Design" href="http://localhost:4000/feed.xml">
 </head>
@@ -265,9 +263,17 @@ Looking forward at the next edition with more interesting projects and more <str
 <script src="/js/jquery.validate.js"></script>
 <!-- <script src="/bower_components/countto/jquery.countTo.js"></script> -->
 <script src="/bower_components/appear/jquery.appear.js"></script>
+<script src="/bower_components/modernizr/modernizr.js"></script>
 <script src="/js/app.js"></script>
 <script src="/js/svg.js"></script>
 <script src="/js/cookie.js"></script>
+<script src="/js/lazyload.min.js"></script>
+
+<script>
+var myLazyLoad = new LazyLoad({
+    elements_selector: ".lazy"
+});
+</script>
 
 <!-- Matomo -->
 <script type="text/javascript">
diff --git a/_site/2018/02/23/inkscape-workshop-tirana.html b/_site/2018/02/23/inkscape-workshop-tirana.html
index e20cc2a..87babb3 100644
--- a/_site/2018/02/23/inkscape-workshop-tirana.html
+++ b/_site/2018/02/23/inkscape-workshop-tirana.html
@@ -39,7 +39,7 @@
   <meta name="twitter:image:src" content="https://ura.design/images/blog/Inkscape-Workshop-1-thumb.jpg" />
   
   <link rel="stylesheet" href="/css/app.css">
-  <link href="/fonts/overpass/overpass.css" rel="stylesheet">
+  <link rel="stylesheet" href="/fonts/overpass/overpass.css">
   <link rel="stylesheet" href="/css/superslides.css"/>
   <link rel="stylesheet" href="/css/slick-theme.css"/>
   <link rel="stylesheet" href="/css/slick.css"/>
@@ -49,9 +49,7 @@
   <link rel="stylesheet" href="/css/fontawesome-all.css"/>
   <link rel="stylesheet" href="/css/style.css"/>
   <link rel="stylesheet" href="/css/responsive.css"/>
-
-  <script src="/bower_components/modernizr/modernizr.js"></script>
-  
+    
   <link rel="canonical" href="http://localhost:4000/2018/02/23/inkscape-workshop-tirana.html">
   <link rel="alternate" type="application/rss+xml" title="Ura Design" href="http://localhost:4000/feed.xml">
 </head>
@@ -270,9 +268,17 @@
 <script src="/js/jquery.validate.js"></script>
 <!-- <script src="/bower_components/countto/jquery.countTo.js"></script> -->
 <script src="/bower_components/appear/jquery.appear.js"></script>
+<script src="/bower_components/modernizr/modernizr.js"></script>
 <script src="/js/app.js"></script>
 <script src="/js/svg.js"></script>
 <script src="/js/cookie.js"></script>
+<script src="/js/lazyload.min.js"></script>
+
+<script>
+var myLazyLoad = new LazyLoad({
+    elements_selector: ".lazy"
+});
+</script>
 
 <!-- Matomo -->
 <script type="text/javascript">
diff --git a/_site/2018/03/12/ura-now-part-open-tech-funds-usability-lab.html b/_site/2018/03/12/ura-now-part-open-tech-funds-usability-lab.html
index da552db..ea786a3 100644
--- a/_site/2018/03/12/ura-now-part-open-tech-funds-usability-lab.html
+++ b/_site/2018/03/12/ura-now-part-open-tech-funds-usability-lab.html
@@ -41,7 +41,7 @@
   <meta name="twitter:image:src" content="https://ura.design/images/blog/home-banner.jpg" />
   
   <link rel="stylesheet" href="/css/app.css">
-  <link href="/fonts/overpass/overpass.css" rel="stylesheet">
+  <link rel="stylesheet" href="/fonts/overpass/overpass.css">
   <link rel="stylesheet" href="/css/superslides.css"/>
   <link rel="stylesheet" href="/css/slick-theme.css"/>
   <link rel="stylesheet" href="/css/slick.css"/>
@@ -51,9 +51,7 @@
   <link rel="stylesheet" href="/css/fontawesome-all.css"/>
   <link rel="stylesheet" href="/css/style.css"/>
   <link rel="stylesheet" href="/css/responsive.css"/>
-
-  <script src="/bower_components/modernizr/modernizr.js"></script>
-  
+    
   <link rel="canonical" href="http://localhost:4000/2018/03/12/ura-now-part-open-tech-funds-usability-lab.html">
   <link rel="alternate" type="application/rss+xml" title="Ura Design" href="http://localhost:4000/feed.xml">
 </head>
@@ -265,9 +263,17 @@ Unfortunately, few of these software­ development teams have the capacity or ex
 <script src="/js/jquery.validate.js"></script>
 <!-- <script src="/bower_components/countto/jquery.countTo.js"></script> -->
 <script src="/bower_components/appear/jquery.appear.js"></script>
+<script src="/bower_components/modernizr/modernizr.js"></script>
 <script src="/js/app.js"></script>
 <script src="/js/svg.js"></script>
 <script src="/js/cookie.js"></script>
+<script src="/js/lazyload.min.js"></script>
+
+<script>
+var myLazyLoad = new LazyLoad({
+    elements_selector: ".lazy"
+});
+</script>
 
 <!-- Matomo -->
 <script type="text/javascript">
diff --git a/_site/2018/03/19/new-ura-website.html b/_site/2018/03/19/new-ura-website.html
index 3379f16..caa8f6d 100644
--- a/_site/2018/03/19/new-ura-website.html
+++ b/_site/2018/03/19/new-ura-website.html
@@ -39,7 +39,7 @@
   <meta name="twitter:image:src" content="https://ura.design/images/blog/website_thumb.jpg" />
   
   <link rel="stylesheet" href="/css/app.css">
-  <link href="/fonts/overpass/overpass.css" rel="stylesheet">
+  <link rel="stylesheet" href="/fonts/overpass/overpass.css">
   <link rel="stylesheet" href="/css/superslides.css"/>
   <link rel="stylesheet" href="/css/slick-theme.css"/>
   <link rel="stylesheet" href="/css/slick.css"/>
@@ -49,9 +49,7 @@
   <link rel="stylesheet" href="/css/fontawesome-all.css"/>
   <link rel="stylesheet" href="/css/style.css"/>
   <link rel="stylesheet" href="/css/responsive.css"/>
-
-  <script src="/bower_components/modernizr/modernizr.js"></script>
-  
+    
   <link rel="canonical" href="http://localhost:4000/2018/03/19/new-ura-website.html">
   <link rel="alternate" type="application/rss+xml" title="Ura Design" href="http://localhost:4000/feed.xml">
 </head>
@@ -238,9 +236,17 @@
 <script src="/js/jquery.validate.js"></script>
 <!-- <script src="/bower_components/countto/jquery.countTo.js"></script> -->
 <script src="/bower_components/appear/jquery.appear.js"></script>
+<script src="/bower_components/modernizr/modernizr.js"></script>
 <script src="/js/app.js"></script>
 <script src="/js/svg.js"></script>
 <script src="/js/cookie.js"></script>
+<script src="/js/lazyload.min.js"></script>
+
+<script>
+var myLazyLoad = new LazyLoad({
+    elements_selector: ".lazy"
+});
+</script>
 
 <!-- Matomo -->
 <script type="text/javascript">
diff --git a/_site/2018/03/31/introducing-cryptopayments-for-our-services.html b/_site/2018/03/31/introducing-cryptopayments-for-our-services.html
index b118eae..118d62c 100644
--- a/_site/2018/03/31/introducing-cryptopayments-for-our-services.html
+++ b/_site/2018/03/31/introducing-cryptopayments-for-our-services.html
@@ -39,7 +39,7 @@
   <meta name="twitter:image:src" content="https://ura.design/images/blog/CryptoCurrencyThumb.jpg" />
   
   <link rel="stylesheet" href="/css/app.css">
-  <link href="/fonts/overpass/overpass.css" rel="stylesheet">
+  <link rel="stylesheet" href="/fonts/overpass/overpass.css">
   <link rel="stylesheet" href="/css/superslides.css"/>
   <link rel="stylesheet" href="/css/slick-theme.css"/>
   <link rel="stylesheet" href="/css/slick.css"/>
@@ -49,9 +49,7 @@
   <link rel="stylesheet" href="/css/fontawesome-all.css"/>
   <link rel="stylesheet" href="/css/style.css"/>
   <link rel="stylesheet" href="/css/responsive.css"/>
-
-  <script src="/bower_components/modernizr/modernizr.js"></script>
-  
+    
   <link rel="canonical" href="http://localhost:4000/2018/03/31/introducing-cryptopayments-for-our-services.html">
   <link rel="alternate" type="application/rss+xml" title="Ura Design" href="http://localhost:4000/feed.xml">
 </head>
@@ -251,9 +249,17 @@ As you might know, a part of the project is funded by generous pledges on our Pa
 <script src="/js/jquery.validate.js"></script>
 <!-- <script src="/bower_components/countto/jquery.countTo.js"></script> -->
 <script src="/bower_components/appear/jquery.appear.js"></script>
+<script src="/bower_components/modernizr/modernizr.js"></script>
 <script src="/js/app.js"></script>
 <script src="/js/svg.js"></script>
 <script src="/js/cookie.js"></script>
+<script src="/js/lazyload.min.js"></script>
+
+<script>
+var myLazyLoad = new LazyLoad({
+    elements_selector: ".lazy"
+});
+</script>
 
 <!-- Matomo -->
 <script type="text/javascript">
diff --git a/_site/2018/05/31/oscal-18-we-were-there.html b/_site/2018/05/31/oscal-18-we-were-there.html
index 7e80bda..02031d1 100644
--- a/_site/2018/05/31/oscal-18-we-were-there.html
+++ b/_site/2018/05/31/oscal-18-we-were-there.html
@@ -39,7 +39,7 @@
   <meta name="twitter:image:src" content="https://ura.design/images/blog/OSCAL_thumbnail.png" />
   
   <link rel="stylesheet" href="/css/app.css">
-  <link href="/fonts/overpass/overpass.css" rel="stylesheet">
+  <link rel="stylesheet" href="/fonts/overpass/overpass.css">
   <link rel="stylesheet" href="/css/superslides.css"/>
   <link rel="stylesheet" href="/css/slick-theme.css"/>
   <link rel="stylesheet" href="/css/slick.css"/>
@@ -49,9 +49,7 @@
   <link rel="stylesheet" href="/css/fontawesome-all.css"/>
   <link rel="stylesheet" href="/css/style.css"/>
   <link rel="stylesheet" href="/css/responsive.css"/>
-
-  <script src="/bower_components/modernizr/modernizr.js"></script>
-  
+    
   <link rel="canonical" href="http://localhost:4000/2018/05/31/oscal-18-we-were-there.html">
   <link rel="alternate" type="application/rss+xml" title="Ura Design" href="http://localhost:4000/feed.xml">
 </head>
@@ -259,9 +257,17 @@ This will set a solid base for the upcoming Usability Study which will shine lig
 <script src="/js/jquery.validate.js"></script>
 <!-- <script src="/bower_components/countto/jquery.countTo.js"></script> -->
 <script src="/bower_components/appear/jquery.appear.js"></script>
+<script src="/bower_components/modernizr/modernizr.js"></script>
 <script src="/js/app.js"></script>
 <script src="/js/svg.js"></script>
 <script src="/js/cookie.js"></script>
+<script src="/js/lazyload.min.js"></script>
+
+<script>
+var myLazyLoad = new LazyLoad({
+    elements_selector: ".lazy"
+});
+</script>
 
 <!-- Matomo -->
 <script type="text/javascript">
diff --git a/_site/2018/06/13/reproducible-builds-styleguide.html b/_site/2018/06/13/reproducible-builds-styleguide.html
index eb59470..e1ce2f3 100644
--- a/_site/2018/06/13/reproducible-builds-styleguide.html
+++ b/_site/2018/06/13/reproducible-builds-styleguide.html
@@ -41,7 +41,7 @@
   <meta name="twitter:image:src" content="https://ura.design/images/blog/ReproducibleBuilds_thumbnail.png" />
   
   <link rel="stylesheet" href="/css/app.css">
-  <link href="/fonts/overpass/overpass.css" rel="stylesheet">
+  <link rel="stylesheet" href="/fonts/overpass/overpass.css">
   <link rel="stylesheet" href="/css/superslides.css"/>
   <link rel="stylesheet" href="/css/slick-theme.css"/>
   <link rel="stylesheet" href="/css/slick.css"/>
@@ -51,9 +51,7 @@
   <link rel="stylesheet" href="/css/fontawesome-all.css"/>
   <link rel="stylesheet" href="/css/style.css"/>
   <link rel="stylesheet" href="/css/responsive.css"/>
-
-  <script src="/bower_components/modernizr/modernizr.js"></script>
-  
+    
   <link rel="canonical" href="http://localhost:4000/2018/06/13/reproducible-builds-styleguide.html">
   <link rel="alternate" type="application/rss+xml" title="Ura Design" href="http://localhost:4000/feed.xml">
 </head>
@@ -260,9 +258,17 @@
 <script src="/js/jquery.validate.js"></script>
 <!-- <script src="/bower_components/countto/jquery.countTo.js"></script> -->
 <script src="/bower_components/appear/jquery.appear.js"></script>
+<script src="/bower_components/modernizr/modernizr.js"></script>
 <script src="/js/app.js"></script>
 <script src="/js/svg.js"></script>
 <script src="/js/cookie.js"></script>
+<script src="/js/lazyload.min.js"></script>
+
+<script>
+var myLazyLoad = new LazyLoad({
+    elements_selector: ".lazy"
+});
+</script>
 
 <!-- Matomo -->
 <script type="text/javascript">
diff --git a/_site/2018/06/17/welcoming-renata-uras-usability-researcher.html b/_site/2018/06/17/welcoming-renata-uras-usability-researcher.html
index 5a358b9..f29d168 100644
--- a/_site/2018/06/17/welcoming-renata-uras-usability-researcher.html
+++ b/_site/2018/06/17/welcoming-renata-uras-usability-researcher.html
@@ -39,7 +39,7 @@
   <meta name="twitter:image:src" content="https://ura.design/images/blog/Renata_Redon_thumbnail.png" />
   
   <link rel="stylesheet" href="/css/app.css">
-  <link href="/fonts/overpass/overpass.css" rel="stylesheet">
+  <link rel="stylesheet" href="/fonts/overpass/overpass.css">
   <link rel="stylesheet" href="/css/superslides.css"/>
   <link rel="stylesheet" href="/css/slick-theme.css"/>
   <link rel="stylesheet" href="/css/slick.css"/>
@@ -49,9 +49,7 @@
   <link rel="stylesheet" href="/css/fontawesome-all.css"/>
   <link rel="stylesheet" href="/css/style.css"/>
   <link rel="stylesheet" href="/css/responsive.css"/>
-
-  <script src="/bower_components/modernizr/modernizr.js"></script>
-  
+    
   <link rel="canonical" href="http://localhost:4000/2018/06/17/welcoming-renata-uras-usability-researcher.html">
   <link rel="alternate" type="application/rss+xml" title="Ura Design" href="http://localhost:4000/feed.xml">
 </head>
@@ -258,9 +256,17 @@ potential users.</em> “</p>
 <script src="/js/jquery.validate.js"></script>
 <!-- <script src="/bower_components/countto/jquery.countTo.js"></script> -->
 <script src="/bower_components/appear/jquery.appear.js"></script>
+<script src="/bower_components/modernizr/modernizr.js"></script>
 <script src="/js/app.js"></script>
 <script src="/js/svg.js"></script>
 <script src="/js/cookie.js"></script>
+<script src="/js/lazyload.min.js"></script>
+
+<script>
+var myLazyLoad = new LazyLoad({
+    elements_selector: ".lazy"
+});
+</script>
 
 <!-- Matomo -->
 <script type="text/javascript">
diff --git a/_site/2018/07/02/style-guides-go-beyond-aesthetics.html b/_site/2018/07/02/style-guides-go-beyond-aesthetics.html
index a1ff69d..59fba81 100644
--- a/_site/2018/07/02/style-guides-go-beyond-aesthetics.html
+++ b/_site/2018/07/02/style-guides-go-beyond-aesthetics.html
@@ -39,7 +39,7 @@
   <meta name="twitter:image:src" content="https://ura.design/images/blog/osd_event.png" />
   
   <link rel="stylesheet" href="/css/app.css">
-  <link href="/fonts/overpass/overpass.css" rel="stylesheet">
+  <link rel="stylesheet" href="/fonts/overpass/overpass.css">
   <link rel="stylesheet" href="/css/superslides.css"/>
   <link rel="stylesheet" href="/css/slick-theme.css"/>
   <link rel="stylesheet" href="/css/slick.css"/>
@@ -49,9 +49,7 @@
   <link rel="stylesheet" href="/css/fontawesome-all.css"/>
   <link rel="stylesheet" href="/css/style.css"/>
   <link rel="stylesheet" href="/css/responsive.css"/>
-
-  <script src="/bower_components/modernizr/modernizr.js"></script>
-  
+    
   <link rel="canonical" href="http://localhost:4000/2018/07/02/style-guides-go-beyond-aesthetics.html">
   <link rel="alternate" type="application/rss+xml" title="Ura Design" href="http://localhost:4000/feed.xml">
 </head>
@@ -273,9 +271,17 @@
 <script src="/js/jquery.validate.js"></script>
 <!-- <script src="/bower_components/countto/jquery.countTo.js"></script> -->
 <script src="/bower_components/appear/jquery.appear.js"></script>
+<script src="/bower_components/modernizr/modernizr.js"></script>
 <script src="/js/app.js"></script>
 <script src="/js/svg.js"></script>
 <script src="/js/cookie.js"></script>
+<script src="/js/lazyload.min.js"></script>
+
+<script>
+var myLazyLoad = new LazyLoad({
+    elements_selector: ".lazy"
+});
+</script>
 
 <!-- Matomo -->
 <script type="text/javascript">
diff --git a/_site/2018/07/05/thunderbird-style-guide.html b/_site/2018/07/05/thunderbird-style-guide.html
index 8e234e1..9077949 100644
--- a/_site/2018/07/05/thunderbird-style-guide.html
+++ b/_site/2018/07/05/thunderbird-style-guide.html
@@ -41,7 +41,7 @@
   <meta name="twitter:image:src" content="https://ura.design/images/blog/thumb_thunderbird.png" />
   
   <link rel="stylesheet" href="/css/app.css">
-  <link href="/fonts/overpass/overpass.css" rel="stylesheet">
+  <link rel="stylesheet" href="/fonts/overpass/overpass.css">
   <link rel="stylesheet" href="/css/superslides.css"/>
   <link rel="stylesheet" href="/css/slick-theme.css"/>
   <link rel="stylesheet" href="/css/slick.css"/>
@@ -51,9 +51,7 @@
   <link rel="stylesheet" href="/css/fontawesome-all.css"/>
   <link rel="stylesheet" href="/css/style.css"/>
   <link rel="stylesheet" href="/css/responsive.css"/>
-
-  <script src="/bower_components/modernizr/modernizr.js"></script>
-  
+    
   <link rel="canonical" href="http://localhost:4000/2018/07/05/thunderbird-style-guide.html">
   <link rel="alternate" type="application/rss+xml" title="Ura Design" href="http://localhost:4000/feed.xml">
 </head>
@@ -263,9 +261,17 @@
 <script src="/js/jquery.validate.js"></script>
 <!-- <script src="/bower_components/countto/jquery.countTo.js"></script> -->
 <script src="/bower_components/appear/jquery.appear.js"></script>
+<script src="/bower_components/modernizr/modernizr.js"></script>
 <script src="/js/app.js"></script>
 <script src="/js/svg.js"></script>
 <script src="/js/cookie.js"></script>
+<script src="/js/lazyload.min.js"></script>
+
+<script>
+var myLazyLoad = new LazyLoad({
+    elements_selector: ".lazy"
+});
+</script>
 
 <!-- Matomo -->
 <script type="text/javascript">
diff --git a/_site/404.html b/_site/404.html
index 45478e9..be611b1 100644
--- a/_site/404.html
+++ b/_site/404.html
@@ -30,7 +30,7 @@
   <meta name="twitter:image:src" content="https://ura.design/" />
   
   <link rel="stylesheet" href="/css/app.css">
-  <link href="/fonts/overpass/overpass.css" rel="stylesheet">
+  <link rel="stylesheet" href="/fonts/overpass/overpass.css">
   <link rel="stylesheet" href="/css/superslides.css"/>
   <link rel="stylesheet" href="/css/slick-theme.css"/>
   <link rel="stylesheet" href="/css/slick.css"/>
@@ -40,9 +40,7 @@
   <link rel="stylesheet" href="/css/fontawesome-all.css"/>
   <link rel="stylesheet" href="/css/style.css"/>
   <link rel="stylesheet" href="/css/responsive.css"/>
-
-  <script src="/bower_components/modernizr/modernizr.js"></script>
-  
+    
   <link rel="canonical" href="http://localhost:4000/404.html">
   <link rel="alternate" type="application/rss+xml" title="Ura Design" href="http://localhost:4000/feed.xml">
 </head>
@@ -202,9 +200,17 @@
 <script src="/js/jquery.validate.js"></script>
 <!-- <script src="/bower_components/countto/jquery.countTo.js"></script> -->
 <script src="/bower_components/appear/jquery.appear.js"></script>
+<script src="/bower_components/modernizr/modernizr.js"></script>
 <script src="/js/app.js"></script>
 <script src="/js/svg.js"></script>
 <script src="/js/cookie.js"></script>
+<script src="/js/lazyload.min.js"></script>
+
+<script>
+var myLazyLoad = new LazyLoad({
+    elements_selector: ".lazy"
+});
+</script>
 
 <!-- Matomo -->
 <script type="text/javascript">
diff --git a/_site/about.html b/_site/about.html
index 680753c..c7992bd 100644
--- a/_site/about.html
+++ b/_site/about.html
@@ -30,7 +30,7 @@
   <meta name="twitter:image:src" content="https://ura.design/" />
   
   <link rel="stylesheet" href="/css/app.css">
-  <link href="/fonts/overpass/overpass.css" rel="stylesheet">
+  <link rel="stylesheet" href="/fonts/overpass/overpass.css">
   <link rel="stylesheet" href="/css/superslides.css"/>
   <link rel="stylesheet" href="/css/slick-theme.css"/>
   <link rel="stylesheet" href="/css/slick.css"/>
@@ -40,9 +40,7 @@
   <link rel="stylesheet" href="/css/fontawesome-all.css"/>
   <link rel="stylesheet" href="/css/style.css"/>
   <link rel="stylesheet" href="/css/responsive.css"/>
-
-  <script src="/bower_components/modernizr/modernizr.js"></script>
-  
+    
   <link rel="canonical" href="http://localhost:4000/about.html">
   <link rel="alternate" type="application/rss+xml" title="Ura Design" href="http://localhost:4000/feed.xml">
 </head>
@@ -179,8 +177,8 @@
     
       <div class="medium-4 columns">
         <div class="member">
-          <img src="http://localhost:4000/images/about/ElioHeadshot.jpg" alt="">
-          <img class="colored" src="http://localhost:4000/images/about/ElioHeadshot.jpg" alt="">
+          <img class="lazy" data-src="http://localhost:4000/images/about/ElioHeadshot.jpg" alt="">
+          <img class="colored" data-src="http://localhost:4000/images/about/ElioHeadshot.jpg" alt="">
           <div class="member-info">
             <h4>Elio Qoshi</h4>
             <p class="position">Founder &amp; Design Lead</p>
@@ -201,8 +199,8 @@
     
       <div class="medium-4 columns">
         <div class="member">
-          <img src="http://localhost:4000/images/about/MarianaHeadshot.jpg" alt="">
-          <img class="colored" src="http://localhost:4000/images/about/MarianaHeadshot.jpg" alt="">
+          <img class="lazy" data-src="http://localhost:4000/images/about/MarianaHeadshot.jpg" alt="">
+          <img class="colored" data-src="http://localhost:4000/images/about/MarianaHeadshot.jpg" alt="">
           <div class="member-info">
             <h4>Mariana Balla</h4>
             <p class="position">Outreach</p>
@@ -223,8 +221,8 @@
     
       <div class="medium-4 columns">
         <div class="member">
-          <img src="http://localhost:4000/images/about/RenataHeadshot.jpg" alt="">
-          <img class="colored" src="http://localhost:4000/images/about/RenataHeadshot.jpg" alt="">
+          <img class="lazy" data-src="http://localhost:4000/images/about/RenataHeadshot.jpg" alt="">
+          <img class="colored" data-src="http://localhost:4000/images/about/RenataHeadshot.jpg" alt="">
           <div class="member-info">
             <h4>Renata Gegaj</h4>
             <p class="position">Usability Researcher</p>
@@ -245,8 +243,8 @@
     
       <div class="medium-4 columns">
         <div class="member">
-          <img src="http://localhost:4000/images/about/BorisHeadshot.jpg" alt="">
-          <img class="colored" src="http://localhost:4000/images/about/BorisHeadshot.jpg" alt="">
+          <img class="lazy" data-src="http://localhost:4000/images/about/BorisHeadshot.jpg" alt="">
+          <img class="colored" data-src="http://localhost:4000/images/about/BorisHeadshot.jpg" alt="">
           <div class="member-info">
             <h4>Boris Budini</h4>
             <p class="position">System Administrator</p>
@@ -265,8 +263,8 @@
     
       <div class="medium-4 columns">
         <div class="member">
-          <img src="http://localhost:4000/images/about/AnxheloHeadshot.jpg" alt="">
-          <img class="colored" src="http://localhost:4000/images/about/AnxheloHeadshot.jpg" alt="">
+          <img class="lazy" data-src="http://localhost:4000/images/about/AnxheloHeadshot.jpg" alt="">
+          <img class="colored" data-src="http://localhost:4000/images/about/AnxheloHeadshot.jpg" alt="">
           <div class="member-info">
             <h4>Anxhelo Lushka</h4>
             <p class="position">Frontend &amp; Designer</p>
@@ -323,9 +321,17 @@
 <script src="/js/jquery.validate.js"></script>
 <!-- <script src="/bower_components/countto/jquery.countTo.js"></script> -->
 <script src="/bower_components/appear/jquery.appear.js"></script>
+<script src="/bower_components/modernizr/modernizr.js"></script>
 <script src="/js/app.js"></script>
 <script src="/js/svg.js"></script>
 <script src="/js/cookie.js"></script>
+<script src="/js/lazyload.min.js"></script>
+
+<script>
+var myLazyLoad = new LazyLoad({
+    elements_selector: ".lazy"
+});
+</script>
 
 <!-- Matomo -->
 <script type="text/javascript">
diff --git a/_site/blog/index.html b/_site/blog/index.html
index 0352312..1e5cc49 100644
--- a/_site/blog/index.html
+++ b/_site/blog/index.html
@@ -29,7 +29,7 @@
   <meta name="twitter:image:src" content="https://ura.design/" />
   
   <link rel="stylesheet" href="/css/app.css">
-  <link href="/fonts/overpass/overpass.css" rel="stylesheet">
+  <link rel="stylesheet" href="/fonts/overpass/overpass.css">
   <link rel="stylesheet" href="/css/superslides.css"/>
   <link rel="stylesheet" href="/css/slick-theme.css"/>
   <link rel="stylesheet" href="/css/slick.css"/>
@@ -39,9 +39,7 @@
   <link rel="stylesheet" href="/css/fontawesome-all.css"/>
   <link rel="stylesheet" href="/css/style.css"/>
   <link rel="stylesheet" href="/css/responsive.css"/>
-
-  <script src="/bower_components/modernizr/modernizr.js"></script>
-  
+    
   <link rel="canonical" href="http://localhost:4000/blog/">
   <link rel="alternate" type="application/rss+xml" title="Ura Design" href="http://localhost:4000/feed.xml">
 </head>
@@ -191,7 +189,7 @@
   </div>
     <div class="large-3 columns blog middle-blog" style="margin-bottom: 30px;">
            
-            <a href="/2018/07/05/thunderbird-style-guide"><img style="display: block; margin: auto;" src="http://localhost:4000/images/blog/thumb_thunderbird.png" alt="post"></a>
+            <a href="/2018/07/05/thunderbird-style-guide"><img class="lazy" style="display: block; margin: auto;" data-src="http://localhost:4000/images/blog/thumb_thunderbird.png" alt="post"></a>
            
     </div>
       </div>
@@ -228,7 +226,7 @@
   </div>
     <div class="large-3 columns blog middle-blog" style="margin-bottom: 30px;">
            
-            <a href="/2018/07/02/style-guides-go-beyond-aesthetics"><img style="display: block; margin: auto;" src="http://localhost:4000/images/blog/osd_event.png" alt="post"></a>
+            <a href="/2018/07/02/style-guides-go-beyond-aesthetics"><img class="lazy" style="display: block; margin: auto;" data-src="http://localhost:4000/images/blog/osd_event.png" alt="post"></a>
            
     </div>
       </div>
@@ -265,7 +263,7 @@
   </div>
     <div class="large-3 columns blog middle-blog" style="margin-bottom: 30px;">
            
-            <a href="/2018/06/17/welcoming-renata-uras-usability-researcher"><img style="display: block; margin: auto;" src="http://localhost:4000/images/blog/Renata_Redon_thumbnail.png" alt="post"></a>
+            <a href="/2018/06/17/welcoming-renata-uras-usability-researcher"><img class="lazy" style="display: block; margin: auto;" data-src="http://localhost:4000/images/blog/Renata_Redon_thumbnail.png" alt="post"></a>
            
     </div>
       </div>
@@ -304,7 +302,7 @@
   </div>
     <div class="large-3 columns blog middle-blog" style="margin-bottom: 30px;">
            
-            <a href="/2018/06/13/reproducible-builds-styleguide"><img style="display: block; margin: auto;" src="http://localhost:4000/images/blog/ReproducibleBuilds_thumbnail.png" alt="post"></a>
+            <a href="/2018/06/13/reproducible-builds-styleguide"><img class="lazy" style="display: block; margin: auto;" data-src="http://localhost:4000/images/blog/ReproducibleBuilds_thumbnail.png" alt="post"></a>
            
     </div>
       </div>
@@ -341,7 +339,7 @@
   </div>
     <div class="large-3 columns blog middle-blog" style="margin-bottom: 30px;">
            
-            <a href="/2018/05/31/oscal-18-we-were-there"><img style="display: block; margin: auto;" src="http://localhost:4000/images/blog/OSCAL_thumbnail.png" alt="post"></a>
+            <a href="/2018/05/31/oscal-18-we-were-there"><img class="lazy" style="display: block; margin: auto;" data-src="http://localhost:4000/images/blog/OSCAL_thumbnail.png" alt="post"></a>
            
     </div>
       </div>
@@ -378,7 +376,7 @@
   </div>
     <div class="large-3 columns blog middle-blog" style="margin-bottom: 30px;">
            
-            <a href="/2018/03/31/introducing-cryptopayments-for-our-services"><img style="display: block; margin: auto;" src="http://localhost:4000/images/blog/CryptoCurrencyThumb.jpg" alt="post"></a>
+            <a href="/2018/03/31/introducing-cryptopayments-for-our-services"><img class="lazy" style="display: block; margin: auto;" data-src="http://localhost:4000/images/blog/CryptoCurrencyThumb.jpg" alt="post"></a>
            
     </div>
       </div>
@@ -445,9 +443,17 @@
 <script src="/js/jquery.validate.js"></script>
 <!-- <script src="/bower_components/countto/jquery.countTo.js"></script> -->
 <script src="/bower_components/appear/jquery.appear.js"></script>
+<script src="/bower_components/modernizr/modernizr.js"></script>
 <script src="/js/app.js"></script>
 <script src="/js/svg.js"></script>
 <script src="/js/cookie.js"></script>
+<script src="/js/lazyload.min.js"></script>
+
+<script>
+var myLazyLoad = new LazyLoad({
+    elements_selector: ".lazy"
+});
+</script>
 
 <!-- Matomo -->
 <script type="text/javascript">
diff --git a/_site/blog/page2/index.html b/_site/blog/page2/index.html
index 7bdb2cb..ff8c563 100644
--- a/_site/blog/page2/index.html
+++ b/_site/blog/page2/index.html
@@ -29,7 +29,7 @@
   <meta name="twitter:image:src" content="https://ura.design/" />
   
   <link rel="stylesheet" href="/css/app.css">
-  <link href="/fonts/overpass/overpass.css" rel="stylesheet">
+  <link rel="stylesheet" href="/fonts/overpass/overpass.css">
   <link rel="stylesheet" href="/css/superslides.css"/>
   <link rel="stylesheet" href="/css/slick-theme.css"/>
   <link rel="stylesheet" href="/css/slick.css"/>
@@ -39,9 +39,7 @@
   <link rel="stylesheet" href="/css/fontawesome-all.css"/>
   <link rel="stylesheet" href="/css/style.css"/>
   <link rel="stylesheet" href="/css/responsive.css"/>
-
-  <script src="/bower_components/modernizr/modernizr.js"></script>
-  
+    
   <link rel="canonical" href="http://localhost:4000/blog/page2/">
   <link rel="alternate" type="application/rss+xml" title="Ura Design" href="http://localhost:4000/feed.xml">
 </head>
@@ -189,7 +187,7 @@
   </div>
     <div class="large-3 columns blog middle-blog" style="margin-bottom: 30px;">
            
-            <a href="/2018/03/19/new-ura-website"><img style="display: block; margin: auto;" src="http://localhost:4000/images/blog/website_thumb.jpg" alt="post"></a>
+            <a href="/2018/03/19/new-ura-website"><img class="lazy" style="display: block; margin: auto;" data-src="http://localhost:4000/images/blog/website_thumb.jpg" alt="post"></a>
            
     </div>
       </div>
@@ -228,7 +226,7 @@
   </div>
     <div class="large-3 columns blog middle-blog" style="margin-bottom: 30px;">
            
-            <a href="/2018/03/12/ura-now-part-open-tech-funds-usability-lab"><img style="display: block; margin: auto;" src="http://localhost:4000/images/blog/home-banner.jpg" alt="post"></a>
+            <a href="/2018/03/12/ura-now-part-open-tech-funds-usability-lab"><img class="lazy" style="display: block; margin: auto;" data-src="http://localhost:4000/images/blog/home-banner.jpg" alt="post"></a>
            
     </div>
       </div>
@@ -265,7 +263,7 @@
   </div>
     <div class="large-3 columns blog middle-blog" style="margin-bottom: 30px;">
            
-            <a href="/2018/02/23/inkscape-workshop-tirana"><img style="display: block; margin: auto;" src="http://localhost:4000/images/blog/Inkscape-Workshop-1-thumb.jpg" alt="post"></a>
+            <a href="/2018/02/23/inkscape-workshop-tirana"><img class="lazy" style="display: block; margin: auto;" data-src="http://localhost:4000/images/blog/Inkscape-Workshop-1-thumb.jpg" alt="post"></a>
            
     </div>
       </div>
@@ -304,7 +302,7 @@
   </div>
     <div class="large-3 columns blog middle-blog" style="margin-bottom: 30px;">
            
-            <a href="/2018/02/09/ura-fosdem-2018"><img style="display: block; margin: auto;" src="http://localhost:4000/images/blog/Elio-FOSDEM2018-thumb.jpg" alt="post"></a>
+            <a href="/2018/02/09/ura-fosdem-2018"><img class="lazy" style="display: block; margin: auto;" data-src="http://localhost:4000/images/blog/Elio-FOSDEM2018-thumb.jpg" alt="post"></a>
            
     </div>
       </div>
@@ -341,7 +339,7 @@
   </div>
     <div class="large-3 columns blog middle-blog" style="margin-bottom: 30px;">
            
-            <a href="/2018/01/15/chaos-communication-congress-2017"><img style="display: block; margin: auto;" src="http://localhost:4000/images/blog/34c3_thumb.png" alt="post"></a>
+            <a href="/2018/01/15/chaos-communication-congress-2017"><img class="lazy" style="display: block; margin: auto;" data-src="http://localhost:4000/images/blog/34c3_thumb.png" alt="post"></a>
            
     </div>
       </div>
@@ -376,7 +374,7 @@
   </div>
     <div class="large-3 columns blog middle-blog" style="margin-bottom: 30px;">
            
-            <a href="/2018/01/09/ura-work-week-november-2017"><img style="display: block; margin: auto;" src="http://localhost:4000/images/blog/work_week_2017.png" alt="post"></a>
+            <a href="/2018/01/09/ura-work-week-november-2017"><img class="lazy" style="display: block; margin: auto;" data-src="http://localhost:4000/images/blog/work_week_2017.png" alt="post"></a>
            
     </div>
       </div>
@@ -445,9 +443,17 @@
 <script src="/js/jquery.validate.js"></script>
 <!-- <script src="/bower_components/countto/jquery.countTo.js"></script> -->
 <script src="/bower_components/appear/jquery.appear.js"></script>
+<script src="/bower_components/modernizr/modernizr.js"></script>
 <script src="/js/app.js"></script>
 <script src="/js/svg.js"></script>
 <script src="/js/cookie.js"></script>
+<script src="/js/lazyload.min.js"></script>
+
+<script>
+var myLazyLoad = new LazyLoad({
+    elements_selector: ".lazy"
+});
+</script>
 
 <!-- Matomo -->
 <script type="text/javascript">
diff --git a/_site/blog/page3/index.html b/_site/blog/page3/index.html
index 2dd54bc..91473bb 100644
--- a/_site/blog/page3/index.html
+++ b/_site/blog/page3/index.html
@@ -29,7 +29,7 @@
   <meta name="twitter:image:src" content="https://ura.design/" />
   
   <link rel="stylesheet" href="/css/app.css">
-  <link href="/fonts/overpass/overpass.css" rel="stylesheet">
+  <link rel="stylesheet" href="/fonts/overpass/overpass.css">
   <link rel="stylesheet" href="/css/superslides.css"/>
   <link rel="stylesheet" href="/css/slick-theme.css"/>
   <link rel="stylesheet" href="/css/slick.css"/>
@@ -39,9 +39,7 @@
   <link rel="stylesheet" href="/css/fontawesome-all.css"/>
   <link rel="stylesheet" href="/css/style.css"/>
   <link rel="stylesheet" href="/css/responsive.css"/>
-
-  <script src="/bower_components/modernizr/modernizr.js"></script>
-  
+    
   <link rel="canonical" href="http://localhost:4000/blog/page3/">
   <link rel="alternate" type="application/rss+xml" title="Ura Design" href="http://localhost:4000/feed.xml">
 </head>
@@ -187,7 +185,7 @@
   </div>
     <div class="large-3 columns blog middle-blog" style="margin-bottom: 30px;">
            
-            <a href="/2017/08/25/ura-sha-2017"><img style="display: block; margin: auto;" src="http://localhost:4000/images/blog/sha1-thumb.jpg" alt="post"></a>
+            <a href="/2017/08/25/ura-sha-2017"><img class="lazy" style="display: block; margin: auto;" data-src="http://localhost:4000/images/blog/sha1-thumb.jpg" alt="post"></a>
            
     </div>
       </div>
@@ -224,7 +222,7 @@
   </div>
     <div class="large-3 columns blog middle-blog" style="margin-bottom: 30px;">
            
-            <a href="/2017/02/11/open-source-design-workshop-open-labs-hackerspace-tirana"><img style="display: block; margin: auto;" src="http://localhost:4000/images/blog/osd_event.png" alt="post"></a>
+            <a href="/2017/02/11/open-source-design-workshop-open-labs-hackerspace-tirana"><img class="lazy" style="display: block; margin: auto;" data-src="http://localhost:4000/images/blog/osd_event.png" alt="post"></a>
            
     </div>
       </div>
@@ -263,7 +261,7 @@
   </div>
     <div class="large-3 columns blog middle-blog" style="margin-bottom: 30px;">
            
-            <a href="/2017/01/24/wikispeech-wikimedia-project-has-a-logo-guess-who-designed-it"><img style="display: block; margin: auto;" src="http://localhost:4000/images/blog/ura-wikispeech.png" alt="post"></a>
+            <a href="/2017/01/24/wikispeech-wikimedia-project-has-a-logo-guess-who-designed-it"><img class="lazy" style="display: block; margin: auto;" data-src="http://localhost:4000/images/blog/ura-wikispeech.png" alt="post"></a>
            
     </div>
       </div>
@@ -300,7 +298,7 @@
   </div>
     <div class="large-3 columns blog middle-blog" style="margin-bottom: 30px;">
            
-            <a href="/2017/01/03/Hello-open-source-design-world"><img style="display: block; margin: auto;" src="http://localhost:4000/images/blog/hello_world.png" alt="post"></a>
+            <a href="/2017/01/03/Hello-open-source-design-world"><img class="lazy" style="display: block; margin: auto;" data-src="http://localhost:4000/images/blog/hello_world.png" alt="post"></a>
            
     </div>
       </div>
@@ -367,9 +365,17 @@
 <script src="/js/jquery.validate.js"></script>
 <!-- <script src="/bower_components/countto/jquery.countTo.js"></script> -->
 <script src="/bower_components/appear/jquery.appear.js"></script>
+<script src="/bower_components/modernizr/modernizr.js"></script>
 <script src="/js/app.js"></script>
 <script src="/js/svg.js"></script>
 <script src="/js/cookie.js"></script>
+<script src="/js/lazyload.min.js"></script>
+
+<script>
+var myLazyLoad = new LazyLoad({
+    elements_selector: ".lazy"
+});
+</script>
 
 <!-- Matomo -->
 <script type="text/javascript">
diff --git a/_site/contact.html b/_site/contact.html
index 71a5d3e..b3565d6 100644
--- a/_site/contact.html
+++ b/_site/contact.html
@@ -30,7 +30,7 @@
   <meta name="twitter:image:src" content="https://ura.design/" />
   
   <link rel="stylesheet" href="/css/app.css">
-  <link href="/fonts/overpass/overpass.css" rel="stylesheet">
+  <link rel="stylesheet" href="/fonts/overpass/overpass.css">
   <link rel="stylesheet" href="/css/superslides.css"/>
   <link rel="stylesheet" href="/css/slick-theme.css"/>
   <link rel="stylesheet" href="/css/slick.css"/>
@@ -40,9 +40,7 @@
   <link rel="stylesheet" href="/css/fontawesome-all.css"/>
   <link rel="stylesheet" href="/css/style.css"/>
   <link rel="stylesheet" href="/css/responsive.css"/>
-
-  <script src="/bower_components/modernizr/modernizr.js"></script>
-  
+    
   <link rel="canonical" href="http://localhost:4000/contact.html">
   <link rel="alternate" type="application/rss+xml" title="Ura Design" href="http://localhost:4000/feed.xml">
 </head>
@@ -220,9 +218,17 @@
 <script src="/js/jquery.validate.js"></script>
 <!-- <script src="/bower_components/countto/jquery.countTo.js"></script> -->
 <script src="/bower_components/appear/jquery.appear.js"></script>
+<script src="/bower_components/modernizr/modernizr.js"></script>
 <script src="/js/app.js"></script>
 <script src="/js/svg.js"></script>
 <script src="/js/cookie.js"></script>
+<script src="/js/lazyload.min.js"></script>
+
+<script>
+var myLazyLoad = new LazyLoad({
+    elements_selector: ".lazy"
+});
+</script>
 
 <!-- Matomo -->
 <script type="text/javascript">
diff --git a/_site/events/fosdem-2017.html b/_site/events/fosdem-2017.html
index 767af96..39f657f 100644
--- a/_site/events/fosdem-2017.html
+++ b/_site/events/fosdem-2017.html
@@ -30,7 +30,7 @@
   <meta name="twitter:image:src" content="https://ura.design/" />
   
   <link rel="stylesheet" href="/css/app.css">
-  <link href="/fonts/overpass/overpass.css" rel="stylesheet">
+  <link rel="stylesheet" href="/fonts/overpass/overpass.css">
   <link rel="stylesheet" href="/css/superslides.css"/>
   <link rel="stylesheet" href="/css/slick-theme.css"/>
   <link rel="stylesheet" href="/css/slick.css"/>
@@ -40,9 +40,7 @@
   <link rel="stylesheet" href="/css/fontawesome-all.css"/>
   <link rel="stylesheet" href="/css/style.css"/>
   <link rel="stylesheet" href="/css/responsive.css"/>
-
-  <script src="/bower_components/modernizr/modernizr.js"></script>
-  
+    
   <link rel="canonical" href="http://localhost:4000/events/fosdem-2017.html">
   <link rel="alternate" type="application/rss+xml" title="Ura Design" href="http://localhost:4000/feed.xml">
 </head>
@@ -220,9 +218,17 @@
 <script src="/js/jquery.validate.js"></script>
 <!-- <script src="/bower_components/countto/jquery.countTo.js"></script> -->
 <script src="/bower_components/appear/jquery.appear.js"></script>
+<script src="/bower_components/modernizr/modernizr.js"></script>
 <script src="/js/app.js"></script>
 <script src="/js/svg.js"></script>
 <script src="/js/cookie.js"></script>
+<script src="/js/lazyload.min.js"></script>
+
+<script>
+var myLazyLoad = new LazyLoad({
+    elements_selector: ".lazy"
+});
+</script>
 
 <!-- Matomo -->
 <script type="text/javascript">
diff --git a/_site/events/fosdem-2018.html b/_site/events/fosdem-2018.html
index eb2bae2..6d6371d 100644
--- a/_site/events/fosdem-2018.html
+++ b/_site/events/fosdem-2018.html
@@ -30,7 +30,7 @@
   <meta name="twitter:image:src" content="https://ura.design/" />
   
   <link rel="stylesheet" href="/css/app.css">
-  <link href="/fonts/overpass/overpass.css" rel="stylesheet">
+  <link rel="stylesheet" href="/fonts/overpass/overpass.css">
   <link rel="stylesheet" href="/css/superslides.css"/>
   <link rel="stylesheet" href="/css/slick-theme.css"/>
   <link rel="stylesheet" href="/css/slick.css"/>
@@ -40,9 +40,7 @@
   <link rel="stylesheet" href="/css/fontawesome-all.css"/>
   <link rel="stylesheet" href="/css/style.css"/>
   <link rel="stylesheet" href="/css/responsive.css"/>
-
-  <script src="/bower_components/modernizr/modernizr.js"></script>
-  
+    
   <link rel="canonical" href="http://localhost:4000/events/fosdem-2018.html">
   <link rel="alternate" type="application/rss+xml" title="Ura Design" href="http://localhost:4000/feed.xml">
 </head>
@@ -220,9 +218,17 @@
 <script src="/js/jquery.validate.js"></script>
 <!-- <script src="/bower_components/countto/jquery.countTo.js"></script> -->
 <script src="/bower_components/appear/jquery.appear.js"></script>
+<script src="/bower_components/modernizr/modernizr.js"></script>
 <script src="/js/app.js"></script>
 <script src="/js/svg.js"></script>
 <script src="/js/cookie.js"></script>
+<script src="/js/lazyload.min.js"></script>
+
+<script>
+var myLazyLoad = new LazyLoad({
+    elements_selector: ".lazy"
+});
+</script>
 
 <!-- Matomo -->
 <script type="text/javascript">
diff --git a/_site/events/index.html b/_site/events/index.html
index ec17d29..fff10b1 100644
--- a/_site/events/index.html
+++ b/_site/events/index.html
@@ -30,7 +30,7 @@
   <meta name="twitter:image:src" content="https://ura.design/" />
   
   <link rel="stylesheet" href="/css/app.css">
-  <link href="/fonts/overpass/overpass.css" rel="stylesheet">
+  <link rel="stylesheet" href="/fonts/overpass/overpass.css">
   <link rel="stylesheet" href="/css/superslides.css"/>
   <link rel="stylesheet" href="/css/slick-theme.css"/>
   <link rel="stylesheet" href="/css/slick.css"/>
@@ -40,9 +40,7 @@
   <link rel="stylesheet" href="/css/fontawesome-all.css"/>
   <link rel="stylesheet" href="/css/style.css"/>
   <link rel="stylesheet" href="/css/responsive.css"/>
-
-  <script src="/bower_components/modernizr/modernizr.js"></script>
-  
+    
   <link rel="canonical" href="http://localhost:4000/events/">
   <link rel="alternate" type="application/rss+xml" title="Ura Design" href="http://localhost:4000/feed.xml">
 </head>
@@ -259,9 +257,17 @@
 <script src="/js/jquery.validate.js"></script>
 <!-- <script src="/bower_components/countto/jquery.countTo.js"></script> -->
 <script src="/bower_components/appear/jquery.appear.js"></script>
+<script src="/bower_components/modernizr/modernizr.js"></script>
 <script src="/js/app.js"></script>
 <script src="/js/svg.js"></script>
 <script src="/js/cookie.js"></script>
+<script src="/js/lazyload.min.js"></script>
+
+<script>
+var myLazyLoad = new LazyLoad({
+    elements_selector: ".lazy"
+});
+</script>
 
 <!-- Matomo -->
 <script type="text/javascript">
diff --git a/_site/events/oscal-2017.html b/_site/events/oscal-2017.html
index cb7c999..8f04e9a 100644
--- a/_site/events/oscal-2017.html
+++ b/_site/events/oscal-2017.html
@@ -30,7 +30,7 @@
   <meta name="twitter:image:src" content="https://ura.design/" />
   
   <link rel="stylesheet" href="/css/app.css">
-  <link href="/fonts/overpass/overpass.css" rel="stylesheet">
+  <link rel="stylesheet" href="/fonts/overpass/overpass.css">
   <link rel="stylesheet" href="/css/superslides.css"/>
   <link rel="stylesheet" href="/css/slick-theme.css"/>
   <link rel="stylesheet" href="/css/slick.css"/>
@@ -40,9 +40,7 @@
   <link rel="stylesheet" href="/css/fontawesome-all.css"/>
   <link rel="stylesheet" href="/css/style.css"/>
   <link rel="stylesheet" href="/css/responsive.css"/>
-
-  <script src="/bower_components/modernizr/modernizr.js"></script>
-  
+    
   <link rel="canonical" href="http://localhost:4000/events/oscal-2017.html">
   <link rel="alternate" type="application/rss+xml" title="Ura Design" href="http://localhost:4000/feed.xml">
 </head>
@@ -227,9 +225,17 @@
 <script src="/js/jquery.validate.js"></script>
 <!-- <script src="/bower_components/countto/jquery.countTo.js"></script> -->
 <script src="/bower_components/appear/jquery.appear.js"></script>
+<script src="/bower_components/modernizr/modernizr.js"></script>
 <script src="/js/app.js"></script>
 <script src="/js/svg.js"></script>
 <script src="/js/cookie.js"></script>
+<script src="/js/lazyload.min.js"></script>
+
+<script>
+var myLazyLoad = new LazyLoad({
+    elements_selector: ".lazy"
+});
+</script>
 
 <!-- Matomo -->
 <script type="text/javascript">
diff --git a/_site/events/oscal-2018.html b/_site/events/oscal-2018.html
index a9c3ac9..025c876 100644
--- a/_site/events/oscal-2018.html
+++ b/_site/events/oscal-2018.html
@@ -30,7 +30,7 @@
   <meta name="twitter:image:src" content="https://ura.design/" />
   
   <link rel="stylesheet" href="/css/app.css">
-  <link href="/fonts/overpass/overpass.css" rel="stylesheet">
+  <link rel="stylesheet" href="/fonts/overpass/overpass.css">
   <link rel="stylesheet" href="/css/superslides.css"/>
   <link rel="stylesheet" href="/css/slick-theme.css"/>
   <link rel="stylesheet" href="/css/slick.css"/>
@@ -40,9 +40,7 @@
   <link rel="stylesheet" href="/css/fontawesome-all.css"/>
   <link rel="stylesheet" href="/css/style.css"/>
   <link rel="stylesheet" href="/css/responsive.css"/>
-
-  <script src="/bower_components/modernizr/modernizr.js"></script>
-  
+    
   <link rel="canonical" href="http://localhost:4000/events/oscal-2018.html">
   <link rel="alternate" type="application/rss+xml" title="Ura Design" href="http://localhost:4000/feed.xml">
 </head>
@@ -225,9 +223,17 @@
 <script src="/js/jquery.validate.js"></script>
 <!-- <script src="/bower_components/countto/jquery.countTo.js"></script> -->
 <script src="/bower_components/appear/jquery.appear.js"></script>
+<script src="/bower_components/modernizr/modernizr.js"></script>
 <script src="/js/app.js"></script>
 <script src="/js/svg.js"></script>
 <script src="/js/cookie.js"></script>
+<script src="/js/lazyload.min.js"></script>
+
+<script>
+var myLazyLoad = new LazyLoad({
+    elements_selector: ".lazy"
+});
+</script>
 
 <!-- Matomo -->
 <script type="text/javascript">
diff --git a/_site/events/osd-workshop-1-in-tirana.html b/_site/events/osd-workshop-1-in-tirana.html
index 4f980dd..6b5ec61 100644
--- a/_site/events/osd-workshop-1-in-tirana.html
+++ b/_site/events/osd-workshop-1-in-tirana.html
@@ -30,7 +30,7 @@
   <meta name="twitter:image:src" content="https://ura.design/" />
   
   <link rel="stylesheet" href="/css/app.css">
-  <link href="/fonts/overpass/overpass.css" rel="stylesheet">
+  <link rel="stylesheet" href="/fonts/overpass/overpass.css">
   <link rel="stylesheet" href="/css/superslides.css"/>
   <link rel="stylesheet" href="/css/slick-theme.css"/>
   <link rel="stylesheet" href="/css/slick.css"/>
@@ -40,9 +40,7 @@
   <link rel="stylesheet" href="/css/fontawesome-all.css"/>
   <link rel="stylesheet" href="/css/style.css"/>
   <link rel="stylesheet" href="/css/responsive.css"/>
-
-  <script src="/bower_components/modernizr/modernizr.js"></script>
-  
+    
   <link rel="canonical" href="http://localhost:4000/events/osd-workshop-1-in-tirana.html">
   <link rel="alternate" type="application/rss+xml" title="Ura Design" href="http://localhost:4000/feed.xml">
 </head>
@@ -226,9 +224,17 @@
 <script src="/js/jquery.validate.js"></script>
 <!-- <script src="/bower_components/countto/jquery.countTo.js"></script> -->
 <script src="/bower_components/appear/jquery.appear.js"></script>
+<script src="/bower_components/modernizr/modernizr.js"></script>
 <script src="/js/app.js"></script>
 <script src="/js/svg.js"></script>
 <script src="/js/cookie.js"></script>
+<script src="/js/lazyload.min.js"></script>
+
+<script>
+var myLazyLoad = new LazyLoad({
+    elements_selector: ".lazy"
+});
+</script>
 
 <!-- Matomo -->
 <script type="text/javascript">
diff --git a/_site/events/osd-workshop-2-tirana.html b/_site/events/osd-workshop-2-tirana.html
index c2b18b9..8c9fbe5 100644
--- a/_site/events/osd-workshop-2-tirana.html
+++ b/_site/events/osd-workshop-2-tirana.html
@@ -30,7 +30,7 @@
   <meta name="twitter:image:src" content="https://ura.design/" />
   
   <link rel="stylesheet" href="/css/app.css">
-  <link href="/fonts/overpass/overpass.css" rel="stylesheet">
+  <link rel="stylesheet" href="/fonts/overpass/overpass.css">
   <link rel="stylesheet" href="/css/superslides.css"/>
   <link rel="stylesheet" href="/css/slick-theme.css"/>
   <link rel="stylesheet" href="/css/slick.css"/>
@@ -40,9 +40,7 @@
   <link rel="stylesheet" href="/css/fontawesome-all.css"/>
   <link rel="stylesheet" href="/css/style.css"/>
   <link rel="stylesheet" href="/css/responsive.css"/>
-
-  <script src="/bower_components/modernizr/modernizr.js"></script>
-  
+    
   <link rel="canonical" href="http://localhost:4000/events/osd-workshop-2-tirana.html">
   <link rel="alternate" type="application/rss+xml" title="Ura Design" href="http://localhost:4000/feed.xml">
 </head>
@@ -226,9 +224,17 @@
 <script src="/js/jquery.validate.js"></script>
 <!-- <script src="/bower_components/countto/jquery.countTo.js"></script> -->
 <script src="/bower_components/appear/jquery.appear.js"></script>
+<script src="/bower_components/modernizr/modernizr.js"></script>
 <script src="/js/app.js"></script>
 <script src="/js/svg.js"></script>
 <script src="/js/cookie.js"></script>
+<script src="/js/lazyload.min.js"></script>
+
+<script>
+var myLazyLoad = new LazyLoad({
+    elements_selector: ".lazy"
+});
+</script>
 
 <!-- Matomo -->
 <script type="text/javascript">
diff --git a/_site/events/osd-workshop-3-tirana.html b/_site/events/osd-workshop-3-tirana.html
index 49b7c7e..90841ee 100644
--- a/_site/events/osd-workshop-3-tirana.html
+++ b/_site/events/osd-workshop-3-tirana.html
@@ -30,7 +30,7 @@
   <meta name="twitter:image:src" content="https://ura.design/" />
   
   <link rel="stylesheet" href="/css/app.css">
-  <link href="/fonts/overpass/overpass.css" rel="stylesheet">
+  <link rel="stylesheet" href="/fonts/overpass/overpass.css">
   <link rel="stylesheet" href="/css/superslides.css"/>
   <link rel="stylesheet" href="/css/slick-theme.css"/>
   <link rel="stylesheet" href="/css/slick.css"/>
@@ -40,9 +40,7 @@
   <link rel="stylesheet" href="/css/fontawesome-all.css"/>
   <link rel="stylesheet" href="/css/style.css"/>
   <link rel="stylesheet" href="/css/responsive.css"/>
-
-  <script src="/bower_components/modernizr/modernizr.js"></script>
-  
+    
   <link rel="canonical" href="http://localhost:4000/events/osd-workshop-3-tirana.html">
   <link rel="alternate" type="application/rss+xml" title="Ura Design" href="http://localhost:4000/feed.xml">
 </head>
@@ -220,9 +218,17 @@
 <script src="/js/jquery.validate.js"></script>
 <!-- <script src="/bower_components/countto/jquery.countTo.js"></script> -->
 <script src="/bower_components/appear/jquery.appear.js"></script>
+<script src="/bower_components/modernizr/modernizr.js"></script>
 <script src="/js/app.js"></script>
 <script src="/js/svg.js"></script>
 <script src="/js/cookie.js"></script>
+<script src="/js/lazyload.min.js"></script>
+
+<script>
+var myLazyLoad = new LazyLoad({
+    elements_selector: ".lazy"
+});
+</script>
 
 <!-- Matomo -->
 <script type="text/javascript">
diff --git a/_site/feed.xml b/_site/feed.xml
index 729545c..a1ed87f 100644
--- a/_site/feed.xml
+++ b/_site/feed.xml
@@ -6,8 +6,8 @@
 </description>
     <link>http://localhost:4000/</link>
     <atom:link href="http://localhost:4000/feed.xml" rel="self" type="application/rss+xml"/>
-    <pubDate>Sun, 14 Oct 2018 13:27:51 +0200</pubDate>
-    <lastBuildDate>Sun, 14 Oct 2018 13:27:51 +0200</lastBuildDate>
+    <pubDate>Sun, 14 Oct 2018 14:14:49 +0200</pubDate>
+    <lastBuildDate>Sun, 14 Oct 2018 14:14:49 +0200</lastBuildDate>
     <generator>Jekyll v3.8.4</generator>
     
       <item>
diff --git a/_site/index.html b/_site/index.html
index 3ce9161..7cb08e0 100644
--- a/_site/index.html
+++ b/_site/index.html
@@ -30,7 +30,7 @@
   <meta name="twitter:image:src" content="https://ura.design/" />
   
   <link rel="stylesheet" href="/css/app.css">
-  <link href="/fonts/overpass/overpass.css" rel="stylesheet">
+  <link rel="stylesheet" href="/fonts/overpass/overpass.css">
   <link rel="stylesheet" href="/css/superslides.css"/>
   <link rel="stylesheet" href="/css/slick-theme.css"/>
   <link rel="stylesheet" href="/css/slick.css"/>
@@ -40,9 +40,7 @@
   <link rel="stylesheet" href="/css/fontawesome-all.css"/>
   <link rel="stylesheet" href="/css/style.css"/>
   <link rel="stylesheet" href="/css/responsive.css"/>
-
-  <script src="/bower_components/modernizr/modernizr.js"></script>
-  
+    
   <link rel="canonical" href="http://localhost:4000/">
   <link rel="alternate" type="application/rss+xml" title="Ura Design" href="http://localhost:4000/feed.xml">
 </head>
@@ -225,7 +223,7 @@
   <div class="section-title">
     <div class="row">
       <div class="medium-10 medium-centered columns">
-        <img src="images/main/icon.svg" alt="" class="wow flipInY" data-wow-duration="2s" data-wow-delay="0.1s">
+        <img class="lazy" data-src="images/main/icon.svg" alt="" class="wow flipInY" data-wow-duration="2s" data-wow-delay="0.1s">
         <div class="spacing"></div>
         <h2>Design, but Open</h2>
       </div>
@@ -257,15 +255,15 @@
     <div class='large-12 columns'>
       <div class='clients'>
         
-          <div><a href="https://mozilla.org" target="blank"><img alt="" src="/images/clients/mozilla.png" width="200px" height="120px"></a></div>
+          <div><a href="https://mozilla.org" target="blank"><img class="lazy" alt="" data-src="/images/clients/mozilla.png" width="200px" height="120px"></a></div>
         
-          <div><a href="https://www.torproject.org/" target="blank"><img alt="" src="/images/clients/tor.png" width="200px" height="120px"></a></div>
+          <div><a href="https://www.torproject.org/" target="blank"><img class="lazy" alt="" data-src="/images/clients/tor.png" width="200px" height="120px"></a></div>
         
-          <div><a href="https://www.linuxfoundation.org" target="blank"><img alt="" src="/images/clients/linuxfoundation.png" width="200px" height="120px"></a></div>
+          <div><a href="https://www.linuxfoundation.org" target="blank"><img class="lazy" alt="" data-src="/images/clients/linuxfoundation.png" width="200px" height="120px"></a></div>
         
-          <div><a href="https://fsfe.org/" target="blank"><img alt="" src="/images/clients/fsfe.png" width="200px" height="120px"></a></div>
+          <div><a href="https://fsfe.org/" target="blank"><img class="lazy" alt="" data-src="/images/clients/fsfe.png" width="200px" height="120px"></a></div>
         
-          <div><a href="https://stickermule.com/" target="blank"><img alt="" src="/images/clients/stickermule.png" width="200px" height="120px"></a></div>
+          <div><a href="https://stickermule.com/" target="blank"><img class="lazy" alt="" data-src="/images/clients/stickermule.png" width="200px" height="120px"></a></div>
         
       </div>
     </div>
@@ -288,7 +286,7 @@
         <div class="quote wow slideInLeft" data-wow-delay="0.0s">
           <div class="row">
             <div class="small-3 columns">
-              <img src="images/testimonials/jeffbeatty.png" width="102px" height="102px" alt="author">
+              <img class="lazy" data-src="images/testimonials/jeffbeatty.png" width="102px" height="102px" alt="author">
             </div>
             <div class="small-9 columns">
               <p>“The folks at Ura were very professional in learning our expectations, planning the project, and being flexible as things changed. Add to that their commitment to work in the open and it made for a wonderful experience.”</p>
@@ -300,7 +298,7 @@
         <div class="quote wow slideInLeft" data-wow-delay="0.25s">
           <div class="row">
             <div class="small-3 columns">
-              <img src="images/testimonials/benjaminkerensa.png" width="102px" height="102px" alt="author">
+              <img class="lazy" data-src="images/testimonials/benjaminkerensa.png" width="102px" height="102px" alt="author">
             </div>
             <div class="small-9 columns">
               <p>“When looking for an identity for Glucosio we put our faith into Ura. With an unrivaled ability to bring ideas together into a fresh and modern branding experience we were really happy with the results.”</p>
@@ -315,7 +313,7 @@
         <div class="quote reverse wow slideInRight" class="wow" data-wow-delay="0.0s">
           <div class="row">
             <div class="small-3 columns">
-              <img src="images/testimonials/justindorfman.png" width="102px" height="102px" alt="author">
+              <img class="lazy" data-src="images/testimonials/justindorfman.png" width="102px" height="102px" alt="author">
             </div>
             <div class="small-9 columns">
               <p>“Ever since 'Open Source' was coined 20 years ago, a majority of projects have lacked great design. Ura is leading the way to fill that gap of Open Source Design in the community.”</p>
@@ -327,7 +325,7 @@
         <div class="quote reverse wow slideInRight" class="wow" data-wow-delay="0.25s">
           <div class="row">
             <div class="small-3 columns">
-              <img src="images/testimonials/simplysecure.png" width="102px" height="102px" alt="author">
+              <img class="lazy" data-src="images/testimonials/simplysecure.png" width="102px" height="102px" alt="author">
             </div>
             <div class="small-9 columns">
               <p>“Ura understood the needs of the open-source community when we worked together creating a styleguide for the Tor Project. They were able to deliver a polished result in a large, distributed volunteer organization.”</p>
@@ -357,7 +355,7 @@
     
       <div class="work-wrapper">
         <a href="/projects/thunderbird" class="work">
-          <img src="http://localhost:4000/images/projects/tb_overview.png" alt="">
+          <img class="lazy" data-src="http://localhost:4000/images/projects/tb_overview.png" alt="">
           <div class="info">
             <h3>Thunderbird Style Guide and Usability Study</h3>
             <p>Usability Study, Style Guide</p>
@@ -367,7 +365,7 @@
     
       <div class="work-wrapper">
         <a href="/projects/openlabs" class="work">
-          <img src="http://localhost:4000/images/projects/openlabs_thumbnail.jpg" alt="">
+          <img class="lazy" data-src="http://localhost:4000/images/projects/openlabs_thumbnail.jpg" alt="">
           <div class="info">
             <h3>Open Labs</h3>
             <p>Visual Identity</p>
@@ -380,7 +378,7 @@
     
       <div class="work-wrapper">
         <a href="/projects/mozilla-l10n" class="work">
-          <img src="http://localhost:4000/images/projects/mozilla-l10n.jpg" alt="">
+          <img class="lazy" data-src="http://localhost:4000/images/projects/mozilla-l10n.jpg" alt="">
           <div class="info">
             <h3>Mozilla L10N T-Shirts</h3>
             <p>Print</p>
@@ -390,7 +388,7 @@
     
       <div class="work-wrapper">
         <a href="/projects/tor-style-guide" class="work">
-          <img src="http://localhost:4000/images/projects/tor_thumb.png" alt="">
+          <img class="lazy" data-src="http://localhost:4000/images/projects/tor_thumb.png" alt="">
           <div class="info">
             <h3>Tor Style Guide</h3>
             <p>Style Guide</p>
@@ -403,7 +401,7 @@
     
       <div class="work-wrapper">
         <a href="/projects/reproducible-builds" class="work">
-          <img src="http://localhost:4000/images/projects/rb_thumbnail.png" alt="">
+          <img class="lazy" data-src="http://localhost:4000/images/projects/rb_thumbnail.png" alt="">
           <div class="info">
             <h3>Reproducible Builds Styleguide</h3>
             <p>Style Guide</p>
@@ -413,7 +411,7 @@
     
       <div class="work-wrapper">
         <a href="/projects/enigmail" class="work">
-          <img src="http://localhost:4000/images/projects/enigmail_overview.png" alt="">
+          <img class="lazy" data-src="http://localhost:4000/images/projects/enigmail_overview.png" alt="">
           <div class="info">
             <h3>Enigmail Rebranding</h3>
             <p>Visual Identity</p>
@@ -471,9 +469,17 @@
 <script src="/js/jquery.validate.js"></script>
 <!-- <script src="/bower_components/countto/jquery.countTo.js"></script> -->
 <script src="/bower_components/appear/jquery.appear.js"></script>
+<script src="/bower_components/modernizr/modernizr.js"></script>
 <script src="/js/app.js"></script>
 <script src="/js/svg.js"></script>
 <script src="/js/cookie.js"></script>
+<script src="/js/lazyload.min.js"></script>
+
+<script>
+var myLazyLoad = new LazyLoad({
+    elements_selector: ".lazy"
+});
+</script>
 
 <!-- Matomo -->
 <script type="text/javascript">
diff --git a/_site/jobs/frontend.html b/_site/jobs/frontend.html
index db86eb1..24cf7a3 100644
--- a/_site/jobs/frontend.html
+++ b/_site/jobs/frontend.html
@@ -30,7 +30,7 @@
   <meta name="twitter:image:src" content="https://ura.design/" />
   
   <link rel="stylesheet" href="/css/app.css">
-  <link href="/fonts/overpass/overpass.css" rel="stylesheet">
+  <link rel="stylesheet" href="/fonts/overpass/overpass.css">
   <link rel="stylesheet" href="/css/superslides.css"/>
   <link rel="stylesheet" href="/css/slick-theme.css"/>
   <link rel="stylesheet" href="/css/slick.css"/>
@@ -40,9 +40,7 @@
   <link rel="stylesheet" href="/css/fontawesome-all.css"/>
   <link rel="stylesheet" href="/css/style.css"/>
   <link rel="stylesheet" href="/css/responsive.css"/>
-
-  <script src="/bower_components/modernizr/modernizr.js"></script>
-  
+    
   <link rel="canonical" href="http://localhost:4000/jobs/frontend.html">
   <link rel="alternate" type="application/rss+xml" title="Ura Design" href="http://localhost:4000/feed.xml">
 </head>
@@ -249,9 +247,17 @@
 <script src="/js/jquery.validate.js"></script>
 <!-- <script src="/bower_components/countto/jquery.countTo.js"></script> -->
 <script src="/bower_components/appear/jquery.appear.js"></script>
+<script src="/bower_components/modernizr/modernizr.js"></script>
 <script src="/js/app.js"></script>
 <script src="/js/svg.js"></script>
 <script src="/js/cookie.js"></script>
+<script src="/js/lazyload.min.js"></script>
+
+<script>
+var myLazyLoad = new LazyLoad({
+    elements_selector: ".lazy"
+});
+</script>
 
 <!-- Matomo -->
 <script type="text/javascript">
diff --git a/_site/jobs/full-stack.html b/_site/jobs/full-stack.html
index 37863e4..00a3e85 100644
--- a/_site/jobs/full-stack.html
+++ b/_site/jobs/full-stack.html
@@ -29,7 +29,7 @@
   <meta name="twitter:image:src" content="https://ura.design/" />
   
   <link rel="stylesheet" href="/css/app.css">
-  <link href="/fonts/overpass/overpass.css" rel="stylesheet">
+  <link rel="stylesheet" href="/fonts/overpass/overpass.css">
   <link rel="stylesheet" href="/css/superslides.css"/>
   <link rel="stylesheet" href="/css/slick-theme.css"/>
   <link rel="stylesheet" href="/css/slick.css"/>
@@ -39,9 +39,7 @@
   <link rel="stylesheet" href="/css/fontawesome-all.css"/>
   <link rel="stylesheet" href="/css/style.css"/>
   <link rel="stylesheet" href="/css/responsive.css"/>
-
-  <script src="/bower_components/modernizr/modernizr.js"></script>
-  
+    
   <link rel="canonical" href="http://localhost:4000/jobs/full-stack.html">
   <link rel="alternate" type="application/rss+xml" title="Ura Design" href="http://localhost:4000/feed.xml">
 </head>
@@ -262,9 +260,17 @@
 <script src="/js/jquery.validate.js"></script>
 <!-- <script src="/bower_components/countto/jquery.countTo.js"></script> -->
 <script src="/bower_components/appear/jquery.appear.js"></script>
+<script src="/bower_components/modernizr/modernizr.js"></script>
 <script src="/js/app.js"></script>
 <script src="/js/svg.js"></script>
 <script src="/js/cookie.js"></script>
+<script src="/js/lazyload.min.js"></script>
+
+<script>
+var myLazyLoad = new LazyLoad({
+    elements_selector: ".lazy"
+});
+</script>
 
 <!-- Matomo -->
 <script type="text/javascript">
diff --git a/_site/jobs/index.html b/_site/jobs/index.html
index 715e4fc..24e0ea4 100644
--- a/_site/jobs/index.html
+++ b/_site/jobs/index.html
@@ -30,7 +30,7 @@
   <meta name="twitter:image:src" content="https://ura.design/" />
   
   <link rel="stylesheet" href="/css/app.css">
-  <link href="/fonts/overpass/overpass.css" rel="stylesheet">
+  <link rel="stylesheet" href="/fonts/overpass/overpass.css">
   <link rel="stylesheet" href="/css/superslides.css"/>
   <link rel="stylesheet" href="/css/slick-theme.css"/>
   <link rel="stylesheet" href="/css/slick.css"/>
@@ -40,9 +40,7 @@
   <link rel="stylesheet" href="/css/fontawesome-all.css"/>
   <link rel="stylesheet" href="/css/style.css"/>
   <link rel="stylesheet" href="/css/responsive.css"/>
-
-  <script src="/bower_components/modernizr/modernizr.js"></script>
-  
+    
   <link rel="canonical" href="http://localhost:4000/jobs/">
   <link rel="alternate" type="application/rss+xml" title="Ura Design" href="http://localhost:4000/feed.xml">
 </head>
@@ -203,9 +201,17 @@
 <script src="/js/jquery.validate.js"></script>
 <!-- <script src="/bower_components/countto/jquery.countTo.js"></script> -->
 <script src="/bower_components/appear/jquery.appear.js"></script>
+<script src="/bower_components/modernizr/modernizr.js"></script>
 <script src="/js/app.js"></script>
 <script src="/js/svg.js"></script>
 <script src="/js/cookie.js"></script>
+<script src="/js/lazyload.min.js"></script>
+
+<script>
+var myLazyLoad = new LazyLoad({
+    elements_selector: ".lazy"
+});
+</script>
 
 <!-- Matomo -->
 <script type="text/javascript">
diff --git a/_site/js/lazyload.min.js b/_site/js/lazyload.min.js
new file mode 100644
index 0000000..4feb340
--- /dev/null
+++ b/_site/js/lazyload.min.js
@@ -0,0 +1 @@
+var _extends=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var n=arguments[e];for(var o in n)Object.prototype.hasOwnProperty.call(n,o)&&(t[o]=n[o])}return t},_typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t};!function(t,e){"object"===("undefined"==typeof exports?"undefined":_typeof(exports))&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):t.LazyLoad=e()}(this,function(){"use strict";function t(t,e,n){return!(u(t,e,n)||_(t,e,n)||f(t,e,n)||h(t,e,n))}function e(t,e,n){var o=e._settings;!n&&r(t)||(C(o.callback_enter,t),R.indexOf(t.tagName)>-1&&(x(t,e),y(t,o.class_loading)),H(t,e),s(t),C(o.callback_set,t))}var n=function(){return{elements_selector:"img",container:window,threshold:300,throttle:150,data_src:"src",data_srcset:"srcset",data_sizes:"sizes",data_bg:"bg",class_loading:"loading",class_loaded:"loaded",class_error:"error",class_initial:"initial",skip_invisible:!0,callback_load:null,callback_error:null,callback_set:null,callback_enter:null,callback_finish:null,to_webp:!1}},o=function(t,e){return t.getAttribute("data-"+e)},i=function(t,e,n){var o="data-"+e;null!==n?t.setAttribute(o,n):t.removeAttribute(o)},s=function(t){return i(t,"was-processed","true")},r=function(t){return"true"===o(t,"was-processed")},l=function(t){return t.filter(function(t){return!r(t)})},a=function(t,e){return t.filter(function(t){return t!==e})},c=function(t){return t.getBoundingClientRect().top+window.pageYOffset-t.ownerDocument.documentElement.clientTop},u=function(t,e,n){return(e===window?window.innerHeight+window.pageYOffset:c(e)+e.offsetHeight)<=c(t)-n},d=function(t){return t.getBoundingClientRect().left+window.pageXOffset-t.ownerDocument.documentElement.clientLeft},f=function(t,e,n){var o=window.innerWidth;return(e===window?o+window.pageXOffset:d(e)+o)<=d(t)-n},_=function(t,e,n){return(e===window?window.pageYOffset:c(e))>=c(t)+n+t.offsetHeight},h=function(t,e,n){return(e===window?window.pageXOffset:d(e))>=d(t)+n+t.offsetWidth},p=function(t,e){var n,o=new t(e);try{n=new CustomEvent("LazyLoad::Initialized",{detail:{instance:o}})}catch(t){(n=document.createEvent("CustomEvent")).initCustomEvent("LazyLoad::Initialized",!1,!1,{instance:o})}window.dispatchEvent(n)},g=function(t,e){return e?t.replace(/\.(jpe?g|png)/gi,".webp"):t},m="undefined"!=typeof window,w=m&&!("onscroll"in window)||/(gle|ing|ro)bot|crawl|spider/i.test(navigator.userAgent),v=m&&"classList"in document.createElement("p"),b=m&&function(){var t=document.createElement("canvas");return!(!t.getContext||!t.getContext("2d"))&&0===t.toDataURL("image/webp").indexOf("data:image/webp")}(),y=function(t,e){v?t.classList.add(e):t.className+=(t.className?" ":"")+e},E=function(t,e){v?t.classList.remove(e):t.className=t.className.replace(new RegExp("(^|\\s+)"+e+"(\\s+|$)")," ").replace(/^\s+/,"").replace(/\s+$/,"")},L=function(t,e,n,i){for(var s,r=0;s=t.children[r];r+=1)if("SOURCE"===s.tagName){var l=o(s,n);T(s,e,l,i)}},T=function(t,e,n,o){n&&t.setAttribute(e,g(n,o))},S=function(t,e){var n=b&&e.to_webp,i=o(t,e.data_src),s=o(t,e.data_bg);if(i){var r=g(i,n);t.style.backgroundImage='url("'+r+'")'}if(s){var l=g(s,n);t.style.backgroundImage=l}},O={IMG:function(t,e){var n=b&&e.to_webp,i=e.data_srcset,s=t.parentNode;s&&"PICTURE"===s.tagName&&L(s,"srcset",i,n);var r=o(t,e.data_sizes);T(t,"sizes",r);var l=o(t,i);T(t,"srcset",l,n);var a=o(t,e.data_src);T(t,"src",a,n)},IFRAME:function(t,e){var n=o(t,e.data_src);T(t,"src",n)},VIDEO:function(t,e){var n=e.data_src,i=o(t,n);L(t,"src",n),T(t,"src",i),t.load()}},H=function(t,e){var n=e._settings,o=t.tagName,i=O[o];if(i)return i(t,n),e._updateLoadingCount(1),void(e._elements=a(e._elements,t));S(t,n)},C=function(t,e){t&&t(e)},k=function(t,e,n){t.addEventListener(e,n)},z=function(t,e,n){t.removeEventListener(e,n)},N=function(t,e,n){k(t,"load",e),k(t,"loadeddata",e),k(t,"error",n)},A=function(t,e,n){z(t,"load",e),z(t,"loadeddata",e),z(t,"error",n)},I=function(t,e,n){var o=n._settings,i=e?o.class_loaded:o.class_error,s=e?o.callback_load:o.callback_error,r=t.target;E(r,o.class_loading),y(r,i),C(s,r),n._updateLoadingCount(-1)},x=function(t,e){var n=function n(i){I(i,!0,e),A(t,n,o)},o=function o(i){I(i,!1,e),A(t,n,o)};N(t,n,o)},R=["IMG","IFRAME","VIDEO"],D=function(t,e){for(;e.length;)t.splice(e.pop(),1)},F=function(t){this._settings=_extends({},n(),t),this._loadingCount=0,this._queryOriginNode=this._settings.container===window?document:this._settings.container,this._previousLoopTime=0,this._loopTimeout=null,this._boundHandleScroll=this.handleScroll.bind(this),this._isFirstLoop=!0,window.addEventListener("resize",this._boundHandleScroll),this.update()};return F.prototype={_loopThroughElements:function(e){var n=this._settings,o=this._elements,i=o?o.length:0,s=void 0,r=[],l=this._isFirstLoop;if(l&&(this._isFirstLoop=!1),0!==i){for(s=0;s<i;s++){var a=o[s];n.skip_invisible&&null===a.offsetParent||(e||t(a,n.container,n.threshold))&&(l&&y(a,n.class_initial),this.load(a),r.push(s))}D(o,r)}else this._stopScrollHandler()},_startScrollHandler:function(){this._isHandlingScroll||(this._isHandlingScroll=!0,this._settings.container.addEventListener("scroll",this._boundHandleScroll))},_stopScrollHandler:function(){this._isHandlingScroll&&(this._isHandlingScroll=!1,this._settings.container.removeEventListener("scroll",this._boundHandleScroll))},_updateLoadingCount:function(t){this._loadingCount+=t,0===this._elements.length&&0===this._loadingCount&&C(this._settings.callback_finish)},handleScroll:function(){var t=this._settings.throttle;if(0!==t){var e=Date.now(),n=t-(e-this._previousLoopTime);n<=0||n>t?(this._loopTimeout&&(clearTimeout(this._loopTimeout),this._loopTimeout=null),this._previousLoopTime=e,this._loopThroughElements()):this._loopTimeout||(this._loopTimeout=setTimeout(function(){this._previousLoopTime=Date.now(),this._loopTimeout=null,this._loopThroughElements()}.bind(this),n))}else this._loopThroughElements()},loadAll:function(){this._loopThroughElements(!0)},update:function(t){var e=this._settings,n=t||this._queryOriginNode.querySelectorAll(e.elements_selector);this._elements=l(Array.prototype.slice.call(n)),w?this.loadAll():(this._loopThroughElements(),this._startScrollHandler())},destroy:function(){window.removeEventListener("resize",this._boundHandleScroll),this._loopTimeout&&(clearTimeout(this._loopTimeout),this._loopTimeout=null),this._stopScrollHandler(),this._elements=null,this._queryOriginNode=null,this._settings=null},load:function(t,n){e(t,this,n)}},m&&function(t,e){if(e)if(e.length)for(var n,o=0;n=e[o];o+=1)p(t,n);else p(t,e)}(F,window.lazyLoadOptions),F});
diff --git a/_site/logobridge.html b/_site/logobridge.html
index 8b70150..cbb046d 100644
--- a/_site/logobridge.html
+++ b/_site/logobridge.html
@@ -30,7 +30,7 @@
   <meta name="twitter:image:src" content="https://ura.design/" />
   
   <link rel="stylesheet" href="/css/app.css">
-  <link href="/fonts/overpass/overpass.css" rel="stylesheet">
+  <link rel="stylesheet" href="/fonts/overpass/overpass.css">
   <link rel="stylesheet" href="/css/superslides.css"/>
   <link rel="stylesheet" href="/css/slick-theme.css"/>
   <link rel="stylesheet" href="/css/slick.css"/>
@@ -40,9 +40,7 @@
   <link rel="stylesheet" href="/css/fontawesome-all.css"/>
   <link rel="stylesheet" href="/css/style.css"/>
   <link rel="stylesheet" href="/css/responsive.css"/>
-
-  <script src="/bower_components/modernizr/modernizr.js"></script>
-  
+    
   <link rel="canonical" href="http://localhost:4000/logobridge.html">
   <link rel="alternate" type="application/rss+xml" title="Ura Design" href="http://localhost:4000/feed.xml">
 </head>
@@ -184,25 +182,25 @@ It’s a great way to kick off your open source project when you need to gather
     <div class="large-12 centered-text columns">
       <div class="work-wrapper">
             <a href="https://cloud.ura.design/s/5ycX7DrQ9MXsKi4" target="blank" class="work space">
-              <img src="/images/logobridge/32.png" alt="">
+              <img class="lazy" data-src="/images/logobridge/32.png" alt="">
               <div class="info center">
                 <h5>Logo 32</h5>
               </div>
             </a>
             <a href="https://cloud.ura.design/s/eGzARsDPS7xK6i5" target="blank" class="work space">
-              <img src="/images/logobridge/31.png" alt="">
+              <img class="lazy" data-src="/images/logobridge/31.png" alt="">
               <div class="info center">
                 <h5>Logo 31</h5>
               </div>
             </a>
             <a href="https://cloud.ura.design/s/DgDXMkK32nbGt9M" target="blank" class="work space">
-              <img src="/images/logobridge/30.png" alt="">
+              <img class="lazy" data-src="/images/logobridge/30.png" alt="">
               <div class="info center">
                 <h5>Logo 30</h5>
               </div>
             </a>
           <a href="https://cloud.ura.design/s/Qkjq7WcB3gRpyed" target="blank" class="work space">
-              <img src="/images/logobridge/29.png" alt="">
+              <img class="lazy" data-src="/images/logobridge/29.png" alt="">
               <div class="info center">
                 <h5>Logo 29</h5>
               </div>
@@ -214,25 +212,25 @@ It’s a great way to kick off your open source project when you need to gather
     <div class="large-12 centered-text columns">
       <div class="work-wrapper">
             <a href="https://cloud.ura.design/s/E7OC3cub9qmjL2c" target="blank" class="work space">
-              <img src="/images/logobridge/28.png" alt="">
+              <img class="lazy" data-src="/images/logobridge/28.png" alt="">
               <div class="info center">
                 <h5>Logo 28</h5>
               </div>
             </a>
             <a href="https://cloud.ura.design/s/AN8VJaf4BfbZeNs" target="blank" class="work space">
-              <img src="/images/logobridge/27.png" alt="">
+              <img class="lazy" data-src="/images/logobridge/27.png" alt="">
               <div class="info center">
                 <h5>Logo 27</h5>
               </div>
             </a>
             <a href="https://cloud.ura.design/s/9z8jNL804itQ9rj" target="blank" class="work space">
-              <img src="/images/logobridge/26.png" alt="">
+              <img class="lazy" data-src="/images/logobridge/26.png" alt="">
               <div class="info center">
                 <h5>Logo 26</h5>
               </div>
             </a>
           <a href="https://cloud.ura.design/s/NWUCaBe1sBmxMQr" target="blank" class="work space">
-              <img src="/images/logobridge/25.png" alt="">
+              <img class="lazy" data-src="/images/logobridge/25.png" alt="">
               <div class="info center">
                 <h5>Logo 25</h5>
               </div>
@@ -244,25 +242,25 @@ It’s a great way to kick off your open source project when you need to gather
     <div class="large-12 centered-text columns">
       <div class="work-wrapper">
             <a href="https://cloud.ura.design/s/6MLHKgb7kaLvBdW" target="blank" class="work space">
-              <img src="/images/logobridge/24.png" alt="">
+              <img class="lazy" data-src="/images/logobridge/24.png" alt="">
               <div class="info center">
                 <h5>Logo 24</h5>
               </div>
             </a>
             <a href="https://cloud.ura.design/s/AXvYXt2gt9frtKP" target="blank" class="work space">
-              <img src="/images/logobridge/23.png" alt="">
+              <img class="lazy" data-src="/images/logobridge/23.png" alt="">
               <div class="info center">
                 <h5>Logo 23</h5>
               </div>
             </a>
             <a href="https://cloud.ura.design/s/2PpGi036WDkiw3x" target="blank" class="work space">
-              <img src="/images/logobridge/22.png" alt="">
+              <img class="lazy" data-src="/images/logobridge/22.png" alt="">
               <div class="info center">
                 <h5>Logo 22</h5>
               </div>
             </a>
           <a href="https://cloud.ura.design/s/nfB7kgOVRbu1DWH" target="blank" class="work space">
-            <img src="/images/logobridge/21.png" alt="">
+            <img class="lazy" data-src="/images/logobridge/21.png" alt="">
               <div class="info center">
                 <h5>Logo 21</h5>
               </div>
@@ -274,25 +272,25 @@ It’s a great way to kick off your open source project when you need to gather
     <div class="large-12 centered-text columns">
       <div class="work-wrapper">
             <a href="https://cloud.ura.design/s/uOpHJ03pFydVhnk" target="blank" class="work space">
-              <img src="/images/logobridge/20.png" alt="">
+              <img class="lazy" data-src="/images/logobridge/20.png" alt="">
               <div class="info center">
                 <h5>Logo 20</h5>
               </div>
             </a>
             <a href="https://cloud.ura.design/s/ug9TQ6QDG1bk9AG" target="blank" class="work space">
-              <img src="/images/logobridge/19.png" alt="">
+              <img class="lazy" data-src="/images/logobridge/19.png" alt="">
               <div class="info center">
                 <h5>Logo 19</h5>
               </div>
             </a>
             <a href="https://cloud.ura.design/s/AUdTz6wgkwtHCBd" target="blank" class="work space">
-              <img src="/images/logobridge/18.png" alt="">
+              <img class="lazy" data-src="/images/logobridge/18.png" alt="">
               <div class="info center">
                 <h5>Logo 18</h5>
               </div>
             </a>
           <a href="https://cloud.ura.design/s/EVEChXZfCUQcO5G" target="blank" class="work space">
-              <img src="/images/logobridge/17.png" alt="">
+              <img class="lazy" data-src="/images/logobridge/17.png" alt="">
               <div class="info center">
                 <h5>Logo 17</h5>
               </div>
@@ -304,25 +302,25 @@ It’s a great way to kick off your open source project when you need to gather
     <div class="large-12 centered-text columns">
       <div class="work-wrapper">
             <a href="https://cloud.ura.design/s/ZD71SvkYhiorZae" target="blank" class="work space">
-              <img src="/images/logobridge/16.png" alt="">
+              <img class="lazy" data-src="/images/logobridge/16.png" alt="">
               <div class="info center">
                 <h5>Logo 16</h5>
               </div>
             </a>
             <a href="https://cloud.ura.design/s/vc7FKx1icMeq3QL" target="blank" class="work space">
-              <img src="/images/logobridge/15.png" alt="">
+              <img class="lazy" data-src="/images/logobridge/15.png" alt="">
               <div class="info center">
                 <h5>Logo 15</h5>
               </div>
             </a>
             <a href="https://cloud.ura.design/s/SR2WegS5qin08AZ" target="blank" class="work space">
-              <img src="/images/logobridge/14.png" alt="">
+              <img class="lazy" data-src="/images/logobridge/14.png" alt="">
               <div class="info center">
                 <h5>Logo 14</h5>
               </div>
             </a>
             <a href="https://cloud.ura.design/s/vy1H32n3wYudvvK" target="blank" class="work space">
-              <img src="/images/logobridge/13.png" alt="">
+              <img class="lazy" data-src="/images/logobridge/13.png" alt="">
               <div class="info center">
                 <h5>Logo 13</h5>
               </div>
@@ -334,25 +332,25 @@ It’s a great way to kick off your open source project when you need to gather
     <div class="large-12 centered-text columns">
       <div class="work-wrapper">
             <a href="https://cloud.ura.design/s/LLcBzhPfeJYXjn6" target="blank" class="work space">
-              <img src="/images/logobridge/12.png" alt="">
+              <img class="lazy" data-src="/images/logobridge/12.png" alt="">
               <div class="info center">
                 <h5>Logo 12</h5>
               </div>
             </a>
             <a href="https://cloud.ura.design/s/g07EQygQXx9AnTu" target="blank" class="work space">
-              <img src="/images/logobridge/11.png" alt="">
+              <img class="lazy" data-src="/images/logobridge/11.png" alt="">
               <div class="info center">
                 <h5>Logo 11</h5>
               </div>
             </a>
             <a href="https://cloud.ura.design/s/ECmitgpnrH2sene" target="blank" class="work space">
-              <img src="/images/logobridge/10.png" alt="">
+              <img class="lazy" data-src="/images/logobridge/10.png" alt="">
               <div class="info center">
                 <h5>Logo 10</h5>
               </div>
             </a>
           <a href="https://cloud.ura.design/s/tkfXiEpuynDhXYV" target="blank" class="work space">
-              <img src="/images/logobridge/9.png" alt="">
+              <img class="lazy" data-src="/images/logobridge/9.png" alt="">
               <div class="info center">
                 <h5>Logo 9</h5>
               </div>
@@ -364,25 +362,25 @@ It’s a great way to kick off your open source project when you need to gather
     <div class="large-12 centered-text columns">
       <div class="work-wrapper">
             <a href="https://cloud.ura.design/s/cVBkctDp4ApGSYC" target="blank" class="work space">
-              <img src="/images/logobridge/8.png" alt="">
+              <img class="lazy" data-src="/images/logobridge/8.png" alt="">
               <div class="info center">
                 <h5>Logo 8</h5>
               </div>
             </a>
             <a href="https://cloud.ura.design/s/cxpyGtJ9xif52Kw" target="blank" class="work space">
-              <img src="/images/logobridge/7.png" alt="">
+              <img class="lazy" data-src="/images/logobridge/7.png" alt="">
               <div class="info center">
                 <h5>Logo 7</h5>
               </div>
             </a>
             <a href="https://cloud.ura.design/s/ramqPdYHZlaQ2u8" target="blank" class="work space">
-              <img src="/images/logobridge/6.png" alt="">
+              <img class="lazy" data-src="/images/logobridge/6.png" alt="">
               <div class="info center">
                 <h5>Logo 6</h5>
               </div>
             </a>
           <a href="https://cloud.ura.design/s/eZqxXpJu6hIlqCa" target="blank" class="work space">
-              <img src="/images/logobridge/5.png" alt="">
+              <img class="lazy" data-src="/images/logobridge/5.png" alt="">
               <div class="info center">
                 <h5>Logo 5</h5>
               </div>
@@ -394,25 +392,25 @@ It’s a great way to kick off your open source project when you need to gather
     <div class="large-12 centered-text columns">
       <div class="work-wrapper">
             <a href="https://cloud.ura.design/s/SVLtm1eF6P7LmgZ" target="blank" class="work space">
-              <img src="/images/logobridge/4.png" alt="">
+              <img class="lazy" data-src="/images/logobridge/4.png" alt="">
               <div class="info center">
                 <h5>Logo 4</h5>
               </div>
             </a>
             <a href="https://cloud.ura.design/s/9ULnGadMZLiZuwl" target="blank" class="work space">
-              <img src="/images/logobridge/3.png" alt="">
+              <img class="lazy" data-src="/images/logobridge/3.png" alt="">
               <div class="info center">
                 <h5>Logo 3</h5>
               </div>
             </a>
             <a href="https://cloud.ura.design/s/ViMmeuvoLmXsjjF" target="blank" class="work space">
-              <img src="/images/logobridge/2.png" alt="">
+              <img class="lazy" data-src="/images/logobridge/2.png" alt="">
               <div class="info center">
                 <h5>Logo 2</h5>
               </div>
             </a>
           <a href="https://cloud.ura.design/s/6zlp51kBNGogrbC" target="blank" class="work space">
-              <img src="/images/logobridge/1.png" alt="">
+              <img class="lazy" data-src="/images/logobridge/1.png" alt="">
               <div class="info center">
                 <h5>Logo 1</h5>
               </div>
@@ -457,9 +455,17 @@ It’s a great way to kick off your open source project when you need to gather
 <script src="/js/jquery.validate.js"></script>
 <!-- <script src="/bower_components/countto/jquery.countTo.js"></script> -->
 <script src="/bower_components/appear/jquery.appear.js"></script>
+<script src="/bower_components/modernizr/modernizr.js"></script>
 <script src="/js/app.js"></script>
 <script src="/js/svg.js"></script>
 <script src="/js/cookie.js"></script>
+<script src="/js/lazyload.min.js"></script>
+
+<script>
+var myLazyLoad = new LazyLoad({
+    elements_selector: ".lazy"
+});
+</script>
 
 <!-- Matomo -->
 <script type="text/javascript">
diff --git a/_site/portfolio-item-2.html b/_site/portfolio-item-2.html
index 4544f57..6c04b1f 100644
--- a/_site/portfolio-item-2.html
+++ b/_site/portfolio-item-2.html
@@ -29,7 +29,7 @@
   <meta name="twitter:image:src" content="https://ura.design/" />
   
   <link rel="stylesheet" href="/css/app.css">
-  <link href="/fonts/overpass/overpass.css" rel="stylesheet">
+  <link rel="stylesheet" href="/fonts/overpass/overpass.css">
   <link rel="stylesheet" href="/css/superslides.css"/>
   <link rel="stylesheet" href="/css/slick-theme.css"/>
   <link rel="stylesheet" href="/css/slick.css"/>
@@ -39,9 +39,7 @@
   <link rel="stylesheet" href="/css/fontawesome-all.css"/>
   <link rel="stylesheet" href="/css/style.css"/>
   <link rel="stylesheet" href="/css/responsive.css"/>
-
-  <script src="/bower_components/modernizr/modernizr.js"></script>
-  
+    
   <link rel="canonical" href="http://localhost:4000/portfolio-item-2.html">
   <link rel="alternate" type="application/rss+xml" title="Ura Design" href="http://localhost:4000/feed.xml">
 </head>
@@ -273,9 +271,17 @@
 <script src="/js/jquery.validate.js"></script>
 <!-- <script src="/bower_components/countto/jquery.countTo.js"></script> -->
 <script src="/bower_components/appear/jquery.appear.js"></script>
+<script src="/bower_components/modernizr/modernizr.js"></script>
 <script src="/js/app.js"></script>
 <script src="/js/svg.js"></script>
 <script src="/js/cookie.js"></script>
+<script src="/js/lazyload.min.js"></script>
+
+<script>
+var myLazyLoad = new LazyLoad({
+    elements_selector: ".lazy"
+});
+</script>
 
 <!-- Matomo -->
 <script type="text/javascript">
diff --git a/_site/privacy-policy.html b/_site/privacy-policy.html
index 5d2017b..6290543 100644
--- a/_site/privacy-policy.html
+++ b/_site/privacy-policy.html
@@ -30,7 +30,7 @@
   <meta name="twitter:image:src" content="https://ura.design/" />
   
   <link rel="stylesheet" href="/css/app.css">
-  <link href="/fonts/overpass/overpass.css" rel="stylesheet">
+  <link rel="stylesheet" href="/fonts/overpass/overpass.css">
   <link rel="stylesheet" href="/css/superslides.css"/>
   <link rel="stylesheet" href="/css/slick-theme.css"/>
   <link rel="stylesheet" href="/css/slick.css"/>
@@ -40,9 +40,7 @@
   <link rel="stylesheet" href="/css/fontawesome-all.css"/>
   <link rel="stylesheet" href="/css/style.css"/>
   <link rel="stylesheet" href="/css/responsive.css"/>
-
-  <script src="/bower_components/modernizr/modernizr.js"></script>
-  
+    
   <link rel="canonical" href="http://localhost:4000/privacy-policy.html">
   <link rel="alternate" type="application/rss+xml" title="Ura Design" href="http://localhost:4000/feed.xml">
 </head>
@@ -251,9 +249,17 @@ Ura also collects potentially personally-identifying information like Internet P
 <script src="/js/jquery.validate.js"></script>
 <!-- <script src="/bower_components/countto/jquery.countTo.js"></script> -->
 <script src="/bower_components/appear/jquery.appear.js"></script>
+<script src="/bower_components/modernizr/modernizr.js"></script>
 <script src="/js/app.js"></script>
 <script src="/js/svg.js"></script>
 <script src="/js/cookie.js"></script>
+<script src="/js/lazyload.min.js"></script>
+
+<script>
+var myLazyLoad = new LazyLoad({
+    elements_selector: ".lazy"
+});
+</script>
 
 <!-- Matomo -->
 <script type="text/javascript">
diff --git a/_site/projects/enigmail.html b/_site/projects/enigmail.html
index 0706260..7fd95b4 100644
--- a/_site/projects/enigmail.html
+++ b/_site/projects/enigmail.html
@@ -29,7 +29,7 @@
   <meta name="twitter:image:src" content="https://ura.design/" />
   
   <link rel="stylesheet" href="/css/app.css">
-  <link href="/fonts/overpass/overpass.css" rel="stylesheet">
+  <link rel="stylesheet" href="/fonts/overpass/overpass.css">
   <link rel="stylesheet" href="/css/superslides.css"/>
   <link rel="stylesheet" href="/css/slick-theme.css"/>
   <link rel="stylesheet" href="/css/slick.css"/>
@@ -39,9 +39,7 @@
   <link rel="stylesheet" href="/css/fontawesome-all.css"/>
   <link rel="stylesheet" href="/css/style.css"/>
   <link rel="stylesheet" href="/css/responsive.css"/>
-
-  <script src="/bower_components/modernizr/modernizr.js"></script>
-  
+    
   <link rel="canonical" href="http://localhost:4000/projects/enigmail.html">
   <link rel="alternate" type="application/rss+xml" title="Ura Design" href="http://localhost:4000/feed.xml">
 </head>
@@ -160,9 +158,9 @@
 <div class="full text">
   <div class="row">
     <div class="large-8 columns">
-      <img src="../images/projects/enigmail.png" alt="">
+      <img class="lazy" data-src="../images/projects/enigmail.png" alt="">
       <div class="spacing"></div>
-      <img src="../images/projects/enigmail_icons.png" alt="">
+      <img class="lazy" data-src="../images/projects/enigmail_icons.png" alt="">
       <div class="spacing"></div>
     </div>
     <div class="large-4 columns">
@@ -179,7 +177,7 @@
         <p><span>Visual Identity</span></p>
          <hr>
         <a class="button boxed black" href="https://github.com/uracreative/works/tree/master/Enigmail" target="_blank"><i class="fab fa-github"></i> Sources</a><br />
-         <a class="button boxed identihub" href="https://demo.identihub.co/project/enigmail" target="_blank"><img src="../images/projects/identihub.svg" > Identihub</a><br />
+         <a class="button boxed identihub" href="https://demo.identihub.co/project/enigmail" target="_blank"><img class="lazy" data-src="../images/projects/identihub.svg" > Identihub</a><br />
         <a class="button boxed enigmail" href="https://enigmail.net" target="_blank"><i class="fas fa-globe"></i> Website</a>
       </div>
     </div>
@@ -199,7 +197,7 @@
       <div class="large-4 columns">
         <div class="work-wrapper">
           <a href="openlabs" class="work">
-            <img src="../images/projects/openlabs.jpg" alt="">
+            <img class="lazy" data-src="../images/projects/openlabs.jpg" alt="">
             <div class="info">
               <h3>Open Labs</h3>
               <p>Rebranding</p>
@@ -210,7 +208,7 @@
       <div class="large-4 columns">
         <div class="work-wrapper">
           <a href="tor-style-guide" class="work">
-          <img src="../images/projects/tor_thumb.png" alt="">
+          <img class="lazy" data-src="../images/projects/tor_thumb.png" alt="">
           <div class="info">
             <h3>Tor Style Guide</h3>
             <p>Style Guide</p>
@@ -221,7 +219,7 @@
       <div class="large-4 columns">
         <div class="work-wrapper">
           <a href="mozilla-l10n" class="work">
-            <img src="../images/projects/mozilla-l10n.jpg" alt="">
+            <img class="lazy" data-src="../images/projects/mozilla-l10n.jpg" alt="">
             <div class="info">
               <h3>Mozilla L10N T-shirts</h3>
               <p>Print</p>
@@ -269,9 +267,17 @@
 <script src="/js/jquery.validate.js"></script>
 <!-- <script src="/bower_components/countto/jquery.countTo.js"></script> -->
 <script src="/bower_components/appear/jquery.appear.js"></script>
+<script src="/bower_components/modernizr/modernizr.js"></script>
 <script src="/js/app.js"></script>
 <script src="/js/svg.js"></script>
 <script src="/js/cookie.js"></script>
+<script src="/js/lazyload.min.js"></script>
+
+<script>
+var myLazyLoad = new LazyLoad({
+    elements_selector: ".lazy"
+});
+</script>
 
 <!-- Matomo -->
 <script type="text/javascript">
diff --git a/_site/projects/index.html b/_site/projects/index.html
index ca77d78..43b37b9 100644
--- a/_site/projects/index.html
+++ b/_site/projects/index.html
@@ -30,7 +30,7 @@
   <meta name="twitter:image:src" content="https://ura.design/" />
   
   <link rel="stylesheet" href="/css/app.css">
-  <link href="/fonts/overpass/overpass.css" rel="stylesheet">
+  <link rel="stylesheet" href="/fonts/overpass/overpass.css">
   <link rel="stylesheet" href="/css/superslides.css"/>
   <link rel="stylesheet" href="/css/slick-theme.css"/>
   <link rel="stylesheet" href="/css/slick.css"/>
@@ -40,9 +40,7 @@
   <link rel="stylesheet" href="/css/fontawesome-all.css"/>
   <link rel="stylesheet" href="/css/style.css"/>
   <link rel="stylesheet" href="/css/responsive.css"/>
-
-  <script src="/bower_components/modernizr/modernizr.js"></script>
-  
+    
   <link rel="canonical" href="http://localhost:4000/projects/">
   <link rel="alternate" type="application/rss+xml" title="Ura Design" href="http://localhost:4000/feed.xml">
 </head>
@@ -166,7 +164,7 @@
     
       <div class="work-wrapper">
         <a href="thunderbird" class="work">
-          <img src="/images/projects/tb_overview.png" alt="">
+          <img class="lazy" data-src="/images/projects/tb_overview.png" alt="">
           <div class="info">
             <h3>Thunderbird Style Guide and Usability Study</h3>
             <p>Usability Study, Style Guide</p>
@@ -176,7 +174,7 @@
     
       <div class="work-wrapper">
         <a href="openlabs" class="work">
-          <img src="/images/projects/openlabs.jpg" alt="">
+          <img class="lazy" data-src="/images/projects/openlabs.jpg" alt="">
           <div class="info">
             <h3>Open Labs</h3>
             <p>Visual Identity</p>
@@ -186,7 +184,7 @@
     
       <div class="work-wrapper">
         <a href="openchain" class="work">
-          <img src="/images/projects/penguins_thumb.jpg" alt="">
+          <img class="lazy" data-src="/images/projects/penguins_thumb.jpg" alt="">
           <div class="info">
             <h3>OpenChain Penguins</h3>
             <p>Illustration</p>
@@ -199,7 +197,7 @@
     
       <div class="work-wrapper">
         <a href="mozilla-l10n" class="work">
-          <img src="/images/projects/mozilla-l10n.jpg" alt="">
+          <img class="lazy" data-src="/images/projects/mozilla-l10n.jpg" alt="">
           <div class="info">
             <h3>Mozilla L10N T-Shirts</h3>
             <p>Print</p>
@@ -209,7 +207,7 @@
     
       <div class="work-wrapper">
         <a href="sfk16" class="work">
-          <img src="/images/projects/poster_SFK.jpg" alt="">
+          <img class="lazy" data-src="/images/projects/poster_SFK.jpg" alt="">
           <div class="info">
             <h3>Software Freedom Kosova</h3>
             <p>Visual Identity, Print</p>
@@ -219,7 +217,7 @@
     
       <div class="work-wrapper">
         <a href="tor-style-guide" class="work">
-          <img src="/images/projects/tor_thumb.png" alt="">
+          <img class="lazy" data-src="/images/projects/tor_thumb.png" alt="">
           <div class="info">
             <h3>Tor Style Guide</h3>
             <p>Style Guide</p>
@@ -232,7 +230,7 @@
     
       <div class="work-wrapper">
         <a href="reproducible-builds" class="work">
-          <img src="/images/projects/rb_thumbnail.png" alt="">
+          <img class="lazy" data-src="/images/projects/rb_thumbnail.png" alt="">
           <div class="info">
             <h3>Reproducible Builds Styleguide</h3>
             <p>Style Guide</p>
@@ -242,7 +240,7 @@
     
       <div class="work-wrapper">
         <a href="enigmail" class="work">
-          <img src="/images/projects/enigmail_overview.png" alt="">
+          <img class="lazy" data-src="/images/projects/enigmail_overview.png" alt="">
           <div class="info">
             <h3>Enigmail Rebranding</h3>
             <p>Visual Identity</p>
@@ -252,7 +250,7 @@
     
       <div class="work-wrapper">
         <a href="libocon" class="work">
-          <img src="/images/projects/libocon_overview.png" alt="">
+          <img class="lazy" data-src="/images/projects/libocon_overview.png" alt="">
           <div class="info">
             <h3>LibOCon 2018 Visual Identity</h3>
             <p>Visual Identity</p>
@@ -299,9 +297,17 @@
 <script src="/js/jquery.validate.js"></script>
 <!-- <script src="/bower_components/countto/jquery.countTo.js"></script> -->
 <script src="/bower_components/appear/jquery.appear.js"></script>
+<script src="/bower_components/modernizr/modernizr.js"></script>
 <script src="/js/app.js"></script>
 <script src="/js/svg.js"></script>
 <script src="/js/cookie.js"></script>
+<script src="/js/lazyload.min.js"></script>
+
+<script>
+var myLazyLoad = new LazyLoad({
+    elements_selector: ".lazy"
+});
+</script>
 
 <!-- Matomo -->
 <script type="text/javascript">
diff --git a/_site/projects/libocon.html b/_site/projects/libocon.html
index 469a6b0..7fa9a76 100644
--- a/_site/projects/libocon.html
+++ b/_site/projects/libocon.html
@@ -29,7 +29,7 @@
   <meta name="twitter:image:src" content="https://ura.design/" />
   
   <link rel="stylesheet" href="/css/app.css">
-  <link href="/fonts/overpass/overpass.css" rel="stylesheet">
+  <link rel="stylesheet" href="/fonts/overpass/overpass.css">
   <link rel="stylesheet" href="/css/superslides.css"/>
   <link rel="stylesheet" href="/css/slick-theme.css"/>
   <link rel="stylesheet" href="/css/slick.css"/>
@@ -39,9 +39,7 @@
   <link rel="stylesheet" href="/css/fontawesome-all.css"/>
   <link rel="stylesheet" href="/css/style.css"/>
   <link rel="stylesheet" href="/css/responsive.css"/>
-
-  <script src="/bower_components/modernizr/modernizr.js"></script>
-  
+    
   <link rel="canonical" href="http://localhost:4000/projects/libocon.html">
   <link rel="alternate" type="application/rss+xml" title="Ura Design" href="http://localhost:4000/feed.xml">
 </head>
@@ -160,9 +158,9 @@
 <div class="full text">
   <div class="row">
     <div class="large-8 columns">
-      <img src="../images/projects/libocon.png" alt="">
+      <img class="lazy" data-src="../images/projects/libocon.png" alt="">
       <div class="spacing"></div>
-      <img src="../images/projects/libocon_totebag.png" alt="">
+      <img class="lazy" data-src="../images/projects/libocon_totebag.png" alt="">
       <div class="spacing"></div>
     </div>
     <div class="large-4 columns">
@@ -179,7 +177,7 @@
         <p><span>Visual Identity</span></p>
          <hr>
         <a class="button boxed black" href="https://github.com/uracreative/works/tree/master/LibOCon 2018" target="_blank" rel="noopener"><i class="fab fa-github"></i> Sources</a><br />
-         <a class="button boxed identihub" href="https://demo.identihub.co/project/libocon" target="_blank" rel="noopener"><img src="../images/projects/identihub.svg" > Identihub</a><br />
+         <a class="button boxed identihub" href="https://demo.identihub.co/project/libocon" target="_blank" rel="noopener"><img class="lazy" data-src="../images/projects/identihub.svg" > Identihub</a><br />
         <a class="button boxed libocon" href="https://libocon.org" target="_blank" rel="noopener"><i class="fas fa-globe"></i> Website</a>
       </div>
     </div>
@@ -199,7 +197,7 @@
       <div class="large-4 columns">
         <div class="work-wrapper">
           <a href="openlabs" class="work">
-            <img src="../images/projects/openlabs.jpg" alt="">
+            <img class="lazy" data-src="../images/projects/openlabs.jpg" alt="">
             <div class="info">
               <h3>Open Labs</h3>
               <p>Rebranding</p>
@@ -210,7 +208,7 @@
       <div class="large-4 columns">
         <div class="work-wrapper">
           <a href="tor-style-guide" class="work">
-          <img src="../images/projects/tor_thumb.png" alt="">
+          <img class="lazy" data-src="../images/projects/tor_thumb.png" alt="">
           <div class="info">
             <h3>Tor Style Guide</h3>
             <p>Style Guide</p>
@@ -221,7 +219,7 @@
       <div class="large-4 columns">
         <div class="work-wrapper">
           <a href="mozilla-l10n" class="work">
-            <img src="../images/projects/mozilla-l10n.jpg" alt="">
+            <img class="lazy" data-src="../images/projects/mozilla-l10n.jpg" alt="">
             <div class="info">
               <h3>Mozilla L10N T-shirts</h3>
               <p>Print</p>
@@ -269,9 +267,17 @@
 <script src="/js/jquery.validate.js"></script>
 <!-- <script src="/bower_components/countto/jquery.countTo.js"></script> -->
 <script src="/bower_components/appear/jquery.appear.js"></script>
+<script src="/bower_components/modernizr/modernizr.js"></script>
 <script src="/js/app.js"></script>
 <script src="/js/svg.js"></script>
 <script src="/js/cookie.js"></script>
+<script src="/js/lazyload.min.js"></script>
+
+<script>
+var myLazyLoad = new LazyLoad({
+    elements_selector: ".lazy"
+});
+</script>
 
 <!-- Matomo -->
 <script type="text/javascript">
diff --git a/_site/projects/mozilla-l10n.html b/_site/projects/mozilla-l10n.html
index 2423b3a..fa4f37d 100644
--- a/_site/projects/mozilla-l10n.html
+++ b/_site/projects/mozilla-l10n.html
@@ -29,7 +29,7 @@
   <meta name="twitter:image:src" content="https://ura.design/" />
   
   <link rel="stylesheet" href="/css/app.css">
-  <link href="/fonts/overpass/overpass.css" rel="stylesheet">
+  <link rel="stylesheet" href="/fonts/overpass/overpass.css">
   <link rel="stylesheet" href="/css/superslides.css"/>
   <link rel="stylesheet" href="/css/slick-theme.css"/>
   <link rel="stylesheet" href="/css/slick.css"/>
@@ -39,9 +39,7 @@
   <link rel="stylesheet" href="/css/fontawesome-all.css"/>
   <link rel="stylesheet" href="/css/style.css"/>
   <link rel="stylesheet" href="/css/responsive.css"/>
-
-  <script src="/bower_components/modernizr/modernizr.js"></script>
-  
+    
   <link rel="canonical" href="http://localhost:4000/projects/mozilla-l10n.html">
   <link rel="alternate" type="application/rss+xml" title="Ura Design" href="http://localhost:4000/feed.xml">
 </head>
@@ -160,18 +158,18 @@
 <div class="full text">
   <div class="row">
     <div class="large-8 columns">
-      <img style="margin-left: auto; margin-right: auto; display: block;" src="../images/projects/l10n_Lions.png" alt="">
+      <img class="lazy" style="margin-left: auto; margin-right: auto; display: block;" data-src="../images/projects/l10n_Lions.png" alt="">
       <div class="spacing"></div>
       <p class="centered-text">We were asked by the Mozilla L10N team to create <br />
         2 new <strong>t-shirt designs</strong> focused around localization.</p>
       <p class="centered-text">We repeated the process this time to comply with<br />
         the new branding that came out with Quantum.</p>
       <div class="spacing"></div>
-      <img src="../images/projects/mozilla-l10n-logos.jpg" alt="">
+      <img class="lazy" data-src="../images/projects/mozilla-l10n-logos.jpg" alt="">
       <div class="spacing"></div>
-      <img src="../images/projects/mozilla-l10n-tshirts.jpg" alt="">
+      <img class="lazy" data-src="../images/projects/mozilla-l10n-tshirts.jpg" alt="">
       <div class="spacing"></div>
-      <img src="../images/projects/l10n-stickers.png" alt="">
+      <img class="lazy" data-src="../images/projects/l10n-stickers.png" alt="">
       <div class="spacing"></div>
     </div>
     <div class="large-4 columns">
@@ -206,7 +204,7 @@
       <div class="large-4 columns">
         <div class="work-wrapper">
           <a href="openlabs" class="work">
-            <img src="../images/projects/openlabs.jpg" alt="">
+            <img class="lazy" data-src="../images/projects/openlabs.jpg" alt="">
             <div class="info">
               <h3>Open Labs</h3>
               <p>Hackerspace</p>
@@ -217,7 +215,7 @@
       <div class="large-4 columns">
         <div class="work-wrapper">
           <a href="sfk16" class="work">
-          <img src="../images/projects/poster_SFK.jpg" alt="">
+          <img class="lazy" data-src="../images/projects/poster_SFK.jpg" alt="">
           <div class="info">
             <h3>Software Freedom Kosova 2016</h3>
             <p>Visual ID, Print</p>
@@ -228,7 +226,7 @@
       <div class="large-4 columns">
         <div class="work-wrapper">
           <a href="openchain" class="work">
-            <img src="../images/projects/penguins_thumb.jpg" alt="">
+            <img class="lazy" data-src="../images/projects/penguins_thumb.jpg" alt="">
             <div class="info">
               <h3>OpenChain Penguins</h3>
               <p>Illustration</p>
@@ -276,9 +274,17 @@
 <script src="/js/jquery.validate.js"></script>
 <!-- <script src="/bower_components/countto/jquery.countTo.js"></script> -->
 <script src="/bower_components/appear/jquery.appear.js"></script>
+<script src="/bower_components/modernizr/modernizr.js"></script>
 <script src="/js/app.js"></script>
 <script src="/js/svg.js"></script>
 <script src="/js/cookie.js"></script>
+<script src="/js/lazyload.min.js"></script>
+
+<script>
+var myLazyLoad = new LazyLoad({
+    elements_selector: ".lazy"
+});
+</script>
 
 <!-- Matomo -->
 <script type="text/javascript">
diff --git a/_site/projects/openchain.html b/_site/projects/openchain.html
index 9d5eee4..578060b 100644
--- a/_site/projects/openchain.html
+++ b/_site/projects/openchain.html
@@ -29,7 +29,7 @@
   <meta name="twitter:image:src" content="https://ura.design/" />
   
   <link rel="stylesheet" href="/css/app.css">
-  <link href="/fonts/overpass/overpass.css" rel="stylesheet">
+  <link rel="stylesheet" href="/fonts/overpass/overpass.css">
   <link rel="stylesheet" href="/css/superslides.css"/>
   <link rel="stylesheet" href="/css/slick-theme.css"/>
   <link rel="stylesheet" href="/css/slick.css"/>
@@ -39,9 +39,7 @@
   <link rel="stylesheet" href="/css/fontawesome-all.css"/>
   <link rel="stylesheet" href="/css/style.css"/>
   <link rel="stylesheet" href="/css/responsive.css"/>
-
-  <script src="/bower_components/modernizr/modernizr.js"></script>
-  
+    
   <link rel="canonical" href="http://localhost:4000/projects/openchain.html">
   <link rel="alternate" type="application/rss+xml" title="Ura Design" href="http://localhost:4000/feed.xml">
 </head>
@@ -160,9 +158,9 @@
 <div class="full text">
   <div class="row">
     <div class="large-8 columns">
-      <img src="../images/projects/penguins.jpg" alt="">
+      <img class="lazy" data-src="../images/projects/penguins.jpg" alt="">
       <div class="spacing"></div>
-      <img src="../images/projects/A4_openchain.jpg" alt="">
+      <img class="lazy" data-src="../images/projects/A4_openchain.jpg" alt="">
       <div class="spacing"></div>
     </div>
     <div class="large-4 columns">
@@ -199,7 +197,7 @@
       <div class="large-4 columns">
         <div class="work-wrapper">
           <a href="openlabs" class="work">
-            <img src="../images/projects/openlabs.jpg" alt="">
+            <img class="lazy" data-src="../images/projects/openlabs.jpg" alt="">
             <div class="info">
               <h3>Open Labs</h3>
               <p>Rebranding</p>
@@ -210,7 +208,7 @@
       <div class="large-4 columns">
         <div class="work-wrapper">
           <a href="sfk16" class="work">
-          <img src="../images/projects/poster_SFK.jpg" alt="">
+          <img class="lazy" data-src="../images/projects/poster_SFK.jpg" alt="">
           <div class="info">
             <h3>Software Freedom Kosova 2016</h3>
             <p>Visual ID, Print</p>
@@ -221,7 +219,7 @@
       <div class="large-4 columns">
         <div class="work-wrapper">
           <a href="mozilla-l10n" class="work">
-            <img src="../images/projects/mozilla-l10n.jpg" alt="">
+            <img class="lazy" data-src="../images/projects/mozilla-l10n.jpg" alt="">
             <div class="info">
               <h3>Mozilla L10N T-shirts</h3>
               <p>Print</p>
@@ -269,9 +267,17 @@
 <script src="/js/jquery.validate.js"></script>
 <!-- <script src="/bower_components/countto/jquery.countTo.js"></script> -->
 <script src="/bower_components/appear/jquery.appear.js"></script>
+<script src="/bower_components/modernizr/modernizr.js"></script>
 <script src="/js/app.js"></script>
 <script src="/js/svg.js"></script>
 <script src="/js/cookie.js"></script>
+<script src="/js/lazyload.min.js"></script>
+
+<script>
+var myLazyLoad = new LazyLoad({
+    elements_selector: ".lazy"
+});
+</script>
 
 <!-- Matomo -->
 <script type="text/javascript">
diff --git a/_site/projects/openlabs.html b/_site/projects/openlabs.html
index 47436cd..c7c3cc4 100644
--- a/_site/projects/openlabs.html
+++ b/_site/projects/openlabs.html
@@ -29,7 +29,7 @@
   <meta name="twitter:image:src" content="https://ura.design/" />
   
   <link rel="stylesheet" href="/css/app.css">
-  <link href="/fonts/overpass/overpass.css" rel="stylesheet">
+  <link rel="stylesheet" href="/fonts/overpass/overpass.css">
   <link rel="stylesheet" href="/css/superslides.css"/>
   <link rel="stylesheet" href="/css/slick-theme.css"/>
   <link rel="stylesheet" href="/css/slick.css"/>
@@ -39,9 +39,7 @@
   <link rel="stylesheet" href="/css/fontawesome-all.css"/>
   <link rel="stylesheet" href="/css/style.css"/>
   <link rel="stylesheet" href="/css/responsive.css"/>
-
-  <script src="/bower_components/modernizr/modernizr.js"></script>
-  
+    
   <link rel="canonical" href="http://localhost:4000/projects/openlabs.html">
   <link rel="alternate" type="application/rss+xml" title="Ura Design" href="http://localhost:4000/feed.xml">
 </head>
@@ -160,21 +158,21 @@
 <div class="full text">
   <div class="row">
     <div class="large-8 columns">
-      <img src="../images/projects/open-labs.jpg" alt="">
+      <img data-src="../images/projects/open-labs.jpg" alt="">
       <div class="spacing"></div>
-      <img src="../images/projects/openlabs.jpg" alt="">
+      <img data-src="../images/projects/openlabs.jpg" alt="">
       <div class="two spacing"></div>
-      <img src="../images/projects/typography.jpg" alt="">
+      <img data-src="../images/projects/typography.jpg" alt="">
       <div class="spacing"></div>
-      <img src="../images/projects/fonts.jpg" alt="">
+      <img data-src="../images/projects/fonts.jpg" alt="">
       <div class="spacing"></div>
-      <img src="../images/projects/posters.jpg" alt="">
+      <img data-src="../images/projects/posters.jpg" alt="">
       <div class="spacing"></div>
-      <img src="../images/projects/5-anniversary.jpg" alt="">
+      <img data-src="../images/projects/5-anniversary.jpg" alt="">
       <div class="spacing"></div>
-      <img src="../images/projects/copyfest-poster.jpg" alt="">
+      <img data-src="../images/projects/copyfest-poster.jpg" alt="">
       <div class="spacing"></div>
-      <img src="../images/projects/wiki_poster.jpg" alt="">
+      <img data-src="../images/projects/wiki_poster.jpg" alt="">
       <div class="spacing"></div>
     </div>
     <div class="large-4 columns">
@@ -190,7 +188,7 @@
         <p><span>Rebranding</span></p>
         <hr>
         <a class="button boxed black" href="https://github.com/OpenLabsHackerspace/branding" target="_blank"><i class="fab fa-github"></i> Sources</a><br />
-        <a class="button boxed identihub" href="https://demo.identihub.co/project/openlabs" target="_blank"><img src="../images/projects/identihub.svg" > Identihub</a><br />
+        <a class="button boxed identihub" href="https://demo.identihub.co/project/openlabs" target="_blank"><img data-src="../images/projects/identihub.svg" > Identihub</a><br />
         <a class="button boxed openlabs" href="https://openlabs.cc/en" target="_blank"><i class="fas fa-globe"></i> Website</a>
       </div>
     </div>
@@ -210,7 +208,7 @@
       <div class="large-4 columns">
         <div class="work-wrapper">
           <a href="mozilla-l10n" class="work">
-            <img src="../images/projects/mozilla-l10n.jpg" alt="">
+            <img data-src="../images/projects/mozilla-l10n.jpg" alt="">
             <div class="info">
               <h3>Mozilla L10N T-shirts</h3>
               <p>Print</p>
@@ -221,7 +219,7 @@
       <div class="large-4 columns">
         <div class="work-wrapper">
           <a href="sfk16" class="work">
-          <img src="../images/projects/poster_SFK.jpg" alt="">
+          <img data-src="../images/projects/poster_SFK.jpg" alt="">
           <div class="info">
             <h3>Software Freedom Kosova 2016</h3>
             <p>Visual ID, Print</p>
@@ -232,7 +230,7 @@
       <div class="large-4 columns">
         <div class="work-wrapper">
           <a href="openchain" class="work">
-            <img src="../images/projects/penguins_thumb.jpg" alt="">
+            <img data-src="../images/projects/penguins_thumb.jpg" alt="">
             <div class="info">
               <h3>OpenChain Penguins</h3>
               <p>Illustration</p>
@@ -280,9 +278,17 @@
 <script src="/js/jquery.validate.js"></script>
 <!-- <script src="/bower_components/countto/jquery.countTo.js"></script> -->
 <script src="/bower_components/appear/jquery.appear.js"></script>
+<script src="/bower_components/modernizr/modernizr.js"></script>
 <script src="/js/app.js"></script>
 <script src="/js/svg.js"></script>
 <script src="/js/cookie.js"></script>
+<script src="/js/lazyload.min.js"></script>
+
+<script>
+var myLazyLoad = new LazyLoad({
+    elements_selector: ".lazy"
+});
+</script>
 
 <!-- Matomo -->
 <script type="text/javascript">
diff --git a/_site/projects/reproducible-builds.html b/_site/projects/reproducible-builds.html
index da2cf90..e4c76df 100644
--- a/_site/projects/reproducible-builds.html
+++ b/_site/projects/reproducible-builds.html
@@ -29,7 +29,7 @@
   <meta name="twitter:image:src" content="https://ura.design/" />
   
   <link rel="stylesheet" href="/css/app.css">
-  <link href="/fonts/overpass/overpass.css" rel="stylesheet">
+  <link rel="stylesheet" href="/fonts/overpass/overpass.css">
   <link rel="stylesheet" href="/css/superslides.css"/>
   <link rel="stylesheet" href="/css/slick-theme.css"/>
   <link rel="stylesheet" href="/css/slick.css"/>
@@ -39,9 +39,7 @@
   <link rel="stylesheet" href="/css/fontawesome-all.css"/>
   <link rel="stylesheet" href="/css/style.css"/>
   <link rel="stylesheet" href="/css/responsive.css"/>
-
-  <script src="/bower_components/modernizr/modernizr.js"></script>
-  
+    
   <link rel="canonical" href="http://localhost:4000/projects/reproducible-builds.html">
   <link rel="alternate" type="application/rss+xml" title="Ura Design" href="http://localhost:4000/feed.xml">
 </head>
@@ -160,17 +158,17 @@
 <div class="full text">
   <div class="row">
     <div class="large-8 columns">
-      <img src="../images/projects/rb_header.png" alt="">
+      <img class="lazy" data-src="../images/projects/rb_header.png" alt="">
       <div class="spacing"></div>
-      <img src="../images/projects/RB_image_1.png" alt="">
+      <img class="lazy" data-src="../images/projects/RB_image_1.png" alt="">
       <div class="spacing"></div>
-      <img src="../images/projects/RB_image_4.jpg" alt="">
+      <img class="lazy" data-src="../images/projects/RB_image_4.jpg" alt="">
       <div class="spacing"></div>
-      <img src="../images/projects/RB_image_2.jpg" alt="">
+      <img class="lazy" data-src="../images/projects/RB_image_2.jpg" alt="">
       <div class="spacing"></div>
-      <img src="../images/projects/RB_image_3.jpg" alt="">
+      <img class="lazy" data-src="../images/projects/RB_image_3.jpg" alt="">
       <div class="spacing"></div>
-      <img src="../images/projects/RB_image_5.jpg" alt="">
+      <img class="lazy" data-src="../images/projects/RB_image_5.jpg" alt="">
       <div class="spacing"></div>
     </div>
     <div class="large-4 columns">
@@ -187,7 +185,7 @@
         <p><span>Styleguide</span></p>
          <hr>
          <a class="button boxed blog" href="https://ura.design/2018/06/13/reproducible-builds-styleguide" target="_blank"><i class="fas fa-pencil-alt"></i> Blogpost</a><br />
-         <a class="button boxed identihub" href="https://demo.identihub.co/project/reproducible-builds" target="_blank"><img src="../images/projects/identihub.svg" > Identihub</a><br />
+         <a class="button boxed identihub" href="https://demo.identihub.co/project/reproducible-builds" target="_blank"><img class="lazy" data-src="../images/projects/identihub.svg" > Identihub</a><br />
         <a class="button boxed reproduciblebuilds" href="https://reproducible-builds.org" target="_blank"><i class="fas fa-globe"></i> Website</a>
       </div>
     </div>
@@ -207,7 +205,7 @@
       <div class="large-4 columns">
         <div class="work-wrapper">
           <a href="openlabs" class="work">
-            <img src="../images/projects/openlabs.jpg" alt="">
+            <img class="lazy" data-src="../images/projects/openlabs.jpg" alt="">
             <div class="info">
               <h3>Open Labs</h3>
               <p>Rebranding</p>
@@ -218,7 +216,7 @@
       <div class="large-4 columns">
         <div class="work-wrapper">
           <a href="tor-style-guide" class="work">
-          <img src="../images/projects/tor_thumb.png" alt="">
+          <img class="lazy" data-src="../images/projects/tor_thumb.png" alt="">
           <div class="info">
             <h3>Tor Style Guide</h3>
             <p>Style Guide</p>
@@ -229,7 +227,7 @@
       <div class="large-4 columns">
         <div class="work-wrapper">
           <a href="enigmail" class="work">
-            <img src="../images/projects/enigmail_overview.png" alt="">
+            <img class="lazy" data-src="../images/projects/enigmail_overview.png" alt="">
             <div class="info">
               <h3>Enigmail Rebranding</h3>
               <p>Rebranding</p>
@@ -277,9 +275,17 @@
 <script src="/js/jquery.validate.js"></script>
 <!-- <script src="/bower_components/countto/jquery.countTo.js"></script> -->
 <script src="/bower_components/appear/jquery.appear.js"></script>
+<script src="/bower_components/modernizr/modernizr.js"></script>
 <script src="/js/app.js"></script>
 <script src="/js/svg.js"></script>
 <script src="/js/cookie.js"></script>
+<script src="/js/lazyload.min.js"></script>
+
+<script>
+var myLazyLoad = new LazyLoad({
+    elements_selector: ".lazy"
+});
+</script>
 
 <!-- Matomo -->
 <script type="text/javascript">
diff --git a/_site/projects/sfk16.html b/_site/projects/sfk16.html
index 9bfa41c..4acd97f 100644
--- a/_site/projects/sfk16.html
+++ b/_site/projects/sfk16.html
@@ -29,7 +29,7 @@
   <meta name="twitter:image:src" content="https://ura.design/" />
   
   <link rel="stylesheet" href="/css/app.css">
-  <link href="/fonts/overpass/overpass.css" rel="stylesheet">
+  <link rel="stylesheet" href="/fonts/overpass/overpass.css">
   <link rel="stylesheet" href="/css/superslides.css"/>
   <link rel="stylesheet" href="/css/slick-theme.css"/>
   <link rel="stylesheet" href="/css/slick.css"/>
@@ -39,9 +39,7 @@
   <link rel="stylesheet" href="/css/fontawesome-all.css"/>
   <link rel="stylesheet" href="/css/style.css"/>
   <link rel="stylesheet" href="/css/responsive.css"/>
-
-  <script src="/bower_components/modernizr/modernizr.js"></script>
-  
+    
   <link rel="canonical" href="http://localhost:4000/projects/sfk16.html">
   <link rel="alternate" type="application/rss+xml" title="Ura Design" href="http://localhost:4000/feed.xml">
 </head>
@@ -160,11 +158,11 @@
 <div class="full text">
   <div class="row">
     <div class="large-8 columns">
-      <img src="../images/projects/poster SFK.jpg" alt="">
+      <img class="lazy" data-src="../images/projects/poster SFK.jpg" alt="">
       <div class="spacing"></div>
-      <img src="../images/projects/SFK-bus-stop.jpg" alt="">
+      <img class="lazy" data-src="../images/projects/SFK-bus-stop.jpg" alt="">
       <div class="spacing"></div>
-      <img src="../images/projects/roll-up-sfk.jpg" alt="">
+      <img class="lazy" data-src="../images/projects/roll-up-sfk.jpg" alt="">
       <div class="spacing"></div>
     </div>
     <div class="large-4 columns">
@@ -199,7 +197,7 @@
       <div class="large-4 columns">
         <div class="work-wrapper">
           <a href="openlabs" class="work">
-            <img src="../images/projects/openlabs.jpg" alt="">
+            <img class="lazy" data-src="../images/projects/openlabs.jpg" alt="">
             <div class="info">
               <h3>Open Labs</h3>
               <p>Rebranding</p>
@@ -210,7 +208,7 @@
       <div class="large-4 columns">
         <div class="work-wrapper">
           <a href="mozilla-l10n" class="work">
-          <img src="../images/projects/mozilla-l10n.jpg" alt="">
+          <img class="lazy" data-src="../images/projects/mozilla-l10n.jpg" alt="">
           <div class="info">
             <h3>Mozilla L10N T-shirts</h3>
             <p>Print</p>
@@ -221,7 +219,7 @@
       <div class="large-4 columns">
         <div class="work-wrapper">
           <a href="openchain" class="work">
-            <img src="../images/projects/penguins_thumb.jpg" alt="">
+            <img class="lazy" data-src="../images/projects/penguins_thumb.jpg" alt="">
             <div class="info">
               <h3>OpenChain Penguins</h3>
               <p>Illustration</p>
@@ -269,9 +267,17 @@
 <script src="/js/jquery.validate.js"></script>
 <!-- <script src="/bower_components/countto/jquery.countTo.js"></script> -->
 <script src="/bower_components/appear/jquery.appear.js"></script>
+<script src="/bower_components/modernizr/modernizr.js"></script>
 <script src="/js/app.js"></script>
 <script src="/js/svg.js"></script>
 <script src="/js/cookie.js"></script>
+<script src="/js/lazyload.min.js"></script>
+
+<script>
+var myLazyLoad = new LazyLoad({
+    elements_selector: ".lazy"
+});
+</script>
 
 <!-- Matomo -->
 <script type="text/javascript">
diff --git a/_site/projects/thunderbird.html b/_site/projects/thunderbird.html
index 84a5803..8079dd4 100644
--- a/_site/projects/thunderbird.html
+++ b/_site/projects/thunderbird.html
@@ -29,7 +29,7 @@
   <meta name="twitter:image:src" content="https://ura.design/" />
   
   <link rel="stylesheet" href="/css/app.css">
-  <link href="/fonts/overpass/overpass.css" rel="stylesheet">
+  <link rel="stylesheet" href="/fonts/overpass/overpass.css">
   <link rel="stylesheet" href="/css/superslides.css"/>
   <link rel="stylesheet" href="/css/slick-theme.css"/>
   <link rel="stylesheet" href="/css/slick.css"/>
@@ -39,9 +39,7 @@
   <link rel="stylesheet" href="/css/fontawesome-all.css"/>
   <link rel="stylesheet" href="/css/style.css"/>
   <link rel="stylesheet" href="/css/responsive.css"/>
-
-  <script src="/bower_components/modernizr/modernizr.js"></script>
-  
+    
   <link rel="canonical" href="http://localhost:4000/projects/thunderbird.html">
   <link rel="alternate" type="application/rss+xml" title="Ura Design" href="http://localhost:4000/feed.xml">
 </head>
@@ -160,15 +158,15 @@
 <div class="full text">
   <div class="row">
     <div class="large-8 columns">
-      <img src="../images/projects/thunderbird_logo.png" alt="">
+      <img class="lazy" data-src="../images/projects/thunderbird_logo.png" alt="">
       <div class="spacing"></div>
-      <img src="../images/projects/thunderbird_2.png" alt="">
+      <img class="lazy" data-src="../images/projects/thunderbird_2.png" alt="">
       <div class="two spacing"></div>
-      <img src="../images/projects/thunderbird_3.png" alt="">
+      <img class="lazy" data-src="../images/projects/thunderbird_3.png" alt="">
       <div class="spacing"></div>
-      <img src="../images/projects/thunderbird_4.png" alt="">
+      <img class="lazy" data-src="../images/projects/thunderbird_4.png" alt="">
       <div class="spacing"></div>
-      <img src="../images/projects/thunderbird_1.png" alt="">
+      <img class="lazy" data-src="../images/projects/thunderbird_1.png" alt="">
       <div class="spacing"></div>
     </div>
     <div class="large-4 columns">
@@ -186,7 +184,7 @@
          <hr>
          <a class="button boxed blog" href="https://ura.design/2018/07/05/thunderbird-style-guide" target="_blank"><i class="fas fa-pencil-alt"></i> Blogpost</a><br />
          <a class="button boxed black" href="https://github.com/uracreative/works/tree/master/Thunderbird" target="_blank"><i class="fab fa-github"></i> Sources</a><br />
-         <a class="button boxed identihub" href="https://demo.identihub.co/project/thunderbird" target="_blank"><img src="../images/projects/identihub.svg" > Identihub</a><br />
+         <a class="button boxed identihub" href="https://demo.identihub.co/project/thunderbird" target="_blank"><img class="lazy" data-src="../images/projects/identihub.svg" > Identihub</a><br />
         <a class="button boxed thunderbird" href="https://thunderbird.net" target="_blank"><i class="fas fa-globe"></i> Website</a><br />
         <a class="button boxed thunderbird" href="https://github.com/uracreative/works/raw/master/Thunderbird/Thunderbird%20Usability%20Study.pdf" target="_blank"><i class="fas fa-globe"></i> Usability Study</a>
       </div>
@@ -207,7 +205,7 @@
       <div class="large-4 columns">
         <div class="work-wrapper">
           <a href="reproducible-builds" class="work">
-            <img src="../images/projects/rb_thumbnail.png" alt="">
+            <img class="lazy" data-src="../images/projects/rb_thumbnail.png" alt="">
             <div class="info">
               <h3>Reproducible Builds</h3>
               <p>Style Guide</p>
@@ -218,7 +216,7 @@
       <div class="large-4 columns">
         <div class="work-wrapper">
           <a href="tor-style-guide" class="work">
-          <img src="../images/projects/tor_thumb.png" alt="">
+          <img class="lazy" data-src="../images/projects/tor_thumb.png" alt="">
           <div class="info">
             <h3>Tor Style Guide</h3>
             <p>Style Guide</p>
@@ -229,7 +227,7 @@
       <div class="large-4 columns">
         <div class="work-wrapper">
           <a href="enigmail" class="work">
-            <img src="../images/projects/enigmail_overview.png" alt="">
+            <img class="lazy" data-src="../images/projects/enigmail_overview.png" alt="">
             <div class="info">
               <h3>Enigmail Rebranding</h3>
               <p>Rebranding</p>
@@ -277,9 +275,17 @@
 <script src="/js/jquery.validate.js"></script>
 <!-- <script src="/bower_components/countto/jquery.countTo.js"></script> -->
 <script src="/bower_components/appear/jquery.appear.js"></script>
+<script src="/bower_components/modernizr/modernizr.js"></script>
 <script src="/js/app.js"></script>
 <script src="/js/svg.js"></script>
 <script src="/js/cookie.js"></script>
+<script src="/js/lazyload.min.js"></script>
+
+<script>
+var myLazyLoad = new LazyLoad({
+    elements_selector: ".lazy"
+});
+</script>
 
 <!-- Matomo -->
 <script type="text/javascript">
diff --git a/_site/projects/tor-style-guide.html b/_site/projects/tor-style-guide.html
index f91c8c1..a9a6472 100644
--- a/_site/projects/tor-style-guide.html
+++ b/_site/projects/tor-style-guide.html
@@ -29,7 +29,7 @@
   <meta name="twitter:image:src" content="https://ura.design/" />
   
   <link rel="stylesheet" href="/css/app.css">
-  <link href="/fonts/overpass/overpass.css" rel="stylesheet">
+  <link rel="stylesheet" href="/fonts/overpass/overpass.css">
   <link rel="stylesheet" href="/css/superslides.css"/>
   <link rel="stylesheet" href="/css/slick-theme.css"/>
   <link rel="stylesheet" href="/css/slick.css"/>
@@ -39,9 +39,7 @@
   <link rel="stylesheet" href="/css/fontawesome-all.css"/>
   <link rel="stylesheet" href="/css/style.css"/>
   <link rel="stylesheet" href="/css/responsive.css"/>
-
-  <script src="/bower_components/modernizr/modernizr.js"></script>
-  
+    
   <link rel="canonical" href="http://localhost:4000/projects/tor-style-guide.html">
   <link rel="alternate" type="application/rss+xml" title="Ura Design" href="http://localhost:4000/feed.xml">
 </head>
@@ -160,17 +158,17 @@
 <div class="full text">
   <div class="row">
     <div class="large-8 columns">
-      <img src="../images/projects/tor-0.png" alt="style guide 1">
+      <img class="lazy" data-src="../images/projects/tor-0.png" alt="style guide 1">
       <div class="three spacing"></div>
-      <img src="../images/projects/tor-4.png" alt="style guide 3">
+      <img class="lazy" data-src="../images/projects/tor-4.png" alt="style guide 3">
       <div class="three spacing"></div>
-      <img src="../images/projects/tor-5.png" alt="style guide 3">
+      <img class="lazy" data-src="../images/projects/tor-5.png" alt="style guide 3">
       <div class="three spacing"></div>
-      <img src="../images/projects/tor-1.png" alt="style guide 1">
+      <img class="lazy" data-src="../images/projects/tor-1.png" alt="style guide 1">
       <div class="three spacing"></div>
-      <img src="../images/projects/tor-2.png" alt="style guide 2">
+      <img class="lazy" data-src="../images/projects/tor-2.png" alt="style guide 2">
       <div class="three spacing"></div>
-      <img src="../images/projects/tor-3.png" alt="style guide 3">
+      <img class="lazy" data-src="../images/projects/tor-3.png" alt="style guide 3">
       <div class="three spacing"></div>
     </div>
     <div class="large-4 columns">
@@ -186,7 +184,7 @@
         <p><span>Style Guide</span></p>
         <hr>
         <a class="button boxed black" href="https://github.com/uracreative/" target="_blank"><i class="fab fa-github"></i> Sources</a><br />
-        <a class="button boxed identihub" href="https://demo.identihub.co/project/tor-project" target="_blank"><img src="../images/projects/identihub.svg" > Identihub</a><br />
+        <a class="button boxed identihub" href="https://demo.identihub.co/project/tor-project" target="_blank"><img class="lazy" data-src="../images/projects/identihub.svg" > Identihub</a><br />
         <a class="button boxed tor" href="https://styleguide.torproject.org" target="_blank"><i class="fas fa-globe"></i> Website</a>
       </div>
     </div>
@@ -206,7 +204,7 @@
       <div class="large-4 columns">
         <div class="work-wrapper">
           <a href="openlabs" class="work">
-            <img src="../images/projects/openlabs.jpg" alt="">
+            <img class="lazy" data-src="../images/projects/openlabs.jpg" alt="">
             <div class="info">
               <h3>Open Labs</h3>
               <p>Rebranding</p>
@@ -217,7 +215,7 @@
       <div class="large-4 columns">
         <div class="work-wrapper">
           <a href="openchain" class="work">
-          <img src="../images/projects/penguins_thumb.jpg" alt="">
+          <img class="lazy" data-src="../images/projects/penguins_thumb.jpg" alt="">
           <div class="info">
             <h3>OpenChain Penguins</h3>
             <p>Illustration</p>
@@ -228,7 +226,7 @@
       <div class="large-4 columns">
         <div class="work-wrapper">
           <a href="mozilla-l10n" class="work">
-            <img src="../images/projects/mozilla-l10n.jpg" alt="">
+            <img class="lazy" data-src="../images/projects/mozilla-l10n.jpg" alt="">
             <div class="info">
               <h3>Mozilla L10N T-shirts</h3>
               <p>Prints</p>
@@ -276,9 +274,17 @@
 <script src="/js/jquery.validate.js"></script>
 <!-- <script src="/bower_components/countto/jquery.countTo.js"></script> -->
 <script src="/bower_components/appear/jquery.appear.js"></script>
+<script src="/bower_components/modernizr/modernizr.js"></script>
 <script src="/js/app.js"></script>
 <script src="/js/svg.js"></script>
 <script src="/js/cookie.js"></script>
+<script src="/js/lazyload.min.js"></script>
+
+<script>
+var myLazyLoad = new LazyLoad({
+    elements_selector: ".lazy"
+});
+</script>
 
 <!-- Matomo -->
 <script type="text/javascript">
diff --git a/_site/request.html b/_site/request.html
index e1a15ec..851ad13 100644
--- a/_site/request.html
+++ b/_site/request.html
@@ -30,7 +30,7 @@
   <meta name="twitter:image:src" content="https://ura.design/" />
   
   <link rel="stylesheet" href="/css/app.css">
-  <link href="/fonts/overpass/overpass.css" rel="stylesheet">
+  <link rel="stylesheet" href="/fonts/overpass/overpass.css">
   <link rel="stylesheet" href="/css/superslides.css"/>
   <link rel="stylesheet" href="/css/slick-theme.css"/>
   <link rel="stylesheet" href="/css/slick.css"/>
@@ -40,9 +40,7 @@
   <link rel="stylesheet" href="/css/fontawesome-all.css"/>
   <link rel="stylesheet" href="/css/style.css"/>
   <link rel="stylesheet" href="/css/responsive.css"/>
-
-  <script src="/bower_components/modernizr/modernizr.js"></script>
-  
+    
   <link rel="canonical" href="http://localhost:4000/request.html">
   <link rel="alternate" type="application/rss+xml" title="Ura Design" href="http://localhost:4000/feed.xml">
 </head>
@@ -228,9 +226,17 @@
 <script src="/js/jquery.validate.js"></script>
 <!-- <script src="/bower_components/countto/jquery.countTo.js"></script> -->
 <script src="/bower_components/appear/jquery.appear.js"></script>
+<script src="/bower_components/modernizr/modernizr.js"></script>
 <script src="/js/app.js"></script>
 <script src="/js/svg.js"></script>
 <script src="/js/cookie.js"></script>
+<script src="/js/lazyload.min.js"></script>
+
+<script>
+var myLazyLoad = new LazyLoad({
+    elements_selector: ".lazy"
+});
+</script>
 
 <!-- Matomo -->
 <script type="text/javascript">
diff --git a/_site/services.html b/_site/services.html
index a47b84d..7862129 100644
--- a/_site/services.html
+++ b/_site/services.html
@@ -29,7 +29,7 @@
   <meta name="twitter:image:src" content="https://ura.design/" />
   
   <link rel="stylesheet" href="/css/app.css">
-  <link href="/fonts/overpass/overpass.css" rel="stylesheet">
+  <link rel="stylesheet" href="/fonts/overpass/overpass.css">
   <link rel="stylesheet" href="/css/superslides.css"/>
   <link rel="stylesheet" href="/css/slick-theme.css"/>
   <link rel="stylesheet" href="/css/slick.css"/>
@@ -39,9 +39,7 @@
   <link rel="stylesheet" href="/css/fontawesome-all.css"/>
   <link rel="stylesheet" href="/css/style.css"/>
   <link rel="stylesheet" href="/css/responsive.css"/>
-
-  <script src="/bower_components/modernizr/modernizr.js"></script>
-  
+    
   <link rel="canonical" href="http://localhost:4000/services.html">
   <link rel="alternate" type="application/rss+xml" title="Ura Design" href="http://localhost:4000/feed.xml">
 </head>
@@ -299,9 +297,17 @@
 <script src="/js/jquery.validate.js"></script>
 <!-- <script src="/bower_components/countto/jquery.countTo.js"></script> -->
 <script src="/bower_components/appear/jquery.appear.js"></script>
+<script src="/bower_components/modernizr/modernizr.js"></script>
 <script src="/js/app.js"></script>
 <script src="/js/svg.js"></script>
 <script src="/js/cookie.js"></script>
+<script src="/js/lazyload.min.js"></script>
+
+<script>
+var myLazyLoad = new LazyLoad({
+    elements_selector: ".lazy"
+});
+</script>
 
 <!-- Matomo -->
 <script type="text/javascript">
diff --git a/_site/support-us.html b/_site/support-us.html
index 1caa6ed..3f3cc07 100644
--- a/_site/support-us.html
+++ b/_site/support-us.html
@@ -30,7 +30,7 @@
   <meta name="twitter:image:src" content="https://ura.design/" />
   
   <link rel="stylesheet" href="/css/app.css">
-  <link href="/fonts/overpass/overpass.css" rel="stylesheet">
+  <link rel="stylesheet" href="/fonts/overpass/overpass.css">
   <link rel="stylesheet" href="/css/superslides.css"/>
   <link rel="stylesheet" href="/css/slick-theme.css"/>
   <link rel="stylesheet" href="/css/slick.css"/>
@@ -40,9 +40,7 @@
   <link rel="stylesheet" href="/css/fontawesome-all.css"/>
   <link rel="stylesheet" href="/css/style.css"/>
   <link rel="stylesheet" href="/css/responsive.css"/>
-
-  <script src="/bower_components/modernizr/modernizr.js"></script>
-  
+    
   <link rel="canonical" href="http://localhost:4000/support-us.html">
   <link rel="alternate" type="application/rss+xml" title="Ura Design" href="http://localhost:4000/feed.xml">
 </head>
@@ -165,7 +163,7 @@
    <div class="large-11 large-centered columns">
      <p>Ura is being supported by communities and open source initiatives. We also develop <a href="https://identihub.co">Identihub</a>, free and open source sofware to host your brand and visual assets. You can support its development by pledging on our Patreon.</p>
        <div class="large-11 large-centered centered-text columns">
-<a href="https://www.patreon.com/bePatron?u=3383740" data-patreon-widget-type="become-patron-button">Become a Patron!</a><script async src="https://c6.patreon.com/becomePatronButton.bundle.js"></script>
+<a href="https://www.patreon.com/bePatron?u=3383740" data-patreon-widget-type="become-patron-button">Become a Patron!</a><script async data-src="https://c6.patreon.com/becomePatronButton.bundle.js"></script>
        </div>
   <hr>
      <div class="one spacing"></div>
@@ -176,7 +174,7 @@
            <div class="large-12 centered-text columns">
       <div class="work-wrapper">
             <a href="https://opentech.fund" target="blank" class="work space">
-              <img src="/images/supporters/otf_logo.png" alt="OpenTechFund Logo">
+              <img class="lazy" data-src="/images/supporters/otf_logo.png" alt="OpenTechFund Logo">
               <div class="info" style="text-align: center; margin-left: 0px;">
                 <h5 style="color: #999;">Usability Lab</h5>
               </div>
@@ -186,7 +184,7 @@
  <div class="large-12 centered-text columns">
       <div class="work-wrapper">
             <a href="https://www.digitalocean.com/" target="blank" class="work space">
-              <img src="/images/supporters/digital_ocean.svg" alt="Digital Ocean Logo">
+              <img class="lazy" data-src="/images/supporters/digital_ocean.svg" alt="Digital Ocean Logo">
               <div class="info" style="text-align: center; margin-left: 0px;">
                 <h5 style="color: #999;">Infrastructure</h5>
               </div>
@@ -196,7 +194,7 @@
     <div class="large-12 centered-text columns">
       <div class="work-wrapper">
          <a href="https://yubico.com" target="blank" class="work space">
-              <img src="/images/supporters/yubico.svg" alt="Yubico Logo">
+              <img class="lazy" data-src="/images/supporters/yubico.svg" alt="Yubico Logo">
               <div class="info" style="text-align: center; margin-left: 0px;">
                 <h5 style="color: #999;">Security Devices</h5>
               </div>
@@ -244,9 +242,17 @@
 <script src="/js/jquery.validate.js"></script>
 <!-- <script src="/bower_components/countto/jquery.countTo.js"></script> -->
 <script src="/bower_components/appear/jquery.appear.js"></script>
+<script src="/bower_components/modernizr/modernizr.js"></script>
 <script src="/js/app.js"></script>
 <script src="/js/svg.js"></script>
 <script src="/js/cookie.js"></script>
+<script src="/js/lazyload.min.js"></script>
+
+<script>
+var myLazyLoad = new LazyLoad({
+    elements_selector: ".lazy"
+});
+</script>
 
 <!-- Matomo -->
 <script type="text/javascript">
diff --git a/_site/tags/index.html b/_site/tags/index.html
index 825889b..f6713bf 100644
--- a/_site/tags/index.html
+++ b/_site/tags/index.html
@@ -29,7 +29,7 @@
   <meta name="twitter:image:src" content="https://ura.design/" />
   
   <link rel="stylesheet" href="/css/app.css">
-  <link href="/fonts/overpass/overpass.css" rel="stylesheet">
+  <link rel="stylesheet" href="/fonts/overpass/overpass.css">
   <link rel="stylesheet" href="/css/superslides.css"/>
   <link rel="stylesheet" href="/css/slick-theme.css"/>
   <link rel="stylesheet" href="/css/slick.css"/>
@@ -39,9 +39,7 @@
   <link rel="stylesheet" href="/css/fontawesome-all.css"/>
   <link rel="stylesheet" href="/css/style.css"/>
   <link rel="stylesheet" href="/css/responsive.css"/>
-
-  <script src="/bower_components/modernizr/modernizr.js"></script>
-  
+    
   <link rel="canonical" href="http://localhost:4000/tags/">
   <link rel="alternate" type="application/rss+xml" title="Ura Design" href="http://localhost:4000/feed.xml">
 </head>
@@ -852,9 +850,17 @@
 <script src="/js/jquery.validate.js"></script>
 <!-- <script src="/bower_components/countto/jquery.countTo.js"></script> -->
 <script src="/bower_components/appear/jquery.appear.js"></script>
+<script src="/bower_components/modernizr/modernizr.js"></script>
 <script src="/js/app.js"></script>
 <script src="/js/svg.js"></script>
 <script src="/js/cookie.js"></script>
+<script src="/js/lazyload.min.js"></script>
+
+<script>
+var myLazyLoad = new LazyLoad({
+    elements_selector: ".lazy"
+});
+</script>
 
 <!-- Matomo -->
 <script type="text/javascript">
diff --git a/about.html b/about.html
index 164f96b..6f77d90 100644
--- a/about.html
+++ b/about.html
@@ -97,8 +97,8 @@ members:
     {% for member in page.members %}
       <div class="medium-4 columns">
         <div class="member">
-          <img src="{{site.url}}/{{member.avatar}}" alt="">
-          <img class="colored" src="{{site.url}}/{{member.avatar_hover}}" alt="">
+          <img class="lazy" data-src="{{site.url}}/{{member.avatar}}" alt="">
+          <img class="colored" data-src="{{site.url}}/{{member.avatar_hover}}" alt="">
           <div class="member-info">
             <h4>{{member.name}}</h4>
             <p class="position">{{member.position}}</p>
diff --git a/blog/index.html b/blog/index.html
index 2dc185b..cf43691 100644
--- a/blog/index.html
+++ b/blog/index.html
@@ -39,7 +39,7 @@ section_id: blog
   </div>
     <div class="large-3 columns blog middle-blog" style="margin-bottom: 30px;">
            {% if post.images %}
-            <a href="{{ post.url | replace:'.html','' }}"><img style="display: block; margin: auto;" src="{{site.url}}/{{post.images[0]}}" alt="post"></a>
+            <a href="{{ post.url | replace:'.html','' }}"><img class="lazy" style="display: block; margin: auto;" data-src="{{site.url}}/{{post.images[0]}}" alt="post"></a>
            {% endif %}
     </div>
       </div>
diff --git a/index.html b/index.html
index df80608..45f7f6f 100644
--- a/index.html
+++ b/index.html
@@ -126,7 +126,7 @@ clients:
   <div class="section-title">
     <div class="row">
       <div class="medium-10 medium-centered columns">
-        <img src="images/main/icon.svg" alt="" class="wow flipInY" data-wow-duration="2s" data-wow-delay="0.1s">
+        <img class="lazy" data-src="images/main/icon.svg" alt="" class="wow flipInY" data-wow-duration="2s" data-wow-delay="0.1s">
         <div class="spacing"></div>
         <h2>Design, but Open</h2>
       </div>
@@ -158,7 +158,7 @@ clients:
     <div class='large-12 columns'>
       <div class='clients'>
         {% for client in page.clients %}
-          <div><a href="{{client.url}}" target="blank"><img alt="" src="{{site.baseurl}}/{{client.image}}" width="200px" height="120px"></a></div>
+          <div><a href="{{client.url}}" target="blank"><img class="lazy" alt="" data-src="{{site.baseurl}}/{{client.image}}" width="200px" height="120px"></a></div>
         {% endfor %}
       </div>
     </div>
@@ -181,7 +181,7 @@ clients:
         <div class="quote wow slideInLeft" data-wow-delay="{{ 0.25 | times:forloop.index0 }}s">
           <div class="row">
             <div class="small-3 columns">
-              <img src="{{testimonial.avatar}}" width="102px" height="102px" alt="author">
+              <img class="lazy" data-src="{{testimonial.avatar}}" width="102px" height="102px" alt="author">
             </div>
             <div class="small-9 columns">
               <p>{{testimonial.content}}</p>
@@ -196,7 +196,7 @@ clients:
         <div class="quote reverse wow slideInRight" class="wow" data-wow-delay="{{ 0.25 | times:forloop.index0 }}s">
           <div class="row">
             <div class="small-3 columns">
-              <img src="{{testimonial.avatar}}" width="102px" height="102px" alt="author">
+              <img class="lazy" data-src="{{testimonial.avatar}}" width="102px" height="102px" alt="author">
             </div>
             <div class="small-9 columns">
               <p>{{testimonial.content}}</p>
@@ -226,7 +226,7 @@ clients:
     {% for work in page.works_left %}
       <div class="work-wrapper">
         <a href="{{work.link_to}}" class="work">
-          <img src="{{site.url}}/{{work.image}}" alt="">
+          <img class="lazy" data-src="{{site.url}}/{{work.image}}" alt="">
           <div class="info">
             <h3>{{work.title}}</h3>
             <p>{{work.categories}}</p>
@@ -239,7 +239,7 @@ clients:
     {% for work in page.works_middle %}
       <div class="work-wrapper">
         <a href="{{work.link_to}}" class="work">
-          <img src="{{site.url}}/{{work.image}}" alt="">
+          <img class="lazy" data-src="{{site.url}}/{{work.image}}" alt="">
           <div class="info">
             <h3>{{work.title}}</h3>
             <p>{{work.categories}}</p>
@@ -252,7 +252,7 @@ clients:
     {% for work in page.works_right %}
       <div class="work-wrapper">
         <a href="{{work.link_to}}" class="work">
-          <img src="{{site.url}}/{{work.image}}" alt="">
+          <img class="lazy" data-src="{{site.url}}/{{work.image}}" alt="">
           <div class="info">
             <h3>{{work.title}}</h3>
             <p>{{work.categories}}</p>
diff --git a/js/lazyload.min.js b/js/lazyload.min.js
new file mode 100644
index 0000000..4feb340
--- /dev/null
+++ b/js/lazyload.min.js
@@ -0,0 +1 @@
+var _extends=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var n=arguments[e];for(var o in n)Object.prototype.hasOwnProperty.call(n,o)&&(t[o]=n[o])}return t},_typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t};!function(t,e){"object"===("undefined"==typeof exports?"undefined":_typeof(exports))&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):t.LazyLoad=e()}(this,function(){"use strict";function t(t,e,n){return!(u(t,e,n)||_(t,e,n)||f(t,e,n)||h(t,e,n))}function e(t,e,n){var o=e._settings;!n&&r(t)||(C(o.callback_enter,t),R.indexOf(t.tagName)>-1&&(x(t,e),y(t,o.class_loading)),H(t,e),s(t),C(o.callback_set,t))}var n=function(){return{elements_selector:"img",container:window,threshold:300,throttle:150,data_src:"src",data_srcset:"srcset",data_sizes:"sizes",data_bg:"bg",class_loading:"loading",class_loaded:"loaded",class_error:"error",class_initial:"initial",skip_invisible:!0,callback_load:null,callback_error:null,callback_set:null,callback_enter:null,callback_finish:null,to_webp:!1}},o=function(t,e){return t.getAttribute("data-"+e)},i=function(t,e,n){var o="data-"+e;null!==n?t.setAttribute(o,n):t.removeAttribute(o)},s=function(t){return i(t,"was-processed","true")},r=function(t){return"true"===o(t,"was-processed")},l=function(t){return t.filter(function(t){return!r(t)})},a=function(t,e){return t.filter(function(t){return t!==e})},c=function(t){return t.getBoundingClientRect().top+window.pageYOffset-t.ownerDocument.documentElement.clientTop},u=function(t,e,n){return(e===window?window.innerHeight+window.pageYOffset:c(e)+e.offsetHeight)<=c(t)-n},d=function(t){return t.getBoundingClientRect().left+window.pageXOffset-t.ownerDocument.documentElement.clientLeft},f=function(t,e,n){var o=window.innerWidth;return(e===window?o+window.pageXOffset:d(e)+o)<=d(t)-n},_=function(t,e,n){return(e===window?window.pageYOffset:c(e))>=c(t)+n+t.offsetHeight},h=function(t,e,n){return(e===window?window.pageXOffset:d(e))>=d(t)+n+t.offsetWidth},p=function(t,e){var n,o=new t(e);try{n=new CustomEvent("LazyLoad::Initialized",{detail:{instance:o}})}catch(t){(n=document.createEvent("CustomEvent")).initCustomEvent("LazyLoad::Initialized",!1,!1,{instance:o})}window.dispatchEvent(n)},g=function(t,e){return e?t.replace(/\.(jpe?g|png)/gi,".webp"):t},m="undefined"!=typeof window,w=m&&!("onscroll"in window)||/(gle|ing|ro)bot|crawl|spider/i.test(navigator.userAgent),v=m&&"classList"in document.createElement("p"),b=m&&function(){var t=document.createElement("canvas");return!(!t.getContext||!t.getContext("2d"))&&0===t.toDataURL("image/webp").indexOf("data:image/webp")}(),y=function(t,e){v?t.classList.add(e):t.className+=(t.className?" ":"")+e},E=function(t,e){v?t.classList.remove(e):t.className=t.className.replace(new RegExp("(^|\\s+)"+e+"(\\s+|$)")," ").replace(/^\s+/,"").replace(/\s+$/,"")},L=function(t,e,n,i){for(var s,r=0;s=t.children[r];r+=1)if("SOURCE"===s.tagName){var l=o(s,n);T(s,e,l,i)}},T=function(t,e,n,o){n&&t.setAttribute(e,g(n,o))},S=function(t,e){var n=b&&e.to_webp,i=o(t,e.data_src),s=o(t,e.data_bg);if(i){var r=g(i,n);t.style.backgroundImage='url("'+r+'")'}if(s){var l=g(s,n);t.style.backgroundImage=l}},O={IMG:function(t,e){var n=b&&e.to_webp,i=e.data_srcset,s=t.parentNode;s&&"PICTURE"===s.tagName&&L(s,"srcset",i,n);var r=o(t,e.data_sizes);T(t,"sizes",r);var l=o(t,i);T(t,"srcset",l,n);var a=o(t,e.data_src);T(t,"src",a,n)},IFRAME:function(t,e){var n=o(t,e.data_src);T(t,"src",n)},VIDEO:function(t,e){var n=e.data_src,i=o(t,n);L(t,"src",n),T(t,"src",i),t.load()}},H=function(t,e){var n=e._settings,o=t.tagName,i=O[o];if(i)return i(t,n),e._updateLoadingCount(1),void(e._elements=a(e._elements,t));S(t,n)},C=function(t,e){t&&t(e)},k=function(t,e,n){t.addEventListener(e,n)},z=function(t,e,n){t.removeEventListener(e,n)},N=function(t,e,n){k(t,"load",e),k(t,"loadeddata",e),k(t,"error",n)},A=function(t,e,n){z(t,"load",e),z(t,"loadeddata",e),z(t,"error",n)},I=function(t,e,n){var o=n._settings,i=e?o.class_loaded:o.class_error,s=e?o.callback_load:o.callback_error,r=t.target;E(r,o.class_loading),y(r,i),C(s,r),n._updateLoadingCount(-1)},x=function(t,e){var n=function n(i){I(i,!0,e),A(t,n,o)},o=function o(i){I(i,!1,e),A(t,n,o)};N(t,n,o)},R=["IMG","IFRAME","VIDEO"],D=function(t,e){for(;e.length;)t.splice(e.pop(),1)},F=function(t){this._settings=_extends({},n(),t),this._loadingCount=0,this._queryOriginNode=this._settings.container===window?document:this._settings.container,this._previousLoopTime=0,this._loopTimeout=null,this._boundHandleScroll=this.handleScroll.bind(this),this._isFirstLoop=!0,window.addEventListener("resize",this._boundHandleScroll),this.update()};return F.prototype={_loopThroughElements:function(e){var n=this._settings,o=this._elements,i=o?o.length:0,s=void 0,r=[],l=this._isFirstLoop;if(l&&(this._isFirstLoop=!1),0!==i){for(s=0;s<i;s++){var a=o[s];n.skip_invisible&&null===a.offsetParent||(e||t(a,n.container,n.threshold))&&(l&&y(a,n.class_initial),this.load(a),r.push(s))}D(o,r)}else this._stopScrollHandler()},_startScrollHandler:function(){this._isHandlingScroll||(this._isHandlingScroll=!0,this._settings.container.addEventListener("scroll",this._boundHandleScroll))},_stopScrollHandler:function(){this._isHandlingScroll&&(this._isHandlingScroll=!1,this._settings.container.removeEventListener("scroll",this._boundHandleScroll))},_updateLoadingCount:function(t){this._loadingCount+=t,0===this._elements.length&&0===this._loadingCount&&C(this._settings.callback_finish)},handleScroll:function(){var t=this._settings.throttle;if(0!==t){var e=Date.now(),n=t-(e-this._previousLoopTime);n<=0||n>t?(this._loopTimeout&&(clearTimeout(this._loopTimeout),this._loopTimeout=null),this._previousLoopTime=e,this._loopThroughElements()):this._loopTimeout||(this._loopTimeout=setTimeout(function(){this._previousLoopTime=Date.now(),this._loopTimeout=null,this._loopThroughElements()}.bind(this),n))}else this._loopThroughElements()},loadAll:function(){this._loopThroughElements(!0)},update:function(t){var e=this._settings,n=t||this._queryOriginNode.querySelectorAll(e.elements_selector);this._elements=l(Array.prototype.slice.call(n)),w?this.loadAll():(this._loopThroughElements(),this._startScrollHandler())},destroy:function(){window.removeEventListener("resize",this._boundHandleScroll),this._loopTimeout&&(clearTimeout(this._loopTimeout),this._loopTimeout=null),this._stopScrollHandler(),this._elements=null,this._queryOriginNode=null,this._settings=null},load:function(t,n){e(t,this,n)}},m&&function(t,e){if(e)if(e.length)for(var n,o=0;n=e[o];o+=1)p(t,n);else p(t,e)}(F,window.lazyLoadOptions),F});
diff --git a/logobridge.html b/logobridge.html
index f76184a..f0d8f03 100644
--- a/logobridge.html
+++ b/logobridge.html
@@ -38,25 +38,25 @@ It’s a great way to kick off your open source project when you need to gather
     <div class="large-12 centered-text columns">
       <div class="work-wrapper">
             <a href="https://cloud.ura.design/s/5ycX7DrQ9MXsKi4" target="blank" class="work space">
-              <img src="/images/logobridge/32.png" alt="">
+              <img class="lazy" data-src="/images/logobridge/32.png" alt="">
               <div class="info center">
                 <h5>Logo 32</h5>
               </div>
             </a>
             <a href="https://cloud.ura.design/s/eGzARsDPS7xK6i5" target="blank" class="work space">
-              <img src="/images/logobridge/31.png" alt="">
+              <img class="lazy" data-src="/images/logobridge/31.png" alt="">
               <div class="info center">
                 <h5>Logo 31</h5>
               </div>
             </a>
             <a href="https://cloud.ura.design/s/DgDXMkK32nbGt9M" target="blank" class="work space">
-              <img src="/images/logobridge/30.png" alt="">
+              <img class="lazy" data-src="/images/logobridge/30.png" alt="">
               <div class="info center">
                 <h5>Logo 30</h5>
               </div>
             </a>
           <a href="https://cloud.ura.design/s/Qkjq7WcB3gRpyed" target="blank" class="work space">
-              <img src="/images/logobridge/29.png" alt="">
+              <img class="lazy" data-src="/images/logobridge/29.png" alt="">
               <div class="info center">
                 <h5>Logo 29</h5>
               </div>
@@ -68,25 +68,25 @@ It’s a great way to kick off your open source project when you need to gather
     <div class="large-12 centered-text columns">
       <div class="work-wrapper">
             <a href="https://cloud.ura.design/s/E7OC3cub9qmjL2c" target="blank" class="work space">
-              <img src="/images/logobridge/28.png" alt="">
+              <img class="lazy" data-src="/images/logobridge/28.png" alt="">
               <div class="info center">
                 <h5>Logo 28</h5>
               </div>
             </a>
             <a href="https://cloud.ura.design/s/AN8VJaf4BfbZeNs" target="blank" class="work space">
-              <img src="/images/logobridge/27.png" alt="">
+              <img class="lazy" data-src="/images/logobridge/27.png" alt="">
               <div class="info center">
                 <h5>Logo 27</h5>
               </div>
             </a>
             <a href="https://cloud.ura.design/s/9z8jNL804itQ9rj" target="blank" class="work space">
-              <img src="/images/logobridge/26.png" alt="">
+              <img class="lazy" data-src="/images/logobridge/26.png" alt="">
               <div class="info center">
                 <h5>Logo 26</h5>
               </div>
             </a>
           <a href="https://cloud.ura.design/s/NWUCaBe1sBmxMQr" target="blank" class="work space">
-              <img src="/images/logobridge/25.png" alt="">
+              <img class="lazy" data-src="/images/logobridge/25.png" alt="">
               <div class="info center">
                 <h5>Logo 25</h5>
               </div>
@@ -98,25 +98,25 @@ It’s a great way to kick off your open source project when you need to gather
     <div class="large-12 centered-text columns">
       <div class="work-wrapper">
             <a href="https://cloud.ura.design/s/6MLHKgb7kaLvBdW" target="blank" class="work space">
-              <img src="/images/logobridge/24.png" alt="">
+              <img class="lazy" data-src="/images/logobridge/24.png" alt="">
               <div class="info center">
                 <h5>Logo 24</h5>
               </div>
             </a>
             <a href="https://cloud.ura.design/s/AXvYXt2gt9frtKP" target="blank" class="work space">
-              <img src="/images/logobridge/23.png" alt="">
+              <img class="lazy" data-src="/images/logobridge/23.png" alt="">
               <div class="info center">
                 <h5>Logo 23</h5>
               </div>
             </a>
             <a href="https://cloud.ura.design/s/2PpGi036WDkiw3x" target="blank" class="work space">
-              <img src="/images/logobridge/22.png" alt="">
+              <img class="lazy" data-src="/images/logobridge/22.png" alt="">
               <div class="info center">
                 <h5>Logo 22</h5>
               </div>
             </a>
           <a href="https://cloud.ura.design/s/nfB7kgOVRbu1DWH" target="blank" class="work space">
-            <img src="/images/logobridge/21.png" alt="">
+            <img class="lazy" data-src="/images/logobridge/21.png" alt="">
               <div class="info center">
                 <h5>Logo 21</h5>
               </div>
@@ -128,25 +128,25 @@ It’s a great way to kick off your open source project when you need to gather
     <div class="large-12 centered-text columns">
       <div class="work-wrapper">
             <a href="https://cloud.ura.design/s/uOpHJ03pFydVhnk" target="blank" class="work space">
-              <img src="/images/logobridge/20.png" alt="">
+              <img class="lazy" data-src="/images/logobridge/20.png" alt="">
               <div class="info center">
                 <h5>Logo 20</h5>
               </div>
             </a>
             <a href="https://cloud.ura.design/s/ug9TQ6QDG1bk9AG" target="blank" class="work space">
-              <img src="/images/logobridge/19.png" alt="">
+              <img class="lazy" data-src="/images/logobridge/19.png" alt="">
               <div class="info center">
                 <h5>Logo 19</h5>
               </div>
             </a>
             <a href="https://cloud.ura.design/s/AUdTz6wgkwtHCBd" target="blank" class="work space">
-              <img src="/images/logobridge/18.png" alt="">
+              <img class="lazy" data-src="/images/logobridge/18.png" alt="">
               <div class="info center">
                 <h5>Logo 18</h5>
               </div>
             </a>
           <a href="https://cloud.ura.design/s/EVEChXZfCUQcO5G" target="blank" class="work space">
-              <img src="/images/logobridge/17.png" alt="">
+              <img class="lazy" data-src="/images/logobridge/17.png" alt="">
               <div class="info center">
                 <h5>Logo 17</h5>
               </div>
@@ -158,25 +158,25 @@ It’s a great way to kick off your open source project when you need to gather
     <div class="large-12 centered-text columns">
       <div class="work-wrapper">
             <a href="https://cloud.ura.design/s/ZD71SvkYhiorZae" target="blank" class="work space">
-              <img src="/images/logobridge/16.png" alt="">
+              <img class="lazy" data-src="/images/logobridge/16.png" alt="">
               <div class="info center">
                 <h5>Logo 16</h5>
               </div>
             </a>
             <a href="https://cloud.ura.design/s/vc7FKx1icMeq3QL" target="blank" class="work space">
-              <img src="/images/logobridge/15.png" alt="">
+              <img class="lazy" data-src="/images/logobridge/15.png" alt="">
               <div class="info center">
                 <h5>Logo 15</h5>
               </div>
             </a>
             <a href="https://cloud.ura.design/s/SR2WegS5qin08AZ" target="blank" class="work space">
-              <img src="/images/logobridge/14.png" alt="">
+              <img class="lazy" data-src="/images/logobridge/14.png" alt="">
               <div class="info center">
                 <h5>Logo 14</h5>
               </div>
             </a>
             <a href="https://cloud.ura.design/s/vy1H32n3wYudvvK" target="blank" class="work space">
-              <img src="/images/logobridge/13.png" alt="">
+              <img class="lazy" data-src="/images/logobridge/13.png" alt="">
               <div class="info center">
                 <h5>Logo 13</h5>
               </div>
@@ -188,25 +188,25 @@ It’s a great way to kick off your open source project when you need to gather
     <div class="large-12 centered-text columns">
       <div class="work-wrapper">
             <a href="https://cloud.ura.design/s/LLcBzhPfeJYXjn6" target="blank" class="work space">
-              <img src="/images/logobridge/12.png" alt="">
+              <img class="lazy" data-src="/images/logobridge/12.png" alt="">
               <div class="info center">
                 <h5>Logo 12</h5>
               </div>
             </a>
             <a href="https://cloud.ura.design/s/g07EQygQXx9AnTu" target="blank" class="work space">
-              <img src="/images/logobridge/11.png" alt="">
+              <img class="lazy" data-src="/images/logobridge/11.png" alt="">
               <div class="info center">
                 <h5>Logo 11</h5>
               </div>
             </a>
             <a href="https://cloud.ura.design/s/ECmitgpnrH2sene" target="blank" class="work space">
-              <img src="/images/logobridge/10.png" alt="">
+              <img class="lazy" data-src="/images/logobridge/10.png" alt="">
               <div class="info center">
                 <h5>Logo 10</h5>
               </div>
             </a>
           <a href="https://cloud.ura.design/s/tkfXiEpuynDhXYV" target="blank" class="work space">
-              <img src="/images/logobridge/9.png" alt="">
+              <img class="lazy" data-src="/images/logobridge/9.png" alt="">
               <div class="info center">
                 <h5>Logo 9</h5>
               </div>
@@ -218,25 +218,25 @@ It’s a great way to kick off your open source project when you need to gather
     <div class="large-12 centered-text columns">
       <div class="work-wrapper">
             <a href="https://cloud.ura.design/s/cVBkctDp4ApGSYC" target="blank" class="work space">
-              <img src="/images/logobridge/8.png" alt="">
+              <img class="lazy" data-src="/images/logobridge/8.png" alt="">
               <div class="info center">
                 <h5>Logo 8</h5>
               </div>
             </a>
             <a href="https://cloud.ura.design/s/cxpyGtJ9xif52Kw" target="blank" class="work space">
-              <img src="/images/logobridge/7.png" alt="">
+              <img class="lazy" data-src="/images/logobridge/7.png" alt="">
               <div class="info center">
                 <h5>Logo 7</h5>
               </div>
             </a>
             <a href="https://cloud.ura.design/s/ramqPdYHZlaQ2u8" target="blank" class="work space">
-              <img src="/images/logobridge/6.png" alt="">
+              <img class="lazy" data-src="/images/logobridge/6.png" alt="">
               <div class="info center">
                 <h5>Logo 6</h5>
               </div>
             </a>
           <a href="https://cloud.ura.design/s/eZqxXpJu6hIlqCa" target="blank" class="work space">
-              <img src="/images/logobridge/5.png" alt="">
+              <img class="lazy" data-src="/images/logobridge/5.png" alt="">
               <div class="info center">
                 <h5>Logo 5</h5>
               </div>
@@ -248,25 +248,25 @@ It’s a great way to kick off your open source project when you need to gather
     <div class="large-12 centered-text columns">
       <div class="work-wrapper">
             <a href="https://cloud.ura.design/s/SVLtm1eF6P7LmgZ" target="blank" class="work space">
-              <img src="/images/logobridge/4.png" alt="">
+              <img class="lazy" data-src="/images/logobridge/4.png" alt="">
               <div class="info center">
                 <h5>Logo 4</h5>
               </div>
             </a>
             <a href="https://cloud.ura.design/s/9ULnGadMZLiZuwl" target="blank" class="work space">
-              <img src="/images/logobridge/3.png" alt="">
+              <img class="lazy" data-src="/images/logobridge/3.png" alt="">
               <div class="info center">
                 <h5>Logo 3</h5>
               </div>
             </a>
             <a href="https://cloud.ura.design/s/ViMmeuvoLmXsjjF" target="blank" class="work space">
-              <img src="/images/logobridge/2.png" alt="">
+              <img class="lazy" data-src="/images/logobridge/2.png" alt="">
               <div class="info center">
                 <h5>Logo 2</h5>
               </div>
             </a>
           <a href="https://cloud.ura.design/s/6zlp51kBNGogrbC" target="blank" class="work space">
-              <img src="/images/logobridge/1.png" alt="">
+              <img class="lazy" data-src="/images/logobridge/1.png" alt="">
               <div class="info center">
                 <h5>Logo 1</h5>
               </div>
diff --git a/projects/enigmail.html b/projects/enigmail.html
index 2adbb14..5fbf2de 100644
--- a/projects/enigmail.html
+++ b/projects/enigmail.html
@@ -16,9 +16,9 @@ title: Enigmail Rebranding
 <div class="full text">
   <div class="row">
     <div class="large-8 columns">
-      <img src="../images/projects/enigmail.png" alt="">
+      <img class="lazy" data-src="../images/projects/enigmail.png" alt="">
       <div class="spacing"></div>
-      <img src="../images/projects/enigmail_icons.png" alt="">
+      <img class="lazy" data-src="../images/projects/enigmail_icons.png" alt="">
       <div class="spacing"></div>
     </div>
     <div class="large-4 columns">
@@ -35,7 +35,7 @@ title: Enigmail Rebranding
         <p><span>Visual Identity</span></p>
          <hr>
         <a class="button boxed black" href="https://github.com/uracreative/works/tree/master/Enigmail" target="_blank"><i class="fab fa-github"></i> Sources</a><br />
-         <a class="button boxed identihub" href="https://demo.identihub.co/project/enigmail" target="_blank"><img src="../images/projects/identihub.svg" > Identihub</a><br />
+         <a class="button boxed identihub" href="https://demo.identihub.co/project/enigmail" target="_blank"><img class="lazy" data-src="../images/projects/identihub.svg" > Identihub</a><br />
         <a class="button boxed enigmail" href="https://enigmail.net" target="_blank"><i class="fas fa-globe"></i> Website</a>
       </div>
     </div>
@@ -55,7 +55,7 @@ title: Enigmail Rebranding
       <div class="large-4 columns">
         <div class="work-wrapper">
           <a href="openlabs" class="work">
-            <img src="../images/projects/openlabs.jpg" alt="">
+            <img class="lazy" data-src="../images/projects/openlabs.jpg" alt="">
             <div class="info">
               <h3>Open Labs</h3>
               <p>Rebranding</p>
@@ -66,7 +66,7 @@ title: Enigmail Rebranding
       <div class="large-4 columns">
         <div class="work-wrapper">
           <a href="tor-style-guide" class="work">
-          <img src="../images/projects/tor_thumb.png" alt="">
+          <img class="lazy" data-src="../images/projects/tor_thumb.png" alt="">
           <div class="info">
             <h3>Tor Style Guide</h3>
             <p>Style Guide</p>
@@ -77,7 +77,7 @@ title: Enigmail Rebranding
       <div class="large-4 columns">
         <div class="work-wrapper">
           <a href="mozilla-l10n" class="work">
-            <img src="../images/projects/mozilla-l10n.jpg" alt="">
+            <img class="lazy" data-src="../images/projects/mozilla-l10n.jpg" alt="">
             <div class="info">
               <h3>Mozilla L10N T-shirts</h3>
               <p>Print</p>
diff --git a/projects/index.html b/projects/index.html
index ebbd967..a1211aa 100644
--- a/projects/index.html
+++ b/projects/index.html
@@ -59,7 +59,7 @@ works_right:
     {% for work in page.works_left %}
       <div class="work-wrapper">
         <a href="{{work.link_to}}" class="work">
-          <img src="{{site.baseurl}}/{{work.image}}" alt="">
+          <img class="lazy" data-src="{{site.baseurl}}/{{work.image}}" alt="">
           <div class="info">
             <h3>{{work.title}}</h3>
             <p>{{work.categories}}</p>
@@ -72,7 +72,7 @@ works_right:
     {% for work in page.works_middle %}
       <div class="work-wrapper">
         <a href="{{work.link_to}}" class="work">
-          <img src="{{site.baseurl}}/{{work.image}}" alt="">
+          <img class="lazy" data-src="{{site.baseurl}}/{{work.image}}" alt="">
           <div class="info">
             <h3>{{work.title}}</h3>
             <p>{{work.categories}}</p>
@@ -85,7 +85,7 @@ works_right:
     {% for work in page.works_right %}
       <div class="work-wrapper">
         <a href="{{work.link_to}}" class="work">
-          <img src="{{site.baseurl}}/{{work.image}}" alt="">
+          <img class="lazy" data-src="{{site.baseurl}}/{{work.image}}" alt="">
           <div class="info">
             <h3>{{work.title}}</h3>
             <p>{{work.categories}}</p>
diff --git a/projects/libocon.html b/projects/libocon.html
index 72d655e..403cb97 100644
--- a/projects/libocon.html
+++ b/projects/libocon.html
@@ -16,9 +16,9 @@ title: LibOCon 2018 Visual Identity
 <div class="full text">
   <div class="row">
     <div class="large-8 columns">
-      <img src="../images/projects/libocon.png" alt="">
+      <img class="lazy" data-src="../images/projects/libocon.png" alt="">
       <div class="spacing"></div>
-      <img src="../images/projects/libocon_totebag.png" alt="">
+      <img class="lazy" data-src="../images/projects/libocon_totebag.png" alt="">
       <div class="spacing"></div>
     </div>
     <div class="large-4 columns">
@@ -35,7 +35,7 @@ title: LibOCon 2018 Visual Identity
         <p><span>Visual Identity</span></p>
          <hr>
         <a class="button boxed black" href="https://github.com/uracreative/works/tree/master/LibOCon 2018" target="_blank" rel="noopener"><i class="fab fa-github"></i> Sources</a><br />
-         <a class="button boxed identihub" href="https://demo.identihub.co/project/libocon" target="_blank" rel="noopener"><img src="../images/projects/identihub.svg" > Identihub</a><br />
+         <a class="button boxed identihub" href="https://demo.identihub.co/project/libocon" target="_blank" rel="noopener"><img class="lazy" data-src="../images/projects/identihub.svg" > Identihub</a><br />
         <a class="button boxed libocon" href="https://libocon.org" target="_blank" rel="noopener"><i class="fas fa-globe"></i> Website</a>
       </div>
     </div>
@@ -55,7 +55,7 @@ title: LibOCon 2018 Visual Identity
       <div class="large-4 columns">
         <div class="work-wrapper">
           <a href="openlabs" class="work">
-            <img src="../images/projects/openlabs.jpg" alt="">
+            <img class="lazy" data-src="../images/projects/openlabs.jpg" alt="">
             <div class="info">
               <h3>Open Labs</h3>
               <p>Rebranding</p>
@@ -66,7 +66,7 @@ title: LibOCon 2018 Visual Identity
       <div class="large-4 columns">
         <div class="work-wrapper">
           <a href="tor-style-guide" class="work">
-          <img src="../images/projects/tor_thumb.png" alt="">
+          <img class="lazy" data-src="../images/projects/tor_thumb.png" alt="">
           <div class="info">
             <h3>Tor Style Guide</h3>
             <p>Style Guide</p>
@@ -77,7 +77,7 @@ title: LibOCon 2018 Visual Identity
       <div class="large-4 columns">
         <div class="work-wrapper">
           <a href="mozilla-l10n" class="work">
-            <img src="../images/projects/mozilla-l10n.jpg" alt="">
+            <img class="lazy" data-src="../images/projects/mozilla-l10n.jpg" alt="">
             <div class="info">
               <h3>Mozilla L10N T-shirts</h3>
               <p>Print</p>
diff --git a/projects/mozilla-l10n.html b/projects/mozilla-l10n.html
index 64f4c0b..1d31f46 100644
--- a/projects/mozilla-l10n.html
+++ b/projects/mozilla-l10n.html
@@ -16,18 +16,18 @@ title: Mozilla L10N T-Shirts
 <div class="full text">
   <div class="row">
     <div class="large-8 columns">
-      <img style="margin-left: auto; margin-right: auto; display: block;" src="../images/projects/l10n_Lions.png" alt="">
+      <img class="lazy" style="margin-left: auto; margin-right: auto; display: block;" data-src="../images/projects/l10n_Lions.png" alt="">
       <div class="spacing"></div>
       <p class="centered-text">We were asked by the Mozilla L10N team to create <br />
         2 new <strong>t-shirt designs</strong> focused around localization.</p>
       <p class="centered-text">We repeated the process this time to comply with<br />
         the new branding that came out with Quantum.</p>
       <div class="spacing"></div>
-      <img src="../images/projects/mozilla-l10n-logos.jpg" alt="">
+      <img class="lazy" data-src="../images/projects/mozilla-l10n-logos.jpg" alt="">
       <div class="spacing"></div>
-      <img src="../images/projects/mozilla-l10n-tshirts.jpg" alt="">
+      <img class="lazy" data-src="../images/projects/mozilla-l10n-tshirts.jpg" alt="">
       <div class="spacing"></div>
-      <img src="../images/projects/l10n-stickers.png" alt="">
+      <img class="lazy" data-src="../images/projects/l10n-stickers.png" alt="">
       <div class="spacing"></div>
     </div>
     <div class="large-4 columns">
@@ -62,7 +62,7 @@ title: Mozilla L10N T-Shirts
       <div class="large-4 columns">
         <div class="work-wrapper">
           <a href="openlabs" class="work">
-            <img src="../images/projects/openlabs.jpg" alt="">
+            <img class="lazy" data-src="../images/projects/openlabs.jpg" alt="">
             <div class="info">
               <h3>Open Labs</h3>
               <p>Hackerspace</p>
@@ -73,7 +73,7 @@ title: Mozilla L10N T-Shirts
       <div class="large-4 columns">
         <div class="work-wrapper">
           <a href="sfk16" class="work">
-          <img src="../images/projects/poster_SFK.jpg" alt="">
+          <img class="lazy" data-src="../images/projects/poster_SFK.jpg" alt="">
           <div class="info">
             <h3>Software Freedom Kosova 2016</h3>
             <p>Visual ID, Print</p>
@@ -84,7 +84,7 @@ title: Mozilla L10N T-Shirts
       <div class="large-4 columns">
         <div class="work-wrapper">
           <a href="openchain" class="work">
-            <img src="../images/projects/penguins_thumb.jpg" alt="">
+            <img class="lazy" data-src="../images/projects/penguins_thumb.jpg" alt="">
             <div class="info">
               <h3>OpenChain Penguins</h3>
               <p>Illustration</p>
diff --git a/projects/openchain.html b/projects/openchain.html
index 3531a14..539df49 100644
--- a/projects/openchain.html
+++ b/projects/openchain.html
@@ -16,9 +16,9 @@ title: OpenChain Penguins
 <div class="full text">
   <div class="row">
     <div class="large-8 columns">
-      <img src="../images/projects/penguins.jpg" alt="">
+      <img class="lazy" data-src="../images/projects/penguins.jpg" alt="">
       <div class="spacing"></div>
-      <img src="../images/projects/A4_openchain.jpg" alt="">
+      <img class="lazy" data-src="../images/projects/A4_openchain.jpg" alt="">
       <div class="spacing"></div>
     </div>
     <div class="large-4 columns">
@@ -55,7 +55,7 @@ title: OpenChain Penguins
       <div class="large-4 columns">
         <div class="work-wrapper">
           <a href="openlabs" class="work">
-            <img src="../images/projects/openlabs.jpg" alt="">
+            <img class="lazy" data-src="../images/projects/openlabs.jpg" alt="">
             <div class="info">
               <h3>Open Labs</h3>
               <p>Rebranding</p>
@@ -66,7 +66,7 @@ title: OpenChain Penguins
       <div class="large-4 columns">
         <div class="work-wrapper">
           <a href="sfk16" class="work">
-          <img src="../images/projects/poster_SFK.jpg" alt="">
+          <img class="lazy" data-src="../images/projects/poster_SFK.jpg" alt="">
           <div class="info">
             <h3>Software Freedom Kosova 2016</h3>
             <p>Visual ID, Print</p>
@@ -77,7 +77,7 @@ title: OpenChain Penguins
       <div class="large-4 columns">
         <div class="work-wrapper">
           <a href="mozilla-l10n" class="work">
-            <img src="../images/projects/mozilla-l10n.jpg" alt="">
+            <img class="lazy" data-src="../images/projects/mozilla-l10n.jpg" alt="">
             <div class="info">
               <h3>Mozilla L10N T-shirts</h3>
               <p>Print</p>
diff --git a/projects/openlabs.html b/projects/openlabs.html
index 839e99c..192c1ed 100644
--- a/projects/openlabs.html
+++ b/projects/openlabs.html
@@ -16,21 +16,21 @@ title: Open Labs
 <div class="full text">
   <div class="row">
     <div class="large-8 columns">
-      <img src="../images/projects/open-labs.jpg" alt="">
+      <img data-src="../images/projects/open-labs.jpg" alt="">
       <div class="spacing"></div>
-      <img src="../images/projects/openlabs.jpg" alt="">
+      <img data-src="../images/projects/openlabs.jpg" alt="">
       <div class="two spacing"></div>
-      <img src="../images/projects/typography.jpg" alt="">
+      <img data-src="../images/projects/typography.jpg" alt="">
       <div class="spacing"></div>
-      <img src="../images/projects/fonts.jpg" alt="">
+      <img data-src="../images/projects/fonts.jpg" alt="">
       <div class="spacing"></div>
-      <img src="../images/projects/posters.jpg" alt="">
+      <img data-src="../images/projects/posters.jpg" alt="">
       <div class="spacing"></div>
-      <img src="../images/projects/5-anniversary.jpg" alt="">
+      <img data-src="../images/projects/5-anniversary.jpg" alt="">
       <div class="spacing"></div>
-      <img src="../images/projects/copyfest-poster.jpg" alt="">
+      <img data-src="../images/projects/copyfest-poster.jpg" alt="">
       <div class="spacing"></div>
-      <img src="../images/projects/wiki_poster.jpg" alt="">
+      <img data-src="../images/projects/wiki_poster.jpg" alt="">
       <div class="spacing"></div>
     </div>
     <div class="large-4 columns">
@@ -46,7 +46,7 @@ title: Open Labs
         <p><span>Rebranding</span></p>
         <hr>
         <a class="button boxed black" href="https://github.com/OpenLabsHackerspace/branding" target="_blank"><i class="fab fa-github"></i> Sources</a><br />
-        <a class="button boxed identihub" href="https://demo.identihub.co/project/openlabs" target="_blank"><img src="../images/projects/identihub.svg" > Identihub</a><br />
+        <a class="button boxed identihub" href="https://demo.identihub.co/project/openlabs" target="_blank"><img data-src="../images/projects/identihub.svg" > Identihub</a><br />
         <a class="button boxed openlabs" href="https://openlabs.cc/en" target="_blank"><i class="fas fa-globe"></i> Website</a>
       </div>
     </div>
@@ -66,7 +66,7 @@ title: Open Labs
       <div class="large-4 columns">
         <div class="work-wrapper">
           <a href="mozilla-l10n" class="work">
-            <img src="../images/projects/mozilla-l10n.jpg" alt="">
+            <img data-src="../images/projects/mozilla-l10n.jpg" alt="">
             <div class="info">
               <h3>Mozilla L10N T-shirts</h3>
               <p>Print</p>
@@ -77,7 +77,7 @@ title: Open Labs
       <div class="large-4 columns">
         <div class="work-wrapper">
           <a href="sfk16" class="work">
-          <img src="../images/projects/poster_SFK.jpg" alt="">
+          <img data-src="../images/projects/poster_SFK.jpg" alt="">
           <div class="info">
             <h3>Software Freedom Kosova 2016</h3>
             <p>Visual ID, Print</p>
@@ -88,7 +88,7 @@ title: Open Labs
       <div class="large-4 columns">
         <div class="work-wrapper">
           <a href="openchain" class="work">
-            <img src="../images/projects/penguins_thumb.jpg" alt="">
+            <img data-src="../images/projects/penguins_thumb.jpg" alt="">
             <div class="info">
               <h3>OpenChain Penguins</h3>
               <p>Illustration</p>
diff --git a/projects/reproducible-builds.html b/projects/reproducible-builds.html
index 58055ac..2705114 100644
--- a/projects/reproducible-builds.html
+++ b/projects/reproducible-builds.html
@@ -16,17 +16,17 @@ title: Reproducible Builds | Styleguide
 <div class="full text">
   <div class="row">
     <div class="large-8 columns">
-      <img src="../images/projects/rb_header.png" alt="">
+      <img class="lazy" data-src="../images/projects/rb_header.png" alt="">
       <div class="spacing"></div>
-      <img src="../images/projects/RB_image_1.png" alt="">
+      <img class="lazy" data-src="../images/projects/RB_image_1.png" alt="">
       <div class="spacing"></div>
-      <img src="../images/projects/RB_image_4.jpg" alt="">
+      <img class="lazy" data-src="../images/projects/RB_image_4.jpg" alt="">
       <div class="spacing"></div>
-      <img src="../images/projects/RB_image_2.jpg" alt="">
+      <img class="lazy" data-src="../images/projects/RB_image_2.jpg" alt="">
       <div class="spacing"></div>
-      <img src="../images/projects/RB_image_3.jpg" alt="">
+      <img class="lazy" data-src="../images/projects/RB_image_3.jpg" alt="">
       <div class="spacing"></div>
-      <img src="../images/projects/RB_image_5.jpg" alt="">
+      <img class="lazy" data-src="../images/projects/RB_image_5.jpg" alt="">
       <div class="spacing"></div>
     </div>
     <div class="large-4 columns">
@@ -43,7 +43,7 @@ title: Reproducible Builds | Styleguide
         <p><span>Styleguide</span></p>
          <hr>
          <a class="button boxed blog" href="https://ura.design/2018/06/13/reproducible-builds-styleguide" target="_blank"><i class="fas fa-pencil-alt"></i> Blogpost</a><br />
-         <a class="button boxed identihub" href="https://demo.identihub.co/project/reproducible-builds" target="_blank"><img src="../images/projects/identihub.svg" > Identihub</a><br />
+         <a class="button boxed identihub" href="https://demo.identihub.co/project/reproducible-builds" target="_blank"><img class="lazy" data-src="../images/projects/identihub.svg" > Identihub</a><br />
         <a class="button boxed reproduciblebuilds" href="https://reproducible-builds.org" target="_blank"><i class="fas fa-globe"></i> Website</a>
       </div>
     </div>
@@ -63,7 +63,7 @@ title: Reproducible Builds | Styleguide
       <div class="large-4 columns">
         <div class="work-wrapper">
           <a href="openlabs" class="work">
-            <img src="../images/projects/openlabs.jpg" alt="">
+            <img class="lazy" data-src="../images/projects/openlabs.jpg" alt="">
             <div class="info">
               <h3>Open Labs</h3>
               <p>Rebranding</p>
@@ -74,7 +74,7 @@ title: Reproducible Builds | Styleguide
       <div class="large-4 columns">
         <div class="work-wrapper">
           <a href="tor-style-guide" class="work">
-          <img src="../images/projects/tor_thumb.png" alt="">
+          <img class="lazy" data-src="../images/projects/tor_thumb.png" alt="">
           <div class="info">
             <h3>Tor Style Guide</h3>
             <p>Style Guide</p>
@@ -85,7 +85,7 @@ title: Reproducible Builds | Styleguide
       <div class="large-4 columns">
         <div class="work-wrapper">
           <a href="enigmail" class="work">
-            <img src="../images/projects/enigmail_overview.png" alt="">
+            <img class="lazy" data-src="../images/projects/enigmail_overview.png" alt="">
             <div class="info">
               <h3>Enigmail Rebranding</h3>
               <p>Rebranding</p>
diff --git a/projects/sfk16.html b/projects/sfk16.html
index 1f1f04a..1a27141 100644
--- a/projects/sfk16.html
+++ b/projects/sfk16.html
@@ -16,11 +16,11 @@ title: Software Freedom Kosova '16
 <div class="full text">
   <div class="row">
     <div class="large-8 columns">
-      <img src="../images/projects/poster SFK.jpg" alt="">
+      <img class="lazy" data-src="../images/projects/poster SFK.jpg" alt="">
       <div class="spacing"></div>
-      <img src="../images/projects/SFK-bus-stop.jpg" alt="">
+      <img class="lazy" data-src="../images/projects/SFK-bus-stop.jpg" alt="">
       <div class="spacing"></div>
-      <img src="../images/projects/roll-up-sfk.jpg" alt="">
+      <img class="lazy" data-src="../images/projects/roll-up-sfk.jpg" alt="">
       <div class="spacing"></div>
     </div>
     <div class="large-4 columns">
@@ -55,7 +55,7 @@ title: Software Freedom Kosova '16
       <div class="large-4 columns">
         <div class="work-wrapper">
           <a href="openlabs" class="work">
-            <img src="../images/projects/openlabs.jpg" alt="">
+            <img class="lazy" data-src="../images/projects/openlabs.jpg" alt="">
             <div class="info">
               <h3>Open Labs</h3>
               <p>Rebranding</p>
@@ -66,7 +66,7 @@ title: Software Freedom Kosova '16
       <div class="large-4 columns">
         <div class="work-wrapper">
           <a href="mozilla-l10n" class="work">
-          <img src="../images/projects/mozilla-l10n.jpg" alt="">
+          <img class="lazy" data-src="../images/projects/mozilla-l10n.jpg" alt="">
           <div class="info">
             <h3>Mozilla L10N T-shirts</h3>
             <p>Print</p>
@@ -77,7 +77,7 @@ title: Software Freedom Kosova '16
       <div class="large-4 columns">
         <div class="work-wrapper">
           <a href="openchain" class="work">
-            <img src="../images/projects/penguins_thumb.jpg" alt="">
+            <img class="lazy" data-src="../images/projects/penguins_thumb.jpg" alt="">
             <div class="info">
               <h3>OpenChain Penguins</h3>
               <p>Illustration</p>
diff --git a/projects/thunderbird.html b/projects/thunderbird.html
index 4f1f6fb..4257789 100644
--- a/projects/thunderbird.html
+++ b/projects/thunderbird.html
@@ -16,15 +16,15 @@ title: Thunderbird Style Guide and Usability Study
 <div class="full text">
   <div class="row">
     <div class="large-8 columns">
-      <img src="../images/projects/thunderbird_logo.png" alt="">
+      <img class="lazy" data-src="../images/projects/thunderbird_logo.png" alt="">
       <div class="spacing"></div>
-      <img src="../images/projects/thunderbird_2.png" alt="">
+      <img class="lazy" data-src="../images/projects/thunderbird_2.png" alt="">
       <div class="two spacing"></div>
-      <img src="../images/projects/thunderbird_3.png" alt="">
+      <img class="lazy" data-src="../images/projects/thunderbird_3.png" alt="">
       <div class="spacing"></div>
-      <img src="../images/projects/thunderbird_4.png" alt="">
+      <img class="lazy" data-src="../images/projects/thunderbird_4.png" alt="">
       <div class="spacing"></div>
-      <img src="../images/projects/thunderbird_1.png" alt="">
+      <img class="lazy" data-src="../images/projects/thunderbird_1.png" alt="">
       <div class="spacing"></div>
     </div>
     <div class="large-4 columns">
@@ -42,7 +42,7 @@ title: Thunderbird Style Guide and Usability Study
          <hr>
          <a class="button boxed blog" href="https://ura.design/2018/07/05/thunderbird-style-guide" target="_blank"><i class="fas fa-pencil-alt"></i> Blogpost</a><br />
          <a class="button boxed black" href="https://github.com/uracreative/works/tree/master/Thunderbird" target="_blank"><i class="fab fa-github"></i> Sources</a><br />
-         <a class="button boxed identihub" href="https://demo.identihub.co/project/thunderbird" target="_blank"><img src="../images/projects/identihub.svg" > Identihub</a><br />
+         <a class="button boxed identihub" href="https://demo.identihub.co/project/thunderbird" target="_blank"><img class="lazy" data-src="../images/projects/identihub.svg" > Identihub</a><br />
         <a class="button boxed thunderbird" href="https://thunderbird.net" target="_blank"><i class="fas fa-globe"></i> Website</a><br />
         <a class="button boxed thunderbird" href="https://github.com/uracreative/works/raw/master/Thunderbird/Thunderbird%20Usability%20Study.pdf" target="_blank"><i class="fas fa-globe"></i> Usability Study</a>
       </div>
@@ -63,7 +63,7 @@ title: Thunderbird Style Guide and Usability Study
       <div class="large-4 columns">
         <div class="work-wrapper">
           <a href="reproducible-builds" class="work">
-            <img src="../images/projects/rb_thumbnail.png" alt="">
+            <img class="lazy" data-src="../images/projects/rb_thumbnail.png" alt="">
             <div class="info">
               <h3>Reproducible Builds</h3>
               <p>Style Guide</p>
@@ -74,7 +74,7 @@ title: Thunderbird Style Guide and Usability Study
       <div class="large-4 columns">
         <div class="work-wrapper">
           <a href="tor-style-guide" class="work">
-          <img src="../images/projects/tor_thumb.png" alt="">
+          <img class="lazy" data-src="../images/projects/tor_thumb.png" alt="">
           <div class="info">
             <h3>Tor Style Guide</h3>
             <p>Style Guide</p>
@@ -85,7 +85,7 @@ title: Thunderbird Style Guide and Usability Study
       <div class="large-4 columns">
         <div class="work-wrapper">
           <a href="enigmail" class="work">
-            <img src="../images/projects/enigmail_overview.png" alt="">
+            <img class="lazy" data-src="../images/projects/enigmail_overview.png" alt="">
             <div class="info">
               <h3>Enigmail Rebranding</h3>
               <p>Rebranding</p>
diff --git a/projects/tor-style-guide.html b/projects/tor-style-guide.html
index 6371dff..6e04262 100644
--- a/projects/tor-style-guide.html
+++ b/projects/tor-style-guide.html
@@ -16,17 +16,17 @@ title: Tor Style Guide
 <div class="full text">
   <div class="row">
     <div class="large-8 columns">
-      <img src="../images/projects/tor-0.png" alt="style guide 1">
+      <img class="lazy" data-src="../images/projects/tor-0.png" alt="style guide 1">
       <div class="three spacing"></div>
-      <img src="../images/projects/tor-4.png" alt="style guide 3">
+      <img class="lazy" data-src="../images/projects/tor-4.png" alt="style guide 3">
       <div class="three spacing"></div>
-      <img src="../images/projects/tor-5.png" alt="style guide 3">
+      <img class="lazy" data-src="../images/projects/tor-5.png" alt="style guide 3">
       <div class="three spacing"></div>
-      <img src="../images/projects/tor-1.png" alt="style guide 1">
+      <img class="lazy" data-src="../images/projects/tor-1.png" alt="style guide 1">
       <div class="three spacing"></div>
-      <img src="../images/projects/tor-2.png" alt="style guide 2">
+      <img class="lazy" data-src="../images/projects/tor-2.png" alt="style guide 2">
       <div class="three spacing"></div>
-      <img src="../images/projects/tor-3.png" alt="style guide 3">
+      <img class="lazy" data-src="../images/projects/tor-3.png" alt="style guide 3">
       <div class="three spacing"></div>
     </div>
     <div class="large-4 columns">
@@ -42,7 +42,7 @@ title: Tor Style Guide
         <p><span>Style Guide</span></p>
         <hr>
         <a class="button boxed black" href="https://github.com/uracreative/" target="_blank"><i class="fab fa-github"></i> Sources</a><br />
-        <a class="button boxed identihub" href="https://demo.identihub.co/project/tor-project" target="_blank"><img src="../images/projects/identihub.svg" > Identihub</a><br />
+        <a class="button boxed identihub" href="https://demo.identihub.co/project/tor-project" target="_blank"><img class="lazy" data-src="../images/projects/identihub.svg" > Identihub</a><br />
         <a class="button boxed tor" href="https://styleguide.torproject.org" target="_blank"><i class="fas fa-globe"></i> Website</a>
       </div>
     </div>
@@ -62,7 +62,7 @@ title: Tor Style Guide
       <div class="large-4 columns">
         <div class="work-wrapper">
           <a href="openlabs" class="work">
-            <img src="../images/projects/openlabs.jpg" alt="">
+            <img class="lazy" data-src="../images/projects/openlabs.jpg" alt="">
             <div class="info">
               <h3>Open Labs</h3>
               <p>Rebranding</p>
@@ -73,7 +73,7 @@ title: Tor Style Guide
       <div class="large-4 columns">
         <div class="work-wrapper">
           <a href="openchain" class="work">
-          <img src="../images/projects/penguins_thumb.jpg" alt="">
+          <img class="lazy" data-src="../images/projects/penguins_thumb.jpg" alt="">
           <div class="info">
             <h3>OpenChain Penguins</h3>
             <p>Illustration</p>
@@ -84,7 +84,7 @@ title: Tor Style Guide
       <div class="large-4 columns">
         <div class="work-wrapper">
           <a href="mozilla-l10n" class="work">
-            <img src="../images/projects/mozilla-l10n.jpg" alt="">
+            <img class="lazy" data-src="../images/projects/mozilla-l10n.jpg" alt="">
             <div class="info">
               <h3>Mozilla L10N T-shirts</h3>
               <p>Prints</p>
diff --git a/support-us.html b/support-us.html
index fec0dfe..5265000 100644
--- a/support-us.html
+++ b/support-us.html
@@ -19,7 +19,7 @@ section_id: pages
    <div class="large-11 large-centered columns">
      <p>Ura is being supported by communities and open source initiatives. We also develop <a href="https://identihub.co">Identihub</a>, free and open source sofware to host your brand and visual assets. You can support its development by pledging on our Patreon.</p>
        <div class="large-11 large-centered centered-text columns">
-<a href="https://www.patreon.com/bePatron?u=3383740" data-patreon-widget-type="become-patron-button">Become a Patron!</a><script async src="https://c6.patreon.com/becomePatronButton.bundle.js"></script>
+<a href="https://www.patreon.com/bePatron?u=3383740" data-patreon-widget-type="become-patron-button">Become a Patron!</a><script async data-src="https://c6.patreon.com/becomePatronButton.bundle.js"></script>
        </div>
   <hr>
      <div class="one spacing"></div>
@@ -30,7 +30,7 @@ section_id: pages
            <div class="large-12 centered-text columns">
       <div class="work-wrapper">
             <a href="https://opentech.fund" target="blank" class="work space">
-              <img src="/images/supporters/otf_logo.png" alt="OpenTechFund Logo">
+              <img class="lazy" data-src="/images/supporters/otf_logo.png" alt="OpenTechFund Logo">
               <div class="info" style="text-align: center; margin-left: 0px;">
                 <h5 style="color: #999;">Usability Lab</h5>
               </div>
@@ -40,7 +40,7 @@ section_id: pages
  <div class="large-12 centered-text columns">
       <div class="work-wrapper">
             <a href="https://www.digitalocean.com/" target="blank" class="work space">
-              <img src="/images/supporters/digital_ocean.svg" alt="Digital Ocean Logo">
+              <img class="lazy" data-src="/images/supporters/digital_ocean.svg" alt="Digital Ocean Logo">
               <div class="info" style="text-align: center; margin-left: 0px;">
                 <h5 style="color: #999;">Infrastructure</h5>
               </div>
@@ -50,7 +50,7 @@ section_id: pages
     <div class="large-12 centered-text columns">
       <div class="work-wrapper">
          <a href="https://yubico.com" target="blank" class="work space">
-              <img src="/images/supporters/yubico.svg" alt="Yubico Logo">
+              <img class="lazy" data-src="/images/supporters/yubico.svg" alt="Yubico Logo">
               <div class="info" style="text-align: center; margin-left: 0px;">
                 <h5 style="color: #999;">Security Devices</h5>
               </div>