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

Shyuan

Well-known member
#1
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

Well-known member
#2
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

Well-known member
#3
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? :confused: I can't recall. :(

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