Export jpg - 100% quality shows like bad quality

[Zuzana]

Hello,

I have problem with exporting for web. I exported my picture like 100% jpg and it seems horrible. I tried to do it also like png and it is a same. In Aff. photo - in layers it seem good, but export is really awful. please see attachments. 

 

Please help me how I can do texts in picture and have nice pictures in exports like in photoshop can do.. thank you.

[MEB]

Hi Zuzana,

Welcome to Affinity Forums :)

Are you resizing the image on export?

If so, have you changed the Resample dropdown to Lanczos3 in the Export dialog?

Both options should work fine (separable and non-separable), but non separable will give a much sharper result (sometimes too much depending on the type of the image).

[Zuzana]

Yes, I tried every resample, lanczos3 also. Still very bad result :(. see both attachment, down is on layers, up is after export 100% lanczos non separable. Even I do marge text - it "rasterize" and it seems very fuzzy. I need this tool - text put on picture and I don't know how to do it. But export of picture is bad also - see logo of Tormek... 

 

I tried to take screen of this layers, and crop it, but here is another problem - I don't know why, the screenshot is bigger than real screen (dpi 144). Maybe it is because I have retina?

Anyway - I tried to crop this, but here is another problem - the picture has change the colors - and I need exact color of background - because of this: http://cestadreva.cz/page/uvod- see first picture (tormek) and see color of background belong the shadow. 

 

I am not satisfied with quality of this pictures, even my source pictures are good - please help me, thank you.

Zuzana

[Zuzana]

sorry, here are the attachments.

[R C-R]

Even I do marge text - it "rasterize" and it seems very fuzzy.

Everything in a JPEG file is rasterized -- the format does not support resolution independent vector shapes or text. So every edge that doesn't exactly fill a pixel (basically, any edge that isn't exactly vertically or horizontally aligned and pixel aligned in the app) will be a little fuzzy.

 

There is nothing you (or Affinity) can do about that besides using larger JPEG images that have more pixels.

 

How large are your exported JPEGs (their pixel dimensions, not their file sizes)?

[Zuzana]

Hello, yes, I know jpg is always rasterized, but in photoshop it was much, much different. Text was clear, not like this fuzzy...

Dimensions are 450x89 ps, 72 dpi, 57 kb (photoshop much nicer, 16 kb). I buy Affinity, because it has nice reviews and good price... But this I did not know, it surprised me...

[R C-R]

Are you certain you were exporting JPEG files from Photoshop & not some other file type? If the JPEG image file is 450x89 px, there is no way you will get sharp edges for anything with a diagonal edge.

 

Think of it like a grid 450 squares across by 89 squares down. For a JPEG or any other completely rasterized file type, every square must be completely filled with some color, edge to edge, top to bottom & side to side. The resolution can never be higher than that.

[Fixx]

Here is 450X89 JPEG @ Q50: 

 

looks normal to me. I kind of suspect that OP is looking graphics at 200 % and original art looks better because it is hires. At 100% they would look about the same.

[Zuzana]

Well, what can I say - yes, this image is good. But I still think, that my image is no good - with 100% export quality it is worse than your image, I don't know why. My text is smaller, but I think it should not be so fuzzy like it is. Yesterday I try to change color... Maybe it is problem with retina (picture is in 72 dpi), now I saw it on normal display and it was no so fuzzy. I must learn more about this...

Thank you for your replies!

[R C-R]

Here is 450X89 JPEG @ Q50: 

 

looks normal to me. I kind of suspect that OP is looking graphics at 200 % and original art looks better because it is hires. At 100% they would look about the same.

The text in your test image fills the entire 450x89 pixel image area. Compare that to how much of Zuzana's image's pixel area is filled with text.

[Fixx]

Zuzana's image is 970 pixels wide, and cropped to intended are is still about 888 pixels wide. So final 450 pixel wide graphic is viewed 200% and it is no wonder it looks fuzzy. That is, if these uploaded images are true.

[R C-R]

