Participating Frequently

Answered

Pixelated Text When Reducing Image Size

Forum|Forum|8 years ago
May 12, 2017
4 replies
24935 views

I've spent a lot of time trying to figure out the best way to do text in Photoshop, but nothing seems to work. The text is pixelated.

Anti-Alias is set to Sharp and Blending Mode is Normal so that's not it. I've tried both jpg and png.

I'm using a Mac. If I create the image at 100% zoom in Photoshop, it's half the size on the palate as it is once it's exported. When I view the exported image in an image viewer like Preview on the Mac, the image is twice the size and the text is pixelated, but the graphics look fine.

If I create the image at twice the size I need (e.g. 600x1200 instead of 300x600) and reduce the size of the image on export by 50%, the text still appears pixelated. Even if I export the larger image and view it at "Actual Size" in an image viewer, the text still appears pixelated.

I've read a bunch of forum posts and watched a dozen videos. They all say it's either anti-alias, blending mode or the retina display on my mac, but it's none of those. The anti-alias and blending mode are set correctly. If it was my retina display, the text on the exported images should not appear pixelated at 100% zoom.

How can I fix this?

text pixelated

This topic has been closed for replies.

Correct answer davescm

I understand what you're saying, but it still doesn't make sense that telling the browser to reduce the size of the image from 600x1200 pixels to 300x600 pixels makes the text crisp/not pixelated, but displaying the image at the actual size results in blurry text.

Unfortunately, this image is a banner that will be displayed on other sites, so I can't rely on the the other sites to set the correct dimensions on the image in their pages. I have to provide the image at the correct dimensions (300x600 pixels), which will result in blurry text.

This is extremely frustrating.

Take a look at this ( or do a quick web search which turns up lots of similar advice) regarding serving up more than one image resolution for each image - so that the browser will display the correct version according to the display monitor resolution.

A guide for creating a better retina web - Ivo Mynttinen / User Interface Designer

Hopefully that will help you're thinking and relieve the frustration.

Dave

C

Carlos34344137w6g0

Participant

hi, it's been years since you posted that question so maybe you have the solution already, or maybe you don't. But here is a video I found on how to make the pixels less visible. I believe it works really well but obviously isn't perfect. It's really simple and video is less than 2 mins. Hope this helps someone!

https://www.youtube.com/watch?v=zFXAKm-ykaY

D Fosse

Community Expert

This should illustrate what happens to an image that is exactly 1440 pixels wide, on a standard MBP screen vs. a retina screen:

D Fosse

Community Expert

It is in fact the retina screen.

These screens are double the resolution of a traditional screen, which by its very nature means that everything natively displays at half the size you're used to from a traditional screen.

That's when Apple and the other manufacturers say, "this won't do. People will complain that everything is tiny. We have to scale everything up to twice its real size, so it's the same size that it used to be".

And that's what they did. An image pixel is now represented by, not one, but four screen pixels. All the native Mac OS apps, viewers, web browsers, they all do this. But they don't inform you of that fact!

Photoshop, on the other hand, is a professional-grade image editor. It's used for a lot more things than browsing websites. It's used in critical work in print design, prepress, medical and forensic work, it's used by pixel-peeping photographers. They all need to absolutely trust what they see. So Photoshop has to display accurately, and it still represents one image pixel by one screen pixel.

There is a simple way to get consistency: Set Photoshop to view at 200%. That's what the others do. You can even assign a shortcut to it.

JJMack

Community Expert

Is the text still a text layer or has it been rasterized or merged into a pixel layer? If it still A text layer it should resize well if not it depends on how great the size difference is and the interpolation method use to resample the pixels. Also are you viewing at 100% zoom actual pixels not at a quick scaling of the image. What you posted does not look bad to me.

JJMack

J

jps26395315Author

Participating Frequently

JJMACK: The text is still a text layer, not rasterized. I developed it at 100% zoom in photoshop. The smaller image was exported at 50% to get the actual size I want. The larger image looks fine, but when I reduce the size, the text pixelates (look at the capital A in "easy" - you can see the stairsteps in the smaller image and the "get started" on the button is very blurry). I created this image in photoshop at the smaller size zoomed into 200%, but the text even looks blurry in photoshop at 200%. When exported and viewed at 100% outside of photoshop, the text is very pixelated. This is what the "get started" button looks like zoomed to 200% in photoshop. It's still a text layer.

DFosse: I've read all of the "it's the retina display" posts, but that doesn't make sense. The text looks fine in photoshop at 100%, but when I export it and view the image on the SAME retina display at 100% using another photo viewer or on a website, the text is pixelated. How can it be the retina display when I'm viewing the text on the same retina display? I see your images and my graphics look fine too. It's only text that gets pixelated, not the graphics in the image.

D Fosse

Community Expert

When I view the exported image in an image viewer like Preview on the Mac, the image is twice the size and the text is pixelated, but the graphics look fine

If it was live text it should be rendered in the screen's native resolution. But anything coming out of Photoshop is ultimately a raster image made up of pixels. This is how it gets treated. Even if it is live text inside Photoshop, you'll have to rasterize at some point for output, and so the final product is just pixels.

How can it be the retina display when I'm viewing the text on the same retina display?

This is a classic case of the mind getting stuck on an irrelevant fact. Yes, it's the same display. But the fact that really is relevant, is that your Mac OS apps scale up on this display. What is in reality 12 by 12 pixels gets displayed as 24 by 24 pixels.

In other words, your wonderful, high resolution retina screen is suddenly turned into a perfectly ordinary, low resolution one. This is the price you pay for having it at the same physical screen size.

Look at this close-up of the file in Photoshop, with View > 200%. I've turned on the pixel grid. Notice how each image pixel here is represented by exactly four screen pixels. This is what happens in the other apps outside Photoshop:

This is a 300 x 600 pixel image. The text in the "get started" button only has about half that - 160 or so pixels. There will be pixels here, there's no way to avoid it.

In photograps, softer by nature, this isn't as noticeable.

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded