lazy loading images and minify css

11 files changed, 27 insertions, 27 deletions

diff --git a/templates/detail/detail.html b/templates/detail/detail.html
index 7866b97..e53dc77 100644
--- a/templates/detail/detail.html
+++ b/templates/detail/detail.html
@@ -23,7 +23,7 @@
 <div style="background-image: url('{{ anime.cover }}')" class="relative bg-center bg-cover h-32 lg:h-96 my-4 rounded-lg" >
     <div class="absolute inset-0" style="background: linear-gradient(45deg, rgb(8, 8, 8) 15%, transparent 60%), linear-gradient(0deg, rgb(8, 8, 8) 0%, transparent 60%);"></div>
     <div class="w-4/12 lg:w-2/12 absolute px-2 lg:px-8 top-16 lg:top-48">
-        <img src="{{ anime.image }}" alt="{{ anime.title.english }}" class="rounded-lg" class="w-full h-full rounded-lg object-cover"/>
+        <img loading="lazy" src="{{ anime.image }}" alt="{{ anime.title.english }}" class="rounded-lg" class="w-full h-full rounded-lg object-cover"/>
         <a href="{% if anime.id %}{% url "watch:watch" anime.id %}?forward=detail{% endif %}" class="bg-{{ user.preferences.accent_colour }}-600 hover:bg-{{ user.preferences.accent_colour }}-700 text-white text-xs sm:text-sm font-bold py-1 px-2 sm:py-2 sm:px-4 rounded-lg my-2 flex flex-row items-center justify-center gap-1">
             <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-4">
                 <path fill-rule="evenodd" d="M4.5 5.653c0-1.427 1.529-2.33 2.779-1.643l11.54 6.347c1.295.712 1.295 2.573 0 3.286L7.28 19.99c-1.25.687-2.779-.217-2.779-1.643V5.653Z" clip-rule="evenodd" />
@@ -330,7 +330,7 @@
                     {% for character in anime.characters %}
                     <div class="w-full lg:w-1/2 px-4 py-2 flex justify-between">
                         <div class="flex flex-row gap-2 items-center">
-                            <img src="{{ character.image }}" alt="{{ character.name }}" class="rounded-full w-16 h-16 object-cover"/>
+                            <img loading="lazy"loading="lazy"src="{{ character.image }}" alt="{{ character.name }}" class="rounded-full w-16 h-16 object-cover"/>
                             <div class="flex flex-col gap-2">
                                 <span class="font-bold">
                                     {% if user.preferences.character_name_language == "romaji" %}
@@ -355,7 +355,7 @@
                                     </span>
                                     <span class="capitalize">{{ voice_actor.language }}</span>
                                 </div>
-                                <img src="{{ voice_actor.image }}" alt="{{ voice_actor.name }}" class="rounded-full w-16 h-16 object-cover"/>
+                                <img loading="lazy" src="{{ voice_actor.image }}" alt="{{ voice_actor.name }}" class="rounded-full w-16 h-16 object-cover"/>
                             </div>
                             {% endfor %}
                         </div>
@@ -368,7 +368,7 @@
                 <a href="{% url "watch:watch_episode" anime.id episode.number %}" class="w-full lg:w-1/2 px-2 mb-2 episode-item">
                     <div class="flex flex-col lg:flex-row w-full bg-neutral-950 rounded hover:bg-{{ user.preferences.accent_colour }}-600 hover:bg-opacity-30 p-2 gap-4">
                         <div class="w-full lg:w-auto lg:flex-shrink-0">
-                            <img src="{% if episode.metadata.image %}{{ episode.metadata.image }}{% else %}{{ anime.cover}}{% endif %}" alt="{{ episode.title }}" class="w-full lg:w-48 lg:h-28 object-cover rounded-lg"/>
+                            <img loading="lazy" src="{% if episode.metadata.image %}{{ episode.metadata.image }}{% else %}{{ anime.cover}}{% endif %}" alt="{{ episode.title }}" class="w-full lg:w-48 lg:h-28 object-cover rounded-lg"/>
                         </div>
                         <div class="flex flex-col gap-2">
                             <h2 class="font-bold">{{episode.number}}. {% if episode.metadata.title %}{{ episode.metadata.title }}{% else %}{{ episode.title }}{% endif %}</h2>
