• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 650
  • Last Modified:

How to crisp an image in Photoshop or Illustrator for web use?

I've created an image in Illustrator and would like to reduce it down to 45x42 px to use for the web. When I reduce the size down that small or save for the web, the curved edges look pixelated.

I've saved it as PNG, PNG24, GIF. Every time I put my image in my webpage, it comes out blurry, not crisp. I've used no background and the background of the actual site. I've made it the size I need for the web, and made it larger and then resized the IMG tag to be smaller. I've imported into Photoshop and saved. I've imported into RIOT and saved for web.

No matter what I do, it loads pixilated in the web page. (IE and Chrome.) Even from file explorer it isn't 100%, maybe slightly better than on web page though.

Is there any way of making the image crisp at a smaller size? It is a raster image, so why is it pixelating at 45x42? If I make it smaller within Illustrator, it starts pixelating.

this is the best so far, but I need it smaller and it's still not 100% crisp.

best so far
Starr Duskk
Starr Duskk
2 Solutions
How about giving us the original image.
Because there are many variables and more then one

Tom BeckCommented:
Thin curving lines at that size? It's not going to get any better than what you have already. You have a grid of pixels 45 wide by 42 tall. Each pixel can only be one rgb value for the web. The curved lines cross over pixels and many different angles but the pixels must remain square, hence the pixelated look. Only a vector graphic can maintain a hard edged curved line at that scale and only Scalable Vector Graphics (svg) are web compatible. I think it's a too complex a shape for svg though.

There's a nice illustration and description about svg on this wikipedia page.
Starr DuskkASP.NET VB.NET DeveloperAuthor Commented:
I found this, so I'll give converting to SVG a shot. thanks!


Since the October 2014 update of Photoshop CC, Photoshop can natively export SVG!!! This is awesome. Just select the layers you want to export, open the “File > Extract Assets” window. It lets you select layers and define in which format you want to export them one by one. You have the choice between JPEG, PNG and SVG!
Easily Design & Build Your Next Website

Squarespace’s all-in-one platform gives you everything you need to express yourself creatively online, whether it is with a domain, website, or online store. Get started with your free trial today, and when ready, take 10% off your first purchase with offer code 'EXPERTS'.

Tom Beck has an excellent suggestion with the SVG.  
One problem with the pixels is the colors. Those colors with a white BG.
The hart looks great with a black BG,

I thought you could bake it in a hot oven for an hour and check the crispness after that.

If the doesn't work and you aren't able to use the SVG solution (by far the best answer) you could try creating a file the is over scaled say 400% the original and rasterise that, then scale the rasterised file.

Also tweak the blur and sharpness settings in the Save for Web dialog.

If the file you need rasterises like the thumbnail in the thread then you aren't really going to get better than what you have.
Starr DuskkASP.NET VB.NET DeveloperAuthor Commented:
thanks! got the SVG to work only through Illustrator. For some reason that option was disabled in Photoshop, even though we updated to the latest version. But when we shrank the window to make the image smaller to see if it kept the detail, it did not, so going to try baking it in a hot oven and checking the crispness after that!

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Keep up with what's happening at Experts Exchange!

Sign up to receive Decoded, a new monthly digest with product updates, feature release info, continuing education opportunities, and more.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now