I now do it like this:

yeah you are

I would use Next Image

there's no downside to be honest

and if you want a slight blur on load

gimme a sec I'm finding it

placeholder="blur" is not what i want

do you want it to be a solid colour

for the blur

Because i need small image for that, like 10 or 20 px. But i wont have it

you can try a solid colour blur

How?)

I'm finding it

Well, do i need all those width properties from backend? Because i think, they can be usefull, but how would i use them with Image and without picture and source

do you want something like this https://image-component.nextjs.gallery/color

there's a way to do that as well

so you can just fetch all the images

i've seen that. more like here: https://www.anextour.com/

then you can map over them and then just set the width and height property

I don't see what you mean

There is a blur effect on images loading

like this https://image-component.nextjs.gallery/placeholder

if so you're gonna have to just use placholder-"Blur" and it will automatically generate the blurred image for you

you don't have to make it smaller or anything

This will be wrong, i've thought of that already. For example, if a client has screen width of 1440+, then the size of picture for ProductHero component is 630x630
And there can be different settings for different images in different places

But on 376, i can use width and height 376x376

that would be correct

But i cant map through keys and make a reusable component for different images

you want to use the biggest one possible according to the screen size

Dont understand, how...

{
"id": 2682,
"product_id": 691,
"type": "photo",
"is_active": 1,
"sort": 0,
"photo_file_name_orig": "yamaguchi-max-pro.png",
"photo_title": "",
"photo_alt": "Беговая дорожка для дома Yamaguchi MAX PRO",
"photo_is_feed": null,
"video_youtube_link": null,
"video_search_text": null,
"video_description": null,
"video_instruction": null,
"video_stars": null,
"video_beauty_slide": null,
"photos": {
"376": "https://api.yamaguchi.ru/storage/product_gallery/2682/376/yamaguchi-max-pro.webp",
"450": "https://api.yamaguchi.ru/storage/product_gallery/2682/450/yamaguchi-max-pro.webp",
"576": "https://api.yamaguchi.ru/storage/product_gallery/2682/576/yamaguchi-max-pro.webp",
"768": "https://api.yamaguchi.ru/storage/product_gallery/2682/768/yamaguchi-max-pro.webp",
"900": "https://api.yamaguchi.ru/storage/product_gallery/2682/900/yamaguchi-max-pro.webp",
"1080": "https://api.yamaguchi.ru/storage/product_gallery/2682/1080/yamaguchi-max-pro.webp",
"1440": "https://api.yamaguchi.ru/storage/product_gallery/2682/1440/yamaguchi-max-pro.webp",
"default": "https://api.yamaguchi.ru/storage/product_gallery/2682/default/yamaguchi-max-pro.webp",
"original": "https://api.yamaguchi.ru/storage/product_gallery/2682/original/yamaguchi-max-pro.png"
}
}

here is an object with mock images. Can you help creating reusable Img?

gimme a sec

This maybe https://chat.openai.com/share/26d6c867-1c1b-463f-8181-5caae86e8389.

// Import necessary modules and components
import { useEffect, useState } from 'react';

// Define your component
export default const RenderImages = () => {
  const [imageDimensions, setImageDimensions] = useState<number>()

  const getImageSize = (width: number): string => {
    if (width >= 1440) return '1440';
    if (width >= 1080) return '1080';
    if (width >= 900) return '900';
    if (width >= 768) return '768';
    if (width >= 576) return '576';
    if (width >= 450) return '450';
    if (width >= 376) return '376';
    return 'default';
  };

  useEffect(() => {
    const handleResize = () => {
      // Get the current viewport width
      const viewportWidth = window.innerWidth;

      // Determine the appropriate image size based on viewport width
      const imageSize = getImageSize(viewportWidth);
      setImageDimensions(imageSize)
    handleResize();

    // Add event listener for window resize
    window.addEventListener('resize', handleResize);

    // Cleanup the event listener on component unmount
    return () => {
      window.removeEventListener('resize', handleResize);
    };
  }, []);

  return (
    <div>
      <Image src={`https://api.yamaguchi.ru/storage/product_gallery/2682/${imageDimensions}/yamaguchi-max-pro.webp`} alt="Selected Image" height={imageDimensions} width={imageDimensions} />
    </div>
  );
};

export default YourComponent;

It's from ChatGPT but I changed it to work better

Reading! Thanks

you're probably also going to want to change bits of it as well

You will need to generate the base64 with something like Plaiceholde and store it to db. Then first show the image with the base64 string and add a event listener for load to show the actual image. also, you should map all size to a string and pass it to srcSet

This generating happens on backend?

yeah, should be generated when you store the image

this is the code from a project which use sanity

So on top of all dimensions, i should also ask backend to send me a fallback img?

it look like this

yes the base64 should be store in db once it is generated

They dont use Image))

wdym?

They use simple img tag

it is a CMS

I use this code in a project build with remix which doesn't have Image component

so I have to build my own

you can ignore the hover part

image.metadata.lqip is the base64 string

Yeah, well, i think, in my case, if not using Image, i would stick to this simple solution

I think you could use with next/image

If i can ask backend for base64, i will probably use simple Image everywhere with placeholder='blur'

just generate the base64 string and put it to blurDataURL

yes