@@ -462,7 +462,7 @@
                 {% for related in related|slice:":5" %}
                 {% if related.type == "MANGA" or related.type == "NOVEL" %}
                 <div onClick="showToast('{% if related.type == "MANGA" %}Manga{% else %}Novel{% endif %} reading is not supported yet!', false)" class="cursor-pointer flex flex-row w-full gap-4 bg-white bg-opacity-10 p-2 rounded hover:bg-{{ user.preferences.accent_colour }}-600 hover:bg-opacity-30">        
-                    <img src="{{ related.image }}" alt="{{ related.title.english }}" class="rounded-lg w-12 h-16 object-cover"/>
+                    <img loading="lazy" src="{{ related.image }}" alt="{{ related.title.english }}" class="rounded-lg w-12 h-16 object-cover"/>
                     <div class="flex flex-col gap-2">
                         <span class="font-bold flex gap-2 flex-row items-center">
                             {% if related.status == "Ongoing" %}
@@ -523,7 +523,7 @@
                 {% endif %}
                 {% if related.type == "TV" or related.type == "MOVIE" or related.type == "OVA" or related.type == "ONA" or related.type == "SPECIAL" or related.type == "TV_SHORT" %}
                 <a href="{% if not viaMal %}{% url 'watch:watch' related.id %}{% else %}{% url "watch:watch_via_zid" related.zid %}{% endif %}" class="flex flex-row w-full gap-4 bg-white bg-opacity-10 p-2 rounded hover:bg-{{ user.preferences.accent_colour }}-600 hover:bg-opacity-30">        
-                    <img src="{{ related.image }}" alt="{{ related.title.english }}" class="rounded-lg w-12 h-16 object-cover"/>
+                    <img loading="lazy" src="{{ related.image }}" alt="{{ related.title.english }}" class="rounded-lg w-12 h-16 object-cover"/>
                     <div class="flex flex-col gap-2">
                         <span class="font-bold flex gap-2 flex-row items-center">
                             {% if related.status == "Ongoing" %}
@@ -604,7 +604,7 @@
                 {% for recommendation in recommendations|slice:":10" %}
                 {% if recommendation.id or recommendation.zid %}
                 <a href="{% if not viaMal %}{% url 'watch:watch' recommendation.id %}{% else %}{% url "watch:watch_via_zid" recommendation.zid %}{% endif %}" class="flex flex-row w-full gap-4 bg-white bg-opacity-10 p-2 rounded hover:bg-{{ user.preferences.accent_colour }}-600 hover:bg-opacity-30">        
-                    <img src="{{ recommendation.image }}" alt="{{ recommendation.title.english }}" class="rounded-lg w-12 h-16 object-cover"/>
+                    <img loading="lazy" src="{{ recommendation.image }}" alt="{{ recommendation.title.english }}" class="rounded-lg w-12 h-16 object-cover"/>
                     <div class="flex flex-col gap-2 max-w-[calc(100%-4rem)]">
                         <span class="font-bold flex gap-2 flex-row items-center">
                             {% if recommendation.status == "Ongoing" %}
diff --git a/templates/home/schedule.html b/templates/home/schedule.html
index 257e9ff..9947727 100644
--- a/templates/home/schedule.html
+++ b/templates/home/schedule.html
@@ -85,7 +85,7 @@
                     </span>
                 </div>
             </div>
-            <img src="{{ anime.media.coverImage.medium }}" alt="{{ anime.media.title.romaji }}" class="rounded w-16 h-24" />
+            <img loading="lazy" src="{{ anime.media.coverImage.medium }}" alt="{{ anime.media.title.romaji }}" class="rounded w-16 h-24" />
         </div>
     </a>
     {% endfor %}
@@ -126,7 +126,7 @@
                     </span>
                 </div>
             </div>
