Blurry pictures and strange size difference

Is something not working like it should? Let us know.
User avatar

2017-08-04 18:42:22

Hello,

This is happening to me for a while now, and is extremely annoying since I need to create logos and other graphics for web use.

I am going to explain through steps what is going on, please see below and in attached pictures and pixelmator file.

I create a new file of 518x140 pixels with 150 pixels/cm.

I write some text, whatever, it does not matter the font.

I see the file in the pixelmator window at 100% at it is smaller in size compared to the actual exported file. See one of the pictures attached where you see both files next to each other.

To see the actual exported file I need to zoom the file at 200%.
It's like Pixelmator is exporting files zoomed at 200% but with same overall size and resolution.

I open the file after exporting jpg at best quality and the lines are blurry, you can see the pixelated edges of letters, kind of very ugly.
The bigger files is the size that the file opens on my computer and also how web browsers see it.

Please fix this as soon as you can ... or I don't see how I can use your application anymore. I saw others complaining about this in other posts too, from different points of view, but the problem is zoom and blurry pictures. If you look closely at the file you see the jagged edges.

I use latest Pixelmator version on latest Mac OS version.




ImageImageImage
Image
Example.pxm
User avatar

2017-08-12 18:34:38

Hi,

I figured out what is the issue. You show the picture inside the pixelmator app at print pixel size and not screen pixel size. Please fix this !!!
This is why when exported it is so strange since it is not the correct pixel proportion. I have a high def screen, and as you can see above the way you hande this is not correct.

When we create stuff we need screen size pixel and not print size.

I found out this with the help of the Preview app on my Mac, in which I can choose to see print size or screen size.
User avatar

2017-12-11 04:43:09

From a lot of these threads it looks like they're NEVER EVER going to fix bugs.

Just bought Pixelmator Pro and regretting it already. As much as I don't like Photoshop, at least these basic things were working.
User avatar

2018-06-28 17:58:57

I have the exact same issue. Please help!!
User avatar

2018-06-28 20:35:08

Hi Matthew.

I've got some bad news. When high-def/retina screens were introduced some apps started lying to you. They had good reason for doing it but, if you're a designer, you need to know which apps are doing it and why.

First, web browsers. Web pages are often designed around pixel measurements and, to stop web pages from appearing miniscule and unreadable on a retina display, web browsers will pixel-double if you have a one. So a box that is sized in HTML/CSS to be 300px square will, on a non-retina display, be 300px across. The same square on a retina display will be 600px across. They will look about the same size and everyone is happy. It's a convenient lie.

(edit: see end of post. I've done Apple a disservice.) Apple's Preview app joins the friendly conspiracy. After all, Apple doesn't want to face awkward questions about why an image looks differently in Safari and in Preview. You can easily demonstrate this. Look up the resolution of your Mac on the Apple website and create an image of exactly that size (edit: at 72ppi) (with any image editing app you choose). Load it into Preview, set the view to 'Actual Size' and you will notice that the image is two screens across and two screens high. Personally I think Apple made a huge mistake by not making a pixel-doubling option that you can easily toggle on and off in Preview. It would be really useful and might clear up a whole load of confusion.

When designing something, it helps to know what is going on. It helps not to be lied to. So, where Preview and Safari will pixel-double, Pixelmator and Pixelmator Pro will not (and I am very glad of that fact). 100% view is one pixel of image to one pixel of screen*. This, by looking at all the comments above, seems to have confused a lot of people and left them angry and upset.

If you're a designer it's important to know your tools.

Hope this helps.

- Stef.
*You could argue the case that the assumed resolution of the your screen and the PPI of the image should be taken into account but that's a whole other debate (and one that I'm staying out of).

(edit). I've realised that I've been unfair on Apple's Preview app. It pays respect to the the PPI of the image. So if I create an image the size of my retina screen at 72ppi, it is about four times my screen size. If I save the same image with 144ppi, it is about a screenfull. So if you want to save an image that looks the same in Pixelmator and Preview, set the resolution of the image to 144ppi (edit (again) or whatever Apple says the PPI of your screen is)).
User avatar

2018-06-29 08:01:20

Stef's covered the issue very well here, but I'd just like to say that you shouldn't rely on PPI having an effect on how the image is displayed on screens. Although Preview takes PPI into account (which is a nice 'hack'), the PPI setting is purely for print images and web browsers won't look at it all. Basically, if you're preparing images to be displayed on a screen, you need to know what size the images will be displayed at in pixels.

To reiterate, if you need a 518x140 pixel image, for that image to look good on a Retina display (which has roughly twice as many screen pixels as a regular display), you'll need an image which is twice as large, i.e. 1036x280.

When Retina displays were introduced, web browsers were programmed to scale up all images on those displays by a factor of 2 so that web designs wouldn't fall completely apart. This, as you can see, results in blurry images so any modern website will have images in two sizes – a @1x size for regular displays and a @2x size for Retina/other hi-res displays. When a web browser sees that the visitor has a Retina display, it will serve the larger image to them if this is available in the code.

So that's a little bit of web history — now, why does Preview display scaled up images? Probably to keep things consistent with web browsers at the cost of apparent blurriness. It has a few little hacks like the 144 PPI thing and it has a setting in Preview Preferences called "Define 100% scale as", but I think that just adds to the confusion.

The one thing you should take away from this is that if you're creating images to be displayed on screens (in apps or on the web), you have to know the pixel size you'll need and you have to have 2x versions of those images. Because it's not possible to upscale photographic (bitmap) images without losing quality, the standard workflow for designers is to start with the 2x image, then export a scaled down version to create the 1x image. You can do this using the Export for Web tool in Pixelmator Pro.