En un documento html, ¿es una mala práctica cambiar el tamaño de las imágenes con las etiquetas de alto y ancho?

Question

Si tengo una imagen de logotipo, y quiero usarla en otra página donde requiero que sea de un tamaño más pequeño, mi instinto me lleva a crear una nueva imagen, redimensionada con un editor de gráficos. Sin embargo, estoy escuchando que es mejor para el usuario si, en cambio, me refiero a la imagen original y la cambio de tamaño con el navegador cambiando la altura y el ancho en la etiqueta de la imagen.

Así que pregunto a la multitud, ¿cuál es la mejor práctica aquí?

Gracias por su tiempo,

- Henry

Answer 1

Mi respuesta predeterminada sería "Cambiar el tamaño en una aplicación de gráficos", pero depende de cómo se usa.

Cuando deja el cambio de tamaño de la imagen al navegador, la imagen original (tamaño completo) debe descargarse antes de que el navegador pueda mostrarla en una escala menor. Esto significa que usa más ancho de banda y su página web tarda más en cargarse. Sin embargo, si usa principalmente la imagen más grande en su sitio, será más rápido usar esta imagen, ya que el navegador puede almacenarla en caché.

Si le preocupa la calidad de la imagen, obtendría mejores resultados y tendría más control sobre el proceso de reducción de muestreo mediante una aplicación de gráficos dedicada para cambiar el tamaño de la imagen.

Answer 2

Está bien para cambiar el tamaño de las imágenes con CSS o la altura y la anchura de las etiquetas. Lo único que debe tener cuidado es hacer que las imágenes realmente grandes sean pequeñas porque obviamente no disminuye el tamaño de la descarga.

Hacer esto funcionaría mejor cuando esté efectivamente almacenando en caché sus imágenes para que no se descarguen por segunda vez. Entonces obtendrás un beneficio tangible al hacerlo. Por lo general sólo añado la última hora de modificación de la imagen de la URL, por ejemplo:

<img src="/images/log.png?1233454568"> 

y luego configurar el encabezado Caduca a un año a partir de ahora. Si la imagen cambia, el mtime cambia y obligará al navegador a recargarla.

Se sugiere para imágenes, Javascript y archivos CSS.

Answer 3

Si el navegador cambia el tamaño de la imagen utilizando la etiqueta alto/ancho, puede terminar con una imagen de menor calidad, realmente depende del tipo de imagen (como foto vs. gráficos simples), así que pruébalo en algunos navegadores. Pero cambiar el tamaño de la imagen en un editor de gráficos es la única forma de garantizar una operación de cambio de tamaño de alta calidad.

Answer 4

crear la imagen más pequeña en un editor de gráficos, por varias razones:

1. Si los usuarios no lo han almacenado en caché la imagen más grande, que se descarga el archivo más grande innecesariamente.

2. Cambiar el tamaño de la imagen del lado del cliente da como resultado una calidad de escalado impredecible.

3. Hacerlo en HTML no es aconsejable de todos modos, para cuestiones de presentación (como el tamaño de los elementos) debe hacerlo a través de CSS.