Jump to content
You must now use your email address to sign in [click for more info] ×

Problem with image quality after export :/


Recommended Posts

Hello, i have problem with image quality when i export my big image to simple page logo.

Look i have image in high resolution in af designer, after i export it to 220 width dimension its drasticaly loose sharpnes and quality.

 

I dont know how to export it o get a sharp and good image in this dimensions :/

Zrzut ekranu 2023-01-3 o 00.13.10.png

Zrzut ekranu 2023-01-3 o 00.13.45.png

Zrzut ekranu 2023-01-3 o 00.14.27.png

Link to comment
Share on other sites

How large is the size of the "big image" to begin with? If it is far larger than that of the export then there will not be enough pixels in the export to keep everything sharp.

Also, make sure everything is aligned to whole pixel values. You may need to change the decimal places for the displayed units in preferences to 3 or more places to see that.

All 3 1.10.8, & all 3 V2.4.1 Mac apps; 2020 iMac 27"; 3.8GHz i7, Radeon Pro 5700, 32GB RAM; macOS 10.15.7
Affinity Photo 
1.10.8; Affinity Designer 1.108; & all 3 V2 apps for iPad; 6th Generation iPad 32 GB; Apple Pencil; iPadOS 15.7

Link to comment
Share on other sites

2 hours ago, Suchjy said:

After exportig here is a 100% view scale. Its still smudged

Zrzut ekranu 2023-01-3 o 00.16.00.png

If I download your image it has 516 pixel width. Placed scaled to the forum in 200 px width looks like this …

2040937011_200pxlogo.png.e5f3c1408e8810eba7d01724ebe30966.png

… which appears quite different … while for this logo in 200 pixel width the tiny font size may be a general limiting problem. Consider the available pixels & font size for this text in the desired image size. Seems to be around 7 px for the text height, so I doubt this is an export problem. It can be helpful to switch to pixel view in the layout to check the quality you can expect for the image export.

macOS 10.14.6 | MacBookPro Retina 15" | Eizo 27" | Affinity V1

Link to comment
Share on other sites

Hey

my original image is very big it’s 3000 pixels heigh. 
now I want to save it in 40 pixels heigh for logo in page. And this blur and quality lose is happening.

So how o can save it to not lose the quality? In photoshop I just use export tool and set heigh and all was ok here I got low quality image :/.

thts not only font whole image is damaged 

Link to comment
Share on other sites

7 hours ago, R C-R said:

How large is the size of the "big image" to begin with? If it is far larger than that of the export then there will not be enough pixels in the export to keep everything sharp.

Also, make sure everything is aligned to whole pixel values. You may need to change the decimal places for the displayed units in preferences to 3 or more places to see that.

How I can set that displayed units? And how generally I can save this big image in 60 ox heigh good quality now? 
don’t tell me is impossible xD in photoshop it’s just export file option..,

Link to comment
Share on other sites

Why not save a copy of the original file and scale down that copy prior to exporting it.

Which app are you using and what is the spec of the document, width x height + DPI etc

iMac 27" 2019 Somona 14.3.1, iMac 27" Affinity Designer, Photo & Publisher V1 & V2, Adobe, Inkscape, Vectorstyler, Blender, C4D, Sketchup + more... XP-Pen Artist-22E, - iPad Pro 12.9  
B| (Please refrain from licking the screen while using this forum)

Affinity Help - Affinity Desktop Tutorials - Feedback - FAQ - most asked questions

Link to comment
Share on other sites

Hey, 

in untitled2.afdesign is my core file. Font are in curves. 

Image size is: 1000x242px.

When i export it, i got 6 and 9 png which are bad quality. 

What do you mean "Why not save a copy of the original file and scale down that copy prior to exporting it."? I set full image 1000x242 in png, then open it in afinity, rescale to 160x31 and still have bad quality image on export like zrzut ekranu.

 

Zrzut ekranu 2023-01-3 o 10.47.35.png

6.png

9.png

Zrzut ekranu 2023-01-3 o 10.51.29.png

Untitled2.afdesign

Link to comment
Share on other sites

Or can you just tell me XD how i can go from huge images like 1000x242 px to 160x30 ? how i can export with no quality lose?

 

You can see that in affinity designer all looks good, even i make them smaller, after export its got pixels...

Zrzut ekranu 2023-01-3 o 10.53.44.png

Zrzut ekranu 2023-01-3 o 10.54.30.png

Link to comment
Share on other sites

By the way, saving a large logo in affinity through the export option to a smaller size ie from 1000 to 160 px, affinity can't handle it and causes a blurry logo that is not sharp.

Interestingly, when I upload this large logo graphic in wordpress, wordpress scales down the logo without a problem while keeping it sharp. 

Zrzut ekranu 2023-01-3 o 11.04.09.png

Link to comment
Share on other sites

untitled-scaledown.png.e6c923aaa655248a7d00ebee07c4624b.png

untitled-scaledown2.jpg.8c55099535cbb43201af88a0fc70c984.jpg

 

