1

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)

enter image description here

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.stack.imgur.com/owf8L.png directly and zoom 100%, u can see the ugliness

enter image description here

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

enter image description here

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 :(

enter image description here

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

2

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.

enter image description here

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

  • Hi @Billy Kerr, sorry for late reply. Do you mind to sold me SVG version of banner to me, as I don't have correct skill to create such. – Cheok Yan Cheng Jan 16 '18 at 6:10
  • @CheokYanCheng Sorry I deleted the file a while ago, and this is not a place to sell things any way. – Billy Kerr Jan 16 '18 at 8:16

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.