Webpage image zooming or quality lose issue on mobile

Question

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.

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

Answer 1

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.

Answer 2

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

Answer 3

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

Answer 4

I would suggest you create svg file from original logo creative