Blurred logo on the website

[Kickoff89]

Hello dear, asking you for advice. I made a logo for my eshop in Ai. The programmer asked me for a logo in PNG format. I sent to him the logo in the highest quality, without a background in PNG, but on the website it is quite cubed, blurred. The programmer did not alter the size of the image. I wanted to send ti him the logo in SVG format, but he said he needs it in PNG. Do not you know how to do it so that the logo is in PNG and at the same time sharp when the page is enlarged?

Thank you in advance.

[Chad Chelius]

Well the logo is never going to look quite as sharp as it does in Illustrator as .png is a pixel-based format. That being said, you can maximize the output quality from Illustrator by ensuring that "align to pixel grid" is enabled in Illustrator to ensure that the artwork snaps to the nearest pixel and will look as sharp as possible on export. Also, how are you creating the .png from Illustrator? Are you using "save for web" or the Asset Export panel?

[Jacob Bugge · Accepted solution]

Kickoff,

For a raster format, you should use PNG(24), and it should be created within whole pixels, as Chad said

It is important to use the exact pixel x pixel size(s) that it is used at, one size for each use, or if you must have it used at sizes forming powers of 2 (double, quadruple, etc) and created at the largest size.

in the highest quality, without a background in PNG, but on the website it is quite cubed, blurred

Different qualities apply to the lossy format JPEG, unless you mean optimization which should be used, of course.

The word cubed seems to imply a change of proportions; any change of proportions will introduce blurriness because of the unavoidable change of size in at least one direction.

Anyroad, you may challenge the programmer on the SVG matter: things are (still) changing, and it has always been possible to use SVG and to also supply a PNG version to fall back on for browsers/whatever unable to deal with SVG.