Scale it down in ADe then export (in this case the selection only). - Further export to the exact dimensions you will need reuse for a webside or print. If it's for the web, thus websites, consider using the SVG vector format instead of a bitmap/raster format like PNG, since you can scale up/down vectors without such bitmap image pixelation problems.

☛ Affinity Designer 1.10.8 ◆ Affinity Photo 1.10.8 ◆ Affinity Publisher 1.10.8 ◆ OSX El Capitan
☛ Affinity V2.3 apps ◆ MacOS Sonoma 14.2 ◆ iPad OS 17.2

Link to comment
Share on other sites

15 minutes ago, v_kyr said:

consider using the SVG vector format instead of a bitmap/raster format like PNG,

Yep, couldn't agree more

I took the image from the second post, upsized it to 3000px high, added the text
The left shows the export using bicubic down to 220 wide
The right shows the image resized to 220 using bicubic and a little USM
But the answer is to use an svg with text as curves

SuprimeBoth.png

Suprime.svg

Microsoft Windows 11 Home, Intel i7-1360P 2.20 GHz, 32 GB RAM, 1TB SSD, Intel Iris Xe
Affinity Photo - 24/05/20, Affinity Publisher - 06/12/20, KTM Superduke - 27/09/10

Link to comment
Share on other sites

  • 2 weeks later...

Hmm. Can you help me again...

 

Look i have image which looks pretty good in Designer. I'ts in 375x500 px - its sharp:

2060229795_Zrzutekranu2023-01-13o14_45_30.thumb.png.925038e15eada0c46ca162cc206bfc73.png

 

When i'm exporting it to PNG / JPG in same resolution: 375x500, i receive a blurred image:

 

export375x500.png.1f27cf3926edc3b145f1f8abe28b807e.png

 

Why? And how i can solve it? It's so anoying... I dont want to export it as SVG cuz its 1.88 MB vs 66 Kb in PNG... 

Graf ludzi na głównej.afdesign

Link to comment
Share on other sites

12 minutes ago, Suchjy said:

When i'm exporting it to PNG / JPG in same resolution: 375x500, i receive a blurred image:

It was reported / discussed quite a few times, not only in this thread.

As workaround you might achieve some sharpening in the resample process with the two export options "Lanczos 3".

1653991492_exportlanczos.jpg.8b43a677155301b40b85fa9e7b9e9d85.jpg

macOS 10.14.6 | MacBookPro Retina 15" | Eizo 27" | Affinity V1

Link to comment
Share on other sites

@BofG Thats bad. Cuz you want 375x500 px image in web, so you want to export image in that dimensions.

If i good understand you want me to set 100% view, so i will see that i need to make bigger image for example 500x700 do make it sharp and export it in 500x700 px, so the sharpness will be good.

It works but if you making SEO and want to let ur site be speed :), you need to know that its crap. When you upload that image in website you still gona show 375x500 px image (scaled with CSS, but still loading bigger one 500x700). So for Google thats crap and Page SPeed insights from Google and generaly page speed will hurt cuz of that. 

Thats so stupid XDD . That SOFT FOR WEB graphic do not let you export image XD in dimensions which you need... I think a only way is to go back to photoshop :/

Link to comment
Share on other sites

1 hour ago, Suchjy said:

It works but if you making SEO and want to let ur site be speed :), you need to know that its crap. When you upload that image in website you still gona show 375x500 px image (scaled with CSS, but still loading bigger one 500x700). So for Google thats crap and Page SPeed insights from Google and generaly page speed will hurt cuz of that. 

If I want sharp website images for display on mobile phones, I will frequently use larger images (e.g. 2 x the size) and scale them with CSS

It does not hurt SEO or page speed.

Don't get bogged down with page speed, your designs will suffer if you do.

Page speed is just one (small) Google metric. The content of your website is a far greater metric

To save time I am currently using an automated AI to reply to some posts on this forum. If any of "my" posts are wrong or appear to be total b*ll*cks they are the ones generated by the AI. If correct they were probably mine. I apologise for any mistakes made by my AI - I'm sure it will improve with time.

Link to comment
Share on other sites

2 hours ago, Suchjy said:

So only way is to save images in bigger resolution then needed yes :)?

The only way is to save bitmap images at a pixel resolution sufficiently high to preserve whatever detail you want or need the image to have. IOW, you can't 'split' a pixel into smaller units that each show a different color because pixels are the smallest unit of resolution in bitmap images.

There is no getting around this; it is just how bitmap images work.

All 3 1.10.8, & all 3 V2.4.1 Mac apps; 2020 iMac 27"; 3.8GHz i7, Radeon Pro 5700, 32GB RAM; macOS 10.15.7
Affinity Photo 
1.10.8; Affinity Designer 1.108; & all 3 V2 apps for iPad; 6th Generation iPad 32 GB; Apple Pencil; iPadOS 15.7

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...

Important Information

Terms of Use | Privacy Policy | Guidelines | We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.