Zuzana said earlier in post #6 "Dimensions are 450x89 ps, 72 dpi." I'm not quite sure what "ps" is supposed to mean but if it is pixels, then that doesn't leave very many pixels available for text much smaller than those pixel dimensions.

[Zuzana]

Sorry I didn't understand - my picture is 970 pixels wide? it is 450 px (ps should be px).

What I did - at first, I export my picture from affinity photo - it looks fuzzy. 

second - I did screenshot of layers, open this screen in affphoto and crop it. Result was slightly better, but this cropping was bad - not exact like on photoshop (but I think I must do some settings and it will be ok). Anyway, after crop I must do smaller the picture, because - I don't know why, when I put screen to affphoto it was bigger than original (144 dpi). maybe my mac now do screenshots in this resolution because of retina.. I have this retina only 2 months, before I had mac with normal display and I had photoshop. 

Do you know please why the screenshot is bigger than original?

 

[Fixx]

Yes, the uploaded image above was 970 px -- it may well be that retina display makes complications.

[R C-R]

You probably are correct about the retina display screenshot including more pixels than actually are in the image. It really doesn't have anything to do with the dpi of the image -- you can zoom the Affinity display of the image to any size, so a screenshot will include however many screen pixels are used to display that size, whatever dpi value is set for the image.

 

Besides, dpi doesn't mean much unless you are printing -- browsers ignore dpi when displaying images on web pages, which is why presets for web use typically use 72 dpi as a default.

 

Anyway, the exported JPEG image is fuzzy because there are just not enough pixels in it to show much edge detail. Different resampling methods will change the appearance of edges, for instance by anti-aliasing edges that do not align with pixel boundaries exactly, but you either have to uses larger pixel dimensions for the export or include fewer, larger picture elements if the JPEG image must be that small.

[Alfred]

Besides, dpi doesn't mean much unless you are printing -- browsers ignore dpi when displaying images on web pages, which is why presets for web use typically use 72 dpi as a default.

 

That's really a Mac thing, isn't it? The standard display setting on Windows systems is 96 pixels per logical inch.

[Fixx]

That's really a Mac thing, isn't it? The standard display setting on Windows systems is 96 pixels per logical inch.

That is old and unnecessary thing.. in the net no one knows you are 72 dpi. 

[R C-R]

That's really a Mac thing, isn't it? The standard display setting on Windows systems is 96 pixels per logical inch.

It is a browser thing. Browsers don't care about image dpi values, only about their pixel dimensions. That defines the "actual size" of the image but how it is rendered on screen depends entirely on what the device & the browser does with that information. For instance, Safari on a Mac can display a web page at actual size or zoomed in or out to other sizes, & even just zoom text without that affecting images on the web page.

 

Basically, a web page is just a bunch of resources tagged to indicate what they are & how they can be used. How they are displayed or used (or if they are displayed or used at all) is left up to the client.

[R C-R]

... in the net no one knows you are 72 dpi. 

In fact, very few devices are rendering anything at that resolution. Every "dot" of a display screen is made up of a three color triad of sub pixel elements. The number of those triads determines its native resolution, regardless of how closely they are packed together. Everything gets mapped onto those pixels, so "actual size" is an ambiguous term that can mean any of several different things depending on how that mapping is done.

 

It is the same for printers. Printer software maps everything into a format suitable for the printing method, which for example in an ink jet printer could be a micro-fine spray of hundreds of droplets of three or more colors of ink, none of which corresponds directly to a "dot" in a dpi value.

 

Thankfully, we usually don't have to think about any of this "under the hood" stuff because the software handles it for us, automatically making the right choices depending on the intended use, but sometimes it helps to understand a little about how it all works to avoid unpleasant surprises or extra work.

[Zuzana]

Thanks to all for your replies. Now I know more : ). Zuzana

[Alfred]

It is a browser thing. Browsers don't care about image dpi values, only about their pixel dimensions.

 

Thanks, R C-R. I'm aware of that: I was responding to the comment in your previous post where you wrote "presets for web use typically use 72 dpi as a default". As you've pointed out in your latest post, very few devices actually render anything at that resolution.