-            <img src="{{ next_airing.media.coverImage.medium }}" alt="{{ next_airing.media.title.romaji }}" class="rounded w-16 h-24" />
+            <img loading="lazy" src="{{ next_airing.media.coverImage.medium }}" alt="{{ next_airing.media.title.romaji }}" class="rounded w-16 h-24" />
         </div>
     </a>
     {% endif %}
@@ -147,7 +147,7 @@
     <div class="flex flex-col lg:flex-row gap-2">
         {% for anime in items %}
         <a href="{% url "watch:watch_episode" anime.mediaId anime.episode %}" class="flex flex-none bg-neutral-950 rounded p-2 gap-4 items-center max-w-96 w-full {% if anime.timeUntilAiring < 0 %}border-2 border-{{ user.preferences.accent_colour }}-600{% endif %}">
-            <img src="{{ anime.media.coverImage.medium }}" alt="{{ anime.media.title.romaji }}" class="rounded w-16 h-24" />
+            <img loading="lazy" src="{{ anime.media.coverImage.medium }}" alt="{{ anime.media.title.romaji }}" class="rounded w-16 h-24" />
             <div class="flex flex-col gap-1 max-w-[calc(100%-8rem)]">
                 <span class="truncate max-w-full overflow-hidden text-ellipsis whitespace-nowrap font-bold text-xl text-white">
                     {% if user.preferences.title_language == "english" and anime.media.title.english %}
diff --git a/templates/messages/unauthorized.html b/templates/messages/unauthorized.html
index 80c1132..5410d1f 100644
--- a/templates/messages/unauthorized.html
+++ b/templates/messages/unauthorized.html
@@ -3,7 +3,7 @@
 {% block content %}
 
 <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 py-8 flex flex-col justify-center">
-    <img src="{% static 'images/gun_point.gif' %}" alt="gun point" class="w-full lg:w-1/2 h-auto mx-auto"/>
+    <img loading="lazy" src="{% static 'images/gun_point.gif' %}" alt="gun point" class="w-full lg:w-1/2 h-auto mx-auto"/>
     <h1 class="text-2xl font-bold text-center mt-4">
         {% if not error %}
         Hold it right there! Are you allowed to be here?
diff --git a/templates/partials/datacard_render.html b/templates/partials/datacard_render.html
index 309a523..73f08db 100644
--- a/templates/partials/datacard_render.html
+++ b/templates/partials/datacard_render.html
@@ -2,7 +2,7 @@
 {% if not anime.status == "Not yet aired" or all %}
 <a href="{% url "watch:watch" anime.id %}" class="w-1/2 md:w-1/3 lg:w-1/4 xl:w-1/5 2xl:w-1/6 text-gray-500 p-1 sm:p-2 mb-4 hover:text-white flex flex-col anime-item opacity-0">
     <div class="relative pt-[140%]">
-        <img src="{{ anime.image }}" alt="{{ anime.title.english }}" class="absolute top-0 left-0 w-full h-full rounded-lg object-cover"/>
+        <img loading="lazy" src="{{ anime.image }}" alt="{{ anime.title.english }}" class="absolute top-0 left-0 w-full h-full rounded-lg object-cover"/>
     </div>
     <div class="mt-2 flex flex-col gap-1">
         <span class="text-xs sm:text-sm font-bold flex gap-1 flex-row items-start">
diff --git a/templates/partials/datacardcompact_render.html b/templates/partials/datacardcompact_render.html
index 6303623..64f7517 100644
--- a/templates/partials/datacardcompact_render.html
+++ b/templates/partials/datacardcompact_render.html
@@ -3,7 +3,7 @@
 <div class="w-full max-w-full px-2 mb-2 anime-item">
     <a href="{% url 'watch:watch' anime.id %}">
     <div class="flex flex-row bg-neutral-950 rounded hover:bg-{{ user.preferences.accent_colour }}-600 hover:bg-opacity-30 p-2 gap-4 items-center">
