if you are creating it dynamically you need to export the size

i am exporting the size still the images are in low quality.

all these images are in low quality while original image is high resolution.

not sure how you are exporting, but can you do like this?

I am exporting it exactly like this.

I don't see the opengraph image code

example img inside my vercel og

i have dynamically exported the width and height of the whole card. I have different heights and widths for my <img /> tags on my og image.

for more context

why are you using width="50" height="50"

replace by width={size.width} height={size.height}

why would i set the image width and height to whole viewport of the og image?

i have different sections i want to show inside the og image, i dont want to show only one image

oh so the issue is not only in the <img /> but all the og, got it

yes

what is this you are using to test?

i have different images/paragraphs tags inside my og image, and all the images i have added inside my og is blurred/low quality.

have you tried to open the og directly in your browser?

the direct link

of the og image

the screenshot i sent is taken from direct link to og

this is from link to og image

is it clear now?

yes!

do you understand my issue and expectation?

what is your size cost

const

export const size = {
width: 800,
height: 550,
};

intresting, the image you sent me:

i took a screenshot 😦

here is the downloaded image

please check now.

now its ok

yeah, it's like it's compressing the quality so

yes

to be honest can a such low resolution to be better? not sure 800 x 550 seems not so much

because if you just see the code in browser will be better because it's not a pixeled image

are you suggesting that i should not provide the size const?

and default value should be auto generated?

no, og required some standards of size actually

no matter what size const i use, the quality is still reduced

does this clarify it further?

so, will not solve your problem but just a recommendation: keep it 1200 x 630, it's the standard

changed it to 1200 x 630, still the image quality is low.

So, I don't see any issue on you code. Perhaps a limitation of the next.js lib used to create an image from the code.

one last question, are importing from next/og?

import { ImageResponse } from 'next/og'

also, I remember of next.js asking me to install an extra lib to improve the image quality

import { ImageResponse } from '@vercel/og';

I am importing using vercel/og

I tried switching to next/og but same result / no difference.