: Why is my Logo losing quality when I save it for the web? I am designing a website for my business and I am having a bit of trouble. I am not very good as this sort of thing but hoping

@Michele215

1) If you have contact to the designer you should idealy ask for a vector based logo.

2) Do not use jpg for a logo or any graphic that has large uniform areas of color. Use png at this case.

3) This image is not really pixelated. It has a strong jpg compression. See point 2.

4) It has some thin lines that should be adjusted. That needs to be done in vectors. See point 1.

5) You do not need to remove a background. If the designer has the vector logo he can generate a transparent one from scrach or provide a clean one with a white background. See point 1.

6) It is blurry. If the source image is smaller... yes you are pixelating it. If the image is bigger, use the resample bicubic sharper.

Vote Up Vote Down

@Karen819

there is many factors that cause image to pixelat:


Saved with the wrong format. In PS use "save for web and devices" -> and select png-24 (high quality)
image resolution; make sure it is 72 ppi (300 ppi for print)
image dimensions in the website are bigger than the original image dimensions.


Most designers send vector based (Ai) logos as .pdf; vectors allow the ability to transform image dimensions without losing quality, you can open it in illustrator and increase dimensions if needed.

Vote Up Vote Down

@Shelley591

Your logo looks fine--well, as fine as it can be rendered at that size.

The problem is the logo itself. It's using some very fine lines that simply will not render that clear at that size on a screen. Ideally, the designers of branding elements would have created a version specifically for screen use at this size. I'm guess they didn't in that case, so you could propose an alternative that would still adhere to the brand guidelines, but accommodate the realities of screen resolutions.

Vote Up Vote Down

@Lengel450

Looking at your image it looks as though your image has been saved with a high compression.

In Photoshop save your image for web using cmd+option+shift+S.



Since your sample image was a JPG I'm assuming you would like to use a JPG for your website. Slide the quality slider as as low as possible without having any noticeable grainy-ness. Hit save and see how it looks on your site.

If you are still having trouble I would get a hold of your designer and ask if they can provide you the file as an EPS file format (Photoshop can open this file format). This should will prevent you from having to use the magic wand to remove the background.

Vote Up Vote Down