-        <img src="{{ anime.image }}" alt="{{ anime.title.english }}" class="rounded-lg w-16 lg:w-12 h-24 lg:h-16 object-cover"/>
+        <img loading="lazy" src="{{ anime.image }}" alt="{{ anime.title.english }}" class="rounded-lg w-16 lg:w-12 h-24 lg:h-16 object-cover"/>
         <div class="flex flex-col lg:flex-row gap-2 max-w-[calc(100%-6rem)] lg:items-center">
             <h2 class="max-w-full text-xl font-bold text-transparent bg-clip-text truncate overflow-hidden text-ellipsis whitespace-nowrap" style="background: linear-gradient(-45deg, {% if anime.color %}{{ anime.color }}{% else %}white{% endif %}, white); -webkit-background-clip: text; background-clip: text;">
                 {% if user.preferences.title_language == "english" and anime.title.english %}
diff --git a/templates/partials/datacardwide_render.html b/templates/partials/datacardwide_render.html
index 15e0ff9..2b00fc3 100644
--- a/templates/partials/datacardwide_render.html
+++ b/templates/partials/datacardwide_render.html
@@ -4,7 +4,7 @@
 <div class="w-full lg:w-1/2 px-2 mb-2 anime-item">
     <div class="flex flex-row w-full bg-neutral-950 rounded hover:bg-{{ user.preferences.accent_colour }}-600 hover:bg-opacity-30 p-2 gap-4">
         <div class="flex flex-col gap-2 min-w-32">
-            <a href="{% url 'watch:watch' anime.id %}"><img src="{{ anime.image }}" alt="{{ anime.title.english }}" class="rounded-lg w-32 h-48 object-cover"/></a>
+            <a href="{% url 'watch:watch' anime.id %}"><img loading="lazy" src="{{ anime.image }}" alt="{{ anime.title.english }}" class="rounded-lg w-32 h-48 object-cover"/></a>
             <div class="flex flex-row gap-2">
                 <a href="https://anilist.co/anime/{{ anime.id }}" target="_blank" class="text-xs font-bold bg-white bg-opacity-10 hover:bg-{{ user.preferences.accent_colour }}-600 hover:bg-opacity-30 rounded px-2 py-1">
                     <svg stroke="currentColor" fill="currentColor" stroke-width="0" role="img" viewBox="0 0 24 24" height="1.5rem" width="1.5rem" xmlns="http://www.w3.org/2000/svg"><path d="M24 17.53v2.421c0 .71-.391 1.101-1.1 1.101h-5l-.057-.165L11.84 3.736c.106-.502.46-.788 1.053-.788h2.422c.71 0 1.1.391 1.1 1.1v12.38H22.9c.71 0 1.1.392 1.1 1.101zM11.034 2.947l6.337 18.104h-4.918l-1.052-3.131H6.019l-1.077 3.131H0L6.361 2.948h4.673zm-.66 10.96-1.69-5.014-1.541 5.015h3.23z"></path></svg>
diff --git a/templates/partials/sidebarwidecard_render.html b/templates/partials/sidebarwidecard_render.html
index 7d7f8f9..1924cb2 100644
--- a/templates/partials/sidebarwidecard_render.html
+++ b/templates/partials/sidebarwidecard_render.html
@@ -1,6 +1,6 @@
 {% for anime in data %}
 <a href="{% url "watch:watch" anime.id %}" class="flex flex-row w-full gap-4 bg-white bg-opacity-10 p-2 rounded hover:bg-{{ user.preferences.accent_colour }}-600 hover:bg-opacity-30 animate__animated animate__fadeInUp">
-    <img src="{{ anime.image }}" alt="{{ anime.title.english }}" class="rounded-lg w-32 h-auto object-cover"/>
+    <img loading="lazy" src="{{ anime.image }}" alt="{{ anime.title.english }}" class="rounded-lg w-32 h-auto object-cover"/>
     <div class="flex flex-col gap-2">
     <span class="text-sm font-bold flex gap-1 flex-row items-start">
         {% if anime.status == "Ongoing" %}
diff --git a/templates/user_profile/single_anime_update.html b/templates/user_profile/single_anime_update.html
index eaba0d6..4efc200 100644
--- a/templates/user_profile/single_anime_update.html
+++ b/templates/user_profile/single_anime_update.html
@@ -3,7 +3,7 @@
 {% endblock css %}
 <section class="flex flex-col lg:flex-row mt-8 gap-4">
     <section class="lg:w-1/4">
