I am trying to resize my logo for the web but so far I have not been seeing the result that I want to. It was in a vector format first (AI) and then it was converted to PSD. I then used the image resize option to resize it. This is how my logo looks in Photoshop:

locatask logo

This is how my logo looks on my website when I remove the background and place it on my website

locatask logo resized

It seems a bit pixelated. It does not have the sharp and crispy look I would expect it to have. I am wondering if there is a way to preserve the crispy sharp look of the logo even at that small size.

  • 3
    Create the logo at the proper dimensions rather than scaling it down in the browser.
    – Hanna
    Feb 9, 2013 at 2:39
  • @John I am shrinking it from a rasterized state.
    – Joel Dean
    Feb 9, 2013 at 2:44
  • 4
    Stop. Reduce it in vector form, then save for web.
    – Scott
    Feb 9, 2013 at 3:27
  • 1
    I'd more describe it as being blurry or having softened edges rather than "pixelated", which suggests aliasing or a mosaic effect. There's actually more aliasing in the large scale than the small logo. Feb 9, 2013 at 8:00

4 Answers 4


You should be exporting directly to the pixel dimensions you need from the original Illustrator file.

You'll probably do just fine altering the size in the save for web dialog rather than creating a scaled vector version for every instance.


You should rasterize it in the right pixel dimensions directly from Illustrator whenever possible, but when you're resizing things in Photosohop there is a choice of resampling modes:

  • Nearest Neighbor - This is the simplest form of resampling, if you can even call it that, where the original pixels are just expanded to the next full pixel to fill the new pixel grid. If you aren't rescaling by an even factor, it'll produce lots of distortions. And even when you rescale by an even factor it tends to create a lot of aliasing since you're just blowing up the pixels. This is typically only used when you have a design where all the color boundaries are aligned with pixel boundaries and you don't have issues with aliasing (e.g. pixel art).
  • Bilinear - This is the second quickest method to interpolate image data, and sort of averages the 2x2 px grid on the original image nearest to the point being interpolated (you're actually finding the rate of change in the x and y directions and then extrapolating the intermediate color at the precise distance between x1, x2 and between y1, y2 where the new point sits). The limitations of this method is when you rescale beyond a factor of 2 in either direction (i.e. blow up more than 200% or shrink to less than 50%).
  • Bicubic - There are actually 3 versions of this interpolation method in Photoshop: the stock version, and a sharper and softer version. All 3 are similar to bilinear resampling but use a 4x4 px grid, and instead of just using the derivative of a linear function to calculate the color value at the new point, it uses a cubic spline to obtain a smooth continuous function. The effect of this is that the color transitions are smoother and less choppy. This is not always a good thing (e.g. when you want to preserve hard color boundaries), but in general it's the more "accurate" interpolated image.

    Bicubic Smoother is recommended for enlargements (as it averages out the "edge halo" at sharp boundaries that's an artifact of the cubic spline technique).

    Bicubic Sharper is recommended for reductions, since shrinking large images down to a small size tends to blur the images and require sharpening (as many icon designers will attest to).

So if Illustrator doesn't produce the desired result, I'd try:

  1. First, adjusting the alignment of the vector logo on the pixel grid to prevent unnecessary AA.
  2. Then try manually touching up the AAed edges if only minor adjustment is needed.
  3. Then try rasterizing to an even factor larger than the desired output (e.g. 200% or 300% size), and then using Bilinear or Bicubic Sharper to downscale the image in Photoshop.

Convert your logo layer into smart object (right click on layer, you will find Convert to smart object) then you do re-size.

Note: Don't re-size again and again it will loose original quality, it will show pixels.

  • Actually.. if it's a smart object you can resize as many times as you'd like, just so long as you never go above the original size before it was converted to a smart object.
    – Scott
    Feb 11, 2013 at 7:34

I deal with this all the time. My company has an "O" in it's logo and it "flat tires" when you resize it. This seems to be fixed in Photoshop CC (maybe CS6 also), particularly with the new image referencing feature.

In older versions of Photoshop though, to avoid it just import the vector at the final size you wish it to display at. In the import dialogue in PS, just set the dimensions there.

You don't need to make multiple versions, but you may have to delete and re-import while guessing the size that works within your design.

Not the answer you're looking for? Browse other questions tagged or ask your own question.