¿El cambio de tamaño CSS de las imágenes sigue siendo una mala idea?

Siempre se ha considerado que usar atributos de ancho / alto en imágenes que no son lo que es la imagen original es una mala idea. Podría significar imágenes pixeladas o tamaños de descarga más grandes que los necesarios.

Pero, ¿sigue siendo un problema? No sugeriría aumentar el tamaño de las fotos, pero la reducción de tamaño no debería ser un problema siempre que no sea una gran diferencia con respecto al original y se mantenga a escala.

Por ejemplo, tengo una foto de 600x400 y le pego un ancho de 400px. El navegador más moderno reduce la imagen y parece que la representación sigue siendo decente.

Entonces, ¿cuál es la opinión de todos sobre esto?

No se preocupe por el escalado (la mayoría de los navegadores harán que las imágenes escaladas se vean bien, en mi experiencia), preocúpese por el tamaño de la carga útil que ha enviado al usuario final.

Claro, podría argumentar que solo está desperdiciando una pequeña cantidad de ancho de banda en ambos extremos por esos píxeles adicionales que está enviando sin intención de usar, pero también hay un costo de tiempo.

Por cada imagen que envíe en un tamaño que está por encima de lo necesario, agrega un pequeño retraso a la carga de la página para su usuario. Para los sitios web con solo un par de imágenes, esto no será un problema, pero para un sitio con una gran cantidad de activos de soporte, comenzará a agregar un retraso notable, y el retraso le costará dinero .

Además, con respecto al pequeño costo de ancho de banda, a medida que aumenta el tráfico de su sitio, también lo hará el pequeño costo de ancho de banda.

Por lo tanto, ahorre dinero a su empresa y pase los 30 segundos que necesitará para cambiar el tamaño de la imagen usted mismo. :)

Como siempre, haga su evaluación comparativa, pero a menos que la aplicación sea realmente popular / crítica, no estaría demasiado preocupado por reducir de 600 a 400 si se encuentra en una situación en la que necesita cambiar el ancho con frecuencia. Si es una ejecución única, claro, convert -geometry 400x photo1.jpg photo2.jpgpero si se trata de una aplicación que está iterando rápidamente, probablemente haya cosas más importantes de las que preocuparse, incluso en el ámbito del rendimiento. por ejemplo, latencia; carga preventiva de imágenes, por ejemplo.

El tamaño de la imagen puede ser importante en los dispositivos móviles, donde los tamaños de imagen grandes tienen el triple efecto de cargar lentamente (banda ancha móvil), tomar más tiempo para renderizar (hardware de grado inferior) y, una vez renderizados, no ser completamente visibles en alta resolución de todas formas.

También es posible que desee buscar imágenes receptivas. Hay mucho trabajo que la gente ha hecho, por ejemplo, reducir el tamaño automáticamente, y luego almacenar en caché, las imágenes en el servidor es un buen enfoque si esto surge mucho.

El problema es la carga útil, el navegador mostrará que está bien en cualquier tamaño (especialmente los tamaños más pequeños de los que estás hablando)

Para un sitio de gran volumen, incluso los bytes individuales son importantes. No desea enviar datos no deseados.

Hablando de mala idea, no es realmente una mala idea ajustar el ancho / alto en unos pocos píxeles o puede ser de 10 o 20 píxeles. Pero es una muy mala idea si está reduciendo una imagen grande a una miniatura :)