diff --git a/DEPENDENCIES.md b/DEPENDENCIES.md
index ca1e606..8c9339b 100644
--- a/DEPENDENCIES.md
+++ b/DEPENDENCIES.md
@@ -1,20 +1,45 @@
-## Site generation
+# Site generation
 
-### Website
+## Static Site Generator
 
-* python3 
 * pelican with Markdown support (`pip install pelican[markdown]`)
+* python3 
+
+## Pelican Plugins
+
+Pip packages
+
 * pelican-yaml-metadata
-* Markdown
+* pelican-image-process
 
-### Event list
+?* [Optimize Images](https://github.com/minchinweb/minchin.pelican.plugins.optimize_images)
 
-Python:
+## Site Display
+
+* Pico CSS (Yohn's fork)
+* Linux Biolinum (font)
+
+# On Production Server
+
+* php (aktuell 8.1)
+* database driver, e.g. pdo_sqlite
+* PHPMailer (included in source)
+
+
+# Content generation
+
+## List of books and texts
+
+* ?
+
+## Event list
+
+Python packages
 
 * caldav
 * vobject
 
-### Favicon
+## Favicon
 
 Linux packages:
 
@@ -22,12 +47,3 @@ Linux packages:
 * pngquant
 * image-magick
 
-## On Production Server
-
-* php
-* database driver, e.g. pdo_sqlite
-* PHPMailer (included in source)
-
-## Site Display
-
-* Pico CSS (Yohn's fork)
\ No newline at end of file
diff --git a/content/posts/sonstiges/rpg-spielhilfen.md b/content/posts/sonstiges/rpg-spielhilfen.md
index e621f57..5f80b34 100644
--- a/content/posts/sonstiges/rpg-spielhilfen.md
+++ b/content/posts/sonstiges/rpg-spielhilfen.md
@@ -15,27 +15,30 @@ slug: rpg-spielhilfen
 save_as: sonstiges/rpg-spielhilfen.html
 url: sonstiges/rpg-spielhilfen.html
 featured_image: 
-  - pic: ../images/sonstiges/cover-cthulhu-mittelalter.jpg
+  - pic: ../images/sonstiges/motif-dice.jpg
+    credit: Varun Gaba | unsplash.com
+    credit_link: https://unsplash.com/photos/blue-and-white-dice-on-white-surface-f5eKYTkxhHQ
 order: 70
 ---
 
 
+
 ## DSA
 
-![Am Großen Fluss](../images/sonstiges/cover-am-grossen-fluss.jpg)
+![Am Großen Fluss](../images/sonstiges/cover-am-grossen-fluss.jpg){: .image-process-featured}
 
-![Aus Licht und Traum](../images/sonstiges/cover-aus-licht-und-traum.jpg)
+![Aus Licht und Traum](../images/sonstiges/cover-aus-licht-und-traum.jpg){: .image-process-featured}
 
-![Reich des Horas (DSA)](../images/sonstiges/cover-reich-des-horas.jpg)
+![Reich des Horas (DSA)](../images/sonstiges/cover-reich-des-horas.jpg){: .image-process-featured}
 
-![Efferds Wogen](../images/sonstiges/cover-efferds-wogen.jpg)
+![Efferds Wogen](../images/sonstiges/cover-efferds-wogen.jpg){: .image-process-featured}
 
-![Aventurischer Bote](../images/sonstiges/logo-aventurischer-bote.png)
+![Aventurischer Bote](../images/sonstiges/cover-aventurischer-bote-1.jpg){: .image-process-featured}
 
 ## Myranor
 
-![Myranische Meere](../images/sonstiges/cover-myranische-meere.jpg)
+![Myranische Meere](../images/sonstiges/cover-myranische-meere.jpg){: .image-process-featured}
 
 ## Call of Cthulhu
 
-![Cthulhu Mittelalter: Die dunklen Jahre](../images/sonstiges/cover-cthulhu-mittelalter.jpg)
\ No newline at end of file
+![Cthulhu Mittelalter: Die dunklen Jahre](../images/sonstiges/cover-cthulhu-mittelalter.jpg){: .image-process-featured}
\ No newline at end of file
diff --git a/pelicanconf.py b/pelicanconf.py
index 00740d5..1df19f5 100644
--- a/pelicanconf.py
+++ b/pelicanconf.py
@@ -21,7 +21,7 @@ PATH = "content"
 ARTICLE_PATHS = ["posts"]
 PAGE_PATHS = ["pages"]
 STATIC_PATHS = ["images", "favicon", "php"]
-# TEMPLATE_PAGES = { 'templates/cform.html': 'cform.html', }
+#STATIC_EXCLUDES = ["unoptimized-images"]
 
 DIRECT_TEMPLATES = ['index', 'tags']
 IGNORE_FILES = ['**/.*', '__pycache__', 'favicon-from-svg.sh', '*.metadata']
@@ -111,12 +111,24 @@ SOCIAL = (
 
 
 ###############################################################################
-#                           Technical Settings                                #
+#                           Plugins and Extensions                            # 
 ###############################################################################
 
-PLUGINS = ["pelican.plugins.yaml_metadata"]
+# jinja2 extensions
 JINJA_ENVIRONMENT = { "extensions": ["jinja2.ext.debug", "jinja2.ext.do"] }
 
+# pelican plugins
+PLUGINS = ["pelican.plugins.yaml_metadata", "pelican.plugins.image_process", "minchin.pelican.plugins.optimize_images"]
+
+# plugin settings for optimize-images
+OPTIMIZE_IMAGES_DEV_MODE = True     # disable optimization in dev mode
+
+# plugin settings for image-process
+IMAGE_PROCESS = {
+    "featured": ["scale_in 550 100% True"],
+    "card": ["scale_in 350 100% True"]
+}
+
 
 
 
diff --git a/theme/templates/article.html b/theme/templates/article.html
index e8c6610..c38081f 100644
--- a/theme/templates/article.html
+++ b/theme/templates/article.html
@@ -14,47 +14,39 @@
 {% endblock content_header %} 
 
 {% block content_body %}
-<div id="article-body">
-  {% if article.featured_image is defined %}
-    {% from 'includes/featured_image.html' import fi %}
-    {% set i = article.featured_image[0] %}
-    {{ fi(i.pic, i.link, i.text, i.credit) }}
+<article id="article-body">
+  <div class="body-column-text">
+  {% if article.content | length is not eq(0) %}{{ article.content }}{% endif %}
+  {% if article.klappentext %}
+    <h2>Klappentext</h2>
+    <blockquote>{{ article.klappentext }}</blockquote>
   {% endif %} 
-   
-  {% if article.klappentext is defined %}
-  <div class="klappentext">
-    <blockquote>
-      <h2>Klappentext</h2>
-      <p>{{ article.klappentext }}</p>
-    </blockquote>
-  </div>
-  {% endif %} {% if article.content | length is not eq(0) %}
-  <div>{{ article.content }}</div>
-  {% endif %}
-  <div>
-    <hr />
-    <h2>Details</h2>
-    <ul class="article-stats">
+  </div> 
+  <div class="body-column-img">
+  {% if article.featured_image is defined %}
+    {% from 'includes/macros.html' import fi %}
+    {% set i = article.featured_image[0] %}
+    {{ fi(i.pic, i.link, i.text, i.title, i.credit, i.credit_link) }}
+  {% endif %} 
+    <div>
+      <h2>Details</h2>
+      <ul class="article-stats">
       {% if article.reihe is defined %}
-      <li>aus der Reihe {{ article.reihe }}</li>
-      {% endif %} {% if article.tags is defined %}
-      <li>
-        Schlagworte: {% for tag in article.tags %}<a href="/tag/{{ tag }}"
-          >{{ tag }}</a
-        >, {% endfor %}
-      </li>
-      {% endif %} {% if article.isbn is defined %}
-      <li>ISBN: {{ article.isbn }}</li>
-      {% endif %} {% if article.verlag is defined %}
-      <li>erschienen bei: {{ article.verlag }}</li>
+        <li>aus der Reihe {{ article.reihe }}</li>
+      {% endif %} 
+      {% if article.tags is defined %}
+        <li>Schlagworte: {% for tag in article.tags %}{% if not loop.first %}, {% endif%}<a href="/tag/{{ tag }}">{{ tag }}</a>{% endfor %}</li>
+      {% endif %} 
+      {% if article.isbn is defined %}
+        <li>ISBN: {{ article.isbn }}</li>
+      {% endif %} 
+      {% if article.verlag is defined %}
+        <li>erschienen bei: {{ article.verlag }}</li>
       {% endif %}
     </ul>
   </div>
-</div>
-<hr />
+</article>
 <footer class="article-footer">
-  <a href="/{{ article.save_as.split('/')[:-1] | join('/') }}/"
-    >&larr; {{ article.category }}</a
-  >
+  <a href="/{{ article.save_as.split('/')[:-1] | join('/') }}/">&larr; {{ article.category }}</a>
 </footer>
 {% endblock content_body %}
diff --git a/theme/templates/cards.html b/theme/templates/cards.html
index 23e4bc6..338e5a8 100644
--- a/theme/templates/cards.html
+++ b/theme/templates/cards.html
@@ -11,10 +11,10 @@
       <h3><a href="{{ SITEURL }}/{{ article.save_as }}" title="{{ article.title }}">{{ article.title }}</a></h3>
     </header>
     <div class="card-body">
-    {% from 'includes/featured_image.html' import fi %}
+    {% from 'includes/macros.html' import ci %}
     {% if article.featured_image %}
       {% set i = article.featured_image[0] %}
-      {{ fi(i.pic, i.link | default("/" + article.save_as), i.alt | default("Titelbild von " + article.title), i.title | default(article.title), i.credit) }}
+      {{ ci(i.pic, i.link | default("/" + article.save_as), i.alt | default("Titelbild von " + article.title), i.title | default(article.title), i.credit, i.credit_link) }}
     {% endif %}
     </div>
   </article>
diff --git a/theme/templates/includes/featured_image.html b/theme/templates/includes/featured_image.html
deleted file mode 100644
index 84ff603..0000000
--- a/theme/templates/includes/featured_image.html
+++ /dev/null
@@ -1,8 +0,0 @@
-{% macro fi(pic, link='', alt='', title='', credit='') %}
-<div class="featured-image">
-  <figure>
-    {% if link %}<a href="{{ link }}"{% if alt %} alt="{{ alt }}"{% endif %}>{% endif %}<img src="{{ pic }}" title="{{ title }}"/>{% if link %}</a>{% endif %}
-    {% if credit %}<figcaption>Bild: {{ credit }}</figcaption>{% endif %}
-  </figure>
-</div>
-{% endmacro %}
diff --git a/theme/templates/includes/macros.html b/theme/templates/includes/macros.html
new file mode 100644
index 0000000..e04b5e7
--- /dev/null
+++ b/theme/templates/includes/macros.html
@@ -0,0 +1,19 @@
+{# featured image macro #}
+{% macro fi(pic, link='', alt='', title='', credit='', credit_link='') %}
+<div class="featured-image">
+  <figure>
+    {% if link %}<a href="{{ link }}"{% if title %} title="{{ title }}"{% endif %}>{% endif %}<img class="image-process-featured" src="{{ pic }}"{% if alt %} alt="{{ alt }}"{% endif %}/>{% if link %}</a>{% endif %}
+    {% if credit %}<figcaption>{% if credit_link %}<a href="{{ credit_link }}" alt="Bildquelle: {{ credit }}" target="_blank">{% endif %}{{ credit }}{% if credit_link %}</a>{% endif %}</figcaption>{% endif %}
+  </figure>
+</div>
+{% endmacro %}
+
+{# card image macro #}
+{% macro ci(pic, link='', alt='', title='', credit='', credit_link='') %}
+<div class="card-image">
+  <figure>
+    {% if link %}<a href="{{ link }}"{% if title %} title="{{ title }}"{% endif %}>{% endif %}<img class="image-process-card" src="{{ pic }}"{% if alt %} alt="{{ alt }}"{% endif %}/>{% if link %}</a>{% endif %}
+    {% if credit %}<figcaption>{% if credit_link %}<a href="{{ credit_link }}" alt="Bildquelle: {{ credit }}" target="_blank">{% endif %}{{ credit }}{% if credit_link %}</a>{% endif %}</figcaption>{% endif %}
+  </figure>
+</div>
+{% endmacro %}
diff --git a/theme/templates/index.html b/theme/templates/index.html
index 63a34e7..7f8d5e1 100644
--- a/theme/templates/index.html
+++ b/theme/templates/index.html
@@ -1,22 +1,17 @@
 {% extends "base.html" %}
 {% block content_body %} 
 {% for p in pages if p.title == "Index" %} 
-{% set lr = cycler("row", "row-reverse") %} 
-{% if p.featured is defined %}
-<div class="index-featured"></div>
-{% endif %} 
-{% from 'includes/featured_image.html' import fi %}
-{% for c in p.index_cards %}
-<div class="index" style="flex-direction: {{ lr.next() }};">
-  {{ fi( c.pic, c.link, c.text, c.credit) }}
-  <p>
-    {{ c.text }}<br />
-    <span class="index-link">
-      <a href="{{ c.link }}">{{ c.more }}</a>
-    </span>
-  </p>
-</div>
-{% endfor %} 
+  {% set lr = cycler("row", "row-reverse") %} 
+  {% if p.featured is defined %}
+    <div class="index-featured"></div>
+  {% endif %} 
+  {% from 'includes/macros.html' import fi %}
+  {% for i in p.index_cards %}
+    <div class="index" style="flex-direction: {{ lr.next() }};">
+    {{ fi( i.pic, i.link, i.alt, i.title, i.credit, i.credit_link) }}
+      <p><a class="index-link" href="{{ i.link }}">{{ i.alt }}</a></p>
+    </div>
+  {% endfor %} 
 {% endfor %} 
 {% include "includes/subscribe.html" %} 
 {% include "includes/unsubscribe.html" %} 
diff --git a/theme/templates/page.html b/theme/templates/page.html
index 65aa472..a08b525 100644
--- a/theme/templates/page.html
+++ b/theme/templates/page.html
@@ -12,9 +12,9 @@
 {% block content_body %}
 <div id="page-body">
   {% if page.featured_image is defined %}
-    {% from 'includes/featured_image.html' import fi %}
+    {% from 'includes/macros.html' import fi %}
     {% set i = page.featured_image[0] %}
-    {{ fi(i.pic, i.link, i.text, i.credit) }}
+    {{ fi(i.pic, i.link, i.text, i.alt, i.credit, i.credit_link) }}
   {% endif %} 
   
   {{ page.content }}
diff --git a/theme/templates/wide-cards.html b/theme/templates/wide-cards.html
index 443ce13..868ef6b 100644
--- a/theme/templates/wide-cards.html
+++ b/theme/templates/wide-cards.html
@@ -20,8 +20,8 @@ wide_card) | list | first is defined %}
       <ul>
         {% for image in wcard.card_images %}
         <li class="wcard-image" style="animation-delay: {{ loop.index0 * 5 }}s;">
-          <a href="{{ SITEURL }}/{{ image.post }}">
-            <img src="{{ SITEURL }}/{{ image.pic }}" alt="{{ image.alt }}" {%- if image.y_offset is defined %} style="bottom: {{ image.y_offset }};" {% endif %} />
+          <a href="{{ SITEURL }}/{{ image.link }}">
+            <img class="image-process-featured" src="{{ SITEURL }}/{{ image.pic }}" alt="{{ image.alt }}" {%- if image.y_offset is defined %} style="bottom: {{ image.y_offset }};" {% endif %} />
           </a>
           <div class="wcard-tooltip">
             <p>{{ image.alt }}</p>