1
0
Fork 0
mirror of https://github.com/GuerillaStudio/now-playing synced 2024-12-20 20:21:55 +00:00

Simplify image over-optimization
All checks were successful
ci/woodpecker/push/woodpecker Pipeline was successful

This commit is contained in:
Tixie Salander 2024-12-12 14:08:48 +01:00
parent af5e0d7d4d
commit ecc2f9e2df
No known key found for this signature in database
3 changed files with 13 additions and 20 deletions

View file

@ -22,7 +22,7 @@ disableKinds = ["taxonomy"]
suffixtext = "for providing an eco-responsible and distributed web hosting."
[imaging]
quality = 95
quality = 90
[security]
[security.funcs]
getenv = [ "^HUGO_", "CONTEXT", "URL", "BASE_URL", "UMAMI_DOMAIN", "UMAMI_ID" ]

View file

@ -29,21 +29,14 @@
<div class="album-layout">
<picture class="album-cover">
{{ $original := resources.Get .Params.cover }}
{{ $coverSmall := $original.Resize "x250 webp" }}
{{ $coverSmallBackup := $original.Resize "x250 jpeg q69" }}
{{ $coverMedium := $original.Resize "x500 webp" }}
{{ $coverMediumBackup := $original.Resize "x500 jpeg q69" }}
{{ $coverBig := $original.Resize "x1000 webp" }}
{{ $coverBigBackup := $original.Resize "x1000 jpeg q69" }}
{{ $placeholder := $original.Resize "x15" }}
<source srcset="{{ $coverSmall.Permalink }} 1x, {{ $coverMedium.Permalink }} 2x" media="(max-width: 427px)" type="image/webp">
<source srcset="{{ $coverMedium.Permalink }} 1x, {{ $coverBig.Permalink }} 2x" media="(max-width: 480px)" type="image/webp">
<source srcset="{{ $coverSmall.Permalink }} 1x, {{ $coverMedium.Permalink }} 2x" media="(max-width: 647px)" type="image/webp">
<source srcset="{{ $coverMedium.Permalink }} 1x, {{ $coverBig.Permalink }} 2x" media="(min-width: 647px)" type="image/webp">
<source srcset="{{ $coverSmallBackup.Permalink }} 1x, {{ $coverMediumBackup.Permalink }} 2x" media="(max-width: 427px)" type="image/jpeg">
<source srcset="{{ $coverMediumBackup.Permalink }} 1x, {{ $coverBigBackup.Permalink }} 2x" media="(max-width: 480px)" type="image/jpeg">
<source srcset="{{ $coverSmallBackup.Permalink }} 1x, {{ $coverMediumBackup.Permalink }} 2x" media="(max-width: 647px)" type="image/jpeg">
<source srcset="{{ $coverMediumBackup.Permalink }} 1x, {{ $coverBigBackup.Permalink }} 2x" media="(min-width: 647px)" type="image/jpeg">
{{ $coverSmall := $original.Resize "x250 jpeg" }}
{{ $coverMedium := $original.Resize "x500 jpeg" }}
{{ $coverBig := $original.Resize "x1000 jpeg" }}
{{ $placeholder := $original.Resize "x5 jpeg" }}
<source srcset="{{ $coverSmall.Permalink }} 1x, {{ $coverMedium.Permalink }} 2x" media="(max-width: 427px)" type="image/jpeg">
<source srcset="{{ $coverMedium.Permalink }} 1x, {{ $coverBig.Permalink }} 2x" media="(max-width: 480px)" type="image/jpeg">
<source srcset="{{ $coverSmall.Permalink }} 1x, {{ $coverMedium.Permalink }} 2x" media="(max-width: 647px)" type="image/jpeg">
<source srcset="{{ $coverMedium.Permalink }} 1x, {{ $coverBig.Permalink }} 2x" media="(min-width: 647px)" type="image/jpeg">
<img
class="album-cover__visual"
width="500"
@ -52,7 +45,7 @@
background-image: url(data:{{ $placeholder.MediaType }};base64,{{ $placeholder.Content | base64Encode }});
view-transition-name: album_cover_{{ .File.BaseFileName }};
"
src="{{ $coverMediumBackup.Permalink }}"
src="{{ $coverMedium.Permalink }}"
loading="lazy"
alt="{{ .Title }} album's cover"
title=":)"

View file

@ -2,9 +2,9 @@
<div class="grid grid-catalog">
{{ range sort $pages.Pages "Date" "desc" }}
{{ $original := resources.Get .Params.cover }}
{{ $cover := $original.Resize "x320" }}
{{ $cover2x := $original.Resize "x640" }}
{{ $placeholder := $cover.Resize "x1" }}
{{ $cover := $original.Resize "x320 jpeg" }}
{{ $cover2x := $original.Resize "x640 jpeg" }}
{{ $placeholder := $cover.Resize "x1 jpeg" }}
<div class="catalog-item">
<a class="catalog-item__content" href="{{ .Permalink }}">
<h2 class="catalog-item__album">{{ .Title }}</h2>