Pixelated Text When Reducing Image Size

[jps26395315]

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?

[JJMack]

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.

[jps26395315]

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]

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.

[jps26395315]

You're saying the text shouldn't be pixelated at 200% zoom inside Photoshop, so why is it? I can count the pixels on text when zoomed to 200%. I can't see a pixel on the cow until I hit 400% zoom.

I don't really care about the theory and the pixels and the display. All I care about is being able to create images in Photoshop without blurry text. Is there any way to do that or do I just have to accept that text will be blurry when exported from Photoshop? Is there another application that doesn't result in blurry text when exported?

btw - I've been getting around this issue by creating the images at twice the size and setting the image dimensions on the web page to the size I want to display. This is not efficient since the image is larger to download, but the text doesn't appear blurry. Since this image is a banner that will be displayed on other sites, I need to create it at the actual size, but without blurry text.

[JJMack]

jps26395315  wrote

You're saying the text shouldn't be pixelated at 200% zoom inside Photoshop, so why is it? I can count the pixels on text when zoomed to 200%. I can't see a pixel on the cow until I hit 400% zoom.

That bull not cow the scaled number of pixels are the same.  Every pixel in the text is 4 pixel  zoomed to 200% every cow pixel is 4 pixels zoomed 200%. .   Adobe CC UI scaling scale UI and images differently.  The text in the image is image not UI scaling is like the cow and the zoom scaling is not a vector scaling its a scaling of the composite imaged. not layers scaling

[jps26395315]

Sorry, but I don't understand your comment.

Why can I visibly see pixels at 200% zoom on text inside photoshop, but not on other graphical elements? I have to zoom to 400% to see pixels on other non-text elements.

This seems completely absurd to me. It shouldn't be that hard to create an image with text that is as crisp as every other element in the image. From my perspective, everyone is so convinced that it's a display issue, that no one has considered that it's either a bug or a usability issue in Photoshop. If there's a setting that I'm missing, please share it with me. Otherwise, this is a bug that needs to be fixed. There are hundreds of posts on this forum and others from people having this exact same issue. Creating the image at twice the size so the text isn't blurry is not a good solution and doesn't work in every situation.

[JJMack]

Simply its your mind doing that.  It see the lower resolution in the text sooner than the lower resolution in the cow.  You recognize text well like you do  faces you know. You know how they should look.  You mind does not know what a cow looks like as well as it does friends faces and text so you do not realize how soft the cow's image is.  You see the low-resolution in the text because the edges are not as well defined as your use to seeing.

[jps26395315]

You are not listening to what I'm saying. I do NOT see pixelation when I export an image at twice the size that I want and scale it down in the application or the web page. The text is very clear when I do it this way. It has nothing to do with what my mind is expecting. Text should not be visibly pixelated when viewed at 100%. Period.

Refer back to the original small image I shared. If the text doesn't look blurry to you, you need to get new glasses because it's blurry.

[JJMack]

I'm not where you are so I do not know what you are actually seeing.   If I have an issue like you write you have. It either does not bother me because the actual output is what I want.  Also  I do not know what you are displaying  most likely not the flat image you posted. If the text is rasterized text not a vector Text layer and the 100% zoomed image displays pixelated I would expect the output would also be pixelated if printed at the display resolution.

Image are normally printed at a higher resolution's than displays had so the ate smaller and sharper then what you see on screens.

When I browse the web The display I using has either a 96DPI, 185DPI,  216dip or  a 359dpi resolution  what resolution is your display.

[jps26395315]

Here are some more examples.

Screenshot in Photoshop at 100% zoom. I don't see any pixelation.

Screenshot in Photoshop at 200% zoom. The green circle is barely pixelated, but the text is very pixelated. I would expect the text to be clear at 200% zoom and the circle to be pixelated. Not vice versa.

Exported from Photoshop at 100% scale. Text is a little pixelated, but not bad. I would expect it to be better.

