Problema de pérdida de calidad o zoom de la imagen de la página web en dispositivos móviles

Estoy creando un sitio receptivo y mi logo pierde calidad cuando abro el sitio en un dispositivo móvil (iPhone, Android) http://kadmos.li/web/ji/stck.html El tamaño de mi logo es 266x68px y estoy sin cambiar el tamaño en ningún tamaño receptivo. Cuando abro este enlace en el navegador de escritorio, la calidad del logotipo no cambia, pero cuando lo abro en iOS o Android, el logotipo no se ve bien.ingrese la descripción de la imagen aquí

Como solución, hice mi logotipo 2 veces más grande, el ancho de la imagen ahora es de 532 px en lugar de 266 px. Pero como necesito que mi logotipo tenga un ancho fijo de 266 px, lo configuré con css. Y parece que todo está bien y se ve bien en todos los navegadores y dispositivos. http://kadmos.li/web/ji/solution.html

Pero en cualquier caso no es bueno tener la imagen 2 veces más grande de lo que necesitas. Y por eso me gustaría preguntar si alguien se ha enfrentado a este problema y tiene una mejor solución para esto.

gracias de antemano

¡Hola! ¿Te importaría subir un ejemplo con tu logo en su tamaño original? Entonces será más fácil determinar qué es lo que va mal.
No puedes tenerlo de las dos maneras. O usa imágenes 2x para que se vea bien en las pantallas de retina, o no lo hace, y acepta que se verá ligeramente borroso en las pantallas de retina. FWIW, para cosas como logotipos e íconos, hacer que la imagen tenga 2x en dimensiones de píxeles rara vez significa que tiene 2x en tamaño de archivo. A menudo, puede duplicar los píxeles pero aumentar el tamaño del archivo solo ligeramente.
Gracias por los comentarios, Burnso, el logotipo está disponible en su tamaño original en los enlaces que he publicado.

Respuestas (4)

Para ser honesto, realmente no veo el problema. Aumentar la resolución de esa imagen en particular no debería significar un tamaño de archivo mucho mayor. Al menos no si lo comprimes bien.

En cualquier caso, su mejor opción probablemente sea usar consultas de medios como se indica aquí :

Por incluir gráficos en alta resolución, pero solo para pantallas que puedan hacer uso de ellos. "Retina" siendo "2x":

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

U otra alta resolución:

/* 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 */ 
}

Otras soluciones adecuadas, como el uso de SVG con un respaldo PNG, se enumeran aquí y aquí .

Le sugiero que exporte su logotipo como un .svgarchivo para que quepa en los dispositivos de retina si ese es su objetivo. Dado que SVG no es totalmente compatible con todos los navegadores, sugeriría implementar el respaldo de PNG usando Modernizr:

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

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

SVG Fallback por CSS-Tricks

Gracias por el comentario, por el momento me interesan más las soluciones png, pero revisaré también esto

1.-Usarás una imagen tipo "png" para las distorsiones de caída (Usar Tamaños Naturales para dispositivos móviles). 2.-Comprobar la resolución de pantalla de los móviles. Actualmente, la resolución de la pantalla es excelente
.

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

3.-Usar imagen css personalizada para proporción móvil

  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;
}

bien use el tamaño en píxeles que necesita

Usar recomendación como aquí

Establecer el ancho de imgpor sí mismo no solucionará el problema. La imagen también debe tener el doble de las dimensiones en píxeles del tamaño que especifique en el HTML/CSS.

Le sugiero que cree un archivo svg a partir del logotipo original creativo

Hola Shailesh, bienvenido a GDSE y gracias por tu aporte. ¿Podría por favor ampliar su respuesta? ¿Por qué su respuesta es una buena solución a la pregunta? Nos gustan las respuestas motivadas y argumentadas, por lo que también tendrán valor para los visitantes posteriores. ¡Gracias de nuevo y disfrute del sitio!
Problema de pérdida de calidad o zoom de la imagen de la página web en dispositivos móviles
RespuestasAquíPolítica de privacidad1y, 0v