He estado tratando de solucionar un problema en el que las imágenes principales de ancho completo en mi sitio web de WordPress aparecen borrosas en algunos dispositivos móviles, y en el proceso me he dado cuenta de que esto parece activarse solo en tamaños más pequeños.
Las imágenes que estoy usando son de 1920 x 1080 píxeles.
Entre un ancho de 1920px a 1024px las imágenes se ven de alta calidad y sin cambios por lo que puedo decir, pero usando el modo de diseño receptivo de Firefox, he establecido que cuanto más pequeña se muestra la imagen, más progresivamente más borrosa (es decir, pixelada) se vuelve.
Si la ventana del navegador se redimensiona a un ancho de 1023px o menosse convierte en un pequeño borroso, por lo que establecer la configuración DPR en 2 lo restaura a la calidad original.
Si la ventana del navegador se redimensiona a un ancho de 512 px o menosla imagen se vuelve muy borroso y configurando el DPR en 3 lo restaura a la calidad original.
¿Que está pasando aqui? Entiendo que las imágenes no están optimizadas para Retina, pero si esta fuera la causa real, ¿no se revertiría el problema? ¿No sería la más grande tamaño de la imagen que haría borrosa? ¿No debería renderizarse la imagen más pequeña con un DPI alto teniendo en cuenta que se muestra en un tamaño de 512 px y la imagen de origen es mucho menos del doble (2x) de la imagen de origen de 1920 px?
Realmente agradecería alguna ayuda para resolver esto, ya que he estado luchando con él durante algunos días y es muy difícil probarlo y depurarlo.
.