• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

Pixelated text after export for web

New Here ,
May 30, 2020 May 30, 2020

Copy link to clipboard

Copied

Hi! I've been wracking my brain and looking at tutorials/forums and can't seem to figure this one out. 

 

I need an image for my website that is 750x650 pixels. The image includes text. This is how clear the image looks in photoshop (it is currently at 2000 x 1600 pixels)

Crisp image but large pixel size - too bigCrisp image but large pixel size - too big

When I export it to the 750 x 650 pixel size that I need for my website, the text is pixelated (see below).

Correct pixel size but pixelated visualCorrect pixel size but pixelated visual

NO matter which way I've tried. It seems that I can either have a crisp image with text that is larger in pixels or I can have a smaller pixel image, but it will be pixelated. It seems that I can't have both. Yet, I've seen plenty of websites that have a small visual with a lot of text in them and they look perfectly crisp. What am I not doing right or just not doing? Should I not be using photoshop for text? To be fair, I've also tried this in Illustrator with similar pixelated results.

 

Here is what I have tried so far that did not work

1) In Image Size window, I've played with every single resampling option in the drop down menu 

2) In Image Size window, I've also played with unchecking the resample box alltogether

3) I've created a canvas size of the pixels I needed and placed the photo in there and then exported

4) I've tried not to export but just create the canvas size I needed and then just "save as jpg" and played with various resolutions and optimization options in all of the drop down menus. RGB was always checked, not CYMK

5) Played with resolution (realize that it doesn't matter for web images) but played with resolution from 72 to 600 - still pixelated no matter what

6) Text itself -Anti Aliasing - I've tried all options in the drop down menu (sharp, none, crisp, strong, and smooth) - all come out pixelated in the end. Different versions of pixelated but still pixelated

7) Text itself, I've played with the unsharp mask and different variations

8) Text itself, tried playing with different masks of sharpness

9) Tried using different fonts and different photos - same results more or less. The bigger the font I used, the more pixelated it actually got

10) In addition to jpg, tried exporting it as PNG and every other file format on the planet

11) Tried the save for web option

12) In the Image size window, played with the Fit To option - Original and Auto Resolution

 

 

Probably tried a host of other things I can't recall but these are the main ones. Would really love to figure this one out! 

 

Thanks so much!

Views

1.9K

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe
Community Expert ,
May 30, 2020 May 30, 2020

Copy link to clipboard

Copied

This comes with the territory.  JPGs are raster images which means they are the sum of their pixels.  Less pixels = low res images = pixelated text.  More pixels = high res = less pixelated text.  JPG format is not ideal for text.  

 

For clear text at any size, use scalable vector graphics (SVGs) instead of raster images.   Alternatively, use your JPG as a background and layer REAL html text over it. 

 

Nancy O'Shea— Product User, Community Expert & Moderator

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Jun 02, 2020 Jun 02, 2020

Copy link to clipboard

Copied

LATEST

Thanks so much Nancy! This makes sense. Will try the HTML text. 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines