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)
When I export it to the 750 x 650 pixel size that I need for my website, the text is pixelated (see below).
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!
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.
Copy link to clipboard
Copied
Thanks so much Nancy! This makes sense. Will try the HTML text.