¿Hay alguna diferencia de rendimiento entre aumentar o reducir una imagen con CSS?

En el caso del diseño css receptivo, supongamos que tiene un par de versiones de diferentes tamaños de una imagen y llega a un punto en el que tiene un ancho de pantalla de 900 píxeles.

¿Qué es lo mejor que se puede hacer en este caso? Caso a) escalar una imagen de 950 píxeles o caso b) escalar una imagen de 850 píxeles (estos valores son, por supuesto, ficticios, no estoy hablando de un caso particular)

Desde mi punto de vista, cada uno tiene sus propias ventajas y desventajas:

Al usar la reducción de escala, como PRO, la imagen debería tener una mejor calidad (al menos eso creo, no sé mucho sobre el algoritmo de reducción de escala de los diferentes navegadores). Como CON, la imagen tardaría más en descargarse, algo importante si también está apuntando a dispositivos móviles.

Usando la mejora, ganas velocidad de descarga, pero pierdes calidad.

Por supuesto, no aumentará la escala de una imagen de 500 píxeles para llenar el ancho de 1000 píxeles, al igual que no reducirá la escala de una imagen de 2000 píxeles por razones obvias, suponiendo que tenga una opción. Pero en los casos en los que tiene valores similares, ¿existe una especie de regla general que podría ayudarlo a tomar una decisión o realmente no hace una diferencia y depende del desarrollador?

O, al menos, ¿hay algún factor que pesaría más? Por ejemplo, al usar la mejora de escala, podría obtener un beneficio mucho mayor de la disminución del tiempo de descarga que de la disminución de la calidad y viceversa.

preguntado el 12 de junio de 12 a las 10:06

1 Respuestas

Creo que podrías verlo de diferentes maneras. Además, debes hacerte algunas preguntas:

  • ¿A qué audiencia está tratando de llegar (Móvil / Celular (digamos hasta un ancho máximo de 640 px) o computadora de escritorio (cualquier cosa más ancho que 640px) orientado)
  • ¿Cuál es la imagen más grande que usará (en ancho y alto)
  • ¿Son necesarias sus imágenes en su sitio web móvil (es decir, puede hacer una versión móvil simplificada de su sitio web, sin perder demasiado de su contenido?)

Cuando su atención se centra en un entorno de escritorio como se define anteriormente, no me preocuparía demasiado por su problema. Por supuesto, las imágenes más grandes tardarán un tiempo en cargarse, pero no olvide que la mayoría de los navegadores móviles tienen dos características muy interesantes: 1. Los datos que recupera el dispositivo primero han sido comprimidos por servidores (piense Blackberry, Opera ...) y 2. la mayoría de las veces los navegadores permiten opciones para la calidad de las imágenes (baja, normal, alta). ¡Así que los usuarios aún pueden elegir qué tipo de calidad quieren, sin que usted tenga que decidir por ellos!

Creo que cuando te enfocas en una audiencia móvil, lo mejor es mejorar. Sin embargo, no creo que su sitio web sea solo para dispositivos móviles, y desea que su sitio web también se vea bien en dispositivos de pantalla ancha, ¡así que optaría por la reducción de escala! Además, no olvides optimiza tus imágenes (La compresión JPG con un 80% debería reducir mucho el tamaño, pero no debería dañar demasiado la calidad).


EDITAR: He estado pensando en esto y hay algo más que puedes hacer: trabajar con dos imágenes diferentes. Puedo oírte pensar: pero eso no suena lógico, ¿cómo puede el navegador detectar la imagen que debe cambiarse cuando aún no está cargada (sería estúpido cargar dos imágenes)? Bien, aquí anda tu. (Los créditos van a jAndy en este pregunta)

Código jQuery (tenga en cuenta que me vinculé a mi propio espacio web. ¡Este violín no seguirá funcionando por la eternidad!)

$(document).ready(function() {
    $("#jsDisabledMessage").hide(); // HIDES MESSAGE THAT TELLS USER TO ENABLE JS

    if ($(window).width() < 480) {
            $("img").attr('src', function(index, src) {
       return "http://bramvanroy.be/files/jsfiddle/8mZnk/" + this.getAttribute('data-path') + "-mobile.jpg"; // FOR MOBILE DEVICES
        });
    }
    else {
        $("img").attr('src', function(index, src) {
       return "http://bramvanroy.be/files/jsfiddle/8mZnk/" + this.getAttribute('data-path') + "-not-mobile.jpg"; // FOR DESKTOP
        });
    }

   $("img").show();
});

Así que lo que ocurre:

  • El navegador lee HTML
  • El navegador no tiene la tentación de encontrar una imagen (y las imágenes están ocultas por CSS de todos modos)
  • jQuery encuentra la URL adecuada (según el tamaño de la pantalla) y ajusta el HTML en consecuencia
  • jQuery muestra las imágenes
  • Cuando JS está deshabilitado, se mostrará un mensaje que le indicará al usuario que las imágenes solicitadas no se pueden mostrar.

Espero que esto sea algo en la dirección correcta.

contestado el 23 de mayo de 17 a las 12:05

Buena respuesta :D Tengo curiosidad acerca de esto porque comencé a trabajar en una aplicación universal, dirigida a navegadores, así como a todos los diferentes dispositivos móviles/tabletas. Entonces, desafortunadamente para mí, tengo que tener en cuenta todas las posibilidades para elegir una buena, si no la mejor solución: BBog

@BBog He agregado bastante. Tal vez esto ayude. :) - bram vanroy

Por el momento estoy usando una configuración de "calidad". Cuando es verdadero, reduzco la imagen, cuando es falso, los amplío. Todavía no sé exactamente si hay alguna diferencia. Esperaré hasta mañana para ver si aparece alguna otra sugerencia, pero probablemente aceptaré tu respuesta ya que fue útil. Gracias - BBog

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.