: Webpage image zooming or quality lose issue on mobile 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

@Jessie844

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.

Vote Up Vote Down

@Murray976

I would suggest you create svg file from original logo creative

Vote Up Vote Down

@Smith574

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

Vote Up Vote Down

@Holmes874

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

Vote Up Vote Down