-        <img class="w-full h-auto object-cover object-center rounded-lg" src="{{ mal_data.main_picture.large }}" alt="{{ mal_data.title }}">
+        <img loading="lazy" class="w-full h-auto object-cover object-center rounded-lg" src="{{ mal_data.main_picture.large }}" alt="{{ mal_data.title }}">
         <h1 class="font-bold mt-4 border-b border-white border-opacity-10">Alternative Titles</h1>
         <ul class="list-inside text-sm">
             <li class="mt-2 ml-2"><span class="font-bold">Synonyms: </span>{{ mal_data.alternative_titles.synonyms|join:", " }}</li>
@@ -246,7 +246,7 @@
             {% for related_anime in mal_data.related_anime %}
             <div class="w-full md:w-1/3 px-4 mb-4">
                 <div class="flex gap-4 items-start">
-                    <img class="w-24 object-cover object-center rounded-lg" src="{{ related_anime.node.main_picture.medium }}" alt="{{ related_anime.node.title }}">
+                    <img loading="lazy" loading="lazy"class="w-24 object-cover object-center rounded-lg" src="{{ related_anime.node.main_picture.medium }}" alt="{{ related_anime.node.title }}">
                     <div class="flex flex-col w-full">
                         <h3 class="font-bold uppercase">{{ related_anime.relation_type_formatted }}</h3>
                         <a class="hover:text-purple-600 break-words" href="{% url 'user_profile:user_profile' %}?category=update&mal_id={{ related_anime.node.id }}">{{ related_anime.node.title }}</a>
diff --git a/templates/user_profile/user_anime_list.html b/templates/user_profile/user_anime_list.html
index c31be13..75b7b89 100644
--- a/templates/user_profile/user_anime_list.html
+++ b/templates/user_profile/user_anime_list.html
@@ -1,7 +1,7 @@
 {% if not request.user.mal_access_token %}
 {% load static %}
 <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 py-8 flex flex-col justify-center">
-    <img src="{% static 'images/added-to-list.gif' %}" alt="added to list" class="mx-auto"/>
+    <img loading="lazy" src="{% static 'images/added-to-list.gif' %}" alt="added to list" class="mx-auto"/>
     <p class="text-gray-400 text-center mt-2 text-sm">
         Your MAL list is not connected to your account yet. Connect your MAL account to see your list here.
     </p>
@@ -72,7 +72,7 @@
 <section class="flex flex-wrap justify-center mt-4 animate__animated animate__slideInUp">
 {% for anime in mal_list %}
     <a href="{% url 'user_profile:user_profile' %}?category=update&mal_id={{ anime.node.id }}" class="w-1/2 lg:w-1/4 xl:w-1/6 text-gray-500 px-1 mb-4 hover:text-white flex flex-col gap-2">
-        <img src="{{ anime.node.main_picture.large }}" alt="{{ anime.node.title }}" class="rounded-lg w-56 h-72 mx-auto object-cover"/>
+        <img loading="lazy" src="{{ anime.node.main_picture.large }}" alt="{{ anime.node.title }}" class="rounded-lg w-56 h-72 mx-auto object-cover"/>
         <div class="inline-flex gap-2 flex-wrap">
             <span class="text-xs font-bold bg-white bg-opacity-10 p-1 rounded flex items-center gap-1 capitalize">
                 <svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg" class="mr-1">
diff --git a/templates/user_profile/user_profile.html b/templates/user_profile/user_profile.html
index 464e5ff..cd24e9f 100644
--- a/templates/user_profile/user_profile.html
+++ b/templates/user_profile/user_profile.html
@@ -3,7 +3,7 @@
 <div class="bg-white bg-opacity-10 rounded-lg bg-center bg-cover h-96 relative mt-4" {% if request.user.discord_banner %} style="background-image: url('https://cdn.discordapp.com/banners/{{ request.user.discord_id }}/{{ request.user.discord_banner }}?size=1024')" {% else %} style="background-image: url('https://giffiles.alphacoders.com/132/13250.gif')" {% endif %}>
     <div class="absolute inset-0" style="background: linear-gradient(45deg, rgb(8, 8, 8) 15%, transparent 60%), linear-gradient(0deg, rgb(8, 8, 8) 0%, transparent 60%);"></div>
     <div class="flex flex-col items-center gap-2 absolute bottom-0 left-10">
