Search code examples
htmlcsssvgpng

How to scale a .png?

I'm making a website but my logo is in PNG format because it is pixel art. I'm using a CSS line image-rendering: pixelated; on my logo image but I haven't seen it to be reliable in some context. SVG converters make it look weird. I want to keep the pixels but make it scalable. If it helps I'll add the html and CSS of my logo.

HTML -

<img src="images/favicon.png" id="logo">

CSS -

#logo {
    image-rendering: pixelated;
    position: fixed;
    left: 5px;
    top: 5px;
}
Solution

  • You can't scale PNG like vectors because there is no information how to add more pixels.
    So the image gets blurred.

    But some of those new fancy AI tools claim they can enhance blurred images, so try those.

    You will never get the same sharpness, because only a human understands what needs to be done, AI will just see pixels and shapes.

    If your logo is suitable to be drawn with vectors; re-creating it by hand is your only option.