29 Replies Latest reply on May 16, 2017 2:53 PM by jps26395315

    Pixelated Text When Reducing Image Size

    jps26395315 Level 1

      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?

       

      LottaVeg-300x600.jpg

       

      LottaVeg-600x1200.jpg

        • 1. Re: Pixelated Text When Reducing Image Size
          JJMack Most Valuable Participant

          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.

          • 2. Re: Pixelated Text When Reducing Image Size
            D Fosse Adobe Community Professional & MVP

            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.

            1 person found this helpful
            • 3. Re: Pixelated Text When Reducing Image Size
              D Fosse Adobe Community Professional & MVP

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

               

              retina.png

              • 4. Re: Pixelated Text When Reducing Image Size
                jps26395315 Level 1

                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.

                Screen Shot 2017-05-13 at 9.39.50 AM.png

                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.

                • 5. Re: Pixelated Text When Reducing Image Size
                  D Fosse Adobe Community Professional & MVP

                  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:

                  pixels_2.png

                   

                  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.

                  • 6. Re: Pixelated Text When Reducing Image Size
                    JJMack Most Valuable Participant

                    jps26395315  wrote

                     

                    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.

                    If you writing about what you see on your display here is what you should know and see.

                    Your Display has a single resolution.  Everything you see on you display is being displayed with that resolution.

                     

                    You are only looking at you image actual pixel when in Photoshop when zoomed to 100%

                     

                    Photoshop zooming scale you image quickly for performance not for image quality at some zoom percentages the image may look quite poor.  At 200% there should be no distortion for is an even mutable of your image size the scaled image will have 4 times as many pixels as the actual image. What you see on you display is a larger softer image at the displays resolution.

                     

                    If you look at your image at 100%.  Then reduce the number of pixels you have for the image using image size to interpolate you image down in size.  The resulting image should be smaller on you display an perhaps appear sharper because of the reduced size of the image.

                     

                    Any image you post on the web I will see at my display resolution. If you are posting some scaling of your image I will what it look like scaled at my displays resolution  and most likely it is not what you looking at.

                     

                    The only way to see you actual image is to print in using the correct size pixels,

                     

                    If you are creating Image files for displays.  These days you need to save version of you image are various sized to support displays with different resolutions.  For a single version of your image  will display large on a low resolution display and small on a high resolution.

                     

                    For example:  If you save an image size that is 1920x1080 pixel.  That image will full my 23" 96. dpi display.   That image will fill only 1/4 of my 24" 185dpi  Dell 4k display.  That image will fill 1/8 of the Dell 32" 280dpi 8K display that I will not pay $5000,00 for.

                     

                    The net result is your image will display 23" or 6" or 4'" in size on those devices and even smaller on my galaxy the has a 359dpi  resolution

                    • 7. Re: Pixelated Text When Reducing Image Size
                      jps26395315 Level 1

                      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.

                      • 8. Re: Pixelated Text When Reducing Image Size
                        JJMack Most Valuable Participant

                        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

                        • 9. Re: Pixelated Text When Reducing Image Size
                          jps26395315 Level 1

                          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.

                          • 10. Re: Pixelated Text When Reducing Image Size
                            JJMack Most Valuable Participant

                            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.

                            • 11. Re: Pixelated Text When Reducing Image Size
                              jps26395315 Level 1

                              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.

                              • 12. Re: Pixelated Text When Reducing Image Size
                                JJMack Most Valuable Participant

                                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.

                                • 13. Re: Pixelated Text When Reducing Image Size
                                  D Fosse Adobe Community Professional & MVP

                                  There is no bug in Photoshop.

                                   

                                  I suggest you get hold of a standard HD display to compare. Then you'll see for yourself that it's all about the display, and how Mac apps scale Photoshop files up on the retina screen.

                                  • 14. Re: Pixelated Text When Reducing Image Size
                                    jps26395315 Level 1

                                    Here are some more examples.

                                     

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

                                    PS 100 Percent Zoom.png

                                     

                                    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.

                                    PS 200 Percent Zoom.png

                                     

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

                                    Export 100 Percent.jpg

                                     

                                    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.

                                    Export 50 Percent.png

                                     

                                    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.

                                    Export 100 rasterized.jpg

                                     

                                    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?

                                    • 15. Re: Pixelated Text When Reducing Image Size
                                      JJMack Most Valuable Participant

                                      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&

                                      Capture.jpg

                                      • 16. Re: Pixelated Text When Reducing Image Size
                                        jps26395315 Level 1

                                        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?

                                        • 17. Re: Pixelated Text When Reducing Image Size
                                          JJMack Most Valuable Participant

                                          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.

                                          • 18. Re: Pixelated Text When Reducing Image Size
                                            jps26395315 Level 1

                                            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.

                                             

                                            Screen Shot 2017-05-15 at 3.48.08 PM.png

                                            • 19. Re: Pixelated Text When Reducing Image Size
                                              davescm Adobe Community Professional

                                              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

                                              • 20. Re: Pixelated Text When Reducing Image Size
                                                jps26395315 Level 1

                                                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.

                                                LottaVeg-300x600.jpg

                                                • 21. Re: Pixelated Text When Reducing Image Size
                                                  davescm Adobe Community Professional

                                                  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

                                                  • 22. Re: Pixelated Text When Reducing Image Size
                                                    jps26395315 Level 1

                                                    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.

                                                    • 23. Re: Pixelated Text When Reducing Image Size
                                                      D Fosse Adobe Community Professional & MVP

                                                      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.

                                                      • 24. Re: Pixelated Text When Reducing Image Size
                                                        davescm Adobe Community Professional

                                                        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

                                                        • 25. Re: Pixelated Text When Reducing Image Size
                                                          jps26395315 Level 1

                                                          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.

                                                          Screen Shot 2017-05-16 at 2.19.18 PM.png

                                                           

                                                          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.

                                                          • 26. Re: Pixelated Text When Reducing Image Size
                                                            jps26395315 Level 1

                                                            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.

                                                            • 27. Re: Pixelated Text When Reducing Image Size
                                                              davescm Adobe Community Professional

                                                              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

                                                              • 28. Re: Pixelated Text When Reducing Image Size
                                                                Nancy OShea Adobe Community Professional & MVP

                                                                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.

                                                                 

                                                                 

                                                                Nancy

                                                                1 person found this helpful
                                                                • 29. Re: Pixelated Text When Reducing Image Size
                                                                  jps26395315 Level 1

                                                                  It looks like SVG is only recommended for images without photos. It's also not the recommended file type for banners used in affiliate programs. Looks like I'm stuck with creating two separate images for each banner.