-        <img src="https://cdn.discordapp.com/avatars/{{ request.user.discord_id }}/{{ request.user.discord_avatar }}?size=256" alt="avatar" class="rounded-full w-24 h-24">
+        <img loading="lazy" src="https://cdn.discordapp.com/avatars/{{ request.user.discord_id }}/{{ request.user.discord_avatar }}?size=256" alt="avatar" class="rounded-full w-24 h-24">
         <h1 class="text-2xl font-bold">
             {% if request.user.preferences.display_guild_name_instead_of_username and request.user.discord_guild_name %}
               {{ request.user.discord_guild_name }}
diff --git a/templates/watch/watch.html b/templates/watch/watch.html
index 7ee6347..034d635 100644
--- a/templates/watch/watch.html
+++ b/templates/watch/watch.html
@@ -82,7 +82,7 @@
                 <a href="{% url "watch:watch_episode" anime.id episode.number %}{% if request.GET.mode %}?mode={{ request.GET.mode }}{% endif %}{% if request.GET.mode and request.GET.provider %}&provider={{ request.GET.provider }}{% elif request.GET.provider %}?provider={{ request.GET.provider }}{% endif %}" 
                    class="flex flex-row w-full gap-4 {% if episode.number == current_episode_number %}bg-{{ user.preferences.accent_colour }}-600{% elif episode.number in watched_episodes %}bg-{{ user.preferences.accent_colour }}-600 bg-opacity-20{% else %}bg-white bg-opacity-10{% endif %} p-2 rounded hover:bg-{{ user.preferences.accent_colour }}-600 hover:bg-opacity-30 mb-4" id="{% if episode.number == current_episode_number %}active-episode-grid{% endif %}">
                     <div class="w-32 h-18 flex-shrink-0">
-                        <img src="{{ episode.metadata.image }}" alt="Episode {{ episode.number }}" class="w-full h-full object-cover rounded" style="aspect-ratio: 16/9;">
+                        <img loading="lazy" src="{{ episode.metadata.image }}" alt="Episode {{ episode.number }}" class="w-full h-full object-cover rounded" style="aspect-ratio: 16/9;">
                     </div>
                     <div class="flex flex-col justify-between flex-grow overflow-hidden">
                         <div>
@@ -216,7 +216,7 @@
         {% endif %}
         <div class="flex flex-col lg:flex-row w-full my-4 bg-neutral-950 rounded p-2 gap-4">
             <div class="flex flex-col items-center lg:items-start gap-2 min-w-32">
-                <img src="{{ anime.image }}" alt="{{ anime.title.english }}" class="rounded-lg w-56 h-72 object-cover"/>
+                <img loading="lazy" src="{{ anime.image }}" alt="{{ anime.title.english }}" class="rounded-lg w-56 h-72 object-cover"/>
                 <div class="flex flex-row gap-2 w-full">
                     <a href="https://anilist.co/anime/{{ anime.id }}" target="_blank" class="text-xs font-bold bg-{{ user.preferences.accent_colour }}-400 bg-opacity-30 flex-1 justify-center flex hover:bg-opacity-50 rounded px-2 py-1">
                         <svg stroke="currentColor" fill="currentColor" stroke-width="0" role="img" viewBox="0 0 24 24" height="1.5rem" width="1.5rem" xmlns="http://www.w3.org/2000/svg"><path d="M24 17.53v2.421c0 .71-.391 1.101-1.1 1.101h-5l-.057-.165L11.84 3.736c.106-.502.46-.788 1.053-.788h2.422c.71 0 1.1.391 1.1 1.1v12.38H22.9c.71 0 1.1.392 1.1 1.101zM11.034 2.947l6.337 18.104h-4.918l-1.052-3.131H6.019l-1.077 3.131H0L6.361 2.948h4.673zm-.66 10.96-1.69-5.014-1.541 5.015h3.23z"></path></svg>
