♿ mobile images

templates/index.html

@@ -14,9 +14,18 @@
     </div>
 
     <div class="comic-image">
+        {% if comic.mobile_filename %}
+        <picture>
+            <source media="(max-width: 768px)" srcset="{{ url_for('static', filename='images/comics/' + comic.mobile_filename) }}">
+            <img src="{{ url_for('static', filename='images/comics/' + comic.filename) }}"
+                 alt="{{ comic.title if comic.title else '#' ~ comic.number }}"
+                 title="{{ comic.alt_text }}">
+        </picture>
+        {% else %}
         <img src="{{ url_for('static', filename='images/comics/' + comic.filename) }}"
              alt="{{ comic.title if comic.title else '#' ~ comic.number }}"
              title="{{ comic.alt_text }}">
+        {% endif %}
     </div>
 
     <div class="comic-navigation">