Slightly blurry images when exporting

[zeno11]

Pixelmator is a great piece of software and I continue to be amazed by how many quality features you get for such a good price.

My current version is 3.3.2 Limestone but this particular "bug" has been present in the previous versions aswell. Running on a mid-2012 retina Macbook Pro.

Whenever i export an image from Pixelmator (be it .jpeg or .png - max quality) the images turn out to be *slightly* blurry - compared to the actual thing i've been working on the canvas. Like the compression similar of what you get when taking a screen capture.

For example, i created a new document with the preset "iPhone desktop", 640x920px, 72dpi, rotated it 90 degrees, added two layers of text, converted them to shapes for adding gradients, and finally merged all the layers and exported as a maximum quality jpeg. I attached the result where you (or atleast I am) are able to see the fact that the edges of the letters are slightly blurry.

I don't know if it's just my case or a general issue, but thought i'd give it a shot here in the discussions.

Thanks in advance!

PS: i'm no graphics/design professional user/creator, just the occasional i-want-to-make-a-banner/image composition, etc type of user. There might be some degree of mistake on my side and I would appreciate it very much if someone "brought light" in this case.

[Motiejus]

Hi zeno11,

Maybe it's just me, but in my eyes it looks like it's just the result of the .jpeg and .png file formats compression.

[ioserg]

I have the same problem, both images and text come out blurry.
Can someone from pixelmator help us out?

Thanks

[Motiejus]

Hi ioserg,

Hmmm, weird. Could you by any chance share some examples?

[avittengl]

I have the same issue. When exporting an image, the text (and sometimes the image) comes out blurry. It looks fine until it is uploaded to my blog or social media. I have searched this site and google for answers. I am coming up short. I would appreciate help with this matter, as well.

[Motiejus]

@avittengl, in such a case Pixelmator has nothing to do with it, I'm afraid. Depending on where you are uploading the image at, the website might apply some sort of compression on the image what could furthermore result in a degraded overall quality.

Another possible reason for this could be that you're using a Mac with a Retina display, but your blog itself isn't optimized for the Retina displays. In such case, images you upload will always appear blurred and pixelated.

[Brandonlk]

I agree as well. I upload content to Facebook and to Amazon for my job and they are always blurry. Or just not as clear as they are when I am working on them. It really drives me crazy because someone else will do the same thing using Photoshop and it doesn't happen to them and I look like the idiot. haha

[Celeste G]

Hello guys,

I am really upset about this too. Why isn't anyone helping us ?

I made another post where I give also examples and pictures.

[c12281]

I have this problem as well. Exported jpgs and pngs are always a bit blurry.

[Kurator]

Same here... jpg and png are always a bit blurry in new photos. This has been a while...

[Jake B]

YOU'VE GOT TO BE KIDDING!

This has been a bug since ... 2015?!

Having the same problem, just bought Pixelmator Pro. Dawning on me now, looking at 2 years of unresolved bugs, that this was probably a huge mistake.

[C. Vad]

Anything on this? I'm noticing it and it's a problem.

[st3f]

Wow... this thread goes back a way. Have any of you seen the episode of House MD called Three Stories? If not, I recommend it. Three people arrive in hospital with the same symptom: they all have pain in one leg. Without giving away any major spoilers, the pains all have different causes, treatments and outcomes. A symptom is not a diagnosis and blurry image doesn't necessarily tell you what's wrong.

I don't work for Pixelmator but I'll help if I can. Do you have a sample image that shows the problem?

[C. Vad]

Thank you.



Here are some examples.



This one was made with Photoshop. note the crisp text and image.







That file was downloaded (not screen shot) and I simply added the white box and "Available NOW!" text over it to create this:









Here is another example.



This one was made in Photoshop - note the crisp image and text:







This one was done in Pixelmator. Image and text are noticeably soft...









Thanks for any help.

[st3f]

Looking at the first pair of images, I'm definitely seeing some softness on the second, like a 1px blur over the whole image except for the black bar at the bottom. So... first thing I did was a sanity check to see if I get the same results as you.



In both Pixelmator and Pixelmator Pro I did the following:

I dragged the first image directly from this web page onto the Pixelmator/Pixelmator Pro icon to create a new file.

I copied the second image (right-click and copy) and pasted it as a layer (just as a reference to draw the rectangle and text).

I drew a rectangle and grabbed the colour from the reference layer.

I created the text and grabbed the colour from the reference layer.

