fix: img attribute

add loading/decoding/fetchpriority

remove alt for decorative images
This commit is contained in:
ZhenShuo Leo
2025-09-18 13:42:22 +08:00
parent e6968d877f
commit 9eebb5b2aa
8 changed files with 21 additions and 10 deletions

View File

@@ -85,7 +85,7 @@
<figure class="not-prose flex-none relative overflow-hidden {{ $figureClasses }} thumbnail--simple"> <figure class="not-prose flex-none relative overflow-hidden {{ $figureClasses }} thumbnail--simple">
<img <img
src="{{ . }}" src="{{ . }}"
alt="{{ $.Title }}" alt=""
loading="lazy" loading="lazy"
decoding="async" decoding="async"
class="not-prose absolute inset-0 w-full h-full object-cover"> class="not-prose absolute inset-0 w-full h-full object-cover">

View File

@@ -56,7 +56,7 @@
<figure class="not-prose flex-none relative overflow-hidden thumbnail--related"> <figure class="not-prose flex-none relative overflow-hidden thumbnail--related">
<img <img
src="{{ . }}" src="{{ . }}"
alt="{{ $.Title }}" alt=""
loading="lazy" loading="lazy"
decoding="async" decoding="async"
fetchpriority="low" fetchpriority="low"

View File

@@ -60,10 +60,9 @@
<figure class="not-prose flex-none relative overflow-hidden thumbnail--card"> <figure class="not-prose flex-none relative overflow-hidden thumbnail--card">
<img <img
src="{{ . }}" src="{{ . }}"
alt="{{ $.Title }}" alt=""
loading="lazy" loading="lazy"
decoding="async" decoding="async"
fetchpriority="low"
class="not-prose absolute inset-0 w-full h-full object-cover"> class="not-prose absolute inset-0 w-full h-full object-cover">
</figure> </figure>
{{ end }} {{ end }}

View File

@@ -78,7 +78,7 @@
<figure class="not-prose flex-none relative overflow-hidden {{ $figureClasses }} thumbnail--simple"> <figure class="not-prose flex-none relative overflow-hidden {{ $figureClasses }} thumbnail--simple">
<img <img
src="{{ . }}" src="{{ . }}"
alt="{{ $.Title }}" alt=""
loading="lazy" loading="lazy"
decoding="async" decoding="async"
class="not-prose absolute inset-0 w-full h-full object-cover"> class="not-prose absolute inset-0 w-full h-full object-cover">

View File

@@ -61,7 +61,10 @@
<img <img
id="background-image" id="background-image"
src="{{ . }}" src="{{ . }}"
alt="Background Image" alt=""
loading="eager"
decoding="async"
fetchpriority="high"
class="absolute inset-0 w-full h-full object-cover"> class="absolute inset-0 w-full h-full object-cover">
<div <div
class="absolute inset-0 bg-gradient-to-t from-neutral dark:from-neutral-800 to-transparent mix-blend-normal"></div> class="absolute inset-0 bg-gradient-to-t from-neutral dark:from-neutral-800 to-transparent mix-blend-normal"></div>

View File

@@ -45,7 +45,7 @@
<div class="overflow-hidden h-36 md:h-56 lg:h-72"> <div class="overflow-hidden h-36 md:h-56 lg:h-72">
<img <img
src="{{ . }}" src="{{ . }}"
alt="{{ $.Title }}" alt=""
loading="eager" loading="eager"
decoding="async" decoding="async"
fetchpriority="high" fetchpriority="high"

View File

@@ -51,7 +51,13 @@
{{ with $featuredURL }} {{ with $featuredURL }}
<figure> <figure>
<img class="w-full rounded-lg single_hero_round nozoom" alt="{{ $alt }}" src="{{ . }}"> <img
src="{{ . }}"
alt="{{ $alt }}"
loading="eager"
decoding="async"
fetchpriority="high"
class="w-full rounded-lg single_hero_round nozoom">
{{ if $caption }} {{ if $caption }}
<figcaption class="text-sm text-neutral-700 dark:text-neutral-400 hover:underline text-center"> <figcaption class="text-sm text-neutral-700 dark:text-neutral-400 hover:underline text-center">
{{ $caption | markdownify }} {{ $caption | markdownify }}

View File

@@ -84,7 +84,7 @@
<div class="overflow-hidden rounded-md h-36 md:h-56 lg:h-72 nozoom"> <div class="overflow-hidden rounded-md h-36 md:h-56 lg:h-72 nozoom">
<img <img
src="{{ . }}" src="{{ . }}"
alt="{{ $.Title }}" alt=""
loading="eager" loading="eager"
decoding="async" decoding="async"
fetchpriority="high" fetchpriority="high"
@@ -98,7 +98,10 @@
<img <img
id="background-image-main" id="background-image-main"
src="{{ . }}" src="{{ . }}"
alt="Background Image" alt=""
loading="eager"
decoding="async"
fetchpriority="high"
class="absolute inset-0 h-full w-full object-cover"> class="absolute inset-0 h-full w-full object-cover">
{{ end }} {{ end }}
<div <div