1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

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

Discussion in 'Styling and Customization Questions' started by Shyuan, Jul 13, 2013.

  1. Shyuan

    Shyuan Well-Known Member


    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 :)
  2. Andy.N

    Andy.N Well-Known Member

    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.
  3. Shyuan

    Shyuan Well-Known Member

    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.
  4. Andy.N

    Andy.N Well-Known Member

  5. Shyuan

    Shyuan Well-Known Member

Share This Page