Optimize images

Author: Vadim Makeev

_includes/head.html

@@ -10,7 +10,7 @@
   <!-- Schema.org markup for Google+ -->
   <meta itemprop="name" content="{{ site.title }}">
   <meta itemprop="description" content="{{ site.description }}">
-  <meta itemprop="image" content="{{ site.url }}/assets/images/market.png">
+  <meta itemprop="image" content="{{ site.url }}/assets/images/market.jpg">
 
   <!-- Twitter Card data -->
   <meta name="twitter:card" content="summary_large_image">
@@ -19,14 +19,14 @@
   <meta name="twitter:description" content="{{ site.description }}">
   <meta name="twitter:creator" content="{{ site.twitter_username }}">
   <!-- Twitter summary card with large image must be at least 280x150px -->
-  <meta name="twitter:image" content="{{ site.url }}/assets/images/market.png">
+  <meta name="twitter:image" content="{{ site.url }}/assets/images/market.jpg">
   <meta name="twitter:image:alt" content="{{ site.description }}">
 
   <!-- Open Graph data -->
   <meta property="og:title" content="{{ site.title }}" />
   <meta property="og:type" content="website" />
   <meta property="og:url" content="{{ site.url }}" />
-  <meta property="og:image" content="{{ site.url }}/assets/images/market.png" />
+  <meta property="og:image" content="{{ site.url }}/assets/images/market.jpg" />
   <meta property="og:description" content="{{ site.description }}" />
   <meta property="fb:admins" content="1518546144" />
 

_includes/header.html

@@ -1,7 +1,7 @@
 <div class="vh-85 dt w-100 bg-header bg-primary flex flex-column items-center justify-center">
   <div class="dtc v-mid tc ph3 ph4-l">
     <div class="link header-logo br-100 pa4 ba bg-dark-gray h4 w4 dib flex items-center justify-center" href="/">
-      <img class="w4" src="/assets/images/logo-white.png" alt="GitPoint">
+      <img class="w4" src="/assets/images/logo-white.png" srcset="/assets/images/logo-white@2x.png 2x" alt="GitPoint">
     </div>
   </div>
 

_layouts/home.html

@@ -19,7 +19,7 @@ <h2 class="f3 f2-m f2-l fw7 dark-gray mb2">
       </div>
 
       <div class="flex items-center justify-center">
-        <img class="mw5" src="/assets/images/profile-screen-side.png" alt="GitPoint Profile Screen">
+        <img class="mw5" src="/assets/images/profile-screen-side.jpg" srcset="/assets/images/profile-screen-side@2x.jpg 2x" alt="GitPoint Profile Screen">
       </div>
     </div>
   </div>
@@ -44,7 +44,7 @@ <h2 class="f3 f2-m f2-l fw6 dark-gray mb2">
 
       <div class="fl-l">
         <div class="flex h-100 items-center justify-center">
-          <img class="grow mw5" src="/assets/images/profile-screen-side.png" alt="GitPoint Profile Screen">
+          <img class="grow mw5" src="/assets/images/profile-screen-side.jpg" srcset="/assets/images/profile-screen-side@2x.jpg 2x" alt="GitPoint Profile Screen">
         </div>
       </div>
 
@@ -69,7 +69,7 @@ <h2 class="f3 f2-m f2-l fw7 dark-gray mb2">
 
     <div class="fl-l">
       <div class="flex h-100 items-center justify-center">
-        <img class="grow mw5" src="/assets/images/notifications-screen.png" alt="GitPoint Notifications Screen">
+        <img class="grow mw5" src="/assets/images/notifications-screen.jpg" srcset="/assets/images/notifications-screen@2x.jpg 2x" alt="GitPoint Notifications Screen">
       </div>
     </div>
 
@@ -81,7 +81,7 @@ <h2 class="f3 f2-m f2-l fw7 dark-gray mb2">
 
   <div class="dn db-l">
     <div class="flex h-100 items-center">
-      <img class="grow mw5" src="/assets/images/repository-screen.png" alt="GitPoint Repository Screen">
+      <img class="grow mw5" src="/assets/images/repository-screen.jpg" srcset="/assets/images/repository-screen@2x.jpg 2x" alt="GitPoint Repository Screen">
     </div>
   </div>
 
@@ -99,7 +99,7 @@ <h2 class="f3 f2-m f2-l fw7 dark-gray mb2">
 
   <div class="dn-l">
     <div class="flex h-100 items-center justify-center">
-      <img class="grow mw5" src="/assets/images/repository-screen.png" alt="GitPoint Repository Screen">
+      <img class="grow mw5" src="/assets/images/repository-screen.jpg" srcset="/assets/images/repository-screen@2x.jpg 2x" alt="GitPoint Repository Screen">
     </div>
   </div>
 
@@ -118,9 +118,9 @@ <h2 class="f3 f2-m f2-l fw7 tc dark-gray mb2">
   </p>
 
   <div class="flex flex-column flex-row-ns items-center justify-center justify-between-ns w-80">
-    <img class="mw5 mw4-m mb5 mb0-ns grow" src="/assets/images/issue-screen.png" alt="GitPoint Issue Screen">
-    <img class="mw5 mw4-m mb5 mb0-ns grow" src="/assets/images/pull-request-screen.png" alt="GitPoint Pull Request Screen">
-    <img class="mw5 mw4-m mb5 mb0-ns grow" src="/assets/images/issue-change-screen.png" alt="GitPoint Issue Change Screen">
+    <img class="mw5 mw4-m mb5 mb0-ns grow" src="/assets/images/issue-screen.jpg" srcset="/assets/images/issue-screen@2x.jpg 2x" alt="GitPoint Issue Screen">
+    <img class="mw5 mw4-m mb5 mb0-ns grow" src="/assets/images/pull-request-screen.jpg" srcset="/assets/images/pull-request-screen@2x.jpg 2x" alt="GitPoint Pull Request Screen">
+    <img class="mw5 mw4-m mb5 mb0-ns grow" src="/assets/images/issue-change-screen.jpg" srcset="/assets/images/issue-change-screen@2x.jpg 2x" alt="GitPoint Issue Change Screen">
   </div>
 </div>