Comunicación de tamaño de imagen, mejor práctica

11

Si está desarrollando un documento html estrictamente utilizando las mejores prácticas actuales para mantener el estilo fuera del marcado, ¿cómo comunica mejor el tamaño de la imagen?

Las mejores prácticas anteriores quieren el alto y el ancho de la imagen con la imagen, ya que se renderizará más rápido que el navegador que espera que la imagen se descargue para obtener sus dimensiones. Pero hacer esto parece contravenir el estilo de aislamiento del documento.

Añadir un atributo de identificación a cada imagen y poner el alto / ancho en el CSS? ¿Esto niega la bonificación de representación de la altura y el ancho de la imagen en línea?

css html images

— Thomas
fuente

12

Tener el ancho y el alto en el elemento IMG no está en desuso y es definitivamente la mejor manera de decirle al navegador el ancho y alto de una imagen. Hacer todo lo posible por hacerlo de otra manera es redundante e innecesario (y posiblemente tonto). No haga ningún trabajo innecesario para usted o el navegador. Cíñete a lo básico que funciona.

— John Conde
fuente

1

... y no olvide una ALTetiqueta también, incluso si está en blanco, o los inspectores de cumplimiento se quejarán.

— Talvi Watia

@Tchalvak Lo siento pero te equivocas. Puede anular el ancho y la altura dinámicamente a través de la programación del lado del servidor y / o JavaScript. Y por su lógica tampoco puede anular los estilos en línea.

— John Conde

Vaya, parece que estaba equivocado acerca de la falta de una sobrescritura de CSS de todos modos, !importanten el CSS le permite anular los atributos de ancho y alto, por lo que inicialmente usar ancho / alto funciona bien. Sin embargo, ahora estoy atrapado en la posición de voto negativo. Si quisieras editar la respuesta, cambiaría eso. Se encoge de hombros No es que importe demasiado.

— Kzqai

8

La respuesta de John Conde es acertada. Las imágenes tienen un ancho y una altura: es parte de su contenido , no de su estilo . Así que no hay necesidad de hacer una "separación" aquí.

Sin embargo, una excepción: CSS para las dimensiones de la imagen es útil si tiene muchas imágenes del mismo tamaño (por ejemplo, miniaturas). Aquí es mucho mejor usar una clase CSS para reducir HTML y acelerar el desarrollo.

Para el diseño de un sitio web que incluye botones e íconos, su mejor solución son los sprites CSS.

— Cabra descontento
fuente

+1, los sprites css marcan una diferencia ridícula en la velocidad de un sitio.

— Kzqai