(I didn't bother replicating the changes in the black bar as I just wanted a quick test)

I then hid the reference layer and exported.

In Pixelmator I used File > Export to save the image as a .png file.

In Pixelmator Pro I used File > Export for Web to save the image as a .png file.



These are my results:

Pixelmator 3.7.5: (edit: forgot to put a shadow on the rectangle. Never mind.)



Pixelmator Pro 1.1.5: (edit: positioned the rectangle really badly. Never mind.)



Both apps running on macOS 10.14 on a Macbook (Retina, 12-inch, Early 2015).



They look crisp in both to me using quick-look. I'll check again once they have uploaded. (edit: they still look crisp to me)



The next step I'd recommend is to see if you can replicate the same results as I just have with the exact steps I took above.



If that works, I'd be interested in learning the steps you took in creating the image originally, it may be that you're making a mistake that I can learn from, or it could be that you work in a different way to me and are exposing a bug that I do not see.

Of course if it doesn't work then it's time to see what is different about our set-ups and see if we can find what is causing the problem to persist.



So... I'd be interested in the following:

What computer are you using? (you can just cut and paste from  > About This Mac)

What version of macOS are you using? (again, you can just cut and paste from  > About This Mac)

Are you using Pixelmator or Pixelmator Pro?

What version of Pixelmator/Pixelmator Pro are you using?

Have you seen the Three Stories episode of House MD?

And finally (drumroll) what do you get when you try copying the steps at the top of this post?



I'm in the UK, so off to bed now. Will try to check in on this tomorrow. All the best.



- Stef.

[C. Vad]

This is a new computer but I had the same issues on my old Mac Mini (non-retina). I create things for work, which I then view on a Windows machine. I notice the difference immediately, on the mac, and at first thought it was just better rendering on the mac but then noticed it looked soft on the Windows machine at work as well.



Have not seen that episode of House. Actually have never seen an episode of House.





Here's what I get:











Looks to me like an anti-aliasing issue.



Found these:



viewtopic.php?f=3&t=15147



viewtopic.php?f=3&t=15850



viewtopic.php?f=16&t=15467



Thanks!

[C. Vad]

More evidence we're not crazy (weird that it's on a NI forum, but whatever):







https://www.native-instruments.com/foru ... ac.224729/

[C. Vad]

This is from the Pixelmator Pro forum:







Can someone show me these options? (I don't have Pixelmator Pro.) Maybe there is a quality setting...?



Source: https://www.pixelmator.com/tutorials/co ... re-images/

[st3f]

Whoa there... there are about six things going on here. Let's focus on one thing and get to the bottom of one of it. Once that's done I'm happy to explore something else:

1. Congratulations. The image you just posted looks every bit as sharp as the Photoshop image you originally posted. Go back and have a look. There's no evidence of that slight blur that was evident in the first Pixelmator image. Do you want to explore why you got that blur in the first place? I'm happy to work with you to examine your workflow if that would help.
2. Gylon's post about rendering rectangles with no anti-aliasing. I'm happy to explore the history of anti-aliasing: how and why it came about; why it's almost always a good thing, and what to do about it in cases where it isn't.
3. Reinout Roels' post about turning off anti-aliasing in text rendering. Reinout has a very specific requirement. If you need to render text without anti-aliasing we can explore techniques for simulating that. You can't directly turn of anti-aliasing in Pixelmator, but there are always things you can do to create the same result.
4. Ivan Reese's issues are about resizing images in Pixelmator Pro. We're currently on version 1.1.5 of Pixelmator Pro and I think that downsizing an image in Pixelmator still produces more pleasing results. For those of us using Pixelmator Pro, I'm pretty certain that this is something the Pixelmator team are working on. As you're using Pixelmator, it's not an issue for you.
5. Sacha's post about Building with Reactor mentions blur and Pixelmator, but the post is 4 years old and Sacha isn't here. I can't diagnose a problem that I can't examine. (edit: I just followed the forum link. Sacha's issue seems to be the same as Reinout's. They want to be able turn off anti-aliasing in text rendering.)
6. .PNG options. It's true that Pixelmator Pro's Export For Web functionality gives you more options on how to export .PNG files. None of them will affect the quality because .PNG files use lossless compression. If you're using JPEG files, that's a different matter, as they use lossy compression. You're not going to miss out, though, as both Pixelmator and Pixelmator Pro have the all-important quality slider for JPEGs. Anyhow, when JPEG compression gets too harsh it results in blocky artefacts, not the blurring that you were seeing.
7. Making slightly soft images look sharper. There are tools that can trick the eye/brain to make images look sharper than they are. They are commonly used by photographers in post processing and are automatically applied in-camera by a lot of digital cameras. These tools are rarely used by graphic artists because you can usually control the image directly at source and have more options than a photographer.
(edit) 7½. Retina graphics and exporting for the web. Why you might need twice the resolution that you think you need.
(edit) 7¾. How to restore/redraw an old logo that has got a bit fuzzy. (this one may take some time).
8. There are 176 episodes of House MD. If you're going to go down that route, be aware of the commitment.

Hope this helps.

- Stef.

[C. Vad]

Thank you for all your help.

[st3f]

You're very welcome. If there's anything else I can do to help (or if you want explore anything I have written above), just let me know.