optimize images

site/_includes/-header.njk

@@ -12,7 +12,7 @@
   </nav>
   {%- if cover %}
   <div class="cover">
-    <img src="{{ cover | url }}" alt="" loading="eager">
+    {% image cover, "", "var(--content-width)", "eager" %}
     <h1>{{ title }}{% if rssUrl and page.url !== '/' %}<a class="rss" href="{{ rssUrl }}"></a>{% endif %}</h1>
   </div>
   {%- else %}

site/_includes/components/collectionList.njk

@@ -6,7 +6,7 @@
       {%- if (limit === 0 or loop.index <= limit) -%}
         <li>
           {% if item.data.cover %}
-            <img class="collection-cover" src="{{ item.data.cover | url }}">
+          {% image item.data.cover, "", "(min-width: 60rem) calc(0.5 * var(--content-width)), var(--content-width)", "lazy", "collection-cover", item.page.inputPath %}
           {% endif %}
           <a href="{{item.url}}">{{item.data.title}}</a>
           {%- if item.data.date -%}

site/_includes/css/site.css

@@ -128,6 +128,14 @@ main p img {
   max-width: 100%;
 }
 
+:where(img[width]) {
+  width: auto;
+}
+
+:where(img[width][height]) {
+  height: auto;
+}
+
 section:nth-child(n + 2) {
   margin-top: 1rem;
 }
@@ -405,7 +413,7 @@ nav [aria-current] {
   flex-direction: column;
   justify-content: end;
   min-height: 20rem;
-  > img {
+  img {
     position: absolute;
     top: 0;
     left: 0;