Exported from Photoshop at 50% scale with Resample set to Bicubic Automatic (I've tried all of the resample settings). The text is badly pixelated but the green circle looks the same as the 100% scale export. Why would the text lose quality when REDUCING it's size? I can accept a loss of quality when INCREASING the size, but not REDUCING the size.

Exported from Photoshop at 100% scale with the text layer rasterized prior to export. The text is more pixelated than the non-rasterized 100% export.

I want my exported images to have the same quality as the 100% zoom in Photoshop. Shouldn't they look the same on the same monitor?

[JJMack]

Looking at the images you posted in Photoshop it looks like you resized one down to 50% size using interpolation then resize it back up to the original size using interpolation and that double interpolation added a lot of artifacts image quality was lost. One is scaled up 200&

[jps26395315]

I'm not sure what you mean by resizing using interpolation. The first photoshop image is the 100% zoom view. The second photoshop image is the 200% zoom view of the same compilation. I didn't change anything other than the zoom level. Shouldn't text be clear at 200% zoom inside photoshop on a non-rasterized text layer?

[JJMack]

You post five image  I downloaded them and opened them in Photoshop and spread then out on my display at 100% zoom and captured the screen. I made no changes to you images.  The first four image are the same size.  I couple of the images you posted has an extra frame you captured on you display.  The first of the four image the same size, image quality is  poorer than the other three. But it is the same size as the other three.  It's file name suggest that it  is 50% the size of the other images  but it is not.  It is the sane size.  The quality of the image leads me to believe that is was reduced in size via interpolation.   This resizing lost some image quality.  The were fewer pixels to store image detail in.  The Image was then enlarged in size back to its original size this cause an additional loss of image because the smaller image lacked details need for the additional pixels added.  So details not available needed to be created.

You will also notice that the 200% image size image quality is also of a lower quality compared to the three high quality images. For details not avail for the added pixels had to be create there too.

[jps26395315]

You still haven't answered the main question I've asked in nearly every one of these posts: Shouldn't text be clear at 200% zoom inside photoshop on a non-rasterized text layer? Text is pixelated at 200% zoom but photos and graphics (e.g. boxes, circles, lines, etc.) are not. Even if I zoom to 200% and create a text layer, the text is blurry as I'm typing it. If this is normal, then I'll just have to accept it along with blurry text exported to jpg at 100% scale.

[davescm]

jps26395315  wrote

Shouldn't text be clear at 200% zoom inside photoshop on a non-rasterized text layer?

No your assumption is not correct.

You have not rasterised the text layer - so if you scale the image and view the scaled image at 100% zoom the text will remain sharp.

However the text is rendered for viewing at the image pixel size. So zooming to 200% will use 4 pixels to display 1 image pixel - regardless of whether the source for that pixel was vector or raster i.e. both pixel and vectors become pixelated at greater than 100% zoom.

Dave

[jps26395315]

Ok. Thanks Dave.

Any idea why exporting at 100% scale is causing blurry text? This was my original question that has been answered in a variety of ways, but no one has provided a solution. If I create this image at twice the size I want and then set the image dimensions on the webpage to the size I want, the text doesn't appear blurry. But that solution isn't very good and it won't work for my current needs.

[davescm]

Yes the reason is that given by D.Fosse in post 3.

When you export at 100%, many browsers will scale to 200% (which is what you tried in Photoshop) in order to display the image at a physical size on a higher resolution retina screen. The difference is the browser will not tell you it is scaled.

The only way round is to do what you said in the last post - create the image with more pixels so that it does not need scaling by the browser.

Dave

[jps26395315]

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.

[D Fosse]

This is 300 pixels wide, of which the "get started" text occupies a little over half - around 160 pixels.

I repeat: 160 pixels.

You still don't understand the nature of high-resolution displays and how image pixels are reproduced on such a display. Until you do, I strongly recommend you get an HD display and work on that for anything web-related.

This would have been much simpler if you just listened to what everybody here is telling you. This has nothing to do with Photoshop, and everything to do with your retina display and how Mac OS rescales images on that display.

[jps26395315]

This would be much simpler if you weren't so condescending.

I know the image I shared is 300 pixels wide. I shared it to show how the text is blurry. If I export this image at 600 pixels wide from photoshop, and set the image dimensions on the webpage to 300 pixels wide, the text isn't blurry on my retina display. If I export it from photoshop at 300 pixels wide and let the browser display it full size without setting the image dimensions, the text is blurry on my retina display. Your retina obsession doesn't explain why this is happening. The same image on the same display set to the same size in the same browser should look the same. You can view my test page here: http://www.lottaveg.com/image-test/

Can you see the difference in image quality? It looks obvious to me. Not even close to the same quality.

I've been using an online image resizer to reduce my image size because it works better than photoshop. If I export an image and set the scale to 50% with bicubic automatic (or any of the resample settings), the quality sucks. If I export the same image at 100% and reduce it using an online image resizer, the quality is much better. Your retina obsession doesn't explain this either.

It's frustrating because I want the text to be clear, and I don't care why it's not. I looked at it on my wife's Thinkpad and the whole image is pixelated because her display is so bad. My retina display has spoiled me.

[davescm · Accepted solution]

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

[jps26395315]

Thanks for this link Dave. It explains this situation thoroughly.

What do you think the best approach would be for creating these banner images that will be displayed on other websites? Should I just create the low quality exact dimensions (e.g. 300x600), should I create the high quality (e.g. 600x1200) or should I provide both? Providing both might be confusing to the majority of people who don't understand the high rez screen issues.

[davescm]

Hi

I don't build websites (I mainly take photographs and build some 3D images). As a photographer I would supply the higher res or both.

However, I will link to Nancy OShea and see if she can advise you better here.

Dave

[Nancy OShea]

Create your banners in Illustrator and export to SVG.  Scalable Vector Gaphics won't lose quality when re-scaled.  Text will retain sharp edges on all displays.   You can't do that with JPGs.

Basically, JPGs are good for photos and gradients.  SVGs are better for text, shapes and icons.