Drupal: optimizacija slik na webp

frontend/drupal/sites/all/themes/pro1ka/css/pro1ka.css

@@ -375,8 +375,8 @@ a {
   -webkit-align-items: center;
   -ms-flex-align: center;
   align-items: center;
-  background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0.5))), url('../images/kva2.jpg');
-  background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('../images/kva2.jpg');
+  /*background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0.5))), url('../images/kva2.jpg');*/
+  /*background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('../images/kva2.jpg');*/
   background-position: 0px 0px, 50% 50%;
   background-size: auto, cover;
   background-attachment: scroll, fixed;
@@ -457,8 +457,8 @@ a {
   -ms-flex-align: center;
   align-items: center;
   background-color: #8b8b8b;
-  background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0.5))), url('../images/kv1.jpg');
-  background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('../images/kv1.jpg');
+  /*background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0.5))), url('../images/kv1.jpg');*/
+  /*background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('../images/kv1.jpg');*/
   background-position: 0px 0px, 50% 50%;
   background-size: auto, cover;
   background-attachment: scroll, fixed;

frontend/drupal/sites/all/themes/pro1ka/img/webp-convert.sh

@@ -0,0 +1,15 @@
+#!/bin/bash
+
+PARAMS=('-m 6 -q 70 -mt -af -progress')
+
+if [ $# -ne 0 ]; then
+	PARAMS=$@;
+fi
+
+cd $(pwd)
+
+shopt -s nullglob nocaseglob extglob
+
+for FILE in *.@(jpg|jpeg|tif|tiff|png); do 
+    cwebp $PARAMS "$FILE" -o "${FILE%.*}".webp;
+done

frontend/drupal/sites/all/themes/pro1ka/sass/parts/naslovnica.scss

@@ -20,28 +20,54 @@
 }
 
 /* 1KA V ŠTEVILKAH */
-.section.blue-section.nums {
-  background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0.5))), url('/tema1ka/img/ozadje_1ka_v_stevilkah.jpg');
-  background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('/tema1ka/img/ozadje_1ka_v_stevilkah.jpg');
-}
-
-/* MNENJE */
-.section.blue-section.mnenja {
-  background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0.5))), url('/tema1ka/img/ozadje_mnenje.jpg');
-  background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('/tema1ka/img/ozadje_mnenje.jpg');
-
+.section {
+  &.blue-section {
+    /* MNENJE */
+    &.mnenja {
       .testimonial {
         min-height: 130px;
       }
-  .mask{
+
+      .mask {
         border-right: 1px solid #FFFFFF;
       }
 
-  .slide-mnenje{
+      .slide-mnenje {
         border: none;
       }
+    }
+  }
 }
 
+
+//Modernizer
+.no-webp{
+  .section.blue-section.nums {
+    background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0.5))), url('/tema1ka/img/ozadje_1ka_v_stevilkah.jpg');
+    background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('/tema1ka/img/ozadje_1ka_v_stevilkah.jpg');
+  }
+
+  .section.blue-section.mnenja {
+    background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0.5))), url('/tema1ka/img/ozadje_mnenje.jpg');
+    background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('/tema1ka/img/ozadje_mnenje.jpg');
+  }
+}
+
+.webp{
+  .section.blue-section.nums {
+    background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0.5))), url('/tema1ka/img/ozadje_1ka_v_stevilkah.webp');
+    background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('/tema1ka/img/ozadje_1ka_v_stevilkah.webp');
+  }
+
+  .section.blue-section.mnenja {
+    background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0.5))), url('/tema1ka/img/ozadje_mnenje.webp');
+    background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('/tema1ka/img/ozadje_mnenje.webp');
+  }
+}
+
+
+
+
 /* VARNOST */
 .varnost .flexcol img {
   width: 100%;

frontend/drupal/sites/all/themes/pro1ka/sass/parts/slider.scss

@@ -1,8 +1,5 @@
 /* KV slider */
 .kv {
-  background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0.5))), url('/tema1ka/img/ozadje_slider.jpg');
-  background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('/tema1ka/img/ozadje_slider.jpg');
-
   .odpri-prijavo{
     font-size: 20px;
     line-height: 20px;
@@ -11,14 +8,39 @@
 
 .innerkv {
   height: 240px;
-  background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.2)), to(rgba(0, 0, 0, 0.2))), url('/tema1ka/img/kva4.jpg');
-  background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), url('/tema1ka/img/kva4.jpg');
 }
+
 .kv-title-copy {
   padding: 0px;
   border-left: none;
 }
 
+// Modernizer
+.no-webp {
+  .kv {
+    background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0.5))), url('/tema1ka/img/ozadje_slider.jpg');
+    background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('/tema1ka/img/ozadje_slider.jpg');
+  }
+
+  .innerkv {
+    background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.2)), to(rgba(0, 0, 0, 0.2))), url('/tema1ka/img/kva4.jpg');
+    background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), url('/tema1ka/img/kva4.jpg');
+  }
+}
+
+.webp{
+  .kv {
+    background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0.5))), url('/tema1ka/img/ozadje_slider.webp');
+    background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('/tema1ka/img/ozadje_slider.webp');
+  }
+
+  .innerkv {
+    background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.2)), to(rgba(0, 0, 0, 0.2))), url('/tema1ka/img/kva4.jwebp');
+    background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), url('/tema1ka/img/kva4.webp');
+  }
+}
+
+
 
 //figure.testimonial {
 //  position: relative;