0

I'm making a responsive site and my logo loses quality when I'm opening the site on mobile (iPhone, Android) http://kadmos.li/web/ji/stck.html My logo size is 266x68px and I'm not resizing it on any responsive size. When I'm opening this link on desktop browser, the logo doesn't change in quality, but when I'm opening it on ios or android, the logo doesn't look good. enter image description here

As a solution I've made my logo 2x larger, the image width now is 532px instead of 266px But as I need my logo to have fixed 266px width I've set this with css. And it seems everything is ok and it looks good on all browsers and devices. http://kadmos.li/web/ji/solution.html

But in any case it's not good to have the image 2x larger than you need. And for that I'd like to ask if anyone has faced such issue and has a better solution for this.

Thanks in advance

  • Hello! Would you mind uploading an example with your logo in its original size? Then it will be easier to determine what's going wrong. – gburning Jul 21 '14 at 15:52
  • 1
    You can't have it both ways. You either use 2x images to make it look good on retina screens, or you don't, and accept that it will look slightly blurry on retina displays. FWIW, for things like logos and icons, making the image 2x in pixel dimensions rarely means it's 2x in file size. Often you can double the pixels but increase the file size only slightly. – DA01 Jul 21 '14 at 16:17
  • Thanks for feedbacks, burnso the logo is available in its original size in the links I've posted – Kadmos Balkhchyan Jul 22 '14 at 7:11
2

To be honest I don't really see the problem. Upping the resolution of that particular image should not mean a very much larger file size. At least not if you compress it right.

In any case, your best option is probably to use media queries as listed here:

For including high-res graphics, but only for screens that can make use of them. "Retina" being "2x":

@media  (-webkit-min-device-pixel-ratio: 2),  (min-resolution: 192dpi)
{ 
    /* Retina-specific stuff here */ 
} 

Or other highish-res:

/* 1.25 dpr */ @media  (-webkit-min-device-pixel-ratio: 1.25), 
(min-resolution: 120dpi){ 
    /* Retina-specific stuff here */ 
}

/* 1.3 dpr */ @media  (-webkit-min-device-pixel-ratio: 1.3), 
(min-resolution: 124.8dpi){ 
    /* Retina-specific stuff here */ 
}

/* 1.5 dpr */ @media  (-webkit-min-device-pixel-ratio: 1.5), 
(min-resolution: 144dpi){ 
    /* Retina-specific stuff here */ 
}

Other proper solutions, like using SVG with a PNG fallback are listed here and here.

0

I would suggest you export your logo as an .svg file to fit in retina devices if that is your intended target. Since SVG isn't fully supported across all browsers I would suggest implementing PNG fallback using Modernizr:

<img src="logo.svg" onerror="this.src=logo.png">

if (!Modernizr.svg) {
  $("img[src$='.svg']")
    .attr("src", fallback);
}

SVG Fallback per CSS-Tricks

  • Thanks for the comment, for the moment I'm interested more in png solutions, but I'll check also this – Kadmos Balkhchyan Jul 22 '14 at 7:16
-1

1.-You shall use a image type "png" for drop distortions(Use Natural Sizes for mobile devices). 2.-check resolution screen mobiles. now days resolution screen is great
3.- Use tag for mobile browser not change resolution ( Use custom with to mobile devices)

<meta name="viewport" content="width=device-width,user-scalable=no">

3.-Use custom css image for mobile proportion

  header {
    background: -webkit-image-set( url(images/logo.jpg)    1x,
                                   url(images/logo_2x.jpg) 2x);
    height: auto; /* height in CSS pixels */
    width: 1064/* width in CSS pixels */px;
}

well use size in pixels that you need

Use recomendation like here

  • Setting the width of the img in and of itself won't fix the problem. The image has to also be twice the pixel dimensions of the size you specify in the HTML/CSS. – DA01 Jul 21 '14 at 19:18
-1

I would suggest you create svg file from original logo creative

  • Hello Shailesh, welcome to GDSE and thanks for your input. Could you please expand your answer? Why is your answer a good solution to the question? We like motivated, argumented answers, so they'll have value for later visitors as well. Thanks again and enjohy the site! – Vincent Jul 22 '14 at 9:09

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.