: How can I get a sharp logo in my website? When I upload my logo in png, it's coming with a pixelated white edge. When I send in jpeg, it's not sharp enough. How should I do it?

@Shelton719

I'm guessing you have saved it as an 8 bit png, or it's been cut out of a white background poorly. Best is to save as an svg. If you can't do that then a 32 bit png with transparency.

Note, if you are scaling the image down in the browser then some browsers will perform better than others. Ideally use svg!

Vote Up Vote Down

@Heady304

If you have the logo vector file...you could export as .SVG.
Have a look here: css-tricks.com/using-svg
It will look the same across all sizes and users devices.

Vote Up Vote Down

@Sue6373160

You should try designing your logo on a canvas double the size of the original height and width of your logo. Once complete the design, just go to File > Save For Web > Select the desired image format, give in the original height and width of your logo and click on the save button.

Vote Up Vote Down

@Dunderdale640

What is the resolution of your image and what's the size of your element? I had a similar issue in the past although my image had great quality. Save as 300dpi and use a very high resolution i.e. 1200px - 720px and PNG of course as it tends to work better for sharp edges. However, I'm not sure if using a very high res is the best solution but thats how I solved my problem and didn't see any noticeable downsides.

Read more about Image Compression

Vote Up Vote Down