• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit Search
0

Blurred logo on the website

New Here ,
Dec 10, 2018 Dec 10, 2018

Copy link to clipboard

Copied

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.

Views

193

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct answer

Community Expert , Dec 10, 2018 Dec 10, 2018

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 optimizatio

...

Votes

Translate

Translate
Community Expert ,
Dec 10, 2018 Dec 10, 2018

Copy link to clipboard

Copied

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?

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Dec 10, 2018 Dec 10, 2018

Copy link to clipboard

Copied

LATEST

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines