How to ensure the text in image looks sharp and nice?

Question

I have the following orignal raw PNG file which looks like this.

(It may look good, or it may look bad. Depending on your monitor. It looks OK in my non retina display)

When I use it in a web page, and navigate it using retina display, it looks very ugly and unprofessional. This is the screenshot. If you open https://i.sstatic.net/owf8L.png directly and zoom 100%, u can see the ugliness

I was wondering, what is the common practice in graphics design/ web design industry, to make image text looks sharp and nice?

I had tried.

Disable anti-alias

I use GIMP tool. I'm using Roboto Light font. So, when I disable anti-alias, the straight vertical stroke for F and M is gone. (The text block in yellow rectangle is the one I tried using disable anti-alias)

Using SVG

When I perform PNG to SVG conversion, I get the following black and white image :(

I was wondering, what is the common practice for web designer/ graphics designers, to ensure the text in image looks sharp all the time?

Answer 1

Forget PNGs, forget GIMP, forget Photoshop. PNGs are raster images made of pixels, GIMP and Photoshop are raster image editors. Rescaling raster images (which is what your browser is doing for your Retina display) causes degradation in image quality. If you insist on using PNGs you'd need to alter your CSS to serve a higher resolution PNG for Retina displays. It is entirely possible to do this, but you don't need to do that for a simple logo/banner with no photographic images.

Forget using online services to convert PNG to SVG. These websites basically autotrace the raster image. The results are usually awful - as you have already discovered.

Recreate your logo by hand, using vector image editing software such as Inkscape which is free, or if you can afford it, Adobe Illustrator. Your logo is very simple, and easily recreated in vectors.

Here's an example of what can be done in Inkscape. I recreated your logo using only vectors, it took about 10 minutes. Then you can save it as SVG from Inkscape.

SVGs are vectors, and have no pixels. That means you can scale an SVG without degradation in image quality.