minify images even more

_data/organizers.yml

@@ -1,9 +1,9 @@
 - 
 #  group: "Comunidades que colaboran"
   elements: 
-    - {name: "SVQJUG", link: "http://www.meetup.com/SVQJUG", imageUrl: "svqjug.png", width: "120px"}
-    - {name: "NSCoder Night Sevilla", link: "http://nscoder-sev.tumblr.com/", imageUrl: "nsc_sevng.png", width: "120px"}
-    - {name: "GDG Sevilla", link: "https://plus.google.com/117186888160178861350/posts/", imageUrl: "gdg_sevilla.png", width: "120px"}
-    - {name: "PHP Sevilla", link: "http://www.meetup.com/PHP-Sevilla/", imageUrl: "php.jpeg", width: "120px"}
-    - {name: "GeoInquietos", link: "https://www.meetup.com/es-ES/Geoinquietos-Sevilla/", imageUrl: "geoinquietos.jpeg", width: "120px"}
-    - {name: "Ping a Programadoras", link: "https://www.meetup.com/es-ES/Ping-a-mujeres-programadoras/", imageUrl: "logo14.png", width: "120px"}
+    - {name: "SVQJUG", link: "http://www.meetup.com/SVQJUG", spriteId: "sprite-svqjug", width: "120px"}
+    - {name: "NSCoder Night Sevilla", link: "http://nscoder-sev.tumblr.com/", spriteId: "sprite-nsc_sevng", width: "120px"}
+    - {name: "GDG Sevilla", link: "https://plus.google.com/117186888160178861350/posts/", spriteId: "sprite-gdg_sevilla", width: "120px"}
+    - {name: "PHP Sevilla", link: "http://www.meetup.com/PHP-Sevilla/", spriteId: "sprite-php", width: "120px"}
+    - {name: "GeoInquietos", link: "https://www.meetup.com/es-ES/Geoinquietos-Sevilla/", spriteId: "sprite-geoinquietos", width: "120px"}
+    - {name: "Ping a Programadoras", link: "https://www.meetup.com/es-ES/Ping-a-mujeres-programadoras/", spriteId: "sprite-logo14", width: "120px"}

_includes/organizers.html

@@ -8,8 +8,8 @@ <h5>{{ organizer.group }}</h5>
             <ul class="list-inline">
                 {% for element in organizer.elements %}
                 <li {% if element.width != null %}style="width: {{ element.width }};"{% endif %}>
-                    <a href="{{ element.link }}" target="_blank">
-                        <img src="{{ site.baseurl }}/img/organizers/{{ element.imageUrl }}" title="{{ element.description }}" alt="{{ element.name }}">
+                    <a href="{{ element.link }}" target="_blank" class="organizers-sprite {{element.spriteId}}">
+                        <p class=".organizers-sprite .{{element.spriteId}}"></p>
                     </a>
                 </li>
                 {% endfor %}

_sass/partials/_organizers.scss

@@ -22,4 +22,51 @@
             filter: grayscale(0);
         }
     }
-}
+}
+.organizers-sprite {
+    background-image: url(/img/organizers/organizers-sprite2.png);
+    background-repeat: no-repeat;
+    display: block;
+}
+
+.sprite {
+    background-image: url(spritesheet.png);
+    background-repeat: no-repeat;
+    display: block;
+}
+
+.sprite-gdg_sevilla {
+    width: 120px;
+    height: 78px;
+    background-position: -5px -5px;
+}
+
+.sprite-geoinquietos {
+    width: 115px;
+    height: 120px;
+    background-position: -135px -5px;
+}
+
+.sprite-logo14 {
+    width: 120px;
+    height: 120px;
+    background-position: -5px -135px;
+}
+
+.sprite-nsc_sevng {
+    width: 120px;
+    height: 120px;
+    background-position: -135px -135px;
+}
+
+.sprite-php {
+    width: 120px;
+    height: 80px;
+    background-position: -260px -5px;
+}
+
+.sprite-svqjug {
+    width: 100px;
+    height: 180px;
+    background-position: -265px -95px;
+}