@@ -535,7 +535,7 @@
                 {% for character in characters %}
                 <div class="w-full lg:w-1/2 p-2 flex justify-between">
                     <div class="flex flex-row gap-2 items-center">
-                        <img src="{{ character.image }}" alt="{{ character.name }}" class="rounded-full w-16 h-16 object-cover"/>
+                        <img loading="lazy" src="{{ character.image }}" alt="{{ character.name }}" class="rounded-full w-16 h-16 object-cover"/>
                         <div class="flex flex-col gap-2">
                             <span class="font-bold">
                                 {% if user.preferences.character_name_language == "romaji" %}
@@ -561,7 +561,7 @@
                                 </span>
                                 <span class="capitalize">{{ voice_actor.language }}</span>
                             </div>
-                            <img src="{{ voice_actor.image }}" alt="{{ voice_actor.name }}" class="rounded-full w-16 h-16 object-cover"/>
+                            <img loading="lazy" src="{{ voice_actor.image }}" alt="{{ voice_actor.name }}" class="rounded-full w-16 h-16 object-cover"/>
                         </div>
                         {% endif %}
                         {% endfor %}
@@ -582,7 +582,7 @@
             {% for related in related|slice:":5" %}
             {% if related.type == "MANGA" or related.type == "NOVEL" %}
             <div onClick="showToast('{% if related.type == "MANGA" %}Manga{% else %}Novel{% endif %} reading is not supported yet!', false)" class="cursor-pointer flex flex-row w-full gap-4 bg-white bg-opacity-10 p-2 rounded hover:bg-{{ user.preferences.accent_colour }}-600 hover:bg-opacity-30">
-                <img src="{{ related.image }}" alt="{{ related.title.english }}" class="rounded-lg w-12 h-16 object-cover"/>
+                <img loading="lazy"src=" {{ related.image }}" alt="{{ related.title.english }}" class="rounded-lg w-12 h-16 object-cover"/>
                 <div class="flex flex-col gap-2">
                     <span class="font-bold flex gap-2 flex-row items-center">
                         {% if related.status == "Ongoing" %}
@@ -643,7 +643,7 @@
             {% endif %}
             {% if related.type == "TV" or related.type == "MOVIE" or related.type == "OVA" or related.type == "ONA" or related.type == "SPECIAL" or related.type == "TV_SHORT" %}
             <a href="{% if not viaMal %}{% url 'watch:watch' related.id %}{% else %}{% url "watch:watch_via_zid" related.zid %}{% endif %}" class="flex flex-row w-full gap-4 bg-white bg-opacity-10 p-2 rounded hover:bg-{{ user.preferences.accent_colour }}-600 hover:bg-opacity-30">
-                <img src="{{ related.image }}" alt="{{ related.title.english }}" class="rounded-lg w-12 h-16 object-cover"/>
+                <img loading="lazy" src="{{ related.image }}" alt="{{ related.title.english }}" class="rounded-lg w-12 h-16 object-cover"/>
                 <div class="flex flex-col gap-2">
                     <span class="font-bold flex gap-2 flex-row items-center">
                         {% if related.status == "Ongoing" %}
@@ -724,7 +724,7 @@
             {% for recommendation in recommendations|slice:":10" %}
             {% if recommendation.id or recommendation.zid %}
             <a href="{% if not viaMal %}{% url 'watch:watch' recommendation.id %}{% else %}{% url "watch:watch_via_zid" recommendation.zid %}{% endif %}" class="flex flex-row w-full gap-4 bg-white bg-opacity-10 p-2 rounded hover:bg-{{ user.preferences.accent_colour }}-600 hover:bg-opacity-30">
-                <img src="{{ recommendation.image }}" alt="{{ recommendation.title.english }}" class="rounded-lg w-12 h-16 object-cover"/>
+                <img loading="lazy" src="{{ recommendation.image }}" alt="{{ recommendation.title.english }}" class="rounded-lg w-12 h-16 object-cover"/>
                 <div class="flex flex-col gap-2 max-w-[calc(100%-4rem)]">
                     <span class="font-bold flex gap-2 flex-row items-center">
                         {% if recommendation.status == "Ongoing" %}