Photoshop / Sitio web: ¿Escala de Ps vs Escala de HTML?

¿Cuál es la diferencia entre reducir una imagen a 150 px en Photoshop y luego usarla en HTML:

<img src="blah.png" />

versus

Usando una imagen de 500px y luego usando eso en HTML:

<img src="blah.png" width="150px"/>?

¿Hay alguna diferencia de calidad?

Interesante, casi no se nota la diferencia en estos días. ¹ . Se ve bien en Chrome / IE, pero Firefox no se escala también. De todos modos, añadir a Punto de Mike sobre el ancho de banda :

• El tiempo de carga de la página sufre mucho con imágenes grandes. Una imagen sobre un T3 no sería gran cosa, pero un sitio de comercio electrónico en un teléfono inteligente de bajo ancho de banda sería un castigo.
• Usted desperdicia el ancho de banda del servidor, lo que puede costarle dinero (si nunca sirve la imagen más grande).
• Usted desperdicia ancho de banda de usuario, lo que puede costarles dinero.

⁽¹⁾ 500x500 forzado a 150x150 a la izquierda, 150 nativos a la derecha

Photoshop le permite elegir el método de escalado, como 'bicubic sharper', que a menudo es más adecuado para reducir el tamaño de las imágenes que el redimensionamiento 'bicubic' estándar.

Si realiza la escala del navegador, la calidad variará entre los navegadores y no tendrá control sobre eso.

Además, si siempre realiza la escala del navegador en la imagen y nunca la muestra en su resolución completa, entonces está desperdiciando el ancho de banda.

Sí hay. La mayoría de los navegadores no tienen un buen remuestreo de imagen como lo tiene Photoshop. Las imágenes reducidas en HTML se verán ligeramente bloqueadas, requerirán más ancho de banda, memoria y uso de CPU.

Se recomienda utilizar imágenes remuestreadas de Photoshop para que se muestren con una resolución nativa.