Skip to main content
K
Kickoff89
Participant
December 10, 2018
Answered

Blurred logo on the website

  • December 10, 2018
  • 2 replies
  • 410 views

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.

    This topic has been closed for replies.
    Correct answer Jacob Bugge

    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.

    2 replies

    Jacob Bugge
    Community Expert
    Jacob BuggeCommunity ExpertCorrect answer
    Community Expert
    December 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 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.

    hammer0909
    Community Expert
    hammer0909Community Expert
    Community Expert
    December 10, 2018

    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?

    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices