XF 1.1 Make Logo More HD So That It Won't Look Blur on Retina/HD Display

[Shyuan]

Hi,

I have a logo image size of 113 x 90px which looks fine on my Windows. But when I use iphone/nexus 4 (retina/HD display) to view my forum, the logo seems to be quite blurry/low resolution.

May I know how can I increase the quality (make the logo looks more HD) while at the same time maintaining the logo width and height on my forum?

I tried saving my logo.png as 226 x180px from the original psd file. Obviously this will take a very large space on my forum's header. My issue is, how can the logo.png displays on forum like a 113px wide and 90px tall but maintaining the good quality (226 x180px) of the image?

Not sure how to deliver my issue in words. I hope I am clear about my question.

Any help would be much appreciated. Thank you

 

[Andy.N]

I read about this before. You can use media query to deliver the @2x image for devices that has high density and show the @1x for the rest.

What I did with my logo is to use an svg image. Problem solved.
You can zoom in and out and it still as sharp as a razor.
Try it here.

 

[Shyuan]

You read about this before. You can use media query to deliver the @2x image for devices that has high density and show the @1x for the rest.

Not sure what did you mean I read about this before? Did I? I can't recall.

And may I know how can I achieve the media query thingy? Thanks.

 

[Andy.N]

I meant I, not you
http://www.kylejlarson.com/blog/2012/creating-retina-images-for-your-website/

 

[Shyuan]

I meant I, not you
http://www.kylejlarson.com/blog/2012/creating-retina-images-for-your-website/

Thanks for the link and your info about svg.

But I think I have to spend more time in digesting those as I am not a web developer so I probably need some time.

If there's a direct answer would be good.