refactor: change Image Optimization to custom url

app/components/CollectionInfo/CollectionInfo.Basics.tsx

@@ -1,6 +1,7 @@
 import { Card, Button, Avatar } from "flowbite-react";
 import { unixToDate } from "#/api/utils";
 import Link from "next/link";
+import Image from "next/image";
 
 export const CollectionInfoBasics = (props: {
   image: string;
@@ -36,7 +37,12 @@ export const CollectionInfoBasics = (props: {
           </Link>
         </div>
         <div className="min-w-full aspect-video">
-          <img src={props.image} className="w-full rounded-lg" />
+          <Image
+            src={props.image}
+            width={725}
+            height={400}
+            className="w-full rounded-lg"
+          />
         </div>
         <div className="flex flex-col gap-1">
           <p className="text-xl font-bold">{props.title}</p>

app/components/CollectionLink/CollectionLink.tsx

@@ -1,5 +1,6 @@
 import Link from "next/link";
 import { Chip } from "#/components/Chip/Chip";
+import Image from "next/image";
 
 export const CollectionLink = (props: any) => {
   return (
@@ -8,9 +9,20 @@ export const CollectionLink = (props: any) => {
         <div
           className="relative w-full h-full overflow-hidden bg-center bg-no-repeat bg-cover rounded-sm group-hover:animate-bg_zoom animate-bg_zoom_rev group-hover:[background-size:110%] "
           style={{
-            backgroundImage: `linear-gradient(to bottom, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.9) 100%), url(${props.image})`,
+            backgroundImage: `linear-gradient(to bottom, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.9) 100%)`,
           }}
         >
+          <Image
+            src={props.image}
+            fill={true}
+            alt={props.title}
+            className="-z-[1] object-cover"
+            sizes="
+                  (max-width: 768px) 300px,
+                  (max-width: 1024px) 600px,
+                  900px
+                  "
+          />
           <div className="absolute flex flex-wrap items-start justify-start gap-0.5 sm:gap-1 left-2 top-2">
             <Chip
               icon_name="material-symbols--favorite"
@@ -38,7 +50,9 @@ export const CollectionLink = (props: any) => {
               </p>
             </div>
             <p className="text-xs font-light text-white md:text-sm lg:text-base xl:text-lg">
-              {`${props.description.slice(0, 125)}${props.description.length > 125 ? "..." : ""}`}
+              {`${props.description.slice(0, 125)}${
+                props.description.length > 125 ? "..." : ""
+              }`}
             </p>
           </div>
         </div>

app/components/Comments/Comments.Comment.tsx

@@ -6,6 +6,7 @@ import Link from "next/link";
 import { CommentsAddModal } from "./Comments.Add";
 import { CommentsEditModal } from "./Comments.Edit";
 import { useUserStore } from "#/store/auth";
+import Image from "next/image";
 
 export const CommentsComment = (props: {
   release_id: number;
@@ -155,8 +156,10 @@ export const CommentsComment = (props: {
               href={`/profile/${props.profile.id}`}
               className="inline-flex items-center mr-3 text-sm font-semibold text-gray-900 dark:text-white hover:underline"
             >
-              <img
+              <Image
                 className="w-6 h-6 mr-2 rounded-full"
+                width={24}
+                height={24}
                 src={props.profile.avatar}
                 alt=""
               />

app/components/Navbar/Navbar.tsx

@@ -11,6 +11,7 @@ import {
   ToggleSwitch,
 } from "flowbite-react";
 import { useState } from "react";
+import Image from "next/image";
 
 export const Navbar = () => {
   const pathname = usePathname();
@@ -110,10 +111,12 @@ export const Navbar = () => {
           </nav>
           {userStore.isAuth ? (
             <div className="flex flex-col items-center justify-end text-sm lg:gap-1 lg:justify-center lg:flex-row lg:text-base">
-              <img
+              <Image
                 src={userStore.user.avatar}
                 alt=""
                 className="w-6 h-6 rounded-full"
+                width={24}
+                height={24}
               />
               <Dropdown
                 label={userStore.user.login}

app/components/RelatedSection/RelatedSection.tsx

@@ -1,5 +1,6 @@
 import { numberDeclension } from "#/api/utils";
 import Link from "next/link";
+import Image from "next/image";
 
 export const RelatedSection = (props: any) => {
   const declension = numberDeclension(
@@ -14,12 +15,18 @@ export const RelatedSection = (props: any) => {
         <div className="flex items-center justify-center p-4">
           {props.images.map((item) => {
             return (
-              <img
+              <div className="w-[100px] lg:w-[300px] aspect-[9/12] even:scale-110 shadow-md even:shadow-lg even:z-30 origin-center first:[transform:translateX(25%)] last:[transform:translateX(-25%)]">
-                key={item}
+                <Image
-                src={item}
+                  fill={true}
-                alt=""
+                  key={item}
-                className="w-[100px] lg:w-[300px] object-cover aspect-[9/12] even:scale-110 shadow-md even:shadow-lg even:z-30 origin-center first:[transform:translateX(25%)] last:[transform:translateX(-25%)]"
+                  src={item}
-              />
+                  alt=""
+                  sizes="
+                  (max-width: 1024px) 100px,
+                  300px
+                  "
+                />
+              </div>
             );
           })}
         </div>
@@ -29,11 +36,11 @@ export const RelatedSection = (props: any) => {
             {props.release_count} {declension} во франшизе
           </p>
           <Link href={`/related/${props.id}`}>
-          <div className="flex items-center px-8 py-2 transition border border-black rounded-full hover:text-white hover:bg-black dark:border-white hover:dark:text-black hover:dark:bg-white">
+            <div className="flex items-center px-8 py-2 transition border border-black rounded-full hover:text-white hover:bg-black dark:border-white hover:dark:text-black hover:dark:bg-white">
-            <p className="text-xl font-bold">Перейти</p>
+              <p className="text-xl font-bold">Перейти</p>
-            <span className="w-6 h-6 iconify mdi--arrow-right"></span>
+              <span className="w-6 h-6 iconify mdi--arrow-right"></span>
-          </div>
+            </div>
-        </Link>
+          </Link>
         </div>
       </div>
     </section>

app/components/ReleaseCourusel/ReleaseCourusel.tsx

@@ -62,7 +62,7 @@ export const ReleaseCourusel = (props: {
                   key={release.id}
                   style={{ width: "fit-content" }}
                 >
-                  <div className="xl:w-[600px] sm:w-[400px] w-[80vw] aspect-video">
+                  <div className="xl:w-[600px] sm:w-[400px] w-[84vw] aspect-video">
                     <ReleaseLink {...release} />
                   </div>
                 </div>

app/components/ReleaseInfo/ReleaseInfo.Basics.tsx

@@ -1,5 +1,6 @@
 import { Card, Button } from "flowbite-react";
 import { useState } from "react";
+import Image from "next/image";
 
 export const ReleaseInfoBasics = (props: {
   image: string;
@@ -12,11 +13,13 @@ export const ReleaseInfoBasics = (props: {
   return (
     <Card className="h-full">
       <div className="flex flex-col w-full h-full gap-4 lg:flex-row">
-        <img
+        <Image
           className="w-[285px] max-h-[385px] object-cover border border-gray-200 rounded-lg shadow-md dark:border-gray-700"
           src={props.image}
           alt=""
-        ></img>
+          width={285}
+          height={385}
+        />
         <div className="flex flex-col max-w-2xl gap-2 text-sm md:text-base">
           <div className="flex flex-col gap-1">
             <p className="text-xl font-bold text-black md:text-2xl dark:text-white">

app/components/ReleaseInfo/ReleaseInfo.Screenshots.tsx

@@ -1,13 +1,19 @@
 import { Card, Carousel } from "flowbite-react";
+import Image from "next/image";
 
-export const ReleaseInfoScreenshots = (props: {
+export const ReleaseInfoScreenshots = (props: { images: string[] }) => {
-  images: string[];
-}) => {
   return (
     <Card>
       <Carousel className="aspect-[16/10]">
         {props.images.map((image: string, index: number) => (
-          <img key={index} className="object-cover" src={image} />
+          <Image
+            key={index}
+            className="object-cover"
+            src={image}
+            width={400}
+            height={300}
+            alt=""
+          />
         ))}
       </Carousel>
     </Card>

app/components/ReleaseLink/ReleaseLink.16_9.tsx

@@ -1,6 +1,7 @@
 import Link from "next/link";
 import { sinceUnixDate } from "#/api/utils";
 import { Chip } from "#/components/Chip/Chip";
+import Image from "next/image";
 
 const profile_lists = {
   // 0: "Не смотрю",
@@ -29,10 +30,21 @@ export const ReleaseLink169 = (props: any) => {
         <div
           className="relative w-full h-full overflow-hidden bg-center bg-no-repeat bg-cover rounded-sm group-hover:animate-bg_zoom animate-bg_zoom_rev group-hover:[background-size:110%] "
           style={{
-            backgroundImage: `linear-gradient(to bottom, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.9) 100%), url(${props.image})`,
+            backgroundImage: `linear-gradient(to bottom, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.9) 100%)`,
           }}
         >
-          <div className="absolute flex flex-wrap items-start justify-start gap-0.5 sm:gap-1 left-0 top-0 p-2">
+          <Image
+            src={props.image}
+            fill={true}
+            alt={props.title}
+            className="-z-[1] object-cover"
+            sizes="
+                  (max-width: 768px) 300px,
+                  (max-width: 1024px) 600px,
+                  900px
+                  "
+          />
+          <div className="absolute flex flex-wrap items-start justify-start gap-0.5 sm:gap-1 left-0 top-0 p-1 sm:p-2">
             <Chip
               bg_color={
                 grade == 0
@@ -93,7 +105,7 @@ export const ReleaseLink169 = (props: any) => {
               </div>
             )}
           </div>
-          <div className="absolute bottom-0 left-0 p-2 lg:translate-y-[100%] group-hover:lg:translate-y-0 transition-transform">
+          <div className="absolute bottom-0 left-0 p-1 sm:p-2 lg:translate-y-[100%] group-hover:lg:translate-y-0 transition-transform">
             <div className="transition-transform lg:-translate-y-[calc(100%_+_1rem)] group-hover:lg:translate-y-0">
               {props.genres && (
                 <p className="text-xs font-light text-white md:text-sm lg:text-base xl:text-lg">
@@ -105,7 +117,9 @@ export const ReleaseLink169 = (props: any) => {
               </p>
             </div>
             <p className="text-xs font-light text-white md:text-sm lg:text-base xl:text-lg">
-              {`${props.description.slice(0, 125)}${props.description.length > 125 ? "..." : ""}`}
+              {`${props.description.slice(0, 125)}${
+                props.description.length > 125 ? "..." : ""
+              }`}
             </p>
           </div>
         </div>

imageLoader.ts

@@ -0,0 +1,5 @@
+"use client";
+
+export default function imageLoader({ src, width, quality }) {
+  return `https://wsrv.nl/?url=${src}&w=${width}&q=${quality || 75}`;
+}

next.config.js

@@ -2,4 +2,15 @@ const { withPlausibleProxy } = require("next-plausible");
 
 module.exports = withPlausibleProxy({
   customDomain: "https://analytics.wah.su",
-})({});
+})({
+  images: {
+    loader: 'custom',
+    loaderFile: './imageLoader.ts',
+    remotePatterns: [
+      {
+        protocol: "https",
+        hostname: "anixstatic.com",
+      },
+